使用Express部署Vue项目连接mysql，进行增删改查

一、创建VUE项目

搭建vue-cli框架

npm install -g @vue/cli

在该目录下创建一个文件夹

vue create testproject//vue create <文件夹名称>

根据需要进行选择，我一般选择第一个直接enter(回车）

 完成之后会有提示

然后根据提示执行语句
第一步：进入项目

cd <project-name>

第二步：下载依赖

npm install

第三步：启动项目

npm run serve

出现如下界面就可以了

下载 express 模块（搭建一个简单服务器）

npm i express

下载 MySQL 模块

npm i mysql

下载 axios 模块

npm i --save axios

如果有需要的话，安装element ui
注意：vue3用element ui plus

npm install element-plus --save

在main.js中引入具体可以参考官方文档https://element-plus.gitee.io/zh-CN/

二、创建数据库

简要略过
表名：te_user

 三、创建一个简单的服务器并写入sql语句

在项目根目录创建 server 文件夹然后里面创建三个 .js 文件和一个 api 文件夹

 在 db.js 中配置MySQL

// 连接数据库配置
module.exports = {
    mysql: {
    host: 'localhost', // 域名，这是本机域名
    user: 'root', // MySQL 登录用户名
    password: '023120', // MySQL 登录密码 一般都是 root
    database: 'test', // 要连接的数据库名
    port: '3306', // 数据库端口号
    },
   };

在 index.js 中创建一个服务器

// 使用 express 创建服务器
 // 导入 express 模块
 const express = require('express');
 // 调用 express 函数，返回一个数据库实例
 const app = express();
 // 导入路由模块
 const userApi = require('./api/userApi');
 // 端口号
 const port = 8888;
 // 注册全局解析中间件
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 // 注册路由模块
 app.use('/api/user', userApi);
 // 调用 app.listen() 启动服务器
 app.listen(port, () => console.log(`Example app listening on port 8888!`));
slqMap.js 写入 sql 语句
// todo sql 语句留后面调用
module.exports = {
    user: {
        // ? 占位符 后面给数据自动填充
        add: 'insert into te_user(id,name, age) values(?,?, ?)',
        get: "select * from te_user where name =?",
    },
};

slqMap.js 写入 sql 语句

// todo sql 语句留后面调用
module.exports = {
    user: {
        // ? 占位符 后面给数据自动填充
        add: 'insert into te_user(id,name, age) values(?,?, ?)',
        get: "select * from te_user where name =?",
    },
};

api/userApi.js 测试用 api 实例

// 测试用 api 实例
var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');
// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();
var jsonWrite = (res, ret) => {
    if (typeof ret === 'undefined') {
        res.json({
            code: '1',
            msg: '操作失败',
        });
    } else {
        res.json(ret);
    }
};
// 增加用户接口
// POST 请求
router.post('/addUser', (req, res) => {
    var sql = $sql.user.add;
    var params = req.body;
    console.log(params);
    // ! [params.username, params.age] 自动填充到之前 ？ 里面
    conn.query(sql, [params.id,params.name, params.age], (err, result) => {
        if (err) return console.log(err);
        if (result) {
            jsonWrite(res, result);
        }
    });
});
// GET 请求
// router.get('/getUser', (req, res) => {
//     let sql = $sql.user.get;
//     let params = req.query;
//     console.log(params);
//     conn.query(sql, (err, result) => {
//         if (err) {
//             console.log(err);
//         }
//         console.log(res, result);
//     });
// });
// module.exports = router;

router.post('/getUser', (req, res) => {
    let sql = $sql.user.get;
    let params = req.body;
    console.log(params);
    
    conn.query(sql,[params.name], (err, result) => {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    });
});
module.exports = router;

由于直接访问8080端口，是访问不到的，所以这里需要设置一下代理转发映射.
在根目录中创建 的vue.config.js 文件，并写入以下内容

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8888/api',
        changeOrigin: true, // 解决跨域
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};

用 cmd 或者 PowerShell 打开 server 文件执行 node index，出现这个说明启动成功

 注意：这里启动后服务器就不要关闭了，不然后面要报错,报错启动服务器就行在主页面编写

<template>
  <div class="hello">
    姓名<el-input
      v-model="name"
      placeholder="请输入姓名"
      class="w-50 m-2"
    ></el-input>
    <br>
    年龄<el-input
      v-model="age"
      placeholder="请输入年龄"
      class="w-50 m-2"
    ></el-input>
     <br>
    <el-button @click="insert">录入</el-button>
   <br>
    姓名<el-input
      v-model="queryname"
      placeholder="请输入姓名"
      class="w-50 m-2"
    ></el-input> <br>
    <el-button @click="query">查询</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      age: "",
      queryname: "",
    };
  },
  mounted() {},
   methods: {
    insert() {
      let name = this.name;
      let age = this.age;
      let id = 5;
      axios
        .post(
          "/api/user/addUser",
          {
            id,
            name,
            age,
          },
          {}
        )
        .then((res) => {
         if(res.status==200){
           alert("录入成功")
         }
        });
    },
    query() {
      let name = this.queryname;
      // ! 这里不能在浏览器控制台里面打印出来，但是在服务端(cmd中或者power shell)可以打印出来，可以在服务端将值保存在 vuex 中
      axios
        .post("/api/user/getUser", { name },{})
        .then((res) => {
          if(res.status==200){
            console.log(res);
            this.name=res.data[0].name;
            this.age=res.data[0].age
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.el-input{
  width: 30%;
  margin: 10px;
}
</style>

完成后关闭编辑器重新打开运行npm run serve

录入

 

查询