VUE + Mysql 实现基于node服务的连接

目的： 已知node能直接运行js代码操作数据库，而vue可以使用node，从而正好可以进行一些简单的对数据库的一些操作，开发一个简简单单的小项目。

实现步骤：

1. 先建立vue项目作为准备(这里准备的是vue3项目，使用了ts，但用的比较简单)

vue create 项目名

 然后出现：

最好使用最下面的那种自定义的， 然后出现上图

通过上下键指定，然后空格键（space）选中，选中后就会有绿色的星号，，这里我将选中typescript，router，而vuex以及其他可根据自己的需求选择，如现在不选，以后也可以自己配置。

选择好后，enter键回车就行，

 下键选择3.x哦，，，最后回车

按照需求输入y/n,,,,最后回车，，，等待就好了。。 

2. 项目建好之后，调整建好的项目，可以将views下面的.vue文件删了（删了之后，App.vue,还有router中的index里面有路径的引用或调用，也最好删除），components中也一样的操作。然后，，自己在views文件夹中建立自己的.vue文件，建好之后，在router中配好路径，在App.vue中加上<router-view />。

如图所示：

Index.vue中随便加点东西就好。

router/index.ts:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Index from '@/views/Index.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    component: Index
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 当初新建项目的时候，选择了Router这个东西的话，就会有默认的模板，依葫芦画瓢就好了。

注意path要在运行的url中体现哦！！！

3. 新建文件夹server：

 如上图所示：（暂时可以不用管api文件夹中的userApi.ts）

|-- server

        |-- api  

                |-- userApi.ts

        |-- db.ts

        |-- index.ts

        |-- sqlMap.ts

建好之后，，db.ts先写，因为里面存放的是自己的sql配置（我用的是mysql 8.0,,用的是自带的mysql workBench），如下图为mysql可视界面（随便建的一个）

 

db.ts:

module.exports = {
    mysql: {
        host: 'localhost',//mysql连接ip地址
        user: 'root', // 一般就是root,根据情况而定
        password: '***',//mySql用户名密码,填自己的密码
        database: '***',//mySql数据库名，填自己的数据库名
        port: '3306'//mysql连接端口
    }
}

sqlMap.ts: 

var sqlMap = {
    // 用户注册
    register: 'insert into users(username,password,address) values(?,?,?)',
    
}

module.exports = sqlMap;

sqlMap.ts是用来写sql语句的，到时可以在api中的userApi.ts可以接收到exports的sqlMap，。。。这个可以不要，，，到时需在api中的userApi.ts写。。。。

server/index.ts:

// node 后端服务器
const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));


// 后端api路由
app.use('/users', userApi)

// 监听端口
app.listen(5000);

console.log('success listen at port:5000......');

上图可见（暂时未写userApi的话，就先注释掉相关语句）,需要安装几个东西：

npm install body-parser -S

npm install express -S

4. 测试连接

因为使用的是ts文件，而ts是要先转化为js后，node才能识别，所以，再用npm install ts-node -S 安装ts-node，，可以直接运行ts文件了。。。。。

在server文件夹下 打开终端，输入 ts-node index 这个命令，如下图：

出现下面这个，就证明运行成功：

 

 

但这只是测试。。。。

5. node服务与vue项目同时启动：

已知node服务启动：  ts-node index

已知vue项目启动： npm run dev/serve(这个要看package.json中的scripts配置)

结合方法： 使用concurrently

npm install concurrently -S

然后修改package.json配置的scripts，，如下：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

