接收post請(qǐng)求（vue+axios）解決跨域問(wèn)題（三）
效果預(yù)覽
最終效果預(yù)覽
node路由配置增刪改查
//查詢語(yǔ)句
var selAll='select * from list';
//根據(jù)post的id查詢
var selId='select * from list where id=?';
//插入數(shù)據(jù)
var addData='insert into list (u_name,u_phone) values (?,?)';
//刪除數(shù)據(jù)
var delData='delete from list where id=?';
//更新數(shù)據(jù)
var upData='update list set u_name=?,u_phone=? where id=?'
//更新數(shù)據(jù)
router.post('/edit',function(req,res,next){
var params=req.body;
console.log(params)
pool.getConnection(function(err,suc){
suc.query(upData,[params.name,params.phone,params.id],function(err,result){
console.log(err)
console.log(result)
if(result){
result={
code:200,
msg:'更新數(shù)據(jù)成功'
}
}
res.json(result);
suc.release()
})
})
})
//刪除數(shù)據(jù)
router.post('/del',function(req,res,next){
var params=req.body;
console.log(params)
pool.getConnection(function(err,suc){
suc.query(delData,[params.id],function(err,result){
if(result){
result={
code:200,
msg:'刪除數(shù)據(jù)成功'
}
}
res.json(result);
suc.release()
})
})
})
//插入數(shù)據(jù)
router.post('/add', function(req, res, next) {
var params=req.body;
console.log(params)
pool.getConnection(function(err,suc){
suc.query(addData,[params.name,params.phone],function(err,result){
if(result){ //數(shù)據(jù)庫(kù)有返回?cái)?shù)據(jù)
result={ //返回?cái)?shù)據(jù)與格式
code:200,
msg:'新增數(shù)據(jù)成功'
}
}
res.json(result); //響應(yīng)返回json數(shù)據(jù)
suc.release(); //關(guān)閉數(shù)據(jù)庫(kù)連接
})
})
});
router.get('/list', function(req, res, next) {
pool.getConnection(function(err,suc){
suc.query(selAll,[],function(err,result){
if(result){ //數(shù)據(jù)庫(kù)有返回?cái)?shù)據(jù)
result={ //返回?cái)?shù)據(jù)與格式
code:200,
msg:'獲取測(cè)試列表成功',
data:result
}
}
res.json(result); //響應(yīng)返回json數(shù)據(jù)
suc.release(); //關(guān)閉數(shù)據(jù)庫(kù)連接
})
})
});
//響應(yīng)post
router.post('/list', function(req, res, next) {
var id=req.body.id; //通過(guò)req的body拿到post的id
pool.getConnection(function(err,suc){
suc.query(selId,[id],function(err,result){
if(result){ //數(shù)據(jù)庫(kù)有返回?cái)?shù)據(jù)
result={ //返回?cái)?shù)據(jù)與格式
code:200,
msg:'獲取單個(gè)測(cè)試列表成功',
data:result
}
}
res.json(result); //響應(yīng)返回json數(shù)據(jù)
suc.release(); //關(guān)閉數(shù)據(jù)庫(kù)連接
})
})
});
Vue代碼更新
html
<template>
<div class="hello">
<ul>
<li>
<el-input placeholder="請(qǐng)輸入姓名" v-model="name">
<template slot="prepend">姓名：</template>
</el-input>
</li>
<li>
<el-input placeholder="請(qǐng)輸入電話" v-model="phone">
<template slot="prepend">電話：</template>
</el-input>
</li>
<li>
<el-button type="primary" plain @click="add">添加</el-button>
</li>
</ul>
<el-table class="user_table"
:data="userList"
border>
<el-table-column
fixed
prop="Id"
label="用戶ID">
</el-table-column>
<el-table-column
prop="u_name"
label="姓名">
</el-table-column>
<el-table-column
prop="u_phone"
label="電話">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button @click="del(scope.row)" type="text" size="small">刪除</el-button>
<el-button @click="edit(scope)" type="text" size="small">編輯</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="編輯"
:visible.sync="dialogVisible">
<div class="update">
<el-input placeholder="請(qǐng)輸入姓名" v-model="edit_name">
<template slot="prepend">姓名：</template>
</el-input>
<el-input placeholder="請(qǐng)輸入電話" v-model="edit_phone">
<template slot="prepend">電話：</template>
</el-input>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editY()">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
script
import axios from 'axios';
export default {
name: 'HelloWorld',
data () {
return {
// msg: 'Welcome to Your Vue.js App'
name:'',
phone:'',
userList:[],
dialogVisible:false,
edit_name:'',
edit_phone:'',
edit_id:''
}
},
mounted(){
this.get()
},
methods:{
editY(){
var this_=this;
axios.post('/users/edit',{
id:this.edit_id,
name:this.edit_name,
phone:this.edit_phone
}).then(function(res){
console.log(res)
this_.dialogVisible=false;
this_.get()
}).catch(function(err){
console.log(err)
})
},
edit(row){
var this_=this,index=row.$index;
this_.dialogVisible=true;
var p_id=this_.userList[index].Id,
p_name=this_.userList[index].u_name,
p_phone=this_.userList[index].u_phone;
this_.edit_id=p_id;
this_.edit_name=p_name;
this_.edit_phone=p_phone;
},
get(){
var this_=this;
axios.get('/users/list').then(function(res){
this_.userList=res.data.data
}).catch(function(err){
console.log(err)
})
},
add(){
var this_=this;
// var name=,phone=;
axios.post('/users/add',{
name:this.name,
phone:this.phone
}).then(function(res){
console.log(res)
this_.get()
}).catch(function(err){
console.log(err)
})
},
del(row){
var this_=this;
axios.post('/users/del',{
id:row.Id
}).then(function(res){
this_.get()
}).catch(function(err){
console.log(err)
})
}
}
}
完整代碼 ↓ ↓ ↓ ↓
github地址：https://github.com/jgsrty/jianshu_node
碼云地址：https://gitee.com/RtyXmd/jianshu_node
測(cè)試代碼寫(xiě)完了，接下來(lái)會(huì)重新部署一個(gè)，對(duì)node和vue代碼進(jìn)行優(yōu)化與整理，下一步增加聊天室、完善登陸與注冊(cè)（session，加密等）、評(píng)論、上傳文件圖片、爬蟲(chóng)爬取資源。。。
規(guī)劃整理前后端代碼（五）
