express+vue+axios简单实现前后端通信

使用express、vue、axios简单实现一下前后端通信功能。平时用的都是封装好的axios，今天试着自己写一下。

一、初始化后端服务器

express教程

按照教程装包，建立一个server.js的文件

文件中写入代码，根据 教程，分别建立一个没有参数的最贱的post请求和get请求。因为会有跨域问题，npm install cors解决跨域问题

const express = require("express");
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/getTest', function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域
  res.send('Hello World!')
})
app.post('/postTest', function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域
  res.send('Got a POST request')
})

app.listen(3000, () => {
  console.log("服务开启成功");
});

在当前目录打开cmd，输入node server开启服务,目前我的服务器端口是3000。记得setHearder允许跨域。

二、简单实现前端

2.1建立一个vue项目

参考 vue文档 启动项目

2.2安装axios

axios网站 axios教程

在前端目录下打开控制台输入npm install axios安装axios

在vue里引入axiosimport axios from 'axios';

根据教程，自己创建一个axios实例

const instance = axios.create({
  baseURL: "http://192.168.1.223:3000/",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

写两个方法，点击按钮时调用

    getMethods(){
      this.instance.get('getTest').then(res=>{
        console.log(res)
      })

    },
    postMethods(){
      this.instance.post('postTest').then(res=>{
        console.log(res)
      })
    }

点击按钮，数据成功返回了

三、实现传参

3.1 get请求传参

在前端代码中加入参数，我这里加入了type

this.instance.get('getTest?type=1').then(res=>{
   console.log(res)
})

get请求中，后端可以用req.query获得参数，如果type是0,返回aa，如果是1，返回bb。修改后重启服务器。

app.get('/getTest', function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域
  console.log(req.query)
  let data =['aa','bb']
  res.send(data[req.query.type])
})

点击按钮控制台确实返回了想要的结果

3.2post请求传参

进行post请求要加入几行代码

const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json()); // 解析JSON数据
app.use(bodyParser.urlencoded({ extended: true })); // 解析URL编码数据

post请求的参数在req.body里。 后端代码：如果参数type是1则返回dd

app.post('/postTest', function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域
  const type = req.body.type
  console.log('----post---')
  console.log(type)
  let data =['cc','dd']
  res.send(data[type])
})

前端代码：将按钮的点击事件修改一下，加入参数。

postMethods(){
      let param ={
        type:1
      }
      this.instance.post('postTest',param).then(res=>{
        console.log(res)
      })
}

点击按钮，在控制台查看效果

这里只是简单实现效果，没有做什么拦截封装之类的。