# 后端部后台 前端项目

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

别再问了......




# 精简模版项目 [](<!-- omit in toc -->) [![Build Status](http://drone.wpt.la/api/badges/share/template/status.svg)](http://drone.wpt.la/share/template)
![](https://gitlab.weipaitang.com/share/resource/raw/master/1.png)
![](https://gitlab.weipaitang.com/share/resource/raw/master/2.png)

<br>

- [目录结构](#%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84)
- [使用](#%e4%bd%bf%e7%94%a8)
  - [安装依赖](#%e5%ae%89%e8%a3%85%e4%be%9d%e8%b5%96)
  - [启动项目](#%e5%90%af%e5%8a%a8%e9%a1%b9%e7%9b%ae)
  - [打包](#%e6%89%93%e5%8c%85)
  - [代码检查](#%e4%bb%a3%e7%a0%81%e6%a3%80%e6%9f%a5)
  - [代码格式化](#%e4%bb%a3%e7%a0%81%e6%a0%bc%e5%bc%8f%e5%8c%96)
- [api 配置](#api-%e9%85%8d%e7%bd%ae)
- [布局](#%e5%b8%83%e5%b1%80)
- [登录](#%e7%99%bb%e5%bd%95)
- [模版](#%e6%a8%a1%e7%89%88)
- [CI](#ci)
- [编辑器](#%e7%bc%96%e8%be%91%e5%99%a8)
- [vscode eslint 插件](#vscode-eslint-%e6%8f%92%e4%bb%b6)
  - [安装](#%e5%ae%89%e8%a3%85)
  - [配置自动修复](#%e9%85%8d%e7%bd%ae%e8%87%aa%e5%8a%a8%e4%bf%ae%e5%a4%8d)
- [贡献者](#%e8%b4%a1%e7%8c%ae%e8%80%85)

<br>

## 目录结构
```
├── 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
```

<br>

## 使用

### 安装依赖
推荐使用 yarn 安装依赖
```bash
yarn
```

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

### 启动项目
```bash
yarn start
```

### 打包
```bash
yarn build
```

### 代码检查
```bash
yarn lint
```

### 代码格式化
```bash
yarn format
```

<br>

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

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

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

<br>

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

<br>

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

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

ps: 可以使用 enter 键登录

<br>

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

<br>

## CI
CI 目前接入 [Drone CI](http://drone.wpt.la)

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

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

钉钉通知需要在 [Drone CI](http://drone.wpt.la) 中配置 token 字段

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

<br>

## 编辑器
编辑器推荐 [vscode](https://code.visualstudio.com/)

## vscode eslint 插件
eslint 插件用来检查代码错误

### 安装
```bash
code --install-extension dbaeumer.vscode-eslint
```

### 配置自动修复
setting.json
```bash
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "js",
    "autoFix": true
  }
],
```

<br>

## 贡献者
| <img src="https://gitlab.weipaitang.com/uploads/-/system/user/avatar/145/avatar.png" width="100px;"/><br/> <center><sub>maors</sub> </center> |
| --- |

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