# 共享单车后台管理

**Repository Path**: athmoon/bike

## Basic Information

- **Project Name**: 共享单车后台管理
- **Description**: react共享单车后台管理系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-03-04
- **Last Updated**: 2024-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 启动项目命令：yarn start（需下载安装依赖）

## 技术栈：react、router、redux、ant-design、less、webpack

## 简单描述：项目基于create-react-app脚手架进行创建，数据基于fastmock创建，接口地址：https://www.fastmock.site/mock/b187e7691277665a9024766157b6aac3/imooc/table/list


## 安装插件
1.yarn add react-router-dom axios less-loader antd
2.暴露webpack配置文件


## 项目难点：公共机制封装
1.axios请求插件封装: 动态表格、请求列表 数据封装、
2.api封装；
3.错误拦截；
4.权限、菜单、日期、金额、手机号封装；


## 性能优化
1.安装babel-plugin-import插件，实现按需加载，即项目中用到什么样的组件，就引入对应的css。注：安装完后直接在package.json配置相关代码 【不需要再从文件头部引入antd/dist/antd.css，这样会加载全部的 antd 组件的样式文件，性能较差】。


## 项目工程化
    项目架构设计
    目录结构定义
    制定项目开发规范（ESLint规范）
    模块化、组件化
    前后端接口规范
    性能优化、自动化部署（压缩、合并、打包）


## 项目主页结构开发: admin.js
    + 主页结构定义
        - 页面结构定义 
        - 目录结构定义
        - 栅格系统使用
        - calc计算方法使用

## 运行截图：
![输入图片说明](https://images.gitee.com/uploads/images/2021/0618/152814_5f29da37_7467590.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0618/153003_2b90f4b9_7467590.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0618/153103_3c667c01_7467590.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0618/152547_076f6e7b_7467590.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0618/153144_9e3392aa_7467590.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0618/153236_6b91bf28_7467590.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0618/153301_cb16f21e_7467590.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0618/153400_95179f2a_7467590.png "屏幕截图.png")