9.7 KiB
项目名称: 91短剧 管理后台客户端 # 与 DMP 或内部命名一致时请自行替换 一级部门: 北斗 # 请填写一级部门名称 二级部门: 瑞升 # 请填写二级部门名称,无则留空
DMP编码: JHA-214 # 无则留空
项目类型: PC
可选值:
H5 / APP / PC / 服务 / 组件 / 工具 / AI / 中间件
开发语言: Node
可选值:
GO / Java / PHP / Node
项目负责人: DN3634,DN8161 # 员工编号,多个用逗号隔开,这里的负责是这套代码的负责人
运维负责人: DN9460,DN9651,DN4792 # 负责部署、监控、K8S、发布、证书等
产品负责人: YY1145,YY1208 # 项目产品经理
项目成员: DN3634,DN8161
项目状态: 开发中
可选值:
开发中 / 维护中 / 已停止 / 已归档
项目级别: 中
可选值:
高 / 中 / 低
核心分支: main
代码仓库:
最后审计人:
最后审计时间:
告警群:
备注:
package.json中name为admin-server,仓库/目录名为91dj-admin-client。- 业务 API 根路径由
src/utils/serverUrlConfig.js中的baseServerUrl决定,与NODE_ENV、VUE_APP_TITLE(见.env.build/.env.test等)组合有关;请勿将含密钥、内网或未脱敏的生产地址对外发布。
1. 项目说明
本仓库为面向 桌面浏览器 的 Vue 2 + Vue CLI + Webpack 单页 管理后台,UI 基于 Element UI 2,状态管理为 Vuex 3(vuex-persistedstate 在依赖中,当前 src/stroe/index.js 内持久化插件为注释状态),路由为 Vue Router 3,模式为 hash(见 src/router/index.js)。入口为 src/main.js,挂载 Vuex、Router、Element、全局组件/过滤器、LoginPlugin、分片上传与音频播放等插件;全局路由守卫见 src/permission.js(登录态、权限路由刷新、多页签相关 store 动作)。
动态业务路由由 src/router/permissionRouter.js 聚合各业务子路由文件(如 activity.js、user 相关、cinema.js 等),经 src/stroe/actions.js 中 refreshRouter 与用户 localStorage 中的 role 做 recursionRouter 过滤后注入 /main 子路由;基础白名单路由见 src/router/baseRouter.js(登录、/main 下欢迎页与角色页等)。
业务页面在 src/views/ 下按模块划分,示例包括:用户(user)、视频/媒资(videoManagement、mediaLibrary、lsjMediaLibrary)、影院(cinemaManagement)、渠道与落地(channelManagement、channelBackground、landManagement)、活动/签到/产品/交易(activityManagement、signinManagement、productManagement、transactionManagement)、代理与区县(agentManagement、agentDistrictProvider)、AI / ACG / 小说(aiManagement、animationManage、fiction)、统计与系统(statistics、systemManagement、systemMessage、administrators)等;接口封装在 src/api/,按域拆分为多个 .js 文件,请求统一走 src/utils/request.js 封装的 axios 实例。
技术栈要点:
- 构建:Vue CLI 4(
vue-cli-service),生产可选 compression-webpack-plugin 对 js/css/html/mp4 等做 gzip(见vue.config.js);publicPath: './',适合静态目录或相对路径部署。 - 样式:node-sass + sass-loader,通过
vue.config.js的css.loaderOptions.sass.data向各组件注入@/assets/scss/base.scss;Element 主题变量见src/assets/scss/element-variables.scss。 - 网络:axios(
baseURL在实例中空字符串,真实前缀在request.js的ajax内拼接config.baseServerUrl),Authorization 头、refresh-authorization 触发的 token 刷新与请求队列、code === 1003时登出确认等逻辑均在src/utils/request.js。 - 媒体与编辑:video.js、hls.js、dplayer、wangeditor、vue-cropper、vue-simple-uploader、echarts 等。
- 其他:lodash、moment、js-md5 / spark-md5、xlsx、qrcodejs2 等。
Node 版本: 仓库 README.md 建议使用 12.18.1。
常用脚本(package.json):
| 命令 | 说明 |
|---|---|
npm run dev |
本地开发(vue-cli-service serve) |
npm run build |
生产构建(NODE_ENV=production vue-cli-service build,默认读取项目根目录 .env 系列中变量) |
npm run test-build |
测试环境构建(--mode test,配合 .env.test 等) |
npm run lint |
ESLint(vue-cli-service lint) |
开发环境代理: 当前 vue.config.js 未配置 devServer.proxy;本地联调后端地址主要在 serverUrlConfig.js 中维护(以文件内实际配置为准)。
项目目录结构(核心):
91pron-admin-client/
├── public/
├── src/
│ ├── main.js # 入口:Vuex、Router、Element、插件、permission
│ ├── App.vue
│ ├── permission.js # 路由守卫:登录、动态路由刷新、页签状态
│ ├── router/
│ │ ├── index.js # Router(hash)
│ │ ├── baseRouter.js # 登录 / main / welcome / role
│ │ ├── permissionRouter.js # 全量业务子路由聚合
│ │ └── *.js # 各业务模块路由片段
│ ├── stroe/ # Vuex(目录名为 stroe,非 store)
│ ├── views/ # 管理端各业务页面
│ ├── api/ # 接口方法(按域拆分 .js)
│ ├── components/ # 通用组件
│ ├── utils/ # request、serverUrlConfig、过滤器、全局方法等
│ ├── plugins/ # 如 LoginPlugin
│ └── assets/ # scss、图片等
├── vue.config.js
├── prod_build.sh # 示例打包/发布脚本(环境差异大,使用前请内部确认)
└── project.md # 本文件
接口基址:
- 详见
src/utils/serverUrlConfig.js:根据NODE_ENV与VUE_APP_TITLE切换baseServerUrl(例如生产构建下相对路径/api/web/admin与测试包差异);playVideoUrl/imgUrl/downLoadUrl等同文件内字段用于播放与资源地址拼接。 - 静态部署若使用相对
/api/web/admin,需由 网关 / Nginx 将浏览器同源下的路径转发到实际管理端后端。
2. 基础设施与中间件
本仓库为 纯前端工程,不内置后端;运行时依赖:
- 业务 API:由
serverUrlConfig.js的baseServerUrl决定;部署时需保证管理端 API 反代 与 HTTPS 策略一致。 - 静态资源托管:
build/test-build产物在dist/,由 Web 服务器或 CDN 提供;当前为 hash 路由,服务器层面对路径回退要求通常低于 history 模式,但仍需正确配置publicPath与资源根路径。 - 媒体、图片与下载域名:见
serverUrlConfig与接口返回(勿在文档中粘贴未脱敏的内网或密钥配置)。
3. 运维部署
构建产物: 执行 npm run build 或 npm run test-build 后,在 dist/ 生成静态资源;生产构建可能生成 gzip 压缩产物(见 vue.config.js 插件配置)。
推荐发布流程(示例):
- 使用约定 Node 版本安装依赖:
npm ci或npm install。 - 确认
.env.*或构建 mode 下VUE_APP_TITLE等与serverUrlConfig.js逻辑一致。 - 执行
npm run build或npm run test-build。 - 将
dist/同步至静态服务器;确认 API 反代 与publicPath: './'的访问路径一致。 - 仓库内
prod_build.sh为示例流程,主机与路径以实际运维规范为准,避免泄露账号与内网信息。
环境变量说明(摘录,完整以实际 .env.* 与构建命令为准):
| 变量 | 作用 |
|---|---|
NODE_ENV |
构建/运行环境标识 |
VUE_APP_TITLE |
与 serverUrlConfig.js 中测试/生产基址分支等逻辑配合(见 .env.build、.env.test) |
4. 风险说明
- 强依赖后端与反代:
baseServerUrl或网关配置错误会导致 整站接口不可用。 - 登录与权限:
permission.js依赖localStorage中userInfo、role与 VuexrouterList刷新逻辑,权限数据异常可能导致无法进入业务页或反复刷新路由。 - Token 刷新:
request.js中刷新队列与 1003 等业务码处理与后端约定强相关,变更需联调。 - 配置敏感信息:联调用的完整域名、内网 IP 等 勿提交到公开仓库;依赖锁定文件建议纳入审计流程。
- 目录命名:Vuex 目录为
stroe,新人接手时注意路径与导入,避免误认为缺失store。
5. 历史事故(可选)
- 暂无(请运维/研发后续补充)
6. 交接说明(可选)
- 路由与权限核心在
src/permission.js、src/stroe/actions.js的refreshRouter、src/router/permissionRouter.js及各src/router/*.js;新增菜单需在权限路由与后端角色配置侧同步。 - 用户信息、标签页等多与
src/stroe/及localStorage配合;业务请求请统一走src/utils/request.js,避免散落裸axios。 - 接口目录:
src/api/。 - 请勿将含密钥、生产内网地址的环境文件或未脱敏脚本提交至对外可见仓库;YAML 头部元数据若与真实组织不一致,请在内部系统中核对后修改。