react+ant.design——后台管理系统
react
https://react.docschina.org/docs/create-a-new-react-app.html
安装react 脚手架
npx create-react-app damon-cms-react
cd damon-cms-react
npm start
ant.design
安装antd
yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader
修改package.josn
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
根目录config-overrides.js 创建文件配置如下
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
//写了下面这个部分，就实现了按需加载，再也不需要再每个页面里面都引入“antd/dist/antd.css”啦
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true //这里一定要写true，css和less都不行哦
}),
addLessLoader({
javascriptEnabled: true,
//下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
modifyVars: { "@primary-color": "#f47983"}
})
)
初始化工程目录
public
favicon.ico ------ 浏览器头部logo
index.html ------ 项目首页模板
manifest.json ------ PWA serviceWoker 网页用户访问存储到手机的参数配置 在后台管理项目中没有作用
api
home.json ------ 测试数据
src
index.js ------ 程序入口文件
pages ------ 各个展示页面
home
store ------ 存储单独页面数据
actionCreators.js
constants.js
index.js
reducer.js
index.js ------ home页面
store
index.js ------ redux 入口文件
reducer.js ------ 改变state函数
node_modules ------ 依赖第三方包文件
.gitignore ------ git 忽略文件
package.json ------ node包文件
README.md
yarn.lock ------ 项目依赖安装包版本号
安装 redux 和 react-redux 和 redux-thunk 和 axios 和 immutable 和 redux-immutable
npm install --save redux
npm install --save react-redux
npm install --save redux-thunk
npm install --save axios
npm install --save immutable
npm install --save redux-immutable
使用 redux
public>api>home.json 文件内容
{
"success": true,
"data": {
"topicList": [{
"id": 1,
"title": "社会热点",
"imgUrl": "//upload.jianshu.io/collections/images/261938/man-hands-reading-boy-large.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"
}, {
"id": 2,
"title": "手手绘",
"imgUrl": "//upload.jianshu.io/collections/images/21/20120316041115481.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"
}],
"articleList": [{
"id": 1,
"title": "胡歌12年后首谈车祸",
"desc": "文/麦大人 01 胡歌又刷屏了。 近日他上了《朗读者》，而这一期的主题是“生命”，他用磁性的嗓音，朗读了一段《哈姆雷特》中的经典独白，相当震撼：...",
"imgUrl": "//upload-images.jianshu.io/upload_images/15631385-387601b6c91b14f7?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
} ]
}
}
src>store>index.js 文件内容
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(
applyMiddleware(thunk)
));
export default store;
src>store>reducer.js 文件内容
import { combineReducers } from 'redux-immutable'
import {reducer as homeReducer } from '../pages/home/store/'
export default combineReducers({
home:homeReducer,
})
home>index.js 文件内容
import React from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';
class Home extends React.Component {
render() {
const { topicList } = this.props
return (
{
topicList.map((item, index) => {
return (
})
{item.get('title')}
{item.get('desc')}
);
})
}
)
}
componentDidMount() {
this.props.changeHomeData();
}
}
const mapState = (state) => ({
topicList: state.getIn(['home', 'topicList']),
})
const mapDispatch = (dispatch) => ({
changeHomeData() {
dispatch(actionCreators.getHomeInfo());
},
});
export default connect(mapState, mapDispatch)(Home);
src>App.js
import React from 'react';
import store from './store';
import { Provider } from 'react-redux';
import Home from './pages/home'
function App() {
return (
);
}
export default App;
src>pages>home>store>actionCreators.js
import axios from 'axios';
import * as constants from './constants';
import { fromJS } from 'immutable';
const changHomeData = (result) => ({
type: constants.CHANGE_HOME_DATA,
topicList: result.topicList,
articleList: result.articleList,
recommendList: result.recommendList
});
const addHomeList = (list, nextPage) => ({
type: constants.ADD_ARTICLE_LIST,
list: fromJS(list),
nextPage
})
export const getHomeInfo = () => {
return (dispatch) => {
axios.get('/api/home.json').then((res) => {
const result = res.data.data;
dispatch(changHomeData(result));
});
}
}
export const getMoreList = (page) => {
return (dispatch) => {
axios.get('/api/homeList.json?page=' + page).then((res) => {
const result = res.data.data;
dispatch(addHomeList(result, page + 1));
});
}
}
src>pages>home>store>constants.js
export const CHANGE_HOME_DATA = 'home/CHANGE_HOME_DATA';
export const ADD_ARTICLE_LIST = 'home/ADD_ARTICLE_LIST';
src>pages>home>store>index.js
import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants';
export { reducer, actionCreators, constants };
src>pages>home>store>reducer.js
import { fromJS } from 'immutable';
import * as constants from './constants';
const defaultState = fromJS({
topicList: [],
articleList: [],
articlePage: 1,
});
const changeHomeData = (state, action) => {
return state.merge({
topicList: fromJS(action.topicList),
articleList: fromJS(action.articleList),
recommendList: fromJS(action.recommendList)
});
};
const addArticleList = (state, action) => {
return state.merge({
'articleList': state.get('articleList').concat(action.list),
'articlePage': action.nextPage
});
};
export default (state = defaultState, action) => {
switch(action.type) {
case constants.CHANGE_HOME_DATA:
return changeHomeData(state, action);
case constants.ADD_ARTICLE_LIST:
return addArticleList(state, action);
default:
return state;
}
}