【招聘App】—— React/Nodejs/MongoDB全栈项目：项目准备

前言：最近在学习Redux+react+Router+Nodejs全栈开发高级课程，这里对实践过程作个记录，方便自己和大家翻阅。最终成果github地址：https://github.com/66Web/react-antd-zhaoping，欢迎star。

---

一、项目概述

 

 

二、需求分析

      

• 文件架构和规范

1. src目录：前端源码目录
2. server目录：后端express目录
3. 根据功能文件夹：component，container，reducers等

• router划分页面方式

1. 进入应用时获取用户信息，用户未登录跳转login页面
2. Login和reigster页面不需要权限认证
3. 用户信息，聊天列表，职位列表页面共享底部tabbar

• 其它注意事项

1. Mongodb字段设计
2. axios发送异步请求
3. redux管理所有数据，组件尽量用antd-mobile，弱化css

 

三、React开发环境

• Ceate-reacp-app脚手架生成文件格式

1. 官网：https://github.com/facebookincubator/create-react-app
2. 全局安装：

   npm install -g create-react-app　　

3. 新建项目：

   create-react-app my-project　　

4. 开启调试环境：

   npm start　　

5. 查看调试页面：浏览器访问localhost:3000

• 脚手架命令

1. 安装第三方库redux：

   npm install redux --save　　

2. 弹出配置文件，自定义配置webpack：

   npm run eject　　

3. 扩展package.json里的script字段，扩展npm run命令

 

四、ES6常用语法

• ES6是新的JavaScript语法规范

1. 使用babel语法转换器，支持低端浏览器
2. 流行的库基本都属于ES6构建，React默认使用ES6新语法开发

• ES6语法概述：块级作用域、字符串、函数、对象扩展、解构、类、模块化

 

五、AntD-Mobile组件库 

• 蚂蚁金服出品的UI组件库：antdesignPC端使用，ant-mobile移动端使用

• Ant Design Mobile：一个基于 Preact / React / React Native 的 UI 组件库

1. 官网：https://mobile.ant.design/index-cn   【AntUI文档】
2. 安装：

   npm install antd-mobile --save
   //或使用yarn更块
   yarn add antd-mobile --save　　

• 使用组件

  import {Button} from 'antd-mobile'
  import 'antd-mobile/dist/antd-mobile.css'　//全部加载　

• 按需加载

1. 安装babel-plugin-import（之后就可以不用引入css）

   yarn add babel-plugin-import --save

2. 配置：修改package.json中的bable项

   "plugins":[
       ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 会加载 less 文件
   ]

3. 个性化配置需要执行

   npm run eject　　

• 兼容Web和ReactNative

• 常用组件：Import后可以直接使用

1. Layout 布局组件
2. 表单组件，数据展示组件，选择器等等
3. 操作组件

 

六、前后端联调

• 使用axios发送异步请求

• axios：简洁好用的发送请求库

  npm install axios --save

• 如何发送：端口不一致，使用proxy配置转发

1. package.json中：使用proxy统一端口

   "proxy":"http://localhost:9093" //所有端口都转换到9093 　　

2. 获取数据（不使用redux的情况）

   import axios from 'axios'
   
   constructor(props){
       super(props)
       this.state = {
            data: {}
       } 
   }
   
   componentDidMount(){
        axios.get('/data')
           .then(res => {
                   if(res.status == 200){
                      this.setState({data: res.data})
                   } 
                   //console.log(res)
          }) 
   }
   
   <h2>我的名字是{this.state.data.user}</h2>　　

• 使用redux获取数据

1. redux.js中：使用异步数据

   import axios from 'axios'
   
   const USER_DATA = 'USER_DATA'
   
   const initState = {
           user: '李云龙',
           age: 20
   }
   export function auth(state=initState,action){
           switch(action.type){
                case USER_DATA:
                     return {...state, ...action.payload}
                default:
                     return state  
           }
   }
   
   //获取异步数据：axios.get,post发送请求，返回promise对象；Redux里获取数据，然后dispatch即可
   export function getUserdata(){
           //dispatch用来通知数据修改
           return dispatch => {
                axios.get('/data')
                  .then(res => {
                     if(res.status == 200){
                       dispatch(userData(res.data)
                     }    
                     //console.log(res)
                })    
           }
   }
   export function userData(data){
           return {type:USER_DATA, payload:data}
   }　　

2. Auth.js中：渲染页面

   import {connect} from 'react-redux'
   
   import {getUserData} from './Auth.redux'
   
   componentDidMount(){
          this.props.getUserData()
   }
   
   <h2>我的名字是{this.props.user}，年龄{this.props.age}</h2>
   
   Auth = connect()(Auth) 
   export default Auth;　　

• axios拦截器，统一loading处理

1. config.js中：专门配置axios，Axios.interceptors设置拦截器，比如全局的loading

   import axios from 'axios'
   import {Toast} from 'antd-mobile'  //轻提示
   
   //拦截请求
   axios.interceptors.request.use(function(config){
            Toast.loading('加载中',0)
            return config
   })
   
   //拦截响应
   axios.interceptors.response.use(function(config){
            Toast.hide()
            return config
   })

2. index.js中：应用axios和antd配置

   import './config'
   import 'antd-mobile/dist/antd-mobile.css'
   

 

七、项目环境搭建

• 安装

  yarn  add  antd-mobile   babel-plugin-import  axios  express、
             mongoose  react-redux  redux   redux-thunk
             redux-devtools-extension   cookie-parser  --save
  

  yarn add babel-plugin-transform-decorators-legacy --save-dev

• 配置

  "babel": {
      "presets": [
        "react-app"
      ],
      "plugins": [
        [
          "import",
          {
            "libraryName": "antd-mobile",
            "style": "css"
          }
        ],
        ["@babel/plugin-proposal-decorators",
          { "legacy": true }
        ]
      ]
    },
    "proxy":"http://localhost:9093"

• reducer.js：合并所有reducer的文件

  //合并所有reducer，并且返回
  import {combineReducers} from 'redux'
  
  export default combineReducers({})  //暂无reducer　　

---

注：项目来自慕课网