react+vite+antD+reduce+echarts项目完整记录

react+vite+antD+reduce+echarts项目完整记录

之前写前端项目，都是用的vue，从最开始的vue2到后来的vue3，断断续续写了3年，打包工具也从webpack转到了vite，全局数据管理工具从vuex转到了pinia。总体而言，vue3对比vue2，有非常明显的提升，vite比webpack打包的速度更是快了无数倍，至于pinia和vuex，因人而异，我更喜欢pinia，组合式api的写法深得我心。总而言之一句话，我是全方面拥抱了vue3的新技术栈，当然，除了TS，TS对后端比较友好，我只能算半个后端，用不用无所谓。时代在前进，技术在发展，如果永远守着一套陈旧的技术，找各种理由为自己辩解，实在是不明智的选择。

一直想学一下react，中途学过几次，因为平时工作事情太多不得不停下来。刚开始接触jsx，我是抵制的，vue把html、js和css进行了严格的区分，并摆脱了原生的dom操作，jsx却又把这些混在一起，写代码的时候让我感觉像吃了si一样难受。学完之后依然觉得很难受，但为啥我还是坚持要学react呢，这么几个原因：

  • 从全球来看，react是最火的前端框架，vue只在国内火，我在看国外的一些项目的源码时，发现自己完全看不懂在写什么，甚至国内，有些开源项目也只出了react的包，比如mapv
  • 换一种框架，扩展一下自己的技能树
  • 熟悉原生js

花了3天速刷了一遍B站黑马前端讲师的课，并跟着完整写了一个非常简单的项目，后端接口也是用的黑马的，感谢黑马，记录一下完整的过程，为自己后面写项目提供参考，也为后来人提供参考

项目最终界面：

  1. 登录界面

image-20240328115752843

  1. 首页

image-20240328115845338

  1. 文章管理

image-20240328115913121

  1. 创建文章

image-20240328115938645

目前就这些了，以下进入正题

〇、代码仓库地址

https://gitee.com/hgandzl/react-vite

一、创建项目并配置基础环境

1. vite创建项目

黑马老师是基于CRA创建项目，应该是和webpack相关的技术，没深入了解，我是用的vite

vite创建前端项目的指令

npm create vite@latest

创建过程如下：

image-20240328120528329

vscode打开创建的项目，执行npm i后image-20240328120722097执行npm run dev，即可打开默认的vite+react项目

2. 整理项目目录

项目src文件夹下依次创建如下文件夹

-src-apis           项目接口函数-assets         项目资源文件，比如，图片等-components     通用组件-pages          页面组件-router		  路由-store          集中状态管理-utils          工具，比如，token、axios 的封装等-App.jsx        根组件-index.scss     全局样式-main.jsx       项目入口

删除无关的文件，只保留App.jsx和main.jsx，并删除相关引入

删除main.jsx中的严格节点模式

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";ReactDOM.createRoot(document.getElementById("root")).render(<App />);

删除App.jsx中无关的代码，保留基础组件

function App() {return <>app</>;
}export default App;

3. 使用scss预处理器

实现步骤

  1. 安装解析 sass 的包：npm i sass -D
  2. 创建全局样式文件：index.scss

index.scss

* {margin: 0;padding: 0;
}

项目入口文件引入index.scss

4. 使用Ant Design作为UI框架

实现步骤

  1. 安装 antd 组件库：npm i antd
  2. 页面上导入并使用

5. 配置基础路由

实现步骤

  1. 安装路由包 npm i react-router-dom

  2. 准备 Layout和 Login俩个基础组件

    pages目录下新建两个组件，分别是pages/Layout/index.jsx和pages/Login/index.jsx，并同步新建样式文件

    pages/Layout/index.jsx

    const Layout = () => {return <div>this is layout</div>
}
export default Layout

    pages/Login/index.jsx

    const Login = () => {return <div>this is login</div>
}
export default Login

  3. 配置路由

    router文件夹下新建index.jsx文件，并配置如下基础路由

    import { createBrowserRouter } from 'react-router-dom'import Login from '../pages/Login'
import Layout from '../pages/Layout'const router = createBrowserRouter([{path: '/',element: <Layout />,},{path: '/login',element: <Login />,},
])export default router

  4. 全局挂载路由

    和vue项目类似，路由要全局挂载

    main.jsx

    import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import router from "./router";
import { RouterProvider } from "react-router-dom";ReactDOM.createRoot(document.getElementById("root")).render(<RouterProvider router={router} />
);

二、编写登录页面

1. 使用antd搭建基本结构

实现步骤

  1. 在 Login/index.js 中创建登录页面基本结构

    import "./index.scss";
