React全家桶打造共享单车后台管理系统项目_第1篇_项目环境搭建_首页编写

1.项目介绍

项目github地址：https://github.com/replaceroot/React-manageSystem

 项目整体架构：

课程大纲：

    第一章：React基础知识

    第二章：主页面架构设计

    第三章：Router4.0 路由实战演练

    第四-六章：常用UI组件

    第七、八章：单车业务基本功能开发

    第九章：项目工程化开发

    第十到十三章：单车业务核心模块开发

    第十四章：Redux集成

 

补充：调用setState之后会并列调用should update，will update，did update生命周期函数

Babel插件的作用：解析E6达到兼容效果

2.项目环境搭建

2.1 安装包

yarn add react-router-dom axios --dev

2.2 安装支付宝UI组件

yarn add antd

2.3 配置antd组件按需加载

yarn add react-app-rewired customize-cra

修改`package.json`配置文件的`scripts`字段

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

记录一个小坑：

如果遇到错误，将 react-scripts添加到dev依赖中。

  yarn add react-scripts --dev

如果遇到找不到babel模块的错误，就将整个 modules删除，然后重新yarn install安装一下就能解决。

重新运行项目，此时就能正常显示Button按钮了。

import React from "react";
import Child from "./Child";
import { Button } from 'antd';
import "./index.less";

export default class Life extends React.Component {
  state = {
    count:
  };

  handleAdd = () => {
    this.setState({
      count: this.state.count +
    });
  };

  render(){
    return (
      <div className="demo">
        <input type="text" placeholder="请输入内容..."/>
        <Button onClick={this.handleAdd}>点击一下</Button>
        <p>{this.state.count}</p>
        {/* 给子组件传参 */}
        <Child name={this.state.count}></Child>
      </div>
    )
  }
}

但是有一个问题，就是我们配置的less没有生效，下面解决Less和按钮主题颜色问题。

yarn add less less-loader

按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件如下。

- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

到这里， 基本的环境算是搭建好了，坑是真的多，也只能自己摸索，百度、Google查文档，做记录总结。

3.项目主页面编写

3.1 目录结构

具体代码参考我的github的commit代码

布局使用的栅格系统：https://ant.design/components/grid-cn/

左侧菜单渲染：https://ant.design/components/menu-cn/

具体实现可以参考我github上的源码和官网给出的demo的源码进行对比就知道我如何使用的。

3.2左侧菜单动态渲染

重点就是动态渲染的代码

import React from "react";
import { Menu, Icon, Divider } from "antd";
import menuConfig from "../../config/menuConfig";
import "./index.less";
const { SubMenu } = Menu;

export default class NavLeft extends React.Component {
  // 加载时的生命周期函数
  componentWillMount() {
    const menuTreeNode = this.renderMenu(menuConfig);
    this.setState({
      menuTreeNode
    });
  }

  // 菜单动态渲染
  renderMenu = data => {
    return data.map(item=>{
        // 如果item中还有子项,那么就把子项递归遍历渲染到页面
      if(item.children){
        return (
          <SubMenu title={item.title} key={item.key}>
            {this.renderMenu(item.children)}
          </SubMenu>
        );
      }
      return <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
    })
  };

  render() {
    return (
      <div>
        <div className="logo">
          <img src="assets/logo-ant.svg" alt="" />
          <h1>木子单车管理系统</h1>
        </div>
        <Menu theme="dark">{this.state.menuTreeNode}</Menu>
      </div>
    );
  }
}

index.js

3.3 header头部页面实现

这个部分需要发送跨域请求百度天气的API来获取数据渲染，需要安装一个JsonP。

yarn add jsonp

这里部分需要使用jsonp封装一个axios来发送跨域请求，这里涉及了jsonp使用和ES6中promise的使用方法，如果忘记了这些技术，赶紧翻下以前的笔记，百度看下博客吧。

简单的jsonp demo

getjsonp(){
    // jsonp能发起跨域请求
    this.$http.jsonp('http://127.0.0.1:3003/getlist')
        .then((res) => {
        console.log(res)
    },(err) => {
        console.log(err)
    })
}

// 封装axios发送跨域请求
import JsonP from 'jsonp'
export default class Axios {
  /* 这里使用static关键字声明了一个静态方法，实例不能直接调用，只能通过类来调用 */
  static jsonp(options){
    // 成功就是resolve，失败就是reject
    return new Promise((resolve, reject)=>{
      JsonP(options.url, {
        params: 'callback'
      }, function(err, response){
        if(response.status === 'success'){
          resolve(response)
        }else {
          reject(response.message);
        }
      })
    })
  }
}

给axios封装jsonp方法

/* 封装一个格式化时间戳的方法 */

export default {
  formateDate(time) {
    // 如果为空就返回空字符串
    if (!time) return "";
    let date = new Date(time);
    return (
      date.getFullYear() +
      "-" +
      (date.getMonth() + 1) +
      "-" +
      date.getDate() +
      " " +
      date.getHours() +
      ":" +
      date.getMinutes() +
      ":" +
      date.getSeconds()
    );
  }
};

封装格式化日期方法

3.4 Footer页面以及content内容区域实现

增加小箭头样式

/* 实现小箭头 */
      &:after{
        position: absolute;
        content: '';
        left: 110px;
        top:39px;
        border-top: 9px solid @colorM;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;

       }

Header/index.less

到此为止首页就编写完成了，以后会根据课程的目录来更新React路由相关的知识，其他业务功能的实现。

总结一下：很多都是基础知识，稍微难一点的就是Promise、jsonp、还有初期的环境搭建遇到的几个坑，几乎没有太难的知识点，结构和flex布局相关的内容就是一个熟练度的问题，代码量上去了，看到一个效果就知道要怎么实现，多敲多练多思考就完事了。