"scripts": {
    "serve": "concurrently \"ts-node ./src/server/index\"  \"vue-cli-service serve\"",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

我这里的serve改动了，  改动变化如上，，

运行结果：

 

注意，，，

（1）.'\'后面不要加空格，其目的是为了给后面的引号转义;

（2）.由于package.json文件运行serve的index，所以使用相对路径./src/server/index去找到index.ts文件去运行

（3）.运行命令依然是npm run serve ,运行时会出现很多运行进程，导致无法看清是否监听着5000这个端口，所以，，

如上图测试一下吧，， 不过，，，更推荐使用步骤四去测试连接，，，因为可能会在控制台报错，开发也能知道是什么错，进行改正。

6. 搞了这么多，，， server下面的api文件夹的userApi可以开始写了（也可以提前写，看心情）

 

const models = require('../db')
const Express = require('express')
const router = Express.Router()
const mysql = require('mysql')
const $sql = require('../sqlMap')

// 连接数据库
const conn = mysql.createConnection(models.mysql)

conn.connect();

router.post('/addUser', (req:Record<string,any>, res:any) => {
    const sql = $sql.register;
    const params = req.body;
    console.log(params);
    console.log(req.body);
    
    conn.query(sql, [params.username, params.password, params.address?params.address:''], function(err:any, result:any) {
      if (err) {
        console.log(err);
      }
      if (result) {
          console.log(result);
      }
    })
})
 

module.exports = router

如上图： 引入db.ts,express,mysql,以及sqlMap

注意注意： 记得npm install mysql express -S 哦，，，还有，，export哦！！

写好了这个userApi之后，，，之前的index.ts中注释掉的userApi就可以放开了。

 

7. 准备axios

（1）.axios拦截器：

新建utils文件夹，下面再建 request.ts:

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

export class Request{
    public static axiosInstance: AxiosInstance;

    public static init ():any {
        // 创建axios实例
        this.axiosInstance = axios.create({
            baseURL: '', // 这里加/api也行，到时访问就不加了，看自己心情
            timeout: 6000
        });
        
        // 初始化拦截器
        this.initInterceptors();
        return axios;
    }

    // 初始化拦截器
    public static initInterceptors():void {
        /**
         * 请求拦截器
         * 
         */
        this.axiosInstance.interceptors.request.use(
            

        );
 
 
        // 响应拦截器
        this.axiosInstance.interceptors.response.use(
            // 请求成功
            (response: AxiosResponse) => {

            
                if (response.status === 200) {
                    // return Promise.resolve(response.data);
                    return response;
                } else {
                    return response;
                }
            },
            // 请求失败
            (error: any) => {
                const {response} = error;
                if (response) {
                    return Promise.reject(response.data);
                }
        });
    }
}

在main.ts中引入并挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'

import {Request} from '@/utils/request'
import Axios from 'vue-axios';

const app = createApp(App)

app.config.globalProperties.$axios = Request;

app.use(store).use(router).use(ElementUI).use(Axios,Request.init()).mount('#app')

 （这里我引入了elementUI，如不引的话，下面就别use了）最主要的就是Axios，{Request},Request.init(),这几部分内容了。

8. 使用axios访问node服务：

在最最开始的时候，在views下新建了Index.vue文件中：

<template>
  <div>
      111
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted } from "@vue/runtime-core";

export default defineComponent({
  setup(){
    const {proxy} = getCurrentInstance() as any;
    onMounted(()=>{
      proxy.$axios.axiosInstance.post('/api/users/addUser',{
        username: '111',
        password: '123',
        address: '135',
      }).then((res:any)=>{
        console.log(res);
        
      })
    })
  }
})
</script>

<style>

</style>

主要注重于onMounted()中的东西就好了，使用的接口是'/api/users/addUser' ,,注意，，接口的/api可以在request.ts中的 baseUrl 中写，这里可以不用加这个/api,如没写，，这里请加上。。

为什么要加/api???

 9. 配置好了node服务的接口了，就可以加上vue.config.js了(回答为什么要加/api)：

 回答： 为了走代理。

module.exports = {
    // publicPath: '/dist',  //资源打包路径
    devServer: {
      host: "0.0.0.0",
      https: false,
      open: true, //配置自动启动浏览器
      proxy: {
        '/api': {
            target: 'http://localhost:5000/',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
                '/api': ''
            }
        },
      }
    },
}
  

确保端口号哦！！！

理清思路： 

已知： Index.vue中： post("/api/users/addUser”);

已知： vue.config.js中： '/api'

已知： server/index.ts 中 ： app.use('/users'，userApi);

过程是这样的：

npm run serve启动项目：

运行Index.vue文件后发出的请求为 http://localhost:8080/api/users/addUser，请求会走vue.config.js中的proxy代理，就会遇到'/api'，识别到请求中的/api 就会将整个请求的地址转变到http：//localhost:5000中去，并且，/api会被替换为'',请求在这两个条件下变为了http://localhost:5000/users/addUser，由于在启动的时候就在监听5000这个端口,所以，就会走server中的内容了，由于，，/users作为路劲的开始，就会去寻找/users后面的/addUser，再由于/addUser在userApi中已经暴露了，所以/user/addUser就会定位到userApi中,执行相关的操作数据库的代码。（以上为个人理解）

测试结果：

 

 参考： https://blog.csdn.net/weixin_42003850/article/details/100511566