dc

后端部后台 前端项目

主要功能 详见：https://gitlab.weipaitang.com/admin-manager/admin-api

别再问了......

精简模版项目 []()

• 目录结构
• 使用
  • 安装依赖
  • 启动项目
  • 打包
  • 代码检查
  • 代码格式化
• api 配置
• 布局
• 登录
• 模版
• CI
• 编辑器
• vscode eslint 插件
  • 安装
  • 配置自动修复
• 贡献者

目录结构

├── src
│   ├── apis // api 配置
│   │   ├── base.js // 基本配置
│   │   ├── hook.js // 接口请求钩子函数
│   │   └── index.js // 接口
│   ├── app.js
│   ├── assets // 资源目录
│   │   └── logo.jpg
│   ├── global.less // 全局 css
│   ├── layouts // 布局目录
│   │   ├── index.js
│   │   ├── index.less
│   │   └── mainLayout
│   │       ├── index.js
│   │       └── index.less
│   └── pages // 页面
│       ├── .umi // yarn start 之后会生成这个目录，包含自动生成的路由等信息
│       ├── index.js // 主页面
│       ├── index.less
│       ├── login // 登录页面
│       │   ├── index.js
│       │   └── index.less
│       └── template // 模版页面
│           ├── index.js
│           └── index.less
├── .editorconfig // 编辑器
├── .env // 环境变量
├── .eslintrc.js // 代码规范检查配置
├── .gitignore // git 忽略文件配置
├── .umirc.js // umi 配置
├── package.json
├── README.md
└── webpack.config.js

使用

安装依赖

推荐使用 yarn 安装依赖

yarn

⚠️若 yarn 命令不存在，可以使用 npm i yarn -g 安装 yarn

启动项目

yarn start

打包

yarn build

代码检查

yarn lint

代码格式化

yarn format

api 配置

在 .env 中的 TARGET 字段配置了接口的反向代理地址

若服务器设置了允许跨域请求，可以直接在 PREFIX 设置请求前缀

如需添加新接口可以在 src/apis/index.js 中添加

布局

src/layouts/mainLayout/index.js 中配置了一个 layout，非登录页都会使用这个布局。 包含侧边栏、头部登出等配置

登录

登录页面中配置了一个基础的表单、接口使用的是 http://yapi.wpt.la/project/62/interface/api/250、使用账号 admin 、密码 admin。登录成功后会跳转到主页面。

账号密码错误会返回 401 错误。

ps: 可以使用 enter 键登录

模版

src/pages/template 中包含了两个基础文件、新页面可以拷贝这两个文件使用 在 src/pages 中创建一个新目录，拷贝文件后即可使用。目录对应路由为 /目录名，由 umi 自动生成

CI

CI 目前接入 Drone CI

master 和 develop 分支有代码提交时会有钉钉通知

t* 分支有提交时，会自动部署代码到对应测试环境，如 t2 则部署到 2 环境

钉钉通知需要在 Drone CI 中配置 token 字段

新项目接入 CI，请联系运维 @姜伯洋 添加服务器相关配置

编辑器

编辑器推荐 vscode

vscode eslint 插件

eslint 插件用来检查代码错误

安装

code --install-extension dbaeumer.vscode-eslint

配置自动修复

setting.json

"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "js",
    "autoFix": true
  }
],

贡献者

maors

有问题或者建议请 @茅日盛