基于Midwayjs的管理系统-开发环境

需要在自己电脑上进行相关的环境配置后，拉取源代码进行程序的开发编码工作。

因为本项目是前后端完全分离的，所以需要前后端都单独启动好，才能进行访问。

准备工作

SDK	说明	版本
Nodejs	node项目的运行环境	18+
Redis	缓存存储程序	6+
Mysql	数据存储程序	8+

请进行环境变量配置并确保正常运行，按个人喜好随意使用开发编辑器。

使用国内源可以加速下载依赖库

腾讯源 mirrors.cloud.tencent.com/npm/
淘宝源 registry.npmmirror.com
华为源 mirrors.huaweicloud.com/repository/…
官方源 registry.npmjs.org/

设置为默认源
npm config set registry registry.npmmirror.com

后端接口

Midwayjs Gitee仓库地址 => mask_api_midwayjs

通过Gitee仓库下载解压或者直接git拉取源代码到工作目录。
使用开发编辑器打开工作目录，找到 script\db_init.sql 脚本文件进行初始化数据库数据。
可使用数据库管理软件（比如Navicat、DBeaver）等）创建数据库，之后复制脚本文件内容粘贴到数据库管理软件提供的SQL查询工具执行，执行结束后检查下数据库内是否有导入的数据。
找到 src\config 文件夹下的文件进行相关参数配置。
config.default.ts 是默认配置，一般只需要变更开发（local）和部署（prod）环境的配置文件，修改其内容会对默认配置进行参数的覆盖。参考Midway官方-多环境配置。

环境	说明
default	默认配置
local	开发配置
prod	部署配置
unittest	测试配置（暂时没用）

# 通过git拉取源代码
git clone https://gitee.com/TsMask/mask_api_midwayjs

# 进入程序目录
cd ./mask_api_midwayjs

# 修改配置参数 
# vim /src/connfig/config.local.ts

# 安装程序依赖库
npm install --registry https://registry.npmmirror.com

# 启动程序
npm run dev

# 启动成功见如下信息
[ Midway ] Start Server at  http://127.0.0.1:6275

前端页面

Element-Vue3 Gitee仓库地址 => mask_element_vue3
Antd-Vue3 Gitee仓库地址 => mask_antd_vue3 => 在线预览

通过Gitee仓库下载解压或者直接git拉取源代码到工作目录。

使用开发编辑器打开工作目录，找到 vite.config 配置文件修改本地开发服务配置（server），随后进行程序依赖库的安装。

关于启动环境的变量配置

文件名称	说明
.env.development	开发模式
.env.production	生产模式

# 通过git拉取源代码
git clone https://gitee.com/TsMask/mask_antd_vue3

# 进入程序目录
cd ./mask_antd_vue3

# 修改启动参数，一般改端口和代理接口地址
# vim vite.config.ts

# 安装程序依赖库
npm install --registry https://registry.npmmirror.com

# 启动程序
npm run dev

# 启动成功见如下信息
  ➜  Local:   http://localhost:6265/

通过浏览器地址输入 http://localhost:6265/ 打开前端页面，若能正常打开登录页面并成功登录进行菜单页面跳转页面展示正常，则表明环境搭建成功。

账号/密码
管理员：maskAdmin/Admin@1234
普通人员：maskUser/User@1234
如遇到无法解决的问题，可以在下方进行留言，会在第一时间进行解答。