【无标题】

// express 接受axios参数

//安装所需模块 npm install xxx
const express = require("express");
const bodyParser = require('body-parser')
const app = express();

const mysql = require("mysql");
let db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "123456",
  port: "3306",
  database: "vip",
});

db.connect();
app.all("*", function (req, res, next) {
  //跨域问题
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers","Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  if (req.method == "OPTIONS") res.send(200); /*让options请求快速返回*/
  else next();
});

//使用中间件解析
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }));

app.get("/getInfo", function (req, res) {
  let sql = "select * from test";
  db.query(sql, function (err, result) {
    if (err) {
      res.end(err.message);
    } else {
      let data = {
        msg: "请求成功",
        code: 200,
        data: result,
      };
      res.send(JSON.stringify(data));
    }
  });
});
//添加接口
app.post("/addInfo", function (req, res) {
  let params = req.body;
  console.log(params);
  let sql = `insert into test (name,age) values ('${params.username}',${params.age})`;
  db.query(sql, function (err, result) {
    if (err) {
      res.send(err.message);
    } else {
      let data = {
        message: "success",
        code: 200,
        data: "",
      };
      res.send(data.message);
    }
  });
});
app.listen(3000);

Vue axios 发送请求

// Vue部分 在main.js中设置 axios.defaults.baseURL = 'http://localhost:3000'
// 在需要发送请求的模块 引入axios
<template>
  <div>
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible= false;add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "PageTwo",
  data() {
    return {
      dialogFormVisible: false,
        form: {
          name: '',
          age:''
        },
        formLabelWidth: '120px'
    };
  },
  // mounted() {
  //   this.getInfo();
  // },
  methods: {
    getInfo() {
      axios
        .get("/getInfo")
        .then(res => {
          if (res.data.code == 200) {
            this.info = res.data.data;
            console.log(res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    async add() {
      let username = this.form.name;
      let age = this.form.age;
      let result = await axios.post("/addInfo", {
        username: username,
        age: age
      });
      console.log(result);
      // .then(res => {
      //   console.log(res);
      // });
    }
  }
};
</script>
<style scoped>
h1 {
  margin: 200px 50%;
}
</style>