前言：最近在学习Redux+react+Router+Nodejs全栈开发高级课程，这里对实践过程作个记录，方便自己和大家翻阅。最终成果github地址：，欢迎star。
一、项目概述
二、需求分析
- 文件架构和规范
- src目录：前端源码目录
- server目录：后端express目录
- 根据功能文件夹：component，container，reducers等
- router划分页面方式
- 进入应用时获取用户信息，用户未登录跳转login页面
- Login和reigster页面不需要权限认证
- 用户信息，聊天列表，职位列表页面共享底部tabbar
- 其它注意事项
- Mongodb字段设计
- axios发送异步请求
- redux管理所有数据，组件尽量用antd-mobile，弱化css
三、React开发环境
- Ceate-reacp-app脚手架生成文件格式
- 官网：
- 全局安装：
npm install -g create-react-app
- 新建项目：
create-react-app my-project
- 开启调试环境：
npm start
- 查看调试页面：浏览器访问localhost:3000
- 脚手架命令
- 安装第三方库redux：
npm install redux --save
- 弹出配置文件，自定义配置webpack：
npm run eject
- 扩展package.json里的script字段，扩展npm run命令
四、ES6常用语法
- ES6是新的JavaScript语法规范
- 使用babel语法转换器，支持低端浏览器
- 流行的库基本都属于ES6构建，React默认使用ES6新语法开发
- ES6语法概述：块级作用域、字符串、函数、对象扩展、解构、类、模块化
五、AntD-Mobile组件库
- 蚂蚁金服出品的UI组件库：antdesignPC端使用，ant-mobile移动端使用
- Ant Design Mobile：一个基于 Preact / React / React Native 的 UI 组件库
- 官网： 【】
- 安装：
npm install antd-mobile --save//或使用yarn更块yarn add antd-mobile --save
- 使用组件
import {Button} from 'antd-mobile'import 'antd-mobile/dist/antd-mobile.css' //全部加载 - 按需加载
- 安装babel-plugin-import（之后就可以不用引入css）
yarn add babel-plugin-import --save
- 配置：修改package.json中的bable项
"plugins":[ ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 会加载 less 文件] - 个性化配置需要执行
npm run eject
- 兼容Web和ReactNative
- 常用组件：Import后可以直接使用
- Layout 布局组件
- 表单组件，数据展示组件，选择器等等
- 操作组件
六、前后端联调
- 使用axios发送异步请求
-
axios：简洁好用的发送请求库
npm install axios --save
- 如何发送：端口不一致，使用proxy配置转发
- package.json中：使用proxy统一端口
"proxy":"http://localhost:9093" //所有端口都转换到9093
- 获取数据（不使用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) }) }我的名字是{this.state.data.user}
- 使用redux获取数据
- 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}} -
Auth.js中：渲染页面
import {connect} from 'react-redux'import {getUserData} from './Auth.redux'componentDidMount(){ this.props.getUserData()}我的名字是{this.props.user}，年龄{this.props.age}
Auth = connect()(Auth) export default Auth;
- axios拦截器，统一loading处理
-
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}) -
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
注：项目来自慕课网