TDesign中后台管理系统-访问后端服务

目录

  • [1 修改后端服务地址](#1 修改后端服务地址)
  • [2 解决跨域问题](#2 解决跨域问题)
  • [3 动态获取菜单](#3 动态获取菜单)
  • [4 测试后端接口](#4 测试后端接口)
  • [5 前后端联调](#5 前后端联调)
  • 总结

目前我们已经搭建了TDesign的前端和express的后端,目前是两个独立的应用。通常我们需要把前后端集成在一起,TDesign已经配置了相关的信息,只需要修改后端服务地址及端口就能实现先后端互通。

1 修改后端服务地址

vs code打开我们创建的前端工程,找到.env.development文件

将配置文件的URL修改为我们的后端地址

bash 复制代码
VITE_BASE_URL = /
VITE_IS_REQUEST_PROXY = true
VITE_API_URL = http://localhost:3000
VITE_API_URL_PREFIX = /api

2 解决跨域问题

如果是使用默认的express启动代码搭建服务,会遇到跨域问题,我们需要引入cors中间件来解决跨域的问题

打开后端工程,安装cors包

bash 复制代码
npm install cors --save

修改index.js文件,增加跨域支持的代码

bash 复制代码
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,以下是建表语句

bash 复制代码
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库,安装一下

bash 复制代码
npm install mysql --save

在database.js里输入数据库连接代码

javascript 复制代码
const mysql = require('mysql');

// 创建数据库连接池
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: '******',
  database: 'diancan',
});

module.exports = pool;

在配置文件中输入数据库的名称、用户名、密码和访问地址

然后在menu.js中输入获取菜单的方法

javascript 复制代码
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

javascript 复制代码
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 前后端联调

后端调试好了之后,启动我们的前端工程,从登录页进行测试,看是否可以正常登录,并且菜单可以正常渲染出来

总结

前后端集成,需要后端先写好接口,并且前端能够正常访问,我们需要解决跨域的问题,数据库访问的问题以及动态构造菜单的接口。总体上只要熟悉开发流程,就可以按照自己的需要完成功能的开发。

相关推荐
小林学习编程8 天前
TDesign了解及使用
tdesign
天天打码1 个月前
TDesign腾讯高保真Axure RP中后台交互模板及元件组件库
交互·axure·tdesign
包淼淼2 个月前
微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型,使用tdesign-miniprogram t-navbar设置背景图片
微信小程序·小程序·tdesign
Hsu yiqi4 个月前
TDesign组件库日常应用的一些注意事项
tdesign
xiansibao5 个月前
tdesign和vue的子组件关闭是,父组件执行方法
前端·vue.js·tdesign
穿城大饼5 个月前
TDesign环境搭建-后台模板的安装和使用-构建web管理端后台系统
前端·tdesign
不秃头的UI设计师6 个月前
TDesign:腾讯企业级设计体系的UI组件库详解
ui·tdesign
大美B端工场-B端系统美颜师7 个月前
TDesign:腾讯的企业级前端框架,对标elementUI和ant-design
前端框架·tdesign
xuxiaoxie1 年前
小程序多文件上传 Tdesign
小程序·tdesign
shadow fish1 年前
微信小程序在TS模板下引入TDesign组件
微信小程序·小程序·tdesign