网站建设书籍资料,二维码生成器表白文字,网络科技公司网站制作,wordpress文章时间目录 1 修改后端服务地址2 解决跨域问题3 动态获取菜单4 测试后端接口5 前后端联调总结 目前我们已经搭建了TDesign的前端和express的后端#xff0c;目前是两个独立的应用。通常我们需要把前后端集成在一起#xff0c;TDesign已经配置了相关的信息#xff0c;只需要修改后端… 目录 1 修改后端服务地址2 解决跨域问题3 动态获取菜单4 测试后端接口5 前后端联调总结 目前我们已经搭建了TDesign的前端和express的后端目前是两个独立的应用。通常我们需要把前后端集成在一起TDesign已经配置了相关的信息只需要修改后端服务地址及端口就能实现先后端互通。 1 修改后端服务地址
vs code打开我们创建的前端工程找到.env.development文件 将配置文件的URL修改为我们的后端地址
VITE_BASE_URL /
VITE_IS_REQUEST_PROXY true
VITE_API_URL http://localhost:3000
VITE_API_URL_PREFIX /api2 解决跨域问题
如果是使用默认的express启动代码搭建服务会遇到跨域问题我们需要引入cors中间件来解决跨域的问题
打开后端工程安装cors包
npm install cors --save修改index.js文件增加跨域支持的代码
const express require(express);
const app express();
const cors require(cors);
// 定义路由
app.get(/, (req, res) {res.send(Hello, World!);
});
app.use(cors({origin: http://localhost:3002,credentials: true
}));
// 启动服务器
app.listen(3000, () {console.log(Server is running on port 3000);
});这里的origin是你的前端的工程的地址
3 动态获取菜单
我们目前的菜单是需要从服务接口获取数据的要想开发后端接口需要先创建数据库表数据库我们选择mysql以下是建表语句
CREATE TABLE menu (id int(0) NOT NULL AUTO_INCREMENT,path varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,name varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,component varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,redirect varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,title varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,icon varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,parent_id int(0) NULL DEFAULT NULL,PRIMARY KEY (id) USING BTREE,INDEX parent_id(parent_id) USING BTREE,CONSTRAINT menu_ibfk_1 FOREIGN KEY (parent_id) REFERENCES menu (id) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE InnoDB AUTO_INCREMENT 4 CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci ROW_FORMAT Dynamic;表建好之后需要先创建一个菜单的路由在工程的根目录创建一个menu.js文件 我们后端服务需要访问数据库需要将数据库的连接拆分到一个文件中再创建一个database.js文件 访问数据库需要用到mysql库安装一下
npm install mysql --save在database.js里输入数据库连接代码
const mysql require(mysql);// 创建数据库连接池
const pool mysql.createPool({host: localhost,user: root,password: ******,database: diancan,
});module.exports pool;在配置文件中输入数据库的名称、用户名、密码和访问地址
然后在menu.js中输入获取菜单的方法
const express require(express);
const router express.Router();
const pool require(./database);function fetchMenuItems(parentId null) {console.log(parentid, parentId)return new Promise((resolve, reject) {if (parentId null) {pool.query(SELECT * FROM menu WHERE parent_id is null , [parentId], (error, results) {if (error) {reject(error);} else {resolve(results);}});} else {pool.query(SELECT * FROM menu WHERE parent_id ?, [parentId], (error, results) {if (error) {reject(error);} else {resolve(results);}});}});
}async function buildMenuTree(parentId null) {const menuItems await fetchMenuItems(parentId);console.log(menuItems, menuItems)const menuTree [];for (const item of menuItems) {const children await buildMenuTree(item.id);const menuItem {id: item.id,path: item.path,name: item.name,component: item.component,redirect: item.redirect,title: item.title,icon: item.icon,};if (children.length 0) {menuItem.children children;}menuTree.push(menuItem);}console.log(menuTree, menuTree)return menuTree;
}router.get(/, async (req, res) {try {const menuTree await buildMenuTree();res.json({code:0,data:{list:menuTree}});} catch (error) {console.error(Database query error:, error);res.status(500).json({ error: Internal server error });}
});module.exports router;然后将menu的路由注册到启动文件里修改index.js
const express require(express);
const app express();
const cors require(cors);
const menuROuter require(./menu)
// 定义路由
app.get(/, (req, res) {res.send(Hello, World!);
});
app.use(cors({origin: http://localhost:3002,credentials: true
}));
app.use(/api/get-menu-list,menuROuter);
// 启动服务器
app.listen(3000, () {console.log(Server is running on port 3000);
});4 测试后端接口
我们接口写好之后需要进行测试可以使用Postman输入我们的接口地址进行测试 如果看到正常返回说明我们的接口已经写好了
5 前后端联调
后端调试好了之后启动我们的前端工程从登录页进行测试看是否可以正常登录并且菜单可以正常渲染出来
总结
前后端集成需要后端先写好接口并且前端能够正常访问我们需要解决跨域的问题数据库访问的问题以及动态构造菜单的接口。总体上只要熟悉开发流程就可以按照自己的需要完成功能的开发。
