vue2+node.js backend cooperates with express framework to realize front-end and back-end local joint debugging

1. Create a vue2 project briefly

2. The structure of the vue2 project is as follows

 3. Install dependencies in vue

qs, elementui, axios please install it yourself

4.main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import ElementUI from 'element-ui';
// import qs from 'qs'
// Vue.use(qs)
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); 

new Vue({
  render: h => h(App),
}).$mount('#app')

5. Encapsulate axios and proxy configuration

Create 3 js files as shown below↓

request.js↓

 

/****   request.js   ****/
// 导入axios
import axios from 'axios'
// 使用element-ui Message做消息提醒
import { Message} from 'element-ui';
//1. 创建新的axios实例，
const service = axios.create({
  // 公共接口--这里注意后面会讲
  baseURL: process.env.BASE_API,
  // 超时时间 单位是ms，这里设置了3s的超时时间
  timeout: 3 * 1000
})
// 2.请求拦截器
service.interceptors.request.use(config => {
  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
  config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
  config.headers = {
    'Content-Type':'application/json' //配置请求头
  }
  //如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
  //const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
  //if(token){
  //config.params = {'token':token} //如果要求携带在参数中
  //config.headers.token= token; //如果要求携带在请求头中
  //}
  return config
}, error => {
  Promise.reject(error)
})
 
// 3.响应拦截器
service.interceptors.response.use(response => {
  //接收到响应数据并成功后的一些共有的处理，关闭loading等
 
  return response
}, error => {
  /***** 接收到异常响应的处理开始 *****/
  if (error && error.response) {
    // 1.公共错误处理
    // 2.根据响应码具体处理
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break;
      case 401:
        error.message = '未授权，请重新登录'
        break;
      case 403:
        error.message = '拒绝访问'
        break;
      case 404:
        error.message = '请求错误,未找到该资源'
        // window.location.href = "/NotFound"
        break;
      case 405:
        error.message = '请求方法未允许'
        break;
      case 408:
        error.message = '请求超时'
        break;
      case 500:
        error.message = '服务器端出错'
        break;
      case 501:
        error.message = '网络未实现'
        break;
      case 502:
        error.message = '网络错误'
        break;
      case 503:
        error.message = '服务不可用'
        break;
      case 504:
        error.message = '网络超时'
        break;
      case 505:
        error.message = 'http版本不支持该请求'
        break;
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    // 超时处理
    if (JSON.stringify(error).includes('timeout')) {
      Message.error('服务器响应超时，请刷新当前页')
    }
    error.message = '连接服务器失败'
  }
 
  Message.error(error.message)
  /***** 处理结束 *****/
  //如果不需要错误处理，以上的处理过程都可省略
  return Promise.resolve(error.response)
})
//4.导入文件
export default service

 http.js

/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'
 
const http ={
  /**
   * methods: 请求
   * @param url 请求地址
   * @param params 请求参数
   */
  get(url,params){
    const config = {
      method: 'get',
      url:url
    }
    if(params) config.params = params
    return request(config)
  },
  post(url,params){
    const config = {
      method: 'post',
      url:url
    }
    if(params) config.data = params
    return request(config)
  },
  put(url,params){
    const config = {
      method: 'put',
      url:url
    }
    if(params) config.params = params
    return request(config)
  },
  delete(url,params){
    const config = {
      method: 'delete',
      url:url
    }
    if(params) config.params = params
    return request(config)
  }
}
//导出
export default http

api.js↓

import request from "../utils/request.js";
// import qs from "qs";

const baseUrl = '/api/test'


// get  ---可以传参数 也可以不传入参数
export function authLogout(params) {
  return request({
    url: baseUrl + "/authLogout",
    method: "get",
    params:params
  });
}

// getCode    ------必须按照格式传入参数
export function authCodeLogin(params) {
  return request({
    url: baseUrl + "/authCodeLogin" + '/'+ params.code+ '/'+ params.name,
    method: "get",
  });
}
//post 
export function getUserInfo(params) {
  return request({
    url: baseUrl + "/getUserInfo",
    method: "post",
    data:params
  });
}

Configure proxy vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // host: 'localhost', // 本地的IPv4地址
    // port: '8080', // 默认端口为8080，此端口冲突，也会出现代理异常的情
    proxy: {
    
      '/api': {
        target: 'http://xxxxxx请自己修改成对应后端的ipxxxxxx:3000',
        changeOrigin: true,
        pathRewrite:{"^/api":"/api"}
      },

    }
  },
})

helloworld↓ (the page that calls the interface)

There are three buttons: ↓

 get is a get request (you can pass parameters or not)

getCode is a get request (parameters in the corresponding format must be passed)

post can pass parameters

<template>
  <div class="hello">
    <button @click="getModellogin('get')">get</button>
    <button @click="getModellogin('getCode')">getCode</button>
    <button @click="getModellogin('post')">post</button>
  </div>
</template>

<script>
import { getUserInfo, authLogout, authCodeLogin } from "@/api/api.js";
export default {
  name: "HelloWorld",
  methods: {
    getModellogin(code) {
      let params = {
        code: code,
        name:"zhangsan"
      };
      switch (code) {
        case "get":
          authLogout(params).then((res) => {
            console.log(1,res);
          });
          break;
        case "getCode":
          authCodeLogin(params).then((res) => {
            console.log(2,res);
          });
          break;
        case "post":
          getUserInfo(params).then((res) => {
            console.log(3,res);
          });
          break;
      }
    },
  },
};
</script>

Next is the construction of node.js 

1. Install node.js (omitted in this article)
2. Install express
3.     npm init
       npm i express -D
4. The project structure is as follows↓
5. 

server.js↓

// 引入express模块
var express = require('express');
// 获取服务实力对象
var app = express();
// const bodyParser = require('body-parser');

app.use(express.urlencoded());
// get  ---可以传参数 也可以不传入参数
app.get('/api/test/authLogout', (req, res, next) => {
  console.log("req.query",req.query)
  res.end("hello express----get1")
})

// getCode    ------必须按照格式传入参数
app.get('/api/test/authCodeLogin/:code/:name', (req, res, next) => {
  console.log("req.params",req.params)
  res.end("hello express----get2")
})

app.use(express.json())
// post 
app.post('/api/test/getUserInfo', (req, res) => {
  console.log("req.body",req.body)
  res.end('hello express----post');
});



// 监听端口
app.listen(3000,err => {
    if(!err) console.log('服务器已启动 端口号3000:::')
})

6. Start the service in the terminal node server.js

 3.Use 

3.1 Click the first get button (the first get parameter passing method is recommended)

front desk:

 It can be observed that the parameters are spliced ​​to the end of the url

Backstage↓ 

Able to get the data requested by the front end 

3.2 Click the second get button (another method of passing parameters (strictly passing parameters))

Front desk: ↓   You can observe that the parameters are spliced ​​to the back of the url

 Backstage↓

 

3.3post request

Front desk: ↓

 Backstage: ↓

There are several difficulties involved here, such as two get formats, how to write the front end? How to write the backend? , get, post request, how does the backend get the parameters passed in by the frontend. For this aspect, please refer to the next article↓...