写在前头
这个项目是跟着b站up主“单排哥“”学习的。
传送门
具体功能
- 查看文章
- 文章编辑
- 修改资料
一、项目介绍
《CMS后台系统》项目主要是为CMS官网提供文章编辑、上传等功能。其中包括富文本编辑器调用、路由管理、权限管控、图片上传等主体模块。
项目预览路径：codesohigh.com/cms-manage/
UI框架使用：Ant Design
二、项目起步
1、创建项目
$ npx create-react-app cms-manage 复制代码
在一个文件夹目录下点击，输入cmd，进去终端命令框，然后使用上面命名，进行项目创建。
显示以下类似的文字就是表面项目已经创建成功。
2、安装依赖
本项目用到的依赖可以在此预先安装好：
- antd
- redux与react-redux
- react-router-dom
- axios
- less与less-loader
$ npm i antd redux react-redux react-router-dom@6 axios less less-loader@6.0.0 --save 复制代码
- 在vscode中打开终端使用。
3、Antd引入和测试
Ant Design 传送门
- 首先将src文件夹下的所有文件删除
在像图片下面一样新建文件夹及文件。
- 在bass.css中引入antd。
@import '~antd/dist/antd.css'; 复制代码
- 初始化App.jsx
import React from 'react'; import "./assets/base.css" const App = () => { return ( <div> App </div> ); } export default App; 复制代码
- index.js
import ReactDOM from 'react-dom' ReactDOM.render( <Router />, document.getElementById('root') ) 复制代码
- 测试antd
import React from 'react'; import "./assets/base.css" import { Button} from 'antd'; const App = () => { return ( <div> <Button type="primary">primary</Button> </div> ); } export default App; 复制代码
- 测试成功
4、路由配置
- 安装插件
- 创建页面pages
在每一个jsx文件下使用rfc代码片段快速生成函数组件。（注意：需要安装插件）
import React from 'react' export default function Edit() { return ( <div>Edit</div> ) } 复制代码
- 新建router文件夹，书写index.jsx文件
/* App > List + Edit + Means Login Register History模式 BrowserRouter Hash模式 HashRouter */ import App from '../App' import List from '../pages/List' import Edit from '../pages/Edit' import Means from '../pages/Means' import Login from '../pages/Login' import Register from '../pages/Register' import {BrowserRouter as Router, Routes, Route} from 'react-router-dom' const BaseRouter = () => ( <Router> <Routes> <Route path='/' element={<App />}> <Route path='/list' element={<List />}> </Route> <Route path='/edit' element={<Edit />}> </Route> <Route path='/means' element={<Means />}> </Route> </Route> <Route path='/login' element={<Login />}> </Route> <Route path='/register' element={<Register />}> </Route> </Routes> </Router> ) export default BaseRouter 复制代码
- 将index.js修改顶级组件
import ReactDOM from 'react-dom' import Router from "./router" ReactDOM.render( <Router />, document.getElementById('root') ) 复制代码
- 更改路径可以检查是否成功
在App.js组件中使用Outlet
import React from 'react'; import "./assets/base.css" import { Button} from 'antd'; import { Outlet } from 'react-router-dom'; const App = () => { return ( <div> <Button type="primary">primary</Button> <Outlet/> </div> ); } export default App; 复制代码
- 检查成功？