import { Card, Form, Input, Button } from "antd";
import logo from "../../assets/global.png";const Login = () => {return (<div className="login"><Card className="login-container"><img className="login-logo" src={logo} alt="" />{/* 登录表单 */}<Form><Form.Item><Input size="large" placeholder="请输入手机号" /></Form.Item><Form.Item><Input size="large" placeholder="请输入验证码" /></Form.Item><Form.Item><Button type="primary" htmlType="submit" size="large" block>登录</Button></Form.Item></Form></Card></div>);
};export default Login;

  2. 在 Login 目录中创建 index.scss 文件，指定组件样式

    .login {width: 100%;height: 100%;position: absolute;left: 0;top: 0;// background: center/cover url('~@/assets/login.png');.login-logo {// width: 200px;// height: 60px;display: block;margin: 0 auto 20px;}.login-container {width: 440px;height: 400px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);box-shadow: 0 0 50px rgb(0 0 0 / 10%);}.login-checkbox-label {color: #1890ff;}
}

启动项目，地址输入登录页面路由，显示如下

image-20240328140322996

2. 实现表单校验功能

实现步骤

  1. 为 Form 组件添加 validateTrigger 属性，指定校验触发时机的集合
  2. 为 Form.Item 组件添加 name 属性，这是为了能取到表单项里面的值
  3. 为 Form.Item 组件添加 rules 属性，用来添加表单校验规则对象，这与elementplus的验证机制高度相似

整体实现代码

const Login = () => {return (<Form validateTrigger={['onBlur']}><Form.Itemname="mobile"rules={[{ required: true, message: '请输入手机号' },{pattern: /^1[3-9]\d{9}$/,message: '手机号码格式不对'}]}><Input size="large" placeholder="请输入手机号" /></Form.Item><Form.Itemname="code"rules={[{ required: true, message: '请输入验证码' },]}><Input size="large" placeholder="请输入验证码" maxLength={6} /></Form.Item><Form.Item><Button type="primary" htmlType="submit" size="large" block>登录</Button></Form.Item></Form>)
}

3. 获取登录form的表单数据

实现步骤

  1. 为 Form 组件添加 onFinish 属性，该事件会在点击登录按钮时触发。其实这个onFinish也是button中的submit绑定的，也就是说点击submit按钮时，就会触发onFinish方法
  2. 创建 onFinish 函数，通过函数参数 values 拿到表单值，onFinish函数传递默认参数，参数就是表单内的每一项数据
const onFinish = (formData) => {console.log(formData);};
....<Form validateTrigger={["onBlur"]} onFinish={onFinish}>....<Form.Item><Button type="primary" htmlType="submit" size="large" block>登录</Button></Form.Item></Form>....export default Login;

4. aixos二次封装

因为需要向后端发起请求，涉及token认证的地方需要设置请求拦截器，也可能需要设置响应拦截器，所以需要对axios二次封装

在此之前，我曾详细记录过如何使用react+redux完成登录页面及token的存取和登录保持，因此，整个登录不再赘述，只上关键过程和重要代码

实现步骤

  1. 安装 axios 到项目
  2. 创建 utils/http.jsx 文件
  3. 创建 axios 实例，配置 baseURL，请求拦截器，响应拦截器

https.jsx

import axios from "axios";const http = axios.create({baseURL: "http://geek.itheima.net/v1_0",timeout: 5000,
});// axios请求拦截器
http.interceptors.request.use((config) => {return config;},(e) => Promise.reject(e)
);// axios响应式拦截器
http.interceptors.response.use((res) => res.data,(e) => {console.log(e);return Promise.reject(e);}
);export default http;

5. 引入redux管理全局数据

react中的redux就相当于vue中的vuex，都用于管理全局数据，登录时后端返回的token数据就是全局需要的数据

实现步骤

  1. 安装redux相关包

    npm i react-redux @reduxjs/toolkit

  2. 配置redux，配置redux在另一篇博客中有详细记录，不再具体说明

    1. 新建user模块store/moduls/user.jsx，填入以下代码
    import { createSlice } from "@reduxjs/toolkit";
import http from "../../utils/http";
const userStore = createSlice({name: "user",// 数据状态initialState: {token: "",},// 同步修改方法reducers: {setToken(state, action) {state.userInfo = action.payload;},},
});// 解构出actionCreater
const { setToken } = userStore.actions;// 获取reducer函数
const userReducer = userStore.reducer;// 异步方法封装
const fetchLogin = (loginForm) => {return async (dispatch) => {const res = await http.post("/authorizations", loginForm);dispatch(setToken(res.data.token));};
};export { fetchLogin };export default userReducer;
    1. 在index.jsx中注册子模块，store/index.jsx
    import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./modules/user";export default configureStore({reducer: {user: userReducer}
})
    1. 入口文件中全局注册store，main.jsx
    import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.scss";
