创建了网站,公司网站建设开发维护工作,更改了网站关键词后要怎么做,杭州网站现场备案服务端连接数据库#xff0c;并简单使用 服务器连接mysql后端定义接口前端调用接口封装axios#xff08;简易版#xff09;解决前端请求接口返回了一个html 定义api请求vue中调用接口 服务器连接mysql 安装mysql2#xff1a;npm install mysql2启动服务#xff1a;npm sta… 服务端连接数据库并简单使用 服务器连接mysql后端定义接口前端调用接口封装axios简易版解决前端请求接口返回了一个html 定义api请求vue中调用接口 服务器连接mysql 安装mysql2npm 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;charsetutf-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/requestexport function userInfoApi(params) {return request({url: /userInfo,method: get,params,})
}vue中调用接口
templatediv用户信息button clickgetUserInfo获取用户信息/button/div
/templatescript setup langts
import { userInfoApi } from /api/users
const getUserInfo () {userInfoApi({ id: f0019fdebedb443c98dcb17d88222c38 }).then((res) {console.log(接口数据, res.data)})
}
/script
