专栏首页前端vue接收post请求(vue+axios)解决跨域问题(三)

接收post请求(vue+axios)解决跨域问题(三)

编写接口连接并查询数据库数据(二)

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部分
<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>
//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,看到数据已经成功拿到

获取指定数据成功

对数据进行一些基本操作(四)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue+Node部署

    把生成的dist文件中的index.html改名为index.ejs放进服务器上node项目view目录(覆盖) 把static文件放进public目录

    RtyXmd
  • vue开发网易云音乐web版(附带安卓app版本)

    建议选择android安装包,不需要多余配置 确认发布之后会提示提交云端,等待提交云端之后等待打包成功,打包成功之后就可以手动下载了,通过连接线或者QQ发送到...

    RtyXmd
  • Vue自定义弹窗组件(二)发包测试

    在node_modules中新建rty-prompt-dialog文件(模拟已发布包,最后会提交发布)

    RtyXmd
  • [Failed to download repo] [connect ETIMEDOUT 192.30.255.112]

    平凡的学生族
  • P1032 字串变换

    题目描述 已知有两个字串 A, B 及一组字串变换的规则(至多6个规则):      A1 -> B1      A2 -> B2 规则的含义为:在 A$中的子...

    attack
  • RS Meet DL(62)-[阿里]电商推荐中的特殊特征蒸馏

    今天介绍的论文是:《Privileged Features Distillation for E-Commerce Recommendations》 论文下载地...

    石晓文
  • 13.按比例显示图片、自定义属性、测量

    六月的雨
  • Oracle写错误与文件离线

    当Oracle写数据文件遇到错误时,该如何应对呢?是离线文件还是崩溃实例?这个简单问题的技术变化跨度超过了20年。 自Oracle 11.2.0.2版本开始...

    数据和云
  • 【基础】使用VMware Workstation搭建服务器模拟环境

    VMware12 下载地址链接:链接:https://pan.baidu.com/s/1NCdOQf8f40JhG5HzVjilew 密码:ukaf

    吴柯
  • 云安全领域独角兽公司Zscaler不到两月再融资2500万美金

    加尼福利亚云安全公司Zscaler在8月初宣布获得由TPG领投的新一轮融资,金额达到1亿美金,也成为价值超过10亿美金云安全企业俱乐部中的一员。 就在不到两月后...

    CSDN技术头条

扫码关注云+社区

领取腾讯云代金券