import { RouterProvider } from "react-router-dom";
import router from "./router/index.jsx";
import { Provider } from "react-redux";
import store from "./store/index.jsx";ReactDOM.createRoot(document.getElementById("root")).render(<Provider store={store}><RouterProvider router={router} /></Provider>
);

6. 实现登录逻辑

实现步骤

  1. 收集表单信息，向后端发送登录请求
  2. 登录成功后跳转到首页，提示用户登录成功

主要是修改上面的Login/index.jsx中的onFinish方法

如下：

// 省略其他代码
// .......
import { useDispatch } from "react-redux";
import { fetchLogin } from "../../store/modules/user";
import { useNavigate } from "react-router-dom";// 省略其他代码
// .......const onFinish = async (formData) => {console.log(formData);await dispatch(fetchLogin(formData))navigate('/')message.success('登录成功')};
// 省略其他代码
// .......

7. 实现token持久化存储

其实就是登录时把token存到localstorage中去，react+redux完成登录页面及token的存取和登录保持–这篇博客中详细记录了，这里只上关键代码

  1. 首先封装token的存、取、删方法，utils/token.jsx
const TOKENKEY = "token_key";function setToken(token) {return localStorage.setItem(TOKENKEY, token);
}function getToken() {return localStorage.getItem(TOKENKEY);
}function clearToken() {return localStorage.removeItem(TOKENKEY);
}export { setToken, getToken, clearToken };

  1. localstorage中持久化存储token，逻辑就是在redux的同步方法中，存储token，同时，token的初始化不再是空值，当localstorage中有token时，就取出来，没有就是空值

    store/moduls/user.jsx

import { createSlice } from "@reduxjs/toolkit";
import http from "../../utils/http";
import { setToken as _setToken, getToken } from "../../utils/token";
const userStore = createSlice({name: "user",// 数据状态initialState: {// 差异1token: getToken() || "",},// 同步修改方法reducers: {setToken(state, action) {state.token = action.payload;// 存入本地_setToken(state.token);},},
});

8. 请求拦截器中携带token

常规操作，在axios二次封装的http.jsx文件中添加以下代码

