自助餐团购网站建设网络推广方案七步法
服务端连接数据库，并简单使用
- 服务器连接mysql
- 后端定义接口
- 前端调用接口
- 封装axios（简易版）
- 解决前端请求接口返回了一个html
- 定义api请求
- vue中调用接口
服务器连接mysql
- 安装mysql2：npm install mysql2
- 启动服务：npm start
后端定义接口
const express = require('express');
const app = express();
const mysql = require('mysql2')app.listen(3000, () => {console.log('Server is running on port 3000');
});// 创建数据库连接
const connection = mysql.createConnection({host: 'localhost',port: 3306,user: 'root',database: '数据库名',password: '数据库密码'
});// 【定义接口】根据用户ID查询用户信息
app.get('/userInfo', (req, res) => {const userId = req?.query?.id;if(!userId) {return res.status(400).send("用户ID为空");}// 构造查询语句（使用参数化查询防止SQL注入）const statement = `SELECT * FROM sys_user WHERE ID = ?`;connection.query(statement, [userId], (err, resultes, fields) => {if(err) {return res.status(500).send(err);}if(resultes.length === 0) {return res.status(400).send("用户未找到")}res.json(resultes[0]); // 假设用户ID是唯一的，返回第一个结果})
});
前端调用接口
封装axios（简易版）
// src\utils\request.js
import axios from 'axios'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 对应国际化资源文件后缀
axios.defaults.headers['Content-Language'] = 'zh_CN'
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: import.meta.env.VITE_APP_BASE_API, // Vite中环境变量需要以 VITE_ 为前缀，并通过import.meta.env 访问// 超时timeout: 30000,
})export default service解决前端请求接口返回了一个html
axios.create时添加
baseURL参数（与vue.config中的一致即可），目的是为了便于axios实例的方法传递相对URL。
- 如果你使用的是 Vite，环境变量需要以 VITE_ 为前缀，并通过
import.meta.env访问。- 如果你使用的是 Vue CLI，环境变量需要以 VUE_APP_ 为前缀，并通过 process.env 访问。
定义api请求
//src\api\users\index.js
import request from '@/utils/request'export function userInfoApi(params) {return request({url: '/userInfo',method: 'get',params,})
}
vue中调用接口
<template><div>用户信息<button @click="getUserInfo">获取用户信息</button></div>
</template><script setup lang="ts">
import { userInfoApi } from '@/api/users'
const getUserInfo = () => {userInfoApi({ id: 'f0019fdebedb443c98dcb17d88222c38' }).then((res) => {console.log('接口数据：', res.data)})
}
</script>