GrowthStore实战（三）growth-admin 前端篇

上一篇已经讲了关于growth-admin后端GrowthStore的配置。本文主要讲前端的配置信息。前端主要基于 Vue3 + Vite5+ TypeScript5 + Element-Plus + Pinia 等主流技术栈构建的后台管理。

整个目录结构如下：

 

环境要求

环境	名称版本	下载地址
开发工具	VSCode	下载
运行环境	Node ≥18 (其中 20.6.0 版本不可用)	下载

首先要安装pnpm

# 安装pnpm
npm install pnpm -g

启动项目

# 安装依赖
pnpm install

# 启动运行
pnpm run dev

项目关键配置

.env.development开发环境配置，.env.production 生产环境配置信息

vite.config.ts vite项目的配置信息，包括组件引用，开发环境代理等

另外一个比较关键的封装，针对GrowthStore的QueryCondition查询条件、统一返回数据进行了封装，放在types目录下global.d.ts文件中

常见的请求如分页等，通过QueryCondition封装后：

启动项目后，首先我们在后端配置了。登录时启用图片验证码。登录时就必须要传递一个验证码。不然登录不允许通过。

此处获取图像二维码的地址为 http://localhost:17800/api/auth/code_image

登录接口： http://localhost:17800/api/auth/login

获取用户认证权限信息接口： http://localhost:17800/api/auth/info

前端的菜单都是动态从后端获取，请求的接口是自定义的查询菜单接口：（查询服务）

http://localhost:17800/api/query/com.siline.chimes/FindRoutes/search

通过以上的这几个接口请求，基本完成的从登录认证到菜单功能权限获取等完整的流程。

项目部署

# 项目打包
pnpm run build

# 上传文件至远程服务器
将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。

# nginx.cofig 配置
server {
	listen     80;
	server_name  localhost;
	location / {
		root /usr/share/nginx/html;
		index index.html index.htm;
	}
	# 反向代理配置
	location /prod-api/ {
       proxy_pass http://test.siline.com/; 
	}
}

至此，整个前端项目的基本配置，从环境要求，项目启动，项目配置信息说明、项目部署等整个流程已经完成。

总结

growth-admin 基本使用了整个GrowthStore的登录认证权限体系、查询服务、存储服务等基本功能。也重新回顾了这些功能点。当然还有很多没有完善，比如数据权限等还没有具体在项目中应用起来。需要不断完善。