# 基于react和ant Design的商城后台管理系统前端部分

**Repository Path**: halabs/react-admin

## Basic Information

- **Project Name**: 基于react和ant Design的商城后台管理系统前端部分
- **Description**: 使用react和ant Design开发的一个电商的后台管理系统的前端模块
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-11-05
- **Last Updated**: 2022-05-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Redux, Ant-Design, react-router-dom

## README

## 自定cra配置
+ 安装
```js
npm i @craco/craco -D
```
+ 根目录下创建 craco.config.js
```js

module.exports = {    
  babel: { // 自定babel配置
      presets: [],
      plugins: [],
      loaderOptions: {

      }
  },
  webpack: { // 定义webpack别名 添加插件
      alias: {},
      plugins: {
          add: [], /* An array of plugins */
      }
  },
  devServer: {  // 自定义服务器

  }

};
```
+ 修改package.json
```json
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
```

注意：修改完配置 要重启

## react常用组件库
+ antd  蚂蚁金服
+ antd-mobile 

## 后台管理基础路由
/admin admin
  二级路由
    仪表盘
    商品管理
    增加商品
    更新商品
    消息中心
    设置
登录页
404页

## mock接口
意义：前端分离开发，前后端 是同时进行的，前端开发时 后端接口还没好，可以自己模拟接口（正常发送ajax，注意 返回的模拟接口字段 一定要和真实字段保持一致）

### 本地利用mockjs这个库模拟
原理：生成随机数，拦截ajax请求
```js
npm i mockjs -D

const Mock = require('mockjs');
// 模拟接口 两个参数 1 接口地址 2 返回的数据
Mock.mock('/api/itemLists', {
  code: 200,
  msg: 'success',
  "data|20": [

  ]
})

// 修饰长度 （写在字段名中） 数组 number(大小) 字符串 id(+1)
{
  "data|10": [] // 数组长度是10
}
{
  "data|10-20": [] // 数组长度是10到20之间
}

{
  "num|10-100": 10 // 产生10-100的随机数字
}

{
  "str|5-10": "☆" // 产生5-10 ☆ 也可以固定长度
}

{
  "id|+1":1 // 一般写在数组 自增1 初始值1 从1 开始
}

// 占位符 定义在 值中 写在引号中
{
  "data|10-20": [
    {
      "id|+1": 1,
      itemName: '@ctitle', //产生随机中文标题
      desc: '@cparagraph',
      color: '@color',
      thumb:"image('100x100', '@color', '小甜甜')"
    }
  ]
}

```


类型	方法
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle



占位符有：
<table>
<thead>
<tr>
<th>类型</th>
<th>方法</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>boolean, natural, integer, float, character, string, range, date, time, datetime, now</td>
</tr>
<tr>
<td>Image</td>
<td>image, dataImage</td>
</tr>
<tr>
<td>Color</td>
<td>color</td>
</tr>
<tr>
<td>Text</td>
<td>paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle</td>
</tr>
<tr>
<td>Name</td>
<td>first, last, name, cfirst, clast, cname</td>
</tr>
<tr>
<td>Web</td>
<td>url, domain, email, ip, tld</td>
</tr>
<tr>
<td>Address</td>
<td>area, region</td>
</tr>
<tr>
<td>Helper</td>
<td>capitalize, upper, lower, pick, shuffle</td>
</tr>
<tr>
<td>Miscellaneous</td>
<td>guid, id</td>
</tr>
</tbody>
</table>

### 在线mock工具 easymock  rap2.taobao.org
可以真实发送请求，利用mockjs产生这个接口返回数据随机值


## 用户角色鉴权
+ 静态
  角色基本固定（不会随时改变）
  实现思路：
    所有权限路由在前端定义好，每个路由规则中定义一个 roles字段，代表该路由可以访问的所有的角色的数组
    鉴权：
      1 定义一个没有权限路由（页面），在路由拦截中判断登录时缓存的role是否在当前路由的 roles字段中，包含可以访问当前路由 放行
      否则 重定向到 没有权限这个页面
      ```js
        router.beforeEach(() => {

        })
      ```
     2 直接挂载routes之前 对于 routes做 filter过滤，将当前用户角色无法访问路由直接 过滤掉
     ```js
      let routes = []

      routes = routes.filter()
      const router = new VueRouter({
        routes
      })
     ```
  优点：
    实现思路简单，不需要后端怎么配合
  缺点：
    用户角色包括路由是在前端定死的，如果后续想要新增 角色，需要 重新 修改开发环境代码，再重新部署到服务器上
  适用于：
    角色比较固定的 后台管理项目
+ 动态
  在前端，只定义 基础路由，角色权限路由 存储在数据库中，用户在登录时，拿到token,再发请求传token，得到当前角色 所有的路由表，缓存起来，vue，路由的前置守卫中，取缓存  通过 router.addRoutes 动态添加 （router.addRoute）
优点：
  动态路由，可以随时增加新的角色 只需要修改数据库即可，不需要重新部署项目
缺点：
  代码有点复杂