正文

共享单车——react后台管理系统开发手记：项目准备

ljq66  ljq66  2023-02-20  369

关键词：

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。

一、项目概述

React全家桶

React基础知识、生命周期
Router 4.0 语法讲解
Redux集成开发

AnD UI组件

最实用基础组件
AntD栅格系统
ETable组件封装
BaseForm组件封装
表格内嵌单选、复选封装

公共机制封装

Axios请求插件封装
API封装
错误拦截
权限、菜单封装
日期、金额、手机号封装...

项目整体架构

Mock-Server -> json
核心框架库：React16、Router4.0、Redux
中间件和插件：Axios、Map、ECharts、AntD
公共机制：菜单、权限、Header、Footer、ETable、EForm、Loading、API、Axios...

收获

React全家桶技能
地图和React集成技能
前端图表开发技巧
基于React的UI框架 - AntD
前端后台架构设计、公共机制封装、后台管理系统开发经验

二、React介绍

React基础

Facebook开源的一个JavaScript库
React结合生态库构成一个MV*框架

React特点

Declarative（声明式编码）
Component-Based(组件化编码）
高效 -- 高效的DOM Diff算法，最小化页面重绘
单向数据流

MV*框架代表 - 只关注视图View层+数据层Model

生态介绍

Vue生态：Vue + Vue-Router + Vuex + Axios + Babel + Webpack
React生态：React + React-Router + Redux + Axios + Babel + Webpack

编程式实现VS声明式实现

编程式实现：需要以具体代码表达在哪里（where）做什么（what）,如何实现（how）
声明式实现：只需要声明在哪里（where）做什么（what）,不需要关心如何实现（how）

React脚手架、Yarn介绍

安装和使用React脚手架

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

Yarn的介绍

Yarn是新一代包管理工具（npm也是包管理工具）
Yarn修复了npm的一些缺陷，提升了某些方面的性能
优点：速度快，安装版本统一、更安全，更简洁的输出，更好的语义化

Yarn的使用

安装：
```
npm install -g yarn　　
```
初始化：
```
yarn init　　
```
添加一个包：
```
yarn add
```
删除一个包：
```
yarn remove　　
```
安装项目所有依赖包：
```
yarn/yarn install　
```

构建项目的配置

npm install -g yarn
npm install -g create-react-app
create-react-app bike-manager
cd bike-manager
yarn add react-router
yarn remove react-router

实际开发中，不使用react-router，只使用react-router-dom

三、基础插件安装，Less文件加载配置

安装React-router、Axios
```
yarn add react-router-dom axios
```
安装AntD （基于Less开发）
```
yarn add antd
```
暴露webpack
```
yarn eject
```
注：如果yarn eject 报错的解决的方法
```
git add .
git commit -m ‘注释‘
yarn eject
```
安装less less-loader
```
yarn add less less-loader
```
修改less-loader

create-react-app默认安装版本是2.03了，其中有些改变:
https://blog.csdn.net/qwe502763576/article/details/83242823
小技巧：VScode打开内嵌终端窗口，可以输入命令行

启动项目
```
yarn start　　
```

四、AntD

官网：https://ant.design/index-cn

普通使用：引入UI组件和css文件

@import ‘antd/dist/antd.css‘

import Button from ‘antd‘

按需加载css文件内容【只会打包所需组件，减少请求量】

安装babel-plugin-import插件：
```
yarn add babel-plugin-import
```
实现按需加载所需的css，而不是每次都引入所有的css

webpack.config.js中在babel-loader配置处配置：完整如下↓


   test: /.(js|mjs|jsx|ts|tsx)$/,
   include: paths.appSrc,
   loader: require.resolve(‘babel-loader‘),
   options: 
      customize: require.resolve(
         ‘babel-preset-react-app/webpack-overrides‘
      ),
      plugins: [
         //要插入的内容
         [‘import‘, 
             libraryName: ‘antd‘, //libraryName表示导出的库名，
             style: ‘css‘  //style表示将css引入项目行内样式
         ],

这个在package.json/babelrl/webpack.config.js中配置都可以，pugins是个二维数组！！
相当于直接把antd.less文件引入到项目js中，不用再引入import ‘antd/dist/antd.css‘

定制主题：修改less变量

"style": true  //true标识直接加载antd的less文件

坑：编译失败，前面只是引入使用了less-loader,并没有添加配置项

解决：最新的react脚手架版本中，配置文件中关于css的rules中的use值被提到外部声明成了一个配置函数，函数返回该样式文件类型所需要的loader数组

if (preProcessor) 
    let loader = 
         loader: require.resolve(preProcessor),
         options: 
              sourceMap: shouldUseSourceMap,
         ,
    
    if (preProcessor === "less-loader") 
        loader.options.modifyVars = 
            ‘primary-color‘: ‘#f9c700‘
        
        loader.options.javascriptEnabled = true
    
    loaders.push(loader);

primary-color是antd的less变量，修改时可以修改项目的主色调
注意：修改完配置项之后，必须要重新启动！！

注：项目来自慕课网

共享单车——react后台管理系统开发手记：主页面架构设计(代码片段)

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、页面结构定义左侧导航栏，右侧页面结构右侧显示内容分别分为上Header、中Content和下Fo... 查看详情

共享单车——react后台管理系统开发手记：antdform基础组件(代码片段)

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、使用Form组件开发登录页面 pages->form->login.js：对应路由/admin/form/loginimportReactfrom... 查看详情

共享单车——react后台管理系统开发手记：城市管理和订单管理

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、城市管理pages->city->index.js：对应路由/admin/city顶部子组件一：选择表单classFilterFormextends... 查看详情

共享单车——react后台管理系统开发手记：antdtable基础表格(代码片段)

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、基础表格Table组件基础Apibordered属性：是否展示外边框和列边框columns属性：表格列的配... 查看详情

共享单车——react后台管理系统开发手记：权限设置和菜单调整（未完）

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、创建角色权限菜单设计：RBAC权限模型（详解链接）RBAC，即基于角色的访问控制（R... 查看详情

共享单车——react后台管理系统开发手记：antdtable高级表格(代码片段)

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、头部固定scroll属性：设置横向或纵向滚动，也可用于指定滚动区域的宽和高<Cardtitle="头部... 查看详情

共享单车——react后台管理系统开发手记：router4.0路由实战演练(代码片段)

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、ReactRouter4.0核心概念 4.0版本中已不需要路由配置，一切皆组件react-router：... 查看详情

react全家桶+antd共享单车后台管理系统开发

第1章课程导学对课程整体进行介绍，并且说明学习的必要性。1-1课程导学第2章React基础知识React基础知识以及生命周期的介绍，并使用React官方脚手架初始化基础项目，同时介绍了新一代打包工具Yarn。2-1React基础介绍2-2React脚手... 查看详情

基于java+jsp+mysql共享单车管理系统的设计与实现

...车，需要开发一套利用计算机进行管理的JSP共享单车管理系统。本项目利用软件工程原理，采用面向对象的编程方法，其开发主要包括后台MySQL数据库的建立、维护以及前端应用程序开发，实现了共享单查看详情

基于java组合优化算法的共享单车管理系统.zip(论文+项目源码)

...景下的国内外现状进行阐述并且研究。构造一个共享单车管理系统以及实现一些主要功能模块设计。该文所设计的系统主要是采用jsp的mvc技术、mysql数据库、Tomcat服务器、springboot框架作为开发平台，系统采用B/S结构进行开发&... 查看详情

共享单车的定位系统芯片是放在单车的啥位置上

...能锁中SKC111的中心控制单元通过GPRS无线通信模块与后台管理系统进行连接，把从GPS+BDS模块获取的位置信息发送给后台管理系统；同时支持上传单车智能锁的电量信息。后台管理系统通过共享单车GPRS无线通信模块向中心控制单元... 查看详情

基于springboot的共享单车系统

开发语言：Java框架：springbootJDK版本：JDK1.8服务器：tomcat7数据库：mysql5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：Maven3.3.9浏览器& 查看详情

共享单车是如何将二维码与自行车联系在一起的

...定地点，触发电子控制模块，手动关锁，发出信号，后台管理系统结束计，自动获取单车所在位置，计算扣费。查看详情

共享单车的定位系统是位于单车的哪里

共享单车的定位系统是位于单车的后轮的锁里面。摩拜共享单车，提到内置GPS加智能手机实现无桩共享单车。其通过新一代物联网、云计算和大数据技术将超过百万量级的摩拜单车与用户手机上的摩拜APP相连接，实现精准定位车... 查看详情

系统分析与设计-第七次作业

系统分析与设计-第七次作业请根据ofo共享单车App用车业务描述，绘制如下几个图：1、ofo共享单车App用车业务的用例图2、ofo共享单车App用车业务的活动图3、ofo共享单车App领域模型4、ofo共享单车App用车业务的状态图5、ofo... 查看详情

e01：后台管理系统开发-开发环境搭建(代码片段)

ReactHooks+Laravel后端博客实战阐述用脚手架生成项目安装和引入AntDesign阐述前台的主要功能我们已经开发完成了，接下来我们开始制作后台博客的管理界面。后台将采用ReactHooks+AntDesign，我们主要会对博客文章的管理和登录系统进... 查看详情

e01：后台管理系统开发-开发环境搭建(代码片段)

基于ssm框架的校园共享单车管理系统

技术栈后端:SSM（Spring+SpringMVC+Mybatis)前端：Layui+JQuery+ajax+json数据库：MySQL5.5及以上服务器：Tomcat8及以上开发软件：eclipse+JDK1.8其他：使用echart图表插件完成视图部分数据库设计系统介绍学... 查看详情