// axios请求拦截器
http.interceptors.request.use((config) => {// 导入getToken方法const token = getToken()if (token) {// 请求头携带tokenconfig.headers.Authorization = "Bearer " + token;}return config;},(e) => Promise.reject(e)
);

9. 路由守卫

vue中的路由守卫是在router中实现的，react的做法是封装 AuthRoute 路由鉴权高阶组件，然后将需要鉴权的页面路由配置，替换为 AuthRoute 组件渲染

实现步骤

  1. 在 components 目录中，创建 AuthRoute/index.jsx 文件
  2. 登录时，直接渲染相应页面组件
  3. 未登录时，重定向到登录页面
  4. 将需要鉴权的页面路由配置，替换为 AuthRoute 组件渲染

AuthRoute/index.jsx中的代码

import { getToken } from '../../utils/token'
import { Navigate } from 'react-router-dom'const AuthRoute = ({ children }) => {const isToken = getToken()if (isToken) {return <>{children}</>} else {return <Navigate to="/login" replace />}
}export default AuthRoute

Layout页面需要鉴权，所以在路由中修改页面的渲染配置，router/index.jsx

import { createBrowserRouter } from "react-router-dom";import Login from "../pages/Login";
import Layout from "../pages/Layout";
import AuthRoute from "../components/AuthRoute";const router = createBrowserRouter([{path: "/",element: <AuthRoute><Layout /></AuthRoute>,},{path: "/login",element: <Login />,},
]);export default router;

10. 封装接口调用的api

因为后面涉及多个后端接口调用，所以好的做法是把后端接口进行统一的封装

新建apis/user.jsx文件，用于处理用户相关的接口

import http from "../utils/http";export const loginAPI = (data) => {return http({url: "/authorizations",method: "POST",data,});
};

把前面的第5节中redux异步方法请求改写一下

// 异步方法封装
const fetchLogin = (loginForm) => {return async (dispatch) => {const res = await loginAPI(loginForm); // 注意loginAPI要引入dispatch(setToken(res.data.token));};
};

后面其他api也就抽离出来了

三、Layout首页设计

1. 搭建首页基础框架

首页的基础框架长下面这个样子

image-20240328161156442

先填入基础代码

import React, { useEffect, useState } from "react";
import "./index.scss";
import {HomeOutlined,DiffOutlined,EditOutlined,LogoutOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme, Popconfirm } from "antd";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
// import { fetchUserInfo, clearUserInfo } from "../../store/modules/user";
const { Header, Content, Sider } = Layout;const items = [{label: "首页",key: "/",icon: <HomeOutlined />,},{label: "文章管理",key: "/article",icon: <DiffOutlined />,},{label: "创建文章",key: "/publish",icon: <EditOutlined />,},
];const GLayout = () => {const [collapsed, setCollapsed] = useState(false);const {token: { colorBgContainer, borderRadiusLG },} = theme.useToken();return (<Layoutstyle={{minHeight: "100vh",}}><Sidertheme="light"collapsiblecollapsed={collapsed}onCollapse={(value) => setCollapsed(value)}><div className="demo-logo-vertical" /><Menu//   theme="dark"defaultSelectedKeys={["/"]}//   selectedKeys={selectedKey}mode="inline"items={items}//   onClick={clickMenu}/></Sider><Layout><HeaderclassName="header"style={{padding: 0,background: colorBgContainer,}}><div className="logo"></div><div className="user-info"><span className="user-name">React</span><span className="user-logout"><Popconfirmtitle="是否确认退出？"okText="退出"cancelText="取消"// onConfirm={logout}><LogoutOutlined /> 退出</Popconfirm></span></div></Header><ContentclassName="content"style={{margin: "5px 5px",background: colorBgContainer,borderRadius: borderRadiusLG,}}><Outlet /></Content></Layout></Layout>);
};
export default GLayout;

补充对应的样式

.header {display: flex;justify-content: space-between;align-items: center;.logo {width: 200px;height: 60px;background: url('../../assets/global.png') no-repeat center / 160px auto;}.user-info {margin-right: 20px;color: #070707;.user-name {margin-right: 20px;}.user-logout {display: inline-block;cursor: pointer;}}
}.content {height: 100%;}

2. 配置二级路由

就是把左侧的文章管理、创建文章和首页的路由给配置出来

使用步骤

  1. 在 pages 目录中，分别创建：Home（数据概览）/Article（内容管理）/Publish（发布文章）页面文件夹

  2. 分别在三个文件夹中创建 index.jsx 并创建基础组件后导出

  3. 在router/index.js 中配置嵌套子路由，在Layout中配置二级路由出口

    import { createBrowserRouter } from "react-router-dom";
import Layout from "../pages/Layout";
import Login from "../pages/Login";
import AuthRoute from "../components/AuthRoute";
import Home from "../pages/Home";
import Article from "../pages/Article";
import Publish from "../pages/Publish";const router = createBrowserRouter([{path: "/",element: <AuthRoute><Layout /></AuthRoute>,children: [{// path: 'home',index: true,element: <Home />},{path: 'article',element: <Article />},{path: 'publish',element: <Publish />},]},{path: "/login",element: <Login />,},
]);
export default router;

  4. 使用 Link 修改左侧菜单内容，与子路由规则匹配实现路由切换，前面提供的代码中已经配置好了，就是<Outlet />

3. 点击菜单跳转至对应的二级路由

  1. 在menu菜单中添加点击回调函数

image-20240328162519204

const navigate = useNavigate();const clickMenu = (route) => {navigate(route.key);}

  1. 菜单反向高亮

    是个啥意思勒，目前点击菜单，菜单栏是高亮的，但是如果冲地址栏直接输入地址，对应的菜单并不能高亮。。

    image-20240328162816466

我在使用elementplus时经常遇到这个问题，一度以为是框架的bug，现在才搞明白，原来是自己没有处理好，处理逻辑是先获取页面当前的地址，然后把menu中的selectedKeys属性设置为当前地址

const GLayout = () => {// 省略部分代码// 获取当前页面地址-----------------1const location = useLocation()const selectedKey = location.pathnamereturn (<Layout><Header className="header"><div className="logo" /><div className="user-info"><span className="user-name">{name}</span><span className="user-logout"><Popconfirm title="是否确认退出？" okText="退出" cancelText="取消"><LogoutOutlined /> 退出</Popconfirm></span></div></Header><Layout><Sider width={200} className="site-layout-background"><Menumode="inline"theme="dark"// 将当前页面地址设置为selectedKeys----------------2selectedKeys={selectedKey}items={items}style={{ height: '100%', borderRight: 0 }}onClick={menuClickHandler}></Menu></Sider><Layout className="layout-content" style={{ padding: 20 }}><Outlet /></Layout></Layout></Layout>)
}

4. 头部导航栏显示个人信息

这部分其实应该可以直接登录的时候就直接给了，写在user的store中，不过黑马提供的逻辑是重新调了一个接口，这个接口返回的才是用户信息。别人怎么提供就怎么来吧

实现步骤

  1. 编写获取个人信息的接口

    export const getProfileAPI = () => {return http({url: "/user/profile",});
};

  2. 在Redux的store中编写获取用户信息的相关逻辑

    // 异步方法，获取用户个人信息
const fetchUserInfo = () => {return async (dispatch) => {try {const res = await getProfileAPI();// console.log(res)dispatch(setUserInfo(res.data));} catch (error) {message.error("登录信息失效，请重新登录");}};
};

    要把这个方法暴露出去

  3. 在Layout组件中触发action的执行

  4. 在Layout组件使用使用store中的数据进行用户名的渲染

    以上两步代码如下：

    import { fetchUserInfo } from "../../store/modules/user";//   获取用户信息const dispatch = useDispatch();useEffect(() => {dispatch(fetchUserInfo());}, []);const { userInfo } = useSelector((state) => state.user);
<span className="user-name">{userInfo.name}</span>

5. 退出登录逻辑

也是常规操作，之前是在pinia中写一个删除store的方法，是个同步方法，redux中差不多

实现步骤

  1. 为气泡确认框添加确认回调事件，实际上就是onConfirm事件

                  <Popconfirmtitle="是否确认退出？"okText="退出"cancelText="取消"onConfirm={logout}><LogoutOutlined /> 退出</Popconfirm>

  2. 在store/userStore.jsx 中新增退出登录的action函数，在其中删除token

    // 同步修改方法reducers: {........clearUserInfo(state) {state.token = "";state.userInfo = "";clearToken();},

    注意对外暴露出去

  3. 在回调事件中，调用userStore中的退出action

  4. 清除用户信息，返回登录页面

    const logout = () => {dispatch(clearUserInfo())navigate("/login");
}

6. 处理token失效

一般是token过期后的处理逻辑，后端会返回401代码，响应拦截器中根据这个代码进行路由跳转至登录页面

utils/http.jsx中响应拦截器添加如下代码

import router from "../router";// axios响应式拦截器
http.interceptors.response.use((res) => res.data,(e) => {console.log(e);// 401 -- token失效if(e.response.status === 401){clearToken()// router实例router.navigate('/login')}return Promise.reject(e);}
);export default http;

7. 首页绘制echarts图

echarts图我在vue中画过无数遍了，这里的逻辑基本上一样

  1. 首先安装echarts
npm i echarts

  1. 封装一个画图组件

    在Home目录下新建components目录，并创建BarChart.jsx组件

    封装的代码如下：

    import * as echarts from "echarts";
import { useEffect, useRef } from "react";
// 父子组件通讯props
const BarChart = ({title,xData,sData,style = { width: "400px", height: "300px" },
}) => {const chartRef = useRef(null);let initChart;const drawChart = () => {if (initChart != null && initChart != "" && initChart != undefined) {initChart.dispose(); //销毁}initChart = echarts.init(chartRef.current);const option = {title: {text: title,},xAxis: {type: "category",data: xData,},yAxis: {type: "value",},series: [{data: sData,type: "bar",},],};initChart.setOption(option);window.addEventListener("resize", () => {initChart.resize();});};useEffect(() => drawChart(), [xData, sData]);return (<><div ref={chartRef} style={style}></div></>);
};
export default BarChart;

    几个要点记录一下：

    • BarChart是子组件，父组件应传递 title, xData, sData, style 这几个属性
    • react中获取dom是用的react中useRef钩子，vue中直接就是ref
    • useEffect需要监听数据变化，然后重绘图

  2. Home组件中调用子组件，并传递子组件所需的数据

    import BarChart from "./components/BarChart";const Home = () => {return (<><BarChartxData={["Vue", "React", "Angular"]}sData={[2000, 5000, 1000]}title={"三大框架使用率"}></BarChart><BarChartxData={["Vue", "React", "Angular"]}sData={[200, 500, 100]}title={"三大框架满意度"}style={{ width: "500px", height: "400px" }}></BarChart></>);
};export default Home;

最终展示效果

image-20240328171620554

四、发布文章模块

就是下面这个页面

image-20240328172027729

1. 创建基础结构

import {Card,Breadcrumb,Form,Button,Radio,Input,Upload,Space,Select
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import './index.scss'const { Option } = Selectconst Publish = () => {return (<div className="publish"><Cardtitle={<Breadcrumb items={[{ title: <Link to={'/'}>首页</Link> },{ title: '发布文章' },]}/>}><FormlabelCol={{ span: 4 }}wrapperCol={{ span: 16 }}initialValues={{ type: 1 }}><Form.Itemlabel="标题"name="title"rules={[{ required: true, message: '请输入文章标题' }]}><Input placeholder="请输入文章标题" style={{ width: 400 }} /></Form.Item><Form.Itemlabel="频道"name="channel_id"rules={[{ required: true, message: '请选择文章频道' }]}><Select placeholder="请选择文章频道" style={{ width: 400 }}><Option value={0}>推荐</Option></Select></Form.Item><Form.Itemlabel="内容"name="content"rules={[{ required: true, message: '请输入文章内容' }]}></Form.Item><Form.Item wrapperCol={{ offset: 4 }}><Space><Button size="large" type="primary" htmlType="submit">发布文章</Button></Space></Form.Item></Form></Card></div>)
}export default Publish

样式文件

.publish {position: relative;.publish-quill {.ql-editor {min-height: 300px;}}
}.ant-upload-list {.ant-upload-list-picture-card-container,.ant-upload-select {width: 146px;height: 146px;background: #eee;}
}

2. 添加富文本编辑器

实现步骤

  1. 安装富文本编辑器

    npm i react-quill@2.0.0-beta.2

    这里可能会报错，应该改成

    npm i react-quill@2.0.0-beta.2 --force

  2. 导入富文本编辑器组件以及样式文件

  3. 渲染富文本编辑器组件

  4. 调整富文本编辑器的样式

    publish.jsx中的代码

    import {Card,Breadcrumb,Form,Button,Radio,Input,Upload,Space,Select,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import "./index.scss";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";const { Option } = Select;const Publish = () => {return (<div className="publish"><Cardtitle={<Breadcrumbitems={[{ title: <Link to={"/"}>首页</Link> },{ title: "发布文章" },]}/>}><FormlabelCol={{ span: 4 }}wrapperCol={{ span: 16 }}initialValues={{ type: 1 }}><Form.Itemlabel="标题"name="title"rules={[{ required: true, message: "请输入文章标题" }]}><Input placeholder="请输入文章标题" style={{ width: 400 }} /></Form.Item><Form.Itemlabel="频道"name="channel_id"rules={[{ required: true, message: "请选择文章频道" }]}><Select placeholder="请选择文章频道" style={{ width: 400 }}><Option value={0}>推荐</Option></Select></Form.Item><Form.Itemlabel="内容"name="content"rules={[{ required: true, message: "请输入文章内容" }]}><ReactQuillclassName="publish-quill"theme="snow"placeholder="请输入内容"></ReactQuill></Form.Item><Form.Item wrapperCol={{ offset: 4 }}><Space><Button size="large" type="primary" htmlType="submit">发布文章</Button></Space></Form.Item></Form></Card></div>);
};export default Publish;

3. antD中的select组件获取频道数据

image.png

这个数据是从后端获取的

实现步骤

  1. 使用useState初始化数据和修改数据的方法

      const [channels, setChannels] = useState([]);

  2. 在useEffect中调用接口并保存数据

    封装接口代码，apis目录新建article.jsx文件，填写接口请求函数

    import http from "../utils/http";export const getChannelAPI = () => {return http({url: "/channels",});
};

    Publish.jsx编写请求数据的函数，并在副作用钩子中调用

      const fetchChannels = async () => {const res = await getChannelAPI();console.log(res);setChannels(res.data.channels);};useEffect(() => {fetchChannels();}, []);

  3. 使用数据渲染对应模版

                <Select placeholder="请选择文章频道" style={{ width: 400 }}>{channels.map((item) => (<Option value={item.id} key={item.id}>{item.name}</Option>))}</Select>

4. 发布文章

  1. 先封装发布文章的接口

    // 新增
export const publishAPI = (data) => {return http({url: "/mp/articles?draft=false",method: "POST",data,});
};

  2. form提交submit的onFinish回调函数

      const onFinish = async (values) => {const { channel_id, content, title } = values;const data = {channel_id,content,title,type: 1,cover: {type: 1,images: [],},};await publishAPI(data)};

apis目录新建article.jsx文件，填写接口请求函数

import http from "../utils/http";export const getChannelAPI = () => {return http({url: "/channels",});
};

Publish.jsx编写请求数据的函数，并在副作用钩子中调用

  const fetchChannels = async () => {const res = await getChannelAPI();console.log(res);setChannels(res.data.channels);};useEffect(() => {fetchChannels();}, []);

  1. 使用数据渲染对应模版

                <Select placeholder="请选择文章频道" style={{ width: 400 }}>{channels.map((item) => (<Option value={item.id} key={item.id}>{item.name}</Option>))}</Select>

4. 发布文章

  1. 先封装发布文章的接口

    // 新增
export const publishAPI = (data) => {return http({url: "/mp/articles?draft=false",method: "POST",data,});
};

  2. form提交submit的onFinish回调函数

      const onFinish = async (values) => {const { channel_id, content, title } = values;const data = {channel_id,content,title,type: 1,cover: {type: 1,images: [],},};await publishAPI(data)};

未完待续，后面再补充吧~~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/777586.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

GNU Radio之OFDM Carrier Allocator底层C++实现

GNU Radio之OFDM Carrier Allocator底层C++实现

文章目录 前言一、OFDM Carrier Allocator 简介二、底层 C 实现1、make 函数2、ofdm_carrier_allocator_cvc_impl 函数3、calculate_output_stream_length 函数4、work 函数5、~ofdm_carrier_allocator_cvc_impl 函数 三、OFDM 数据格式 前言 OFDM Carrier Allocator 是 OFDM …
阅读更多...
微信小程序更换头像的功能

微信小程序更换头像的功能

微信小程序开发&#xff0c;个人中心中更换头像的更能使用频率很高&#xff0c;这里记录下实现方式&#xff1a; <view class"setting-list avatar-container"><text>头像</text><view class"avatar"><button hover-class"…
阅读更多...
ssm 房屋销售管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

ssm 房屋销售管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 ssm 房屋销售管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模…
阅读更多...
文件上传失败原因分析与解决

文件上传失败原因分析与解决

图片文件上传失败 问题描述&#xff1a;在前端开发时&#xff0c;需要通过表单元素上传图片或其他文本&#xff0c;但是上传不成功&#xff0c;后端接口也没问题 html <!--onChange用来绑定数据 handleUpload用来提交数据--><form onSubmit{handleUpload}><…
阅读更多...
TitanIDE与传统 IDE 比较

TitanIDE与传统 IDE 比较

与传统IDE的比较 TitanIDE 和传统 IDE 属于不同时代的产物&#xff0c;在手工作坊时代&#xff0c;一切都是那么的自然&#xff0c;开发者习惯 Windows 或 MacOS 原生 IDE。不过&#xff0c;随着时代的变迁&#xff0c;软件行业已经步入云原生时代&#xff0c;TitanIDE 是顺应…
阅读更多...
PhpStorm 2023 for Mac/Win：开启PHP集成开发新纪元，让编程更高效更智能

PhpStorm 2023 for Mac/Win：开启PHP集成开发新纪元，让编程更高效更智能

在数字时代的浪潮中&#xff0c;PHP作为一种广泛应用的服务器端脚本语言&#xff0c;其重要性不言而喻。而要在PHP的世界里游刃有余&#xff0c;一款强大的集成开发环境&#xff08;IDE&#xff09;是必不可少的。PhpStorm 2023&#xff0c;正是这样一款能够助您一臂之力的编程…
阅读更多...
Github万星项目lobe-chat，连接GPT4GPTs，平替chatgpt-plus

Github万星项目lobe-chat，连接GPT4GPTs，平替chatgpt-plus

简介 Lobe Chat - 一个开源、高性能的聊天机器人框架&#xff0c;支持语音合成、多模态和可扩展的函数调用插件系统。支持一键免费部署您的私人 ChatGPT/LLM Web 应用程序。 项目地址&#xff1a; GitHub - lobehub/lobe-chat: &#x1f92f; Lobe Chat - an open-source, mo…
阅读更多...
【React】onClick点击事件传参的4种方式

【React】onClick点击事件传参的4种方式

记录React onClick 点击事件传参的 4 种方式 方式一&#xff1a;使用内联箭头函数 import React, { MouseEvent } from "react";function App() {const handleClick (event: MouseEvent<HTMLButtonElement>, name: string) > {console.log(event)console.…
阅读更多...
2024蓝桥杯每日一题（背包2）

2024蓝桥杯每日一题（背包2）

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;包子凑数 试题二&#xff1a;砝码称重 试题三&#xff1a;倍数问题 试题一&#xff1a;包子称重 【题目描述】 小明几乎每天早晨都会在一家包子铺吃早餐。他发现这家包子铺有 N 种蒸笼&#xf…
阅读更多...
R语言做两次分类，再做两两T检验，最终输出均值和pvalue

R语言做两次分类，再做两两T检验，最终输出均值和pvalue

1.输入文件&#xff1a; 2.代码&#xff1a; setwd("E:/R/Rscripts/rG4相关绘图")# 加载所需的库 library(tidyverse)# 读取CSV文件 data <- read.csv("box-cds-ABD-不同类型rg4-2.csv", stringsAsFactors FALSE)# 组合Type1和Type2&#xff1a;通过…
阅读更多...
iOS —— 初识KVO

iOS —— 初识KVO

iOS —— 初始KVO KVO的基础1. KVO概念2. KVO使用步骤注册KVO监听实现KVO监听销毁KVO监听 3. KVO基本用法4. KVO传值禁止KVO的方法 注意事项&#xff1a; KVO的基础 1. KVO概念 KVO是一种开发模式&#xff0c;它的全称是Key-Value Observing (观察者模式) 是苹果Fundation框架…
阅读更多...
UE小：基于UE5的两种Billboard material（始终朝向相机材质）

UE小：基于UE5的两种Billboard material（始终朝向相机材质）

本文档展示了两种不同的效果&#xff0c;分别是物体完全朝向相机和物体仅Z轴朝向相机。通过下面的演示和相关代码&#xff0c;您可以更加直观地理解这两种效果的差异和应用场景。 1. 完全朝向相机效果 此效果下&#xff0c;物体将完全面向相机&#xff0c;不论相机在哪个角度…
阅读更多...
STM32学习和实践笔记（3）: 使用库函数点亮LED后的学习总结

STM32学习和实践笔记（3）: 使用库函数点亮LED后的学习总结

依照教程&#xff0c;做完了第一个试验&#xff0c;使用库函数点亮LED&#xff0c;如下: 总结一下一些要点&#xff1a; 一&#xff0c;要记得指明各头文件的查找路径&#xff0c;方法如下图&#xff1a; 二&#xff0c;使用库函数来编程相当方便高效&#xff0c;要学会查找对…
阅读更多...
八大技术趋势案例（云计算大数据）

八大技术趋势案例（云计算大数据）

科技巨变，未来已来，八大技术趋势引领数字化时代。信息技术的迅猛发展，深刻改变了我们的生活、工作和生产方式。人工智能、物联网、云计算、大数据、虚拟现实、增强现实、区块链、量子计算等新兴技术在各行各业得到广泛应用，为各个领域带来了新的活力和变革。 为了更好地了解…
阅读更多...
QT控件之输入窗口控件

QT控件之输入窗口控件

Qt Designer窗口部件提供的面板中&#xff0c;提供了16种输入部件 &#xff08;1&#xff09;QComboBox继承QWidget类&#xff0c;被QFontComboBox类继承。通常用于用户显示选项列表的 方法&#xff0c;这种方法占用最少的屏幕空间。 &#xff08;2&#xff09;QFontComboBox继…
阅读更多...
CI/CD实战-jenkins结合ansible

CI/CD实战-jenkins结合ansible

配置主机环境 在jenkins上断开并删除docker1节点 重新给master添加构建任务 将server3&#xff0c;server4作为测试主机&#xff0c;停掉其上后面的docker 在server2&#xff08;jenkins&#xff09;主机上安装ansible 设置jenkins用户到目标主机的免密 给测试主机创建用户并…
阅读更多...
百度智能小程序源码系统简洁版 SEO关键词排名推广优化 带完整的安装代码包以及搭建教程

百度智能小程序源码系统简洁版 SEO关键词排名推广优化 带完整的安装代码包以及搭建教程

移动互联网的快速发展&#xff0c;小程序以其轻量级、无需下载、即用即走的特点&#xff0c;迅速成为了各大平台争相推广的重要产品形态。百度智能小程序作为百度生态下的重要一环&#xff0c;凭借其强大的流量入口和丰富的功能组件&#xff0c;为开发者提供了广阔的创作空间。…
阅读更多...
设计模式之外观模式解析

设计模式之外观模式解析

外观模式 1&#xff09;概述 1.问题 在软件开发中&#xff0c;为完成一项较为复杂的功能&#xff0c;一个客户类需要和多个业务类交互&#xff0c;而这些需要交互的业务类经常会作为一个整体出现&#xff0c;由于涉及到的类比较多&#xff0c;导致使用时代码较为复杂。 2.作…
阅读更多...
吴恩达机器学习笔记 三十 什么是聚类 K-means

吴恩达机器学习笔记 三十 什么是聚类 K-means

聚类(clustering)是一种无监督学习算法&#xff0c;关注多个数据点并自动找到相似的数据点&#xff0c;在数据中找到一种特定的结构。无监督学习算法的数据集中没有标签 y &#xff0c;所以不能说哪个是“正确的 y ”。 K-means算法 K-means算法就是在重复做两件事&#xff1a…
阅读更多...
北斗短报文+4G应急广播系统：实时监控 自动预警 保护校园安全的新力量

北斗短报文+4G应急广播系统：实时监控 自动预警 保护校园安全的新力量

安全无小事&#xff0c;生命重如山。学生是祖国的未来&#xff0c;校园安全是全社会安全工作的一个重要的组成部分。它直接关系到青少年学生能否安健康地成长&#xff0c;关系到千千万万个家庭的幸福安宁和社会稳定。 灾害事故和突发事件频频发生&#xff0c;给学生、教职员工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023