1.通过postman测试post请求
新建一个接收post的路由
//根据post的id查询
var selId='select * from list where id=?'
//响应post
router.post('/list', function(req, res, next) {
var id=req.body.id; //通过req的body拿到post的id
pool.getConnection(function(err,suc){
suc.query(selId,[id],function(err,result){
if(result){ //数据库有返回数据
result={ //返回数据与格式
code:200,
msg:'获取单个测试列表成功',
data:result
}
}
res.json(result); //响应返回json数据
suc.release(); //关闭数据库连接
})
})
});
测试结果
id为1的数据
id为2的数据
2.Vue(axios发送post请求)
安装axios&element-ui
cnpm install axios --save //是一个基于 promise 的 HTTP 库
cnpm install element-ui --save //饿了么前端出品的一套 Vue.js 后台组件库
打开main.js引入
//element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//axios
import axios from 'axios'
axios.defaults.baseURL='http://localhost:3000'; //设置一个类似base_url的请求路径
global.axios=axios; //设置一个全局axios便于调用
打开helloword.vue
//html部分
:data="userList"
border>
fixed
prop="Id"
label="用户ID">
prop="u_name"
label="姓名">
prop="u_phone"
label="电话">
//script部分
data(){
return{userList:[]} //用于接收返回数据
},
mounted(){
this.get()
},
methods:{
get(){
var this_=this;
//调用最开始写的那个接口，拉取全部数据
axios.post('/users/list'，{id:1}).then(function(res){
this_.userList=res.data.data
}).catch(function(err){
console.log(err)
}) }, }
测试是否成功连接：
打开mysql
运行node服务 npm start
运行vue npm run dev
发现并没有拿到数据，查看控制台报错信息
报错信息
node服务运行在localhost:3000端口，vue运行在localhost:8080端口
解决方法是在node中配置cors解决不同端口的跨域问题
安装cors
cnpm install cors --save
在app.js中引入cors并配置
//cors
var cors=require('cors');
app.use(cors({
origin:['http://localhost:8080'], //指定接收的地址
methods:['GET','POST'], //指定接收的请求类型
alloweHeaders:['Content-Type','Authorization'] //指定header
}))
配置完成后重启node服务 打开vue，看到数据已经成功拿到
获取指定数据成功
对数据进行一些基本操作(四)
如果觉得《axios请求mysql_接收post请求（vue+axios）解决跨域问题（三）》对你有帮助，请点赞、收藏，并留下你的观点哦！
