React 后台管理架构
本篇讲述的是后台架构模型
- 安装 React
- 安装 Antd
- 安装路由 react-router-dom
- 铺设生产环境和开发环境
- 铺设架构(架构和 style-component 支持等等)
(一) 安装 React
(1) 查看 npm 镜像源
npm config get registry
(2) 修改成淘宝镜像源
npm config set registry https://registry.npm.taobao.org
(3) 安装 react
npx create-react-app 名称
(4) 启动
cd 名称
npm run start
(二) 安装 antd
antd 是阿里推出的一款基于 React 的 UI 框架库,它是基于 less 开发的
(1) 运行 git 命令
git init
git add .
git commit -m "before ejecting"
(2) 敲命令打开 webpack 配置
npm run eject
(3) 安装包依赖
- less 必须是 2.7.3 版本的
yarn add less-loader babel-plugin-import -D
yarn add less@2.7.3 -D
yarn add antd -S
(4) 修改 webpack.config.js 文件
- (1) 第一步 修改如下
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
//增加的代码
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
//增加结束
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/- (2) 第二步修改 loader 依赖,增加 less 依赖
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
})
},
//增加的代码
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap
},
'less-loader'
),
sideEffects: true
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
},
'less-loader'
)
},
//增加结束
- (3) 第三步 修改 package.json 文件
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
}
- (4) 第四步修改 getStyleLoaders 方法
if (preProcessor) {
if (preProcessor === 'less-loader') {
loaders.push({
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
lessOptions: {
// 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
})
} else {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
)
}
}
return loaders(5) 这样 antd 安装完成
(三) 安装路由依赖包和 styled-components 包依赖
- 安装路由依赖包
cnpm i react-router-dom -S
- 安装 styled-components (用 js 方式写 css)
cnpm i styled-components -S
(四) 铺设生产环境和开发环境
(1) 在 package.json 文件中配置打包命令
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"start:test": "set REACT_APP_MODE=test&& react-scripts start",
"start:stage": "set REACT_APP_MODE=stage&& react-scripts start",
"start:localhost": "set REACT_APP_MODE=localhost&& react-scripts start",
"build:dev": "set REACT_APP_MODE=development&& react-scripts build",
"build:pro": "set REACT_APP_MODE=production&& react-scripts build",
"eject": "react-scripts eject"
},
(2) 在 src 目录下新建一个文件夹 config 里面写几个文件(src 目录)
- api_development.js
let url = {
homeurl: 'www.development.com',
}
export default url- api_localhost.js
let url = {
homeurl: 'www.localhost.com',
}
export default url- api_production.js
let url = {
homeurl: 'www.production.com',
}
export default url- api_stage.js
let url = {
homeurl: 'www.stage.com',
}
export default url- api_test.js
let url = {
homeurl: 'www.test.com',
}
export default url(3) 在 src 目录下新建一个 config.js
import developmentapi from './config/api_development.js'
import productionapi from './config/api_production.js'
import testapi from './config/api_test.js'
import localhostapi from './config/api_localhost.js'
import stageapi from './config/api_stage.js'
let url
if (process.env.REACT_APP_MODE === 'development') {
console.log('开发环境')
url = developmentapi
} else if (process.env.REACT_APP_MODE === 'production') {
console.log('生产环境')
url = productionapi
} else if (process.env.REACT_APP_MODE === 'test') {
console.log('测试环境')
url = testapi
} else if (process.env.REACT_APP_MODE === 'localhost') {
console.log('localhost环境')
url = localhostapi
} else if (process.env.REACT_APP_MODE === 'stage') {
console.log('stage环境')
url = stageapi
}
export default url(4) 在引用的页面直接引用 config.js 即可
import React, { Component, Fragment } from 'react'
import url from './config.js'
class App extends Component {
constructor(props) {
super(props)
this.state = {
message: '首页',
}
}
render() {
return (
<Fragment>
<div>{url.homeurl}</div>
</Fragment>
)
}
}
export default App(5) 然后敲不同的命令来调用不同的接口
npm run start:test
npm run start:stage
npm run build:dev
.
.
.
(五) 铺设架构
(1) 修改 src 目录下 index.js 修改如下
- reset.css 就是页面初始化加载的文件
import React from 'react'
import ReactDOM from 'react-dom'
import './reset.css'
import RouterDom from './router.js'
ReactDOM.render(
<React.StrictMode>
<RouterDom />
</React.StrictMode>,
document.getElementById('root')
)(2) 在 src 目录下 新建一个 名字叫 router.js 文件
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import App from './App'
import LoginPages from './Pages/Login'
import CommonPages from './Pages/Common'
import AdminPages from './Pages/Admin'
import NotFoundPages from './Pages/Notfound'
import ButtonPages from './Components/Ui/Button/Button'
import HomePages from './Components/Home/Home'
// 思路就是index.js加载路由,路由里面最外层是App,App里面在嵌套。二级路由这里和Vue不一样,必须是写全了
class RouterDom extends Component {
state = {}
render() {
return (
<Router>
<App>
<Switch>
<Route exact path="/" component={LoginPages}></Route>
<Route exact path="/common" component={CommonPages}></Route>
<Route
path="/admin"
render={() => (
<AdminPages>
<Switch>
{/* 在React里面路径必须写全称二级的也必须带上前面 */}
<Route path="/admin/button" component={ButtonPages}></Route>
<Route path="/admin/home" component={HomePages}></Route>
<Route to="/notfound" component={NotFoundPages}></Route>
</Switch>
</AdminPages>
)}
></Route>
{/* 上面找不到的就用to这样他会自动匹配 */}
<Route to="/notfound" component={NotFoundPages}></Route>
</Switch>
</App>
</Router>
)
}
}
export default RouterDom(3) 修改 APP.js 如下
import React, { Component, Fragment } from 'react'
class App extends Component {
state = {}
render() {
return <Fragment>{this.props.children}</Fragment>
}
}
export default App(4)在 src 目录下面新建一个文件夹起名叫 Pages(这个文件夹里面放的就是页面基础文件)
我只是举例 具体页面多少要依据开发需求来定
Admin.js
Common.js
Login.js
Notfound.js
下面是 Admin.js 架构,因为 在 admin 下面有二级目录
import React, { Component, Fragment } from 'react'
class Admin extends Component {
constructor(props) {
super(props)
this.state = {
message: 'admin页面',
}
}
render() {
return (
<Fragment>
{this.state.message}
----------------
<div>{this.props.children}</div>
</Fragment>
)
}
}
export default Admin下面是 Common.js 内容
import React, { Component, Fragment } from 'react'
class CommonDom extends Component {
constructor(props) {
super(props)
this.state = {
message: '通用页面',
}
}
render() {
return <Fragment>{this.state.message}</Fragment>
}
}
export default CommonDom(5) 在 src 新建一个 Components(里面是要引入的 Componets)
对应的 router.js 里面引入组件的目录
- 然后在新建一个文件夹 Ui 在在 Ui 文件夹里面在新建一个文件夹 Button
import React, { Component, Fragment } from 'react'
class UiButton extends Component {
constructor(props) {
super(props)
this.state = {
message: '按钮',
}
}
render() {
return <Fragment>{this.state.message}</Fragment>
}
}
export default UiButton- 按照上面的步骤可以在创建一个 Home.js
