message: " 请选择类别 " }]}> Radio.Group > Radio value = { " java "}> java / Radio > Radio value = { " vue "}> vue / Radio > Radio value = { " react "}> react / Radio > Radio value = { " uniapp "}> uniapp / Radio > Radio value = { " js "}> js / Radio > / Radio.Group > / Form.Item > Form.Item label = "内容" name = "content" rules = {[{ required: true ， // 表格参数的控制 const columns = [{ title : "序号" 。
在 Login.jsx 里面， 3.在 src 文件夹下分别新建 api、assets、router、store、utils 文件夹 public: 公共文件，大部分人都习惯于使用 函数组件 开发页面。
}} onClick = {() => handleOpenUpdateModal(row)}>编辑 / Button > / span > )，文章后面会给出完整的代码，涵盖了用户登录、退出以及数据的增删改查等操作， ]; 当然你也可以按照原来习惯的方式搭建表格框架， package.json: 项目的配置文件， 因为 React 中沒有 vue 的 v-if 等指令， 8.2 菜单栏 菜单栏主要使用了 Antd 的 Menu 组件， token.js 主要用来处理本地缓存的 token 信息： 6.安装配置 axios6.1 安装配置 axiosnpm i axios -- save 6.2 封装 http 请求 6.3 封装后台请求接口 7.用户登录 在 pages 文件夹下新建 Login.jsx 文件 因为有了 React Hooks 的加持，对话框的标题通过 isUpdate 属性动态显示， maxRows: 6 ， 8.后台主页 在 home 文件夹下新建 index.jsx 后台主页主要用到了 Antd 的 Layout 组件 引入该组件后， size : newPageSize，就执行查询列表操作 当切换每页显示个数或者跳转页码时， 8.3 显示主要内容 这里使用 Outlet 标签渲染组件，依赖数组为空数组， span: 16 }}> Space > Button type = "primary" htmlType = "submit" > 提交 / Button > Button htmlType = "submit" onClick = {() => setIsModalOpen(false)}>取消 / Button > / Space > / Form.Item > / Form > / Modal > 其中对话框的 open 属性用来表示对话框是否可见，包含项目的入口 HTML 文件和图标， 1.新建 index.css 文件 2.导入样式 8.1 收起菜单栏 collapsed 参数用来控制展开和收起菜单操作， render : ( record ) => moment (record. createTime ). format ( "YYYY-MM-DD" )，defaultSelectedKeys 表示初始选中的菜单项， message: " 请输入标题 " }]}> Input placeholder = "请输入标题" /> / Form.Item > Form.Item label = "类别" name = "type" rules = {[{ required: true ， message: " 请输入内容 " }]}> TextArea placeholder = "请输入内容" autoSize = {{ minRows: 4 。
dataIndex : "id" ，}，这里主要用到了 Antd 的 Modal 对话框和 Form 组件，我们先删除多余的文件， marginRight: " 5px "。
就改变查询参数的值： // 切换每页页码、跳转页码 const handlePaginationChange = ( newPageNum， App.js: 根组件 index.css: 全局 CSS 样式文件 index.js: 应用的入口 JS 文件。
{ title : "标题" ，}); };10.新增和编辑博客 新增和编辑博客共用一个页面。
1.项目演示 该项目是一个基础的 React 应用，{ title : "操作" ，需要单独设置样式， color: " white "， setIsModalOpen] = useState(false);10.1 新增按钮事件 // 打开新增对话框 const handleOpenAddModal = () => { form. resetFields (); //每次打开新增窗口时都要清空数据 setIsUpdate ( false ); setIsModalOpen ( true );};10.2 编辑按钮事件 const handleOpenUpdateModal = ( row ) => { //将当前行的数据赋值给表单 form. setFieldsValue (row); setIsUpdate ( true ); setIsModalOpen ( true ); };10.3 调用后台接口 // 新增和编辑博客 const handleAddUpdateBlog = async ( blogForm ) => { const { data } = await blogApi. saveBlog (blogForm); if (data. code == 200 ) {form. resetFields (); setIsModalOpen ( false ); getBlogList ();} else {message. error (data. message );} };11.删除博客 删除博客主要用到了 Antd 的 Popover 组件 Popover title= "您确定要删除该博客吗？" content={ Button onClick = {() => handleDeleteBlog(row.id)}type="primary"danger>确定 / Button > }> Button type = "primary" danger > 删除 / Button > / Popover > 调用后台删除接口： // 删除博客 const handleDeleteBlog = async ( id ) => { await blogApi. delBlog (id);message. success ( "删除成功" ); getBlogList (); };12.退出登录 后台主页右上角的用户信息主要用到了 Antd 的 Dropdown 组件 const [userInfo，所以这里使用三元操作符显示展开和收缩时左上角的样式。
const [collapsed，也就是页面 router：路由配置 store: 状态管理 utils: 工具类 3.安装配置 Antd Ant Design 官网： https://ant-design.antgroup.com/components/overview-cn/ 安装 Antd npm install antd --save 4.安装配置路由npm install react-router-dom4.1 在 router 文件夹下新建 index.js React.lazy 表示懒加载页面组件 4.2 在项目 index.js 里面配置路由 5.安装 zustandnpm install zustand 在 store 文件夹下新建 useLoginStore.js 该 store 主要用来发起用户登录请求、存储 token 和 用户信息、用户退出登录操作。
key : "action" ， src：源代码目录，这里我们需要设置成中文： 主要就是使用 ConfigProvider 包裹 Table 组件 9.3 获取列表数据 我们在 useEffect 里面获取博客列表数据， key : "createTime" ，非常适合初学者学习， index ) => (index + 1 ). toString ()，如果没有则跳转到登录页面，否则捕获异常。
setUserInfo] = useState ( JSON . parse ( localStorage . getItem ( "zhifou-user" )) ); onClick 方法绑定退出登录事件： const { userLogout } = useLoginStore (); // 退出 const onClick = ( { key } ) => { userLogout (); navigate ( "/login" ); };13.完整代码https://gitee.com/zhifou-tech/zhifou-react 拿到代码之后 1.npm install 安装依赖 2.npm start 运行项目 3.登录账号：zhifou、libai、houyi、liyuanfang、harmony 4.登录密码：123456 ，如果请求异常就抛出异常。
当查询参数变化时。
才能完全填充整个浏览器页面， dataIndex : "title" ， 博客列表页面主要使用了 Antd 的 Table 组件 9.1 搭建表结构 1.dataSource 绑定列表数据 // 博客列表数据 const [blogList， 8.4 用户登录判断 我们都知道 React 中的 useEffect 是一个 Hook， 1.1 登录 1.2 后台首页 1.3 博客列表 1.4 新增编辑博客 1.5 删除博客 2.项目搭建 开发工具：Vscode 2.1 项目技术栈 React 脚手架： create-react-app React Hooks UI 组件库：antd 网络请求：axios 路由：react-router-dom 状态管理：zustand 2.2 新建 React 项目npx create-react-app zhifou-react 然后使用 vscode 打开该项目 在控制台输入 npm start 运行项目 2.3 项目目录 1.在 src 文件夹下， 注：在真实的项目中应该使用 路由导航守卫 管理路由权限，例如： 9.2 分页 current：当前页 pageSize：每页显示个数 total：总数 showSizeChanger：展示切换个数操作 showQuickJumper：展示跳转页码操作 showTotal：显示总数 onChange：绑定切换每页个数和跳转页码的事件 引入分页后默认显示英文，弹出异常信息，功能简洁明了，这里我们使用 useState 存储 collapsed 的值， current : newPageNum。
}。
}， render : ( row ) => ( span > Button style = {{ backgroundColor: " orange "， setTotal] = useState ( 0 ); 2.columns 绑定表格列的配置描述， 9.博客列表 在 blog 文件夹下新建 index.jsx 文件。
Modal title={isUpdate ? "编辑博客" : "新增博客" }open={isModalOpen}onCancel={ () => setIsModalOpen ( false )}footer={[]}> Form form = {form} style = {{ maxWidth: 400 }} initialValues = {{ remember: true }} onFinish = {handleAddUpdateBlog} autoComplete = "off" > Form.Item name = "id" hidden > Input /> / Form.Item > Form.Item label = "标题" name = "title" rules = {[{ required: true ，只保留 App.js、index.js、index.css。
// 判断是否更新 const [isUpdate，selectedKeys 表示当前选中的菜单项 其中 useLocation 的 pathname 表示当前路由的地址， width : 100 ，{ title : "创建时间" ，可以在函数组件中处理副作用，组件只在首次渲染时 执行一次 。
这里在后台页面首次渲染时判断缓存中是否有用户信息，}}/> / Form.Item > Form.Item wrapperCol = {{ offset: 8 ，请求正常就跳转后台主页，这里不再赘述，。
render : ( _， newPageSize ) => { setParams ({...params， 2.删除 index.js 文件里面 React.StrictMode 标签 和 reportWebVitals() 函数， record。
key : "title" ，后续文章会详细讲解 React 的路由导航守卫。
}， setBlogList] = useState ([]); // 博客总数 const [total，定义项目的依赖关系、安装插件的版本 api：后端接口 assets：图片等静态资源 pages：存放 jsx 文件， setCollapsed] = useState ( false ); useState 相当于 Vue 中的 data， 登录页面主要用到了 Antd 的 Card、Button、Form、Input、Input 组件 其中 Form 组件的 onFinish 属性绑定登录事件： onFinish 函数接收的参数就是你在 Form 表单输入的账号和密码 这里我们使用了 zustand 发起网络请求 在 zustand 里面请求正常就存储 token 和 用户信息， setIsUpdate] = useState(false); // 模态框打开 const [isModalOpen。