【共享单车】—— React后台管理系统开发手记:项目准备

前言:以下内容基于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特点
  1. Declarative(声明式编码)
  2. Component-Based(组件化编码)
  3. 高效 -- 高效的DOM Diff算法,最小化页面重绘
  4. 单向数据流
  • MV*框架代表 - 只关注视图View层+数据层Model
  • 生态介绍
  1. Vue生态:Vue + Vue-Router + Vuex + Axios + Babel + Webpack
  2. React生态:React + React-Router + Redux + Axios + Babel + Webpack
  • 编程式实现VS声明式实现
  1. 编程式实现:需要以具体代码表达在哪里(where)做什么(what),如何实现(how)
  2. 声明式实现:只需要声明在哪里(where)做什么(what),不需要关心如何实现(how)

React脚手架、Yarn介绍

  • 安装和使用React脚手架

    npm install -g create-react-app
    create-react-app my-app
    cd my-app
    npm start
  • Yarn的介绍
  1. Yarn是新一代包管理工具 (npm也是包管理工具)
  2. Yarn修复了npm的一些缺陷,提升了某些方面的性能
  3. 优点:速度快,安装版本统一、更安全,更简洁的输出,更好的语义化
  • Yarn的使用
  1. 安装:

    npm install -g yarn  
  2. 初始化:

    yarn init  
  3. 添加一个包:

    yarn add
  4. 删除一个包:

    yarn remove  
  5. 安装项目所有依赖包:

    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
  1. create-react-app默认安装版本是2.03了,其中有些改变:
  2. https://blog.csdn.net/qwe502763576/article/details/83242823
  3. 小技巧:VScode打开内嵌终端窗口,可以输入命令行
  • 启动项目

    yarn start  

四、AntD

普通使用:引入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引入项目行内样式
             }],
  1. 这个在package.json/babelrl/webpack.config.js中配置都可以,pugins是个二维数组!!
  2. 相当于直接把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);
    }
  1. primary-color是antd的less变量,修改时可以修改项目的主色调
  2. 注意:修改完配置项之后,必须要重新启动!!


注:项目来自慕课网

原文地址:https://www.cnblogs.com/ljq66/p/10188202.html

时间: 2024-11-03 14:15:33

【共享单车】—— React后台管理系统开发手记:项目准备的相关文章

【共享单车】—— React后台管理系统开发手记:主页面架构设计

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.页面结构定义 左侧导航栏,右侧页面结构 右侧显示内容分别分为上Header.中Content和下Footer部分 二.目录结构定义 src->admin.js:项目主结构代码(index.js中替换App.js挂载到根节点) src->common.js:项目公共结构代码(类似admin.j

【共享单车】—— React后台管理系统开发手记:AntD Form基础组件

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.使用Form组件开发登录页面 pages->form->login.js:对应路由/admin/form/login import React from 'react' import {Card, Form, Input, Button, message, Icon, Checkbox} f

【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.React Router 4.0核心概念 4.0版本中已不需要路由配置,一切皆组件 react-router:基础路由包 提供了一些router的核心api,包括Router,Route,Switch等 react-router-dom:基于浏览器的路由(包含react-router) 提供了

【共享单车】—— React后台管理系统开发手记:城市管理和订单管理

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.城市管理 pages->city->index.js:对应路由/admin/city 顶部子组件一:选择表单 class FilterForm extends React.Component{ render(){ const { getFieldDecorator } = this.prop

【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.按钮Button pages->ui->button.js:对应路由/admin/ui/buttons import React from 'react'; import {Card, Button, Radio} from 'antd' import './ui.less' class B

【共享单车】—— React后台管理系统开发手记:AntD Table高级表格

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.头部固定 scroll属性:设置横向或纵向滚动,也可用于指定滚动区域的宽和高 <Card title="头部固定"> <Table bordered columns={columns} dataSource={this.state.dataSource} pagin

【共享单车】—— React后台管理系统开发手记:AntD Table基础表格

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.基础表格 Table组件基础Api bordered属性:是否展示外边框和列边框 columns属性:表格列的配置描述(即表头) dataSource属性:数据数组 pagination属性:分页器,设为 false 时不展示和进行分页 <Card title="基础表格"&g

【共享单车】—— React后台管理系统开发手记:权限设置和菜单调整(未完)

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.创建角色 权限菜单设计:RBAC权限模型(详解链接) RBAC,即基于角色的访问控制(Role-Based Access Control),是优秀的权限控制模型 主要通过角色和权限建立管理,再赋予用户不同的角色,来实现权限控制的目标 角色列表展示:对应Easy Mock数据接口/role/li

asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里讲的主要是通过Codefirst方式实现的. 一.M层简单介绍 1.M层很形象的将数据库里面的各个表格映射成了C#当中的类,比如上篇文章创建的用户表: ? 1 2 3 4 5 6 7 8 9 10 11 12 CREATE TABLE [dbo].[SYS_USER](          [ID]