Vue3初学记录：Vue3+ts配置node+mysql

v3初学：Vue3+ts配置node+mysql

这几天尝试着学一下vue3的使用，在自己捣鼓的过程中发现在vue2里面用的node+mysql的方法报了错，捣鼓了半天，还按网上的教程下了babel，最后才恍然大悟，发上来记录一下。

具体情况为：在 /server文件夹下创建了用于跨域请求的app.js文件，然后创建了用于储存mysql指令的sqlMap.js，储存数据库信息的index.js，用于 express.Router() 并链接各个文件，实现最终效果的api.js。在创建完成并且编写完毕后使用node指令run的时候发现报了如下错误：

因为我是第一次使用vue3+ts，原来都是用的vue2，所以这个错误找了好久，试过将node的那个js文件改为cjs，也试过使用@babel/node来运行，都会报各种各样的错误。找了半天都没找到解决的办法，最后实在是受不了了，把这四个js文件都改成了cjs文件，然后发现问题解决了。因为这几个js文件都要使用到，所以node在运行的时候识别不出来别的.js文件内的 require() 函数，只要把这几个文件都改成.cjs就行了。

最后附上编写的几个文件，这些东西你在网上搜也很容易就能搜到，我写的是当初写vue2的时候搜的其中一种方法，具体文件路径看着上面的那张 /server 下的路径图来写。

// app.cjs
let bodyParser = require('body-parser');
let express = require('express');
let cors = require('cors')
let app = express();

let api = require('./api/api.cjs');

// 解析 application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// 解析 application/json
app.use(bodyParser.json());

app.use(cors());

//设置跨域请求
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 , yourHeaderFeild');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

app.use("/api/user",api);

app.listen(10521);
console.log("success");

// →/db/index.cjs
// 储存的是将要使用的mysql数据库的信息
module.exports = {
    mysql: {
        host: 'localhost',
        user: 'root',
        password: '123456',
        port: '3306',
        database: 'weibo',
    }
}

最后附上数据库指令使用

// sqlMap.cjs 储存的是数据库指令，记得把你写的东西给exports导出
const sqlMap ={
    list:{
        getList:'select * from list_menu where user_id=(?)',
        writing:' insert into article (account,title,content,date) values (?,?,?,?) ',
    },
    test:{
	}
}

module.exports = sqlMap

// api.cjs，核心，用数据库指令结合你接口传的数据进行连接mysql数据库，并返回数据的结果
// 数据代表的意义不再说明，如果不明白的小伙伴可以自己去看看菜鸟教程里的node连接数据库教程，或者复制到webstorm上面看一下给出的提示
// 也别忘了下面的exports ：    module.exports = router

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

const conn = mysql.createConnection(models.mysql);
conn.connect();

// 登录接口  || 这个接口没什么用应该，跑了之后没有什么bug可以把它给删了
router.get('/', function (req, res) {
    console.log("主页 GET 请求");
    // const user=req.body
    res.send('Hello GET');
    // console.log(user)
    // res.send(user)
})


// 获取用户的清单菜单，前面的接口没有什么要求，但是尽量自己能够一眼看懂，基本都是post请求+
router.post('/list/all',(req,res)=>{
    let data = req.body;
    /* 数据库指令，你也可以在后面添加额外的指令用于进阶操作，不用每次都在sqlMap里面写指令，如：
    	let article2 = $sql.get.article + "&& a.account= '" + data.account +"'"
    */
    let sql_list = $sql.list.getList;
    conn.query(sql_list,data.userId,(err,rst)=>{
        if(err){throw new err}else{
            res.send(rst)
        }
    })
})

module.exports = router

如果你对这些代码有疑问，可以自行搜索查找，我这个只是记录一下自己的学习过程，很多东西都没有解释。你也可以直接在下方评论，我看到了一定知无不答，虽然我也不一定会(小声)。

如果觉得这些东西帮到你了可以给我点个赞，谢谢！