hello, I'm Yang Xiaobao. After months of learning, vue finally came to interact with the background data, but I met some problems in data interaction. I'll write down these problems today for future use!!!
The get request for axios is written as follows:
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});axios post request writing:
axios.post('/user',{id:123},{
headers:{
'Content-Type': 'application/json'
}
})
.then((response)=>{
console.log(response.data);
})
.catch((error)=>{
console.log('error');
alert('Server failed to link successfully')
})The get method has no problem sending data requests, but the request header of the post request needs to be replaced by'application/json'. In the background code of the node, the post receives app. use (body Parser. JSON ()) and accepts it as a JSON object.
Simply do a local test login demo with the database
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<style type="text/css">
#login{
border: 1px solid red;
margin: 200px auto;
}
</style>
</head>
<body>
<div id="login">
<p>Account number:<input type="text" placeholder="Please enter your account number." v-model='msg.username'></p>
<p>Password:<input type="password" placeholder="Please enter your password." v-model='msg.password'></p>
<button @click='login'>Click login</button>
<h2>{{aaa}}</h2>
<h1>{{bbb}}</h1>
</div>
</body>
</html>
<script type="text/javascript">
let vm = new Vue({
data:{
msg:{
username:'',
password:''
},
aaa:'',
bbb:''
},
methods:{
login(){
console.log(1)
axios.post('/user',this.msg,{
headers:{
'Content-Type': 'application/json'
}
})
.then((response)=>{
console.log(response.data);
this.aaa = response.data.ok;
this.bbb = response.data.msg
})
.catch((error)=>{
console.log('error');
alert('Server failed to link successfully')
})
}
},
created(){
}
}).$mount('#login')
</script>
node code:
//constant
const express = require('express')// The server
const expressStatic = require('express-static') //local html Upload Server
const mysql = require('mysql'); // data base
const bodyParser = require('body-parser');// post request
const db = mysql.createPool({host:'localhost',user:'root',password:'yangbaoxi789',database:'lol'});
var app = express(); //Create a server
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
app.use('/user',function (req,res) {
// console.log(req.query) get request
console.log(req.body); // post request
var username = req.body.username;
var password = req.body.password;
console.log(username)
console.log(password)
db.query(`SELECT * FROM login WHERE username='${username}'`,(err,data)=>{
if (err) {
console.log('The database link was unsuccessful');
console.log(err);
}else{
console.log(data)// []
if (data.length == 0) {
// res.send() Send data to the front desk
res.send({ok:false,msg:'user name does not exist'})
}else{
if (data[0].password == password) {
res.send({ok:true,msg:'Login successfully'})
}else{
res.send({ok:false,msg:'Password error'})
}
}
}
})
})
app.listen(8080) // Port number
app.use(express.static('./www')) // Let usWWWThe following folders are accessed through the server on the web pageI'm Yang Xiaobao! Learn the world of Vue2.X with you