【Vue+Mysql实现前端对接数据库】
文章目录
- 一、安装环境
- 二、axios 封装和配置
- 2.1 文件 src/utils/request.js 代码
- 2.2 ENV 相关环境文件配置
- 2.3 文件 src/api/login.js 代码
- 三、Mysql 配置链接
- 3.1 数据库配置文件 src/server/db.js 代码
- 3.2 后端 node 服务配置文件 src/server/iondex.mjs 代码
一、安装环境
Mysql 下载及安装
Node 下载及安装
使用 Vite + Vue3 搭建脚手架
安装相关依赖
npm install --save mysql npm install --save axios npm install --save express npm install --save body-parser npm install --save crypto
- Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。
- body-parser 是 node.js body 解析中间件。处理程序之前,在中间件中对传入的请求体进行解析(response body)
- CryptoJS 是一个JavaScript的加解密的工具包。它支持多种算法:
MD5、SHA1、SHA2、SHA3、RIPEMD-160
的哈希散列,以及进行AES、DES、Rabbit、RC4、Triple DES
加解密。
二、axios 封装和配置
2.1 文件 src/utils/request.js 代码
- 导入 axios
import axios from 'axios'
创建 axios 实例
// 实例请求的方式有 instance({})、instance.get()、instance.post() const request = axios.create({ baseURL: import.meta.env.VITE_API_URL, // 默认配置,属性名必须以VITE_API_开头,否则 import.meta.env检测不到 timeout: 10000 // 超时时间 })
异常拦截处理
const errorHandler = (error) => {
if (error.response) {
switch (error.response.status) {
case