Vuejs+Nodejs学习笔记（1）——前后端连接方法

前端到后端的跨域问题需要通过axios来解决，而后端的跨域问题需要通过cros来解决。

1 前端配置

前端发送登录请求到后端，后端匹配用户名和密码，匹配成功后回传code和token，前端接收到token后进入下一级菜单。

1.1 安装axios

命令行输入：

npm install axios

1.2 js代码

配置JS代码，导入axios，然后使用axios.get()、axios.post()、axios.put()、axios.get()等。

// Login.vue
// ...
<script>
// ...
import axios from 'axios';
export default{
	// ...
	axios.get(`http://localhost:3000/userInfo/search?username=${loginInfo.username}&pwd=${loginInfo.password}`
	).then(res =>{
		console.log(res.data);
		if(res.data.token != ""){
			router.push("home");
		}else{
			console.log("账号或密码错误");
		}
	}).catch(err =>{
		console.log(err);
	})
}
</script>

1.3 配置反向代理

进入vite.config.js文件，添加server设置：

export default defineConfig({
	// ... 
	server:{
		proxy:{
			'/api':{
	        target:'localhost',
	        changeOrigin:true
			}
		}
	}
});

2 后端配置

后端接收到前端发送的HTTP请求后，需要连接数据库查找信息。

2.1 安装包

安装cors、express、mysql、mysql2、sequelize、nodemon。

2.2 数据库配置文件

//dbconfig.js
const Sequelize = require('sequelize');

// 创建一个新的Sequelize实例
const DB = new Sequelize("test_db","root","root",{ //分别为数据库名、用户名、密码
    host:'localhost',
    port: 3306,
    dialect:'mysql',
    timezone: '+8:00',
    // dialectOptions: {
    //     useUTC: false
    // },
    pool:{
        max:10,
        min:0,
        idle:10000, // 10秒没有使用，释放该连接
    },
    logging:console.log,   //Sequelize日志输出方法
})

// 测试数据库连接
DB.authenticate().then(()=>{
    console.log("数据库连接成功");
}).catch((err)=>{
    console.log("数据库连接失败： ",err)
});

module.exports = DB;

2.3 添加后端与数据库连接的模型文件

// user_info_model.js
const DB = require("../config/dbconfig.js");
const Sequelize = require('sequelize');

// user_login是数据库的表名 define('表名',{字段})
// 模型与数据库表名的映射
const user_info_model = DB.define("user_info",{
    id:{
        primaryKey: true,
        type: Sequelize.INTEGER,
        field:"user_id",
        autoIncrement:true
    },
    username:{
        type:Sequelize.STRING(45),
        allowNull:true,
        field:"username"
    },
    password:{
        type:Sequelize.STRING(30),
        allowNull:true,
        field:"password"
    },
},{
    freezeTableName: true,      // 防止程序自动在表名后加s
    timestamps: false           // 禁用createAt和updateAt
});

module.exports = user_info_model;

2.4 添加路由信息

这里可以实现读取前端发来的信息，并与数据库内元素进行比对，返回前端所需要的token。

//user_info.js
const express = require('express');
const router = express.Router();
const user_info_model = require("../Models/user_info_model.js");
const { Sequelize } = require('sequelize');
const Op = Sequelize.Op;
var token = "";

router.get('/', (req, res, next) => {
    res.send("hello world");
});

// 获取user信息：http://localhost:3000/userInfo/search?username=xxxx&pwd=xxxx
router.get('/search', async (req, res, next) => {
    try {
        const result = await user_info_model.findAll({
            where:{username: req.query.username}
        }).then(users =>{
            if(users.length > 0){
                for(i in users){
                    if(req.query.pwd === users[i].password){
                        console.log("用户名和密码匹配");
                        token = "yes";
                        res.json({code: 1000,token:token});
                        break;
                    }
                }
                if(!token){
                    console.log("密码错误或未授权");
                    res.json({code: 1002});
                }
            }else{
                console.log('用户名、电话号码或电子邮件不存在');
                res.json({code: 1001});
            }
        });
    } catch (err) {
        next(err);
    }
});

// 错误处理中间件
router.use((err, req, res, next) => {
    console.error(err);
    res.status(500).json({
        code: 1002,
        msg: '服务器发生错误',
    });
});

module.exports = router;