• 图书管理系统(https://github.com/plusmultiply0/bookmanagesystem)

    特意去github找了一个用flask框架的项目，一起来学习它吧

    这个系统包括很多功能：用户权限管理模块（管理员和普通用户），注册登录模块（滑块验证码功能），图书有关信息模块（借阅，收藏，详情），留言板模块，用户画像和个性化推荐模块

    哇！真的是一个宝藏项目，一定要吃透它

    我打算先前端，再后端

    1.首先是起始页

    有三个按钮，前端代码在my-app/src/beforeLogin.js里面

    1. import { Form, Button, Layout, Menu, theme, Dropdown, Typography, Space, Table, Modal, Input, Card, Row, Col, Switch, Pagination } from "antd";
    2. import { Link, Navigate, useNavigate, Outlet } from "react-router-dom";
    3. import { LaptopOutlined, UserOutlined, BookOutlined, AppstoreOutlined, ExclamationCircleFilled } from '@ant-design/icons';
    4. import React, { useState, useEffect } from 'react';
    5. import axios from 'axios'
    6. import { Detail } from './bookdata'
    7.  
    8. 可以看到他引入了一些ant design里面的一些组件
    9. 引入了一些React Router的组件和钩子（他用的是react18）
    10. Link：创建导航链接。
    11. Navigate：渲染时进行重定向。
    12. useNavigate：编程式导航。
    13. Outlet：嵌套路由内容的占位符。
    14. 引入axios来进行调用接口
    15. Detail 是什么呢？是来自bookdata的一个组件，可以点击跳转过去看具体的代码
    16. const Detail = (props)=>{
    17.     let detail = props.data
    18.  
    19.     const [isModalOpen, setIsModalOpen] = useState(false);
    20.  
    21.     const showModal = () => {
    22.         setIsModalOpen(true);
    23.     };
    24.     const handleOk = () => {
    25.         setIsModalOpen(false);
    26.     };
    27.     const handleCancel = () => {
    28.         setIsModalOpen(false);
    29.     };
    30.     return(
    31.         <>
    32.             <Button type="primary" onClick={showModal}>
    33.                 详情
    34.             </Button>
    35.             <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
    36.                 <Descriptions title="图书详细信息" bordered>
    37.                     <Descriptions.Item label="图书名称" span={2}>{detail.name}</Descriptions.Item>
    38.                     <Descriptions.Item label="图书作者">{detail.author}</Descriptions.Item>
    39.                     <Descriptions.Item label="出版社" span={2}>{detail.publish}</Descriptions.Item>
    40.                     <Descriptions.Item label="ISBN">{detail.isbn}</Descriptions.Item>
    41.                     <Descriptions.Item label="价格" span={2}>{detail.price}元</Descriptions.Item>
    42.                     <Descriptions.Item label="剩余数量">{detail.number}</Descriptions.Item>
    43.                     <Descriptions.Item label="内容简介" span={3}>{detail.intro}</Descriptions.Item>
    44.                     <Descriptions.Item label="出版日期">{detail.pubdate}</Descriptions.Item>
    45.                     <Descriptions.Item label="类别">{detail.type}</Descriptions.Item>
    46.                 </Descriptions>
    47.             </Modal>
    48.         </>
    49.     )
    50. }
    51. 这段代码定义了一个名为 Detail 的 React 函数组件，用于展示图书的详细信息。当用户点击按钮时，会弹出一个模态框（Modal）显示图书的详细信息。

    2.进入随便逛逛，可以看到下面的页面

    在登录前可以预览图书的图文信息

    1.  
    2. 对了，我们该如何找到这个页面对应的代码在哪里呢，看网页的路径：http://127.0.0.1:5000/preview/books
    3. 然后去App.js里面找
    4.  
    5.  <Route path="/preview" element={<FrameForAll />}>
    6.             <Route path="/preview/books" element={<BookPreview />} />
    7.             <Route path="/preview/hotRanking" element={<PreviewHotRanking />} />
    8.           </Route>
    9. 然后直接点击跳转，按住ctrl+点击（vscode中）
    10. 还是beforeLogin.js，不过是其中的BookPreview 组件
    11.  
    12. const BookPreview = ()=>{
    13.  
    14.     const [bookData, setBookData] = useState([])
    15.     const [savedata, setSaveData] = useState([])
    16.  
    17.     const [conponentshowstatus, setConponentShowStatus] = useState(true)
    18.     const [current, setCurrent] = useState(1);
    19.     const [pageSize, setPageSize] = useState(10);
    20.  
    21.     const {
    22.         token: { colorBgContainer },
    23.     } = theme.useToken();
    24.  
    25.     const baseUrl = 'http://127.0.0.1:5000/bookdata'
    26.  
    27.     useEffect(() => {
    28.         // console.log('effect')
    29.         axios.get(baseUrl).then(response => {
    30.             const data = response.data
    31.             // console.log(data)
    32.             setBookData(data)
    33.             setSaveData(data)
    34.         })
    35.     }, [])
    36.     //只在第一次渲染时运行
    37.  
    38.     const handleChange = (e) => {
    39.         const values = e.target.value
    40.         // console.log(values)
    41.         if (values) {
    42.             // 这里保存一个原始数据，便于反复查找使用
    43.             const filterdata = savedata.filter(item => {
    44.                 // console.log(item.value)
    45.                 return item.name.includes(values)
    46.             })
    47.             // console.log(filterdata)
    48.             setBookData(filterdata)
    49.         } else {
    50.             setBookData(savedata)
    51.         }
    52.     }
    53.  
    54.     const onSwitchChange = (checked) => {
    55.         setConponentShowStatus(!checked)
    56.     }
    57.  
    58.     const onPageChange = (page) => {
    59.         // console.log(page);
    60.         setCurrent(page);
    61.     };
    62.  
    63.     const handleShowSizeChange = (current, size) => {
    64.         const newPage = Math.floor(start / size) + 1;
    65.         // console.log(newPage,size)
    66.         setPageSize(size);
    67.         setCurrent(newPage);
    68.     };
    69.  
    70.     // 对数据切片
    71.     const start = (current - 1) * pageSize;
    72.     const end = start + pageSize;
    73.  
    74.     const currentData = bookData.slice(start, end);
    75.  
    76.     return(
    77.         <>
    78.             {/* <p>此为预览页面，仅提供基本功能展示。若想体验完整功能，请先注册并登录！</p> */}
    79.             <Search placeholder="输入书名" onChange={handleChange} enterButton style={{ width: 200, }} />
    80.             <Switch checkedChildren="图片版" unCheckedChildren="文字版" onChange={onSwitchChange} className="switch" />
    81.             <br/>
    82.             <br />
    83.             {/* 图片组件和文字组件 */}
    84.             {
    85.                 conponentshowstatus ?
    86.                 <>
    87.                     <Row gutter={[8, 16]}>
    88.                     {
    89.                         currentData.map((item) => {
    90.                             return (
    91.                                 <Col span={6} key={item.id}>
    92.                                     <Card
    93.                                         hoverable
    94.                                         style={{
    95.                                             width: 300,
    96.                                         }}
    97.                                         cover={<img alt="example" src={"http://127.0.0.1:5000/images/" + item.isbn + ".jpg"} />}
    98.                                         actions={[
    99.                                             <FakeBorrowCollect name="借阅"/>,
    100.                                             <Detail data={item} />,
    101.                                             <FakeBorrowCollect name="收藏" />
    102.                                         ]}
    103.                                         >
    104.                                         <Meta title={item.name} description={item.author} />
    105.                                     </Card>
    106.                                 </Col>
    107.                                 )
    108.                             })
    109.                         }
    110.                         </Row>
    111.                         <br />
    112.                         <Pagination className="pagination" current={current} showSizeChanger onShowSizeChange={handleShowSizeChange} onChange={onPageChange} total={bookData.length} />
    113.                 </>
    114.                     :
    115.                     <Table columns={columns} dataSource={bookData} locale={{ emptyText: '暂无数据' }} />
    116.             }
    117.         </>
    118.     )
    119. }

     一点点看，首先我们要搞清楚图书列表是怎么回事

    1. 1）首先是展示，页面这么多书的数据是从何而来，看下面的代码数据应该是来自于下面的代码
    2. useEffect(() => {
    3.     axios.get(baseUrl).then(response => {
    4.         const data = response.data;
    5.         setBookData(data);
    6.         setSaveData(data);
    7.     });
    8. }, []);
    9. 然后设置？  ：  实现文字版和图片版的切换（根据 conponentshowstatus 状态决定显示图片版（用 Card 组件展示图书信息）还是文字版（用 Table 组件展示图书信息））
    10.  
    11. 2）再说下搜索功能
    12.   const handleChange = (e) => {
    13.         const values = e.target.value
    14.         // console.log(values)
    15.         if (values) {
    16.             // 这里保存一个原始数据，便于反复查找使用
    17.             const filterdata = savedata.filter(item => {
    18.                 // console.log(item.value)
    19.                 return item.name.includes(values)
    20.             })
    21.             // console.log(filterdata)
    22.             setBookData(filterdata)
    23.         } else {
    24.             setBookData(savedata)
    25.         }
    26.     }
    27. setBookData 更新 bookData 状态变量，bookData 用于存储和显示当前过滤后的图书数据。
    28. setSaveData 更新 savedata 状态变量，savedata 用于存储从服务器获取的原始图书数据，不直接显示，但用于搜索和过滤操作。
    29.  
    30. 3）再说下分页
    31. const [current, setCurrent] = useState(1); // 当前页码
    32. const [pageSize, setPageSize] = useState(10); // 每页显示的条目数
    33. const onPageChange = (page) => {
    34.     setCurrent(page); // 更新当前页码
    35. };
    36.  
    37. const handleShowSizeChange = (current, size) => {
    38.     setPageSize(size); // 更新每页显示的条目数
    39.     setCurrent(1); // 更新 pageSize 时重置到第一页
    40. };
    41. 4）最后是前面说到的detail功能（详情展示）
    42. 点击详情出来一个弹窗
    43. const Detail = (props)=>{
    44.     let detail = props.data
    45.  
    46.     const [isModalOpen, setIsModalOpen] = useState(false);
    47.  
    48.     const showModal = () => {
    49.         setIsModalOpen(true);
    50.     };
    51.     const handleOk = () => {
    52.         setIsModalOpen(false);
    53.     };
    54.     const handleCancel = () => {
    55.         setIsModalOpen(false);
    56.     };
    57.     return(
    58.         <>
    59.             <Button type="primary" onClick={showModal}>
    60.                 详情
    61.             </Button>
    62.             <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
    63.                 <Descriptions title="图书详细信息" bordered>
    64.                     <Descriptions.Item label="图书名称" span={2}>{detail.name}</Descriptions.Item>
    65.                     <Descriptions.Item label="图书作者">{detail.author}</Descriptions.Item>
    66.                     <Descriptions.Item label="出版社" span={2}>{detail.publish}</Descriptions.Item>
    67.                     <Descriptions.Item label="ISBN">{detail.isbn}</Descriptions.Item>
    68.                     <Descriptions.Item label="价格" span={2}>{detail.price}元</Descriptions.Item>
    69.                     <Descriptions.Item label="剩余数量">{detail.number}</Descriptions.Item>
    70.                     <Descriptions.Item label="内容简介" span={3}>{detail.intro}</Descriptions.Item>
    71.                     <Descriptions.Item label="出版日期">{detail.pubdate}</Descriptions.Item>
    72.                     <Descriptions.Item label="类别">{detail.type}</Descriptions.Item>
    73.                 </Descriptions>
    74.             </Modal>
    75.         </>
    76.     )
    77. }
    78. 5）整体布局方面（FrameForAll）
    79. 使用了 Ant Design 的 Layout 组件来创建一个包含 Header、Sider、Content 和 Footer 的布局。
    80. 主页面布局 (Layout)：
    81. 最外层的 Layout 组件包含整个页面的布局。
    82. 头部 (Header)：
    83. 使用了 Ant Design 的 Header 组件，类名为 header。
    84. 包含一个 Title 元素和一个自定义的 LoginRegisterButton 组件。
    85. Title 组件使用 level={3} 和 type="success" 来设置其样式。
    86. 侧边栏 (Sider)：
    87. 宽度设置为 200 像素，背景色来自主题的 colorBgContainer。
    88. 包含一个 Menu 组件，设置了 inline 模式，默认选中的键为 ['1']，默认打开的子菜单为 ['sub1']。
    89. 主要内容区域 (Layout)：
    90. 内部 Layout 设置了 padding 和 margin，确保内容区域有适当的间距。
    91. 包含 Content 和 Footer 两个子组件。
    92. 内容区域 (Content)：
    93. 设置了 padding 和 margin，最小高度为 280 像素，背景色来自主题的 colorBgContainer，确保内容区域有滚动条（overflow: 'auto'）。
    94. Outlet 组件用于显示嵌套路由的内容。
    95. 页脚 (Footer)：
    96. 设置了居中对齐 (textAlign: 'center')，显示版权信息。
    97. 非常好

    然后是热门排行页面

    1. const PreviewHotRanking = () => {
    2.  
    3.     return (
    4.         <>
    5.             <HotBorrow  />
    6.             <NewBook  />
    7.             <HotCollect  />
    8.         </>
    9.     )
    10. }
    11. 看来是分三个组件
    12. 一个个看
    13. 1）HotBorrow
    14. 简单的调取接口，获取数据，展示
    15. 使用了 Ant Design 的 List 组件来显示热门借阅的图书数据
    16. 组件结构：
    17. Title 组件显示 "热门借阅" 标题。
    18. List 组件用于显示图书列表。
    19. itemLayout="vertical" 设置列表项为垂直布局。
    20. size="small" 设置列表项大小为小。
    21. dataSource={bookdata} 设置列表的数据源为状态变量 bookdata。
    22. footer 属性用于显示列表底部的额外内容。
    23. renderItem 属性用于自定义列表项的渲染。
    24. 2）NewBook  HotCollect 和HotBorrow  也差不多一个道理，换了个布局
    25. NewBook  
    26. 网格布局 (Row 和 Col)：
    27. 使用 Ant Design 的 Row 组件创建水平网格布局。
    28. gutter={[16, 24]} 设置了列之间的水平间距和行之间的垂直间距。
    29. 使用 Col 组件来创建每个图书卡片的列。
    30. span={8} 设置每个图书卡片列的宽度占比。
    31. 图书卡片 (Card)：
    32. 使用 Card 组件包裹每个图书。
    33. 设置 hoverable 属性，使得鼠标移动到卡片上时有浮动效果。
    34. 设置 cover 属性，用于显示图书的封面图片。
    35. actions 属性定义了操作按钮，包括借阅、详情和收藏。
    36. 使用 Meta 组件来显示图书的标题和作者。
    37. 3）HotCollect  
    38. 同HotBorrow

    随便逛逛差不多了，但是还有很多没有逛的，比如说借阅，收藏，管理员权限都需要登录才行
    我们进入下一部分吧

    3.注册功能

    1. registerForm.js
    2. const RegisterForm = () => {
    3.     const [form] = Form.useForm();
    4.  
    5.     const [isAlertShow, setAlertShow] = useState(false)
    6.     const [isRegister,setRegister] = useState(false)
    7.  
    8.     // 注册post函数
    9.     const ifRegister = async res => {
    10.         const response = await axios.post(baseUrl, res)
    11.         // console.log('response.data:',response.data)
    12.         return response.data
    13.     }
    14.     const onFinish = async (values) => {
    15.         console.log('Received values of form: ', values);
    16.         try{
    17.             const res1 = await ifRegister(values)
    18.             // console.log('res1:', res1)
    19.             setRegister(true)
    20.         }catch(exception){
    21.             // console.log(exception)
    22.             setAlertShow(true)
    23.             setTimeout(() => { setAlertShow(false) }, 3000)
    24.         }
    25.     };
    26.     const prefixSelector = (
    27.         <Form.Item name="prefix" noStyle>
    28.             <Select
    29.                 style={{
    30.                     width: 70,
    31.                 }}
    32.             >
    33.                 <Option value="86">+86</Option>
    34.                 <Option value="87">+87</Option>
    35.             </Select>
    36.         </Form.Item>
    37.     );
    38.  
    39.     return (
    40.         <>
    41.             {isAlertShow ? <Alert
    42.                 className='registeralert'
    43.                 message="Error"
    44.                 description="用户名重复！"
    45.                 type="error"
    46.                 showIcon
    47.                 closable
    48.             /> : ''}
    49.             {isRegister?
    50.                 <Result
    51.                     status="success"
    52.                     title="注册成功！"
    53.                     extra={[
    54.                         <Link to="/login"><Button type="primary" key="console">前往登录</Button></Link>,
    55.                     ]}
    56.                 />
    57.             :<Form
    58.                 {...formItemLayout}
    59.                 form={form}
    60.                 className="registerform"
    61.                 name="register"
    62.                 onFinish={onFinish}
    63.                 initialValues={{
    64.                     prefix: '86',
    65.                 }}
    66.                 scrollToFirstError
    67.             >
    68.                 <Form.Item
    69.                     name="password"
    70.                     label="密码"
    71.                     rules={[
    72.                         {
    73.                             required: true,
    74.                             message: '请输入你的密码！',
    75.                         },
    76.                     ]}
    77.                     hasFeedback
    78.                 >
    79.                     <Input.Password />
    80.                 </Form.Item>
    81.  
    82.                 <Form.Item
    83.                     name="confirm"
    84.                     label="确认密码"
    85.                     dependencies={['password']}
    86.                     hasFeedback
    87.                     rules={[
    88.                         {
    89.                             required: true,
    90.                             message: '请确认你的密码！',
    91.                         },
    92.                         ({ getFieldValue }) => ({
    93.                             validator(_, value) {
    94.                                 if (!value || getFieldValue('password') === value) {
    95.                                     return Promise.resolve();
    96.                                 }
    97.                                 return Promise.reject(new Error('两次输入的密码不一致！'));
    98.                             },
    99.                         }),
    100.                     ]}
    101.                 >
    102.                     <Input.Password />
    103.                 </Form.Item>
    104.  
    105.                 <Form.Item
    106.                     name="nickname"
    107.                     label="用户名"
    108.                     tooltip="你想让其他人如何称呼你？"
    109.                     rules={[
    110.                         {
    111.                             required: true,
    112.                             message: '请输入你的用户名！',
    113.                             whitespace: true,
    114.                         },
    115.                     ]}
    116.                 >
    117.                     <Input />
    118.                 </Form.Item>
    119.  
    120.                 <Form.Item
    121.                     name="phone"
    122.                     label="电话号码"
    123.                     rules={[
    124.                         {
    125.                             required: true,
    126.                             message: '请输入你的电话号码！',
    127.                         },
    128.                     ]}
    129.                 >
    130.                     <Input
    131.                         addonBefore={prefixSelector}
    132.                         style={{
    133.                             width: '100%',
    134.                         }}
    135.                     />
    136.                 </Form.Item>
    137.  
    138.                 <Form.Item
    139.                     name="gender"
    140.                     label="性别"
    141.                     rules={[
    142.                         {
    143.                             required: true,
    144.                             message: '请选择你的性别！',
    145.                         },
    146.                     ]}
    147.                 >
    148.                     <Select placeholder="选择你的性别">
    149.                         <Option value="男性">男性</Option>
    150.                         <Option value="女性">女性</Option>
    151.                         <Option value="其他">其他</Option>
    152.                     </Select>
    153.                 </Form.Item>
    154.  
    155.                 <Form.Item
    156.                     name="agreement"
    157.                     valuePropName="checked"
    158.                     rules={[
    159.                         {
    160.                             validator: (_, value) =>
    161.                                 value ? Promise.resolve() : Promise.reject(new Error('应当同意服务条款！')),
    162.                         },
    163.                     ]}
    164.                     {...tailFormItemLayout}
    165.                 >
    166.                     <Checkbox>
    167.                         注册即代表同意<a href="">服务条款</a>
    168.                     </Checkbox>
    169.                 </Form.Item>
    170.                 <Form.Item {...tailFormItemLayout}>
    171.                     <Button type="primary" htmlType="submit">
    172.                         注册
    173.                     </Button>
    174.                 </Form.Item>
    175.             </Form>}
    176.         </>
    177.     );
    178. };
    179.  
    180. 使用 useState 钩子来管理是否显示警告信息和注册成功的状态。
    181. 定义了一个用于执行注册操作的异步函数 ifRegister，并在表单提交时调用。
    182. 组件结构：
    183. 如果 isAlertShow 为 true，则显示一个错误警告信息。
    184. 如果 isRegister 为 true，则显示注册成功的结果页面，否则显示注册表单。
    185. 注册表单包括密码、确认密码、用户名、电话号码、性别和服务条款同意复选框等字段。
    186. 使用 Ant Design 的 Form 组件包裹表单内容，设置表单的布局、名称和提交处理函数。
    187. 在表单中定义了各种输入框、密码框、下拉框和复选框，以及提交按钮。
    1. 我想我们得看一下后端代码了
    2. 1）首先是一个__init__.py文件
    3. from flask import Flask
    4. from flask_cors import CORS
    5. from flask_sqlalchemy import SQLAlchemy
    6. from flask_jwt_extended import JWTManager
    7. app=Flask('libraryms',template_folder="../templates",static_folder="../static")
    8. app.config.from_pyfile('settings.py')
    9. cors = CORS(app)
    10. db=SQLAlchemy(app)
    11. jwt = JWTManager()
    12. jwt.init_app(app)
    13. from libraryms import views,commands
    14. Flask('libraryms'): 创建一个名为 libraryms 的 Flask 应用实例。
    15. template_folder="../templates": 设置模板文件夹的路径。
    16. static_folder="../static": 设置静态文件夹的路径。
    17. 从 settings.py 文件中加载应用程序配置。
    18. 启用跨域资源共享（CORS），允许来自不同域的请求访问此 Flask 应用程序。
    19. 使用 SQLAlchemy 进行数据库操作并与 Flask 应用集成。
    20. 初始化 JWT 身份验证管理器并与 Flask 应用集成。
    21. 导入应用程序的视图和命令模块。确保在 libraryms 包中有 views.py 和 commands.py 文件。
    22.  
    23. 2）setting.py
    24. import os
    25. from libraryms import app
    26. SQLALCHEMY_DATABASE_URI=os.getenv('DATABASE_URL')
    27. JWT_SECRET_KEY="super-secret"
    28.  
    29. 将 SQLALCHEMY_DATABASE_URI 设置为环境变量 os.getenv('DATABASE_URL') 可以帮助保护敏感信息（如数据库连接字符串）不直接暴露在代码中。
    30. 3）commands.py
    31. 为flask build 填充预置数据做准备
    32. 4）models.py
    33. 为flask initdb 初始化数据库做准备
    34. 5）views.py
    35. 接口大集合
    36. 这里我们说注册接口
    37.  
    38. @app.route("/register", methods=["POST"])
    39. @cross_origin()
    40. def register():
    41.     sth = request.json
    42.     # print(sth)
    43.     username = sth['nickname']
    44.     password = sth['password']
    45.     gender = sth['gender']
    46.     phone = sth['phone']
    47. #     判断用户名是否重合，普通用户能注册，所以检查普通用户表
    48.     res1 = normalusr.query.filter(normalusr.username == username).first()
    49.     if res1:
    50.         return jsonify({"msg": "用户名重复！"}), 401
    51.     else:
    52.         # 普通表写入信息
    53.         m1 = normalusr(username=username, password=password)
    54.         db.session.add(m1)
    55.         db.session.commit()
    56.         # 信息表填入信息
    57.         m2 = usrinfo(username=username,tel=phone,sex=gender)
    58.         db.session.add(m2)
    59.         db.session.commit()
    60.         return jsonify({"msg": "注册成功！","ok":"true"}), 200
    61. 很简单，一目明了，加了一个判断，巧妙的是他用了models.py里面的
    62. # 普通用户表
    63. class normalusr(db.Model):
    64.     nid=db.Column(db.Integer,primary_key=True,nullable=False,autoincrement=True)
    65.     username=db.Column(db.String(30))
    66.     password=db.Column(db.String(30))
    67. 这就大大方便了以后的编写，抽象

    4.登录功能

    1. 1）先看一下这个滑动验证码，之前我做过正常的那种验证码，就是输入数字和字母那种，用的是canvas
    2.  <SliderCaptcha
    3.                     初始化背景和拼图图像
    4.                         request={() =>
    5.                             createPuzzle(DemoImage).then(async (res) => {
    6.                                 offsetXRef.current = res.x;
    7.                                 await waitTime();
    8.                                 return {
    9.                                     bgUrl: res.bgUrl,
    10.                                     puzzleUrl: res.puzzleUrl
    11.                                 };
    12.                             })
    13.                         }
    14.                     验证滑动位置
    15.                         onVerify={async (data) => {
    16.                             await waitTime();
    17.                             // console.log(data);
    18.                             if (data.x >= offsetXRef.current - 5 && data.x < offsetXRef.current + 5) {
    19.                                 setDuration(data.duration);
    20.                                 setVisible(true);
    21.                                 await waitTime();
    22.                                 setResult(true);
    23.                                 offsetXRef.current = 0
    24.                                 return Promise.resolve();
    25.                             }
    26.                             return Promise.reject();
    27.                         }}
    28.                     显示滑块
    29.                         bgSize={{
    30.                             width: 250,
    31.                             height: 110
    32.                         }}
    33.                         mode="float"
    34.                         limitErrorCount={3}
    35.                         jigsawContent={
    36.                             visible && (
    37.                                 <div className={"successTip"}>
    38.                                     {Number((duration / 1000).toFixed(2))}秒内完成，打败了98%用户
    39.                                 </div>
    40.                             )
    41.                         }
    42.                         actionRef={actionRef}
    43.                     />
    44. 请求背景和拼图图像
    45. SliderCaptcha 组件的 request 属性定义了获取背景图像和拼图图像的函数。
    46. createPuzzle(DemoImage) 是模拟生成拼图的函数，返回背景图和拼图的位置。
    47. 验证滑动位置
    48. onVerify 属性定义了验证滑动位置的函数。
    49. 用户滑动完成后，将实际滑动位置 data.x 与预期位置 offsetXRef.current 进行比较。如果在误差范围内（5个像素），则验证通过，否则验证失败。
    50. 显示滑块
    51. SliderCaptcha 组件通过 bgUrl 和 puzzleUrl 显示背景图和拼图。
    52. 滑块验证结果
    53. 如果验证通过，setDuration 和 setVisible 更新滑块验证的状态。
    54. 2）然后看看失败次数限制以及账户锁定功能
    55. 登录函数 onFinish 中的失败次数处理：
    56. 在 onFinish 函数中，如果失败次数超过2 (failAttempt > 1)，会显示锁定消息并锁定账户。
    57. 锁定时长设置为31秒（const time = 31 * 1000;），并在本地存储中记录锁定时间。
    58. 登录失败时，失败次数增加，并显示相应警告消息。
    59.  
    60. locked 状态用于指示账户是否被锁定。
    61. remainingTime 和 lockTime 用于计算和显示剩余锁定时间。
    62. useEffect 中的计时器每秒更新一次锁定状态，如果锁定时间到期，则解锁账户并重置失败次数。

     5.普通用户功能


    登录进去发现，好多功能，用户画像和个性化推荐都有，我们一点点来，先看个人中心

    1. 个人中心的基本信息页面 self.js
    2. const Self = ()=>{
    3.     const [info,setInfo] = useState({})
    4.  
    5.     // 获取用户信息
    6.     const self = window.localStorage.getItem('loggedUser')
    7.     const res = {"username":self}
    8.     useEffect(() => {
    9.         // console.log('self info')
    10.         axios.get(baseUrl,{
    11.             params:res
    12.         }).then(response => {
    13.             const data = response.data
    14.             // console.log(data)
    15.             setInfo(data)
    16.             // console.log('info',data)
    17.         })
    18.     }, [])
    19.     //只在第一次渲染时运行
    20.  
    21.     return(
    22.         <>
    23.             <Descriptions title="用户信息" bordered extra={<EditSelf data={info} handleChange={setInfo}/> }>
    24.                 <Descriptions.Item label="用户名" span={3}>{info.username}</Descriptions.Item>
    25.                 <Descriptions.Item label="电话号码" span={3}>{info.tel}</Descriptions.Item>
    26.                 <Descriptions.Item label="性别" span={3}>{info.sex}</Descriptions.Item>
    27.                 <Descriptions.Item label="简介" span={3}>{info.intro}</Descriptions.Item>
    28.             </Descriptions>
    29.             <br/>
    30.             <EditPwd/>
    31.             <br/>
    32.             <br/>
    33.             <IdeaRelease/>
    34.         </>
    35.     );
    36. }
    37. 它这个用户信息在登录后保存到localstorage中，修改密码的时候带过去，然后调用接口直接修改
    38. 后端接口有一个判断来确定是否是管理员，然后查询不同的表，这也是登陆时为什么有哪个选项的原因
    1. 个人用户 个性化推荐
    2. 1）用户画像
    3. 这里他还写了一个通用函数
    4. // 通用post函数
    5. const uniPost = async (url, res) => {
    6.     const response = await axios.post(url, res)
    7.     // console.log('response.data:',response.data)
    8.     return response.data
    9. }
    10. 好事情
    11. 用户画像需要着重于后端代码，让我们看看他是如何实现的'http://127.0.0.1:5000/userprofile'
    12.  
    13. # 用户画像
    14. @app.route('/userprofile', methods=["GET"])
    15. @cross_origin()
    16. def userprofile():
    17.     sth = request.args
    18.     username = sth['username']
    19.     tagarray = []
    20.     bookarray = []
    21.     # 统计借阅历史
    22.     res1 = bookBorrowHistory.query.filter(bookBorrowHistory.borrowusr == username).all()
    23.     for x in res1:
    24.         bookarray.append(x.name)
    25.     # 统计收藏信息
    26.     res2 = bookCollect.query.filter(bookCollect.username == username).all()
    27.     for x in res2:
    28.         res3 = bookitem.query.filter(bookitem.isbn == x.isbn).first()
    29.         bookarray.append(res3.name)
    30.     # 统计所有标签
    31.     for x in bookarray:
    32.         res4 = bookitem.query.filter(bookitem.name == x).first()
    33.         tagarray.append(res4.type)
    34.     # print(bookarray)
    35.     # print(tagarray)
    36.     # 计算出数量最多的3个标签
    37.     dict = {}
    38.     tag = []
    39.     for x in tagarray:
    40.         dict[x] = dict.get(x,0)+1
    41.     # print(dict)
    42.     if len(dict)>3:
    43.         while (len(tag)<3):
    44.             tag.append(max(dict,key=dict.get))
    45.             dict.pop(max(dict,key=dict.get))
    46.     else:
    47.         for key in dict:
    48.             tag.append(key)
    49.     # print(tag)
    50.     return tag
    51. 没有我想的那么复杂，没有用到模型，只是通过统计来实现生成用户标签
    52. 统计每个标签出现的次数，然后选取出现次数最多的前三个标签作为用户的标签信息。
    53.  
    54. 2）个性推荐
    55. 收前端传递的包含用户标签信息的请求，根据这些标签信息生成推荐的图书清单，并将其作为 JSON 格式的响应返回给前端
    56. 根据类比返回罢了
    1. 普通用户心心念的收藏和借阅功能，这里的借阅有些复杂，涉及到还款什么的，先看收藏吧
    2. 这里有个问题：图书列表中已收藏和借阅的书籍在跳转页面后再次回到图书列表页面会不再显示已经借阅或者已经收藏（bookdata.js里面的BookList）
    3.  
    4. 解决办法：在图书列表中保存收藏和借阅的状态：在获取图书列表时，同时获取每本书籍是否已被当前用户收藏或借阅的状态，并将这些状态存储在 bookData 中。
    5.  
    6. 在图书列表加载时检查状态：在 useEffect 中获取图书数据时，额外获取用户的收藏和借阅信息，并更新每本书的状态。
    7.  
    8. 在借阅和收藏操作后更新状态：当用户进行借阅或收藏操作时，更新 bookData 中对应书籍的状态。
    9. 需要加个状态，一会加一下
    10.  
    11.  
    12. 1.收藏  collect.js
    13. 1）搜索功能
    14. 搜索功能通过两个主要函数实现：onSearch 和 handleChange。
    15. onSearch:
    16. 当用户在搜索框中输入内容并点击搜索按钮时触发。
    17. 该函数接收用户输入的值作为参数。
    18. 它首先检查用户是否输入了内容，如果输入了内容，则使用 filter 方法过滤 collectdata 数组，只保留包含用户输入内容的项，并将过滤后的结果设置为新的 collectdata。
    19. 如果用户没有输入内容，则将 savedata（原始数据）设置回 collectdata，这样就重新
    20. handleChange:
    21. 当用户在搜索框中输入内容但不点击搜索按钮时触发（即在输入内容时实时搜索）。
    22. 它与 onSearch 相似，不同之处在于它是实时响应输入的变化。
    23. 它也首先检查用户是否输入了内容。如果输入了内容，则根据当前选择的搜索项 selectdata 使用 filter 方法过滤 savedata 数组，并将过滤后的结果设置为新的 collectdata。
    24. 如果用户没有输入内容，则将 savedata（原始数据）设置回 collectdata。
    25.  
    26.  
    27. 2）导出功能
    28. 首先，将表格数据 collectdata 进行清理，以确保导出的数据格式符合预期。在这里，将每一项的属性名称进行映射，并对价格属性进行调整，添加单位。
    29. 使用 XLSX.utils.json_to_sheet 方法将清理后的数据转换为 Excel 表格的工作表。
    30. 创建一个新的工作簿，并将工作表添加到该工作簿中。
    31. 使用 XLSX.writeFile 方法将工作簿写入到名为 "book.xlsx" 的 Excel 文件中。
    32. 在导出完成后，使用 Ant Design 的 message 组件显示导出成功的消息。
    33.  
    34.  
    35. 3）取消收藏功能，收藏功能
    36. CancelCollect 组件接收一个 data 属性，其中包含了要取消收藏的图书数据。
    37. 组件内部维护了一个 isCollect 状态，用于表示当前是否已收藏。默认为 true。
    38. 当用户点击按钮时，触发 info 函数，该函数首先获取当前用户信息和图书的 ISBN 号，然后通过 uniPost 函数向后端发送请求，告知服务器取消收藏。
    39. 如果取消成功，显示提示消息，并更新 isCollect 状态为 false，同时刷新页面以更新数据。
    40.  
    41. 2.借阅功能  borrow.js
    42. 1)在 useEffect 钩子中，组件首次渲染时从后端获取借阅图书数据，并将其保存在 borrowdata 状态中。然后，根据 ischecking 属性筛选出待审核的借阅申请数据，保存在 applyborrowdata 状态中，以便显示在归还图书申请的表格中。
    43. 表格使用了 borrowColumns 和 applyBorrowColumns，这些列的配置与 collectColumns 类似，用于指定表格中各列的标题和渲染方式。
    44. 这段代码中的主要逻辑是：
    45. 通过 axios 发送请求获取借阅图书数据。
    46. 将数据保存到相应的状态变量中。
    47. 渲染两个表格，分别用于展示借阅图书和归还图书申请。
    48. 2)图书违约
    49. 获取数据后，计算每本书是否超期及超期天数和罚金：
    50. 当前时间戳通过 new Date().getTime() 获取。
    51. 遍历数据，判断是否已还书。如果已还书，根据归还日期计算借阅天数；否则，使用当前时间计算借阅天数。
    52. 判断借阅天数是否超过 31 天，计算超期天数和罚金。
    53. 过滤出所有超期的记录。
    54. 后端接口 http://127.0.0.1:5000/defaultdata
    55. 使用 Flask 框架定义了一个 API 路由 /defaultdata，接受 GET 请求。
    56. 从数据库中查询用户的违约记录，并返回一个包含违约记录的列表。

    6.留言板功能（这里我单独写，是因为感觉不错，有一个评论下回复的功能，需要记一下以及上传图片）但是他只是实现了一个父评论，n个子评论，并没有无限延伸，比如孙评论，一会加一下

    1. messageBoard.js
    2. 1）评论
    3. 前端代码：
    4. MessageBoard 组件：主留言板组件，包含输入框、表情组件、图片上传组件，以及留言和评论显示。
    5. Comment 组件：递归渲染评论和子评论，并处理回复逻辑。
    6. handleReplySubmit 方法：处理子评论的提交，将新回复添加到对应的父评论中，并发送到服务器。
    7. handleClick 方法：处理新的父评论的提交，并发送到服务器。
    8. 后端代码：
    9. get_comments 方法：返回所有评论。
    10. add_comment 方法：根据评论类型（父评论或子评论）将新的评论或回复添加到相应的位置。
    11. 2）上传图片
    12.  
    13. 前端实现：
    14. 文件上传组件：
    15. 使用 Ant Design 的 Upload 组件，用户可以通过点击按钮选择要上传的图片文件。
    16. 设置 action 属性为上传图片的后端接口地址。
    17. 通过 onChange 事件监听文件上传状态的变化，并根据上传结果进行相应的处理。
    18. 上传图片处理：
    19.  
    20. 用户选择图片后，触发 handleChange 函数。
    21. 在 handleChange 函数中，根据文件上传状态（done、uploading、error），对上传的图片进行相应的处理。
    22. 如果文件上传成功（status 为 done），从响应中获取上传成功的图片路径，并将图片路径插入到留言内容中，以显示图片。
    23. 删除图片处理：
    24.  
    25. 用户可以点击已上传图片的删除按钮，触发 handleRemovePics 函数。
    26. 在 handleRemovePics 函数中，向后端发送删除图片的请求，根据后端的响应决定是否删除前端对应的图片。
    27. 后端实现：
    28. 接收上传图片请求：
    29.  
    30. 后端提供一个接口来接收前端上传图片的请求，一般是通过 POST 方法发送图片数据。
    31. 在 Flask 中，可以使用 Flask-Uploads 或直接处理 request.files 来接收上传的图片文件。
    32. 保存图片：
    33.  
    34. 后端接收到图片文件后，根据需求将图片保存到服务器的指定目录中。
    35. 保存成功后，返回图片的访问路径给前端，以便前端显示上传成功的图片。
    36. 删除图片：
    37.  
    38. 后端提供一个接口用于删除指定的图片文件，一般是通过 DELETE 方法发送图片文件名或路径。
    39. 在删除图片接口中，根据文件名或路径定位到要删除的图片文件，并删除它。

    7.管理员功能(信息审核与读者管理)

    1. selfadmin.js
    2. 1.读者管理组件
    3. 读者信息展示：
    4. 通过请求 /usrdata 接口获取读者信息数据，并将其显示在表格中。
    5. 如果没有读者信息，则表格显示暂无数据。
    6. 性别统计分析图：
    7. 通过请求 /usrsexdata 接口获取读者性别数据，并将其用饼图进行可视化展示。
    8. 饼图显示了不同性别的读者比例。
    9. 图书收藏信息展示及分析图：
    10. 通过请求 /usrcollectdata 接口获取读者收藏信息数据，并将其显示在表格中。
    11. 通过请求 /usrcollectanalysisdata 接口获取图书收藏排行数据，并将其用柱状图进行可视化展示。
    12. 柱状图显示了图书收藏量排名前十的图书信息。
    13. 图书借阅信息展示及分析图：
    14. 通过请求 /usrborrowdata 接口获取读者借阅信息数据，并将其显示在表格中。
    15. 通过请求 /usrborrowanalysisdata 接口获取图书借阅排行数据，并将其用柱状图进行可视化展示。
    16. 柱状图显示了图书借阅量排名前十的图书信息。
    17. 前端大同小异，图片生成可以关注一下
    18. 他这里是用接口返回的数据和import { Pie, Column } from '@ant-design/plots';的组件来生成饼状图和条状图图片
    19. 2.信息审核
    20. bookdata、newbookdata、applyborrowdata：分别用于存储所有书籍数据、新书数据和待审核的借阅申请数据。
    21. axios.get('http://127.0.0.1:5000/bookdata') 获取所有书籍数据。
    22. axios.get('http://127.0.0.1:5000/newbookdata') 获取新书数据。
    23. axios.get('http://127.0.0.1:5000/usrborrowlistdata') 获取用户借阅列表数据，并过滤和计算是否超期。

    写不下去了，快吐了，一会改一下上面提出的两个bug吧
     

    8.虽然昨天整体看了一下，但还是有一些小疑惑需要解决

    1）如何实现管理员与普通用户的划分的

    前端:如果勾选了管理员复选框，则会将一个名为 admin 的键添加到本地存储中，并设置其值为 true。在后续的组件中，检查本地存储中是否存在 admin 键以确定用户是否为管理员。

    2）如何实现未登录就不能访问的呢

     element={}>

                } />

                } />

             

              }/>

              }>

                } />

                } />

    他写了很多组件，一个是预览状态的，也就是未登录，另一个home就是登录的，很简单

    9.bug1修改：：图书列表中已收藏和借阅的书籍在跳转页面后再次回到图书列表页面会不再显示已经借阅或者已经收藏（bookdata.js里面的BookList）

    他这里是直接将react打包后的文件塞到flask的文件夹里的，所以我们这次要启动两个文件夹了，flask run 启动，为接口做准备，这里就不单独启动flask了，cd  my-app,npm install,npm start 启动前端

    1. 收藏显示问题
    2. const Collect = (props)=>{
    3.     const data = props.data
    4.  
    5.     const [isCollect,setCollect]=useState(false)
    6.     const [messageApi, contextHolder] = message.useMessage();
    7.  
    8.     const info = async() => {
    9.         
    10.         const self = window.localStorage.getItem('loggedUser')
    11.         const newValue = {
    12.             username:self,
    13.             isbn:data.isbn,
    14.             isCollect
    15.         }
    16.         // console.log(newValue)
    17.         
    18.         setCollect(!isCollect)
    19.  
    20.         const res1 = await uniPost('http://127.0.0.1:5000/tocollect',newValue)
    21.         
    22.         // console.log('res1',res1)
    23.         // 这里状态滞后更新，非取反isCollect为真实状态
    24.         messageApi.info(!isCollect ? '收藏成功！' : '取消成功！') 
    25.         // console.log(data.isbn)
    26.         // console.log(isCollect)
    27.     };
    28.  
    29.     return (
    30.         <>
    31.             {contextHolder}
    32.             <Button type="primary" onClick={info} ghost>
    33.                 {isCollect ? '取消收藏' :'收藏'}
    34.             </Button>
    35.         </>
    36.     );
    37. }
    38. 上面的组件 Collect 通过 useState hook 来管理 isCollect 变量的状态。初始状态为 false，表示未收藏。当用户点击按钮时，触发 info 函数，该函数会根据当前的 isCollect 状态来执行不同的操作：
    39. 如果 isCollect 是 false，表示当前状态是未收藏，那么点击按钮后会执行收藏操作，并将 isCollect 置为 true。
    40. 如果 isCollect 是 true，表示当前状态是已收藏，那么点击按钮后会执行取消收藏操作，并将 isCollect 置为 false。
    41. 这很好，无可指摘，我们需要做的是在一开始加载的时候，通过查询，调用接口将已收藏的显示为已收藏
    42.   {
    43.         "author": "\u7d2b\u91d1\u9648",
    44.         "intro": "\u7ed3\u5a5a\u7b2c\u56db\u5e74\uff0c\u5f90\u9759\u6709\u4e86\u5916\u9047\uff0c\u5e76\u5411\u5f20\u4e1c\u5347\u63d0\u51fa\u79bb\u5a5a\u3002\u4f5c\u4e3a\u4e0a\u95e8\u5973\u5a7f\u5",
    45.         "isbn": "9787540468422",
    46.         "key": 11,
    47.         "name": "\u574f\u5c0f\u5b69",
    48.         "number": 8,
    49.         "price": "54.00",
    50.         "pubdate": "2018-7-1",
    51.         "publish": "\u6e56\u5357\u6587\u827a\u51fa\u7248\u793e",
    52.         "type": "\u60ac\u7591"
    53.     },
    54. 通过接口返回的数据可以看到，里面并没有一个字段来显示书籍是否已经被收藏，那么作者是如何实现收藏功能的，它通过将username，iscollect和isbn传给后端，并且建了一个表（包含id，用户名和对应的isbn）来实现收藏功能和取消收藏功能
    55. 那我们就可以通过查询这个表的信息来筛选当前用户已收藏或者未收藏的书籍显示在booklist
    56. 但是这样太麻烦了，所以我觉得给这个bookitem加一个字段来显示是否被收藏，虽然这样同样麻烦，需要我改前端和后端
    57. 1）进入数据库
    58. 执行ALTER TABLE `bookitem` ADD COLUMN `iscollect` BOOLEAN DEFAULT 0;（默认为0，没有收藏）
    59. 2）更改代码
    60. 首先是models.py,加入最后一行
    61. # 图书信息表
    62. class bookitem(db.Model):
    63.     bid=db.Column(db.Integer,primary_key=True,nullable=False,autoincrement=True)
    64.     name=db.Column(db.String(50))
    65.     author=db.Column(db.String(50))
    66.     publish=db.Column(db.String(40))
    67.     isbn=db.Column(db.String(60))
    68.     price=db.Column(db.String(20))
    69.     number=db.Column(db.Integer)
    70.     intro=db.Column(db.String(3000))
    71.     pubdate=db.Column(db.String(30))
    72.     type=db.Column(db.String(30))
    73.     iscollect = db.Column(db.Boolean)
    74. 然后是views.py,加入最后一行"iscollect": x.iscollect，返回给前端
    75. # 图书类路由-----------------------------------------
    76. @app.route('/bookdata', methods=["GET"])
    77. @cross_origin()
    78. def bookdata():
    79.     res1 = bookitem.query.all()
    80.     response = []
    81.     for x in res1:
    82.         # print(x)
    83.         item = {"key":x.bid,"name":x.name, "author":x.author, "publish":x.publish, "isbn":x.isbn, "price":x.price, "number":x.number, "type":x.type,"intro":x.intro, "pubdate":x.pubdate, "iscollect": x.iscollect }
    84.         response.append(item)
    85.     return response
    86. 再然后是前端代码bookdata.js里面的Collect
    87. const [isCollect,setCollect]=useState(data.iscollect)
    88. 然后注释掉假的// messageApi.info(!isCollect ? '收藏成功！' : '取消成功！') 
    89. 再修改后端代码
    90. def tocollect():
    91.     sth = request.json
    92.     # print('json msg:', sth)
    93.     username = sth['username']
    94.     isbn = sth['isbn']
    95.     iscollect = sth['isCollect']
    96.     # 前面为要收藏，后面为已收藏取消收藏
    97.     if not iscollect:
    98.         # 先找书的所有收藏信息
    99.         res1 = bookCollect.query.filter(bookCollect.isbn == isbn).all()
    100.         tag = False
    101.         # 再判断是否收藏这本书
    102.         for x in res1:
    103.             if x.username == username:
    104.                 tag=True
    105.         # 没收藏就记录信息，收藏过就忽略
    106.         
    107.         db.session.commit()
    108.         if not tag:
    109.             newitem = bookCollect(username=username,isbn=isbn)
    110.             db.session.add(newitem)
    111.             book = bookitem.query.filter_by(isbn=isbn).first()
    112.             book.iscollect = True  # 更新iscollect为True
    113.             db.session.commit()
    114.         return jsonify({"msg": "collect ok！"})
    115.     else:
    116.         book = bookitem.query.filter_by(isbn=isbn).first()
    117.         book.iscollect = False  # 更新iscollect为True
    118.         res1 = bookCollect.query.filter(bookCollect.isbn == isbn).all()
    119.         for x in res1:
    120.             if x.username==username:
    121.                 db.session.delete(x)
    122.         db.session.commit()
    123.         return jsonify({"msg": "cancel collect ok！"})
    124. 结束，借阅的部分同理，我就不继续了

    10.bug2修改：多级评论功能添加

    1. messageBoard.js
    2. 实现多级评论
    3. 1）对数据库模型进行修改
    4. 对messageboardchildcomment数据库加入parentId字段  int
    5. class messageboardchildcomment(db.Model):
    6.     id=db.Column(db.Integer,primary_key=True,nullable=False,autoincrement=True)
    7.     commentId = db.Column(db.Integer)
    8.     fromId = db.Column(db.String(30))
    9.     content = db.Column(db.String(300))
    10.     createTime = db.Column(db.String(50))
    11.     parentId=db.Column(db.Integer)
    12. 2）对前端代码修改
    13. 将之前的子代码抽出来
    14.  const renderComments = (comments,handleChildDelete) => {
    15.         return comments.map((item) => {
    16.             return (
    17.                 <div className='childcomment' key={item.id}>
    18.                     <span className='childusr'>{item.fromId}</span>
    19.                     <span className='childtime'>{timetrans(Number(item.createTime))}</span>
    20.                     {isAdmin && <span className='childdelete' onClick={() => { handleChildDelete(item.id) }}>{<DeleteOutlined />}</span>}
    21.                     <div className='childcontent'>{item.content}</div>
    22.                     {item.child && renderComments(item.child)}
    23.                     <div>
    24.                     <span className='likeicon' onClick={handlelikeclick}>
    25.                         {click ? <LikeFilled /> : <LikeOutlined />}
    26.                     </span>
    27.                     {state.likeNum}
    28.                     <span className='parentreply' onClick={handlereplyclick}>{replyclick ?'取消':'回复'}</span>
    29.                     {
    30.                         isAdmin&&<span className='parentdelete' onClick={handleparentdelete}>{<DeleteOutlined/>}</span>
    31.                     }
    32.                     
    33.                 </div>
    34.                 </div>
    35.             );
    36.         });
    37.     };
    38. 之前的state.child && state.child.map((item) => .....
    39. 改为  {state.child && renderComments(state.child)}
    40. 3）后端代码：
    41. 有点复杂，数据库设计的有问题我重新写一个demo
    1. 1）创建数据库的新表
    2. SET NAMES utf8mb4;
    3. SET FOREIGN_KEY_CHECKS = 0;
    4.  
    5. -- ----------------------------
    6. -- Table structure for comment
    7. -- ----------------------------
    8. DROP TABLE IF EXISTS `comment`;
    9. CREATE TABLE `comment`  (
    10.   `id` int NOT NULL AUTO_INCREMENT,
    11.   `author` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
    12.   `text` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
    13.   `parent_id` int NULL DEFAULT NULL,
    14.   `level` int NULL DEFAULT 0,
    15.   `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
    16.   PRIMARY KEY (`id`) USING BTREE,
    17.   INDEX `parent_id`(`parent_id` ASC) USING BTREE,
    18.   CONSTRAINT `comment_ibfk_1` FOREIGN KEY (`parent_id`) REFERENCES `comment` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT
    19. ) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
    20.  
    21. SET FOREIGN_KEY_CHECKS = 1;
    22. 2）models.py的更新
    23. class Comment(db.Model):
    24.     id = db.Column(db.Integer, primary_key=True)
    25.     author = db.Column(db.String(255), nullable=False)
    26.     text = db.Column(db.Text, nullable=False)
    27.     parent_id = db.Column(db.Integer, db.ForeignKey('comment.id'), nullable=True)
    28.     level = db.Column(db.Integer, default=0)
    29.     created_at = db.Column(db.DateTime, default=datetime.utcnow)
    30.     replies = db.relationship('Comment', backref=db.backref('parent', remote_side=[id]), lazy=True)
    31. 3）后端代码的更新
    32.  
    33. # 获取所有评论
    34. @app.route('/api/comments', methods=['GET'])
    35. @cross_origin()
    36. def get_comments():
    37.     comments = Comment.query.order_by(Comment.created_at.asc()).all()
    38.  
    39.     def build_tree(comments, parent_id=None):
    40.         tree = []
    41.         for comment in comments:
    42.             if comment.parent_id == parent_id:
    43.                 replies = build_tree(comments, comment.id)
    44.                 comment_data = {
    45.                     'id': comment.id,
    46.                     'author': comment.author,
    47.                     'text': comment.text,
    48.                     'parent_id': comment.parent_id,
    49.                     'level': comment.level,
    50.                     'created_at': comment.created_at.isoformat(),
    51.                     'replies': replies
    52.                 }
    53.                 tree.append(comment_data)
    54.         return tree
    55.  
    56.     return jsonify(build_tree(comments))
    57.  
    58. # 添加新评论
    59. @app.route('/api/comments', methods=['POST'])
    60. @cross_origin()
    61. def add_comment():
    62.     data = request.json
    63.     new_comment = Comment(
    64.         author=data['author'],
    65.         text=data['text'],
    66.         parent_id=data.get('parent_id'),
    67.         level=data.get('level', 0)
    68.     )
    69.     if new_comment.parent_id:
    70.         parent_comment = Comment.query.get(new_comment.parent_id)
    71.         if parent_comment:
    72.             new_comment.level = parent_comment.level + 1
    73.  
    74.     db.session.add(new_comment)
    75.     db.session.commit()
    76.  
    77.     return jsonify({
    78.         'id': new_comment.id,
    79.         'author': new_comment.author,
    80.         'text': new_comment.text,
    81.         'parent_id': new_comment.parent_id,
    82.         'level': new_comment.level,
    83.         'created_at': new_comment.created_at.isoformat(),
    84.         'replies': []
    85.     }), 201
    86.  
    87. # 更新评论
    88. @app.route('/api/comments/', methods=['PUT'])
    89. @cross_origin()
    90. def update_comment(id):
    91.     data = request.json
    92.     comment = Comment.query.get_or_404(id)
    93.     comment.text = data['text']
    94.     db.session.commit()
    95.     return jsonify({
    96.         'id': comment.id,
    97.         'author': comment.author,
    98.         'text': comment.text,
    99.         'parent_id': comment.parent_id,
    100.         'level': comment.level,
    101.         'created_at': comment.created_at.isoformat()
    102.     })
    103. def delete_comment_and_replies(comment_id):
    104.     comment = Comment.query.get_or_404(comment_id)
    105.     for reply in comment.replies:
    106.         delete_comment_and_replies(reply.id)
    107.     db.session.delete(comment)
    108. # 删除评论
    109. @app.route('/api/comments/', methods=['DELETE'])
    110. @cross_origin()
    111. def delete_comment(id):
    112.     delete_comment_and_replies(id)
    113.     db.session.commit()
    114.     return jsonify({'message': 'Comment deleted'}), 204
    115. 4）前端代码的更新
    116. import React, { useState, useEffect } from 'react';
    117. import axios from 'axios';
    118.  
    119. // Comment Component
    120. const Comment = ({ comment, onReply }) => {
    121.     const [showReplyForm, setShowReplyForm] = useState(false);
    122.     const [replyAuthor, setReplyAuthor] = useState('');
    123.     const [replyText, setReplyText] = useState('');
    124.  
    125.     const handleReply = () => {
    126.         onReply(comment.id, replyAuthor, replyText);
    127.         setReplyAuthor('');
    128.         setReplyText('');
    129.         setShowReplyForm(false);
    130.     };
    131.  
    132.     return (
    133.         <div style={{ marginLeft: comment.level * 20, borderLeft: '1px solid #ccc', paddingLeft: '10px' }}>
    134.             <p><strong>{comment.author}</strong>: {comment.text}</p>
    135.             <button onClick={() => setShowReplyForm(!showReplyForm)}>Reply</button>
    136.             {showReplyForm && (
    137.                 <div>
    138.                     <input 
    139.                         type="text" 
    140.                         placeholder="Your name" 
    141.                         value={replyAuthor} 
    142.                         onChange={(e) => setReplyAuthor(e.target.value)} 
    143.                     />
    144.                     <input 
    145.                         type="text" 
    146.                         placeholder="Your reply" 
    147.                         value={replyText} 
    148.                         onChange={(e) => setReplyText(e.target.value)} 
    149.                     />
    150.                     <button onClick={handleReply}>Add Reply</button>
    151.                 </div>
    152.             )}
    153.         </div>
    154.     );
    155. };
    156.  
    157. // CommentThread Component
    158. const CommentThread = ({ comment, onReply }) => {
    159.     return (
    160.         <div>
    161.             <Comment comment={comment} onReply={onReply} />
    162.             {comment.replies && comment.replies.map(reply => (
    163.                 <CommentThread key={reply.id} comment={reply} onReply={onReply} />
    164.             ))}
    165.         </div>
    166.     );
    167. };
    168.  
    169. // CommentBox Component
    170. const CommentBox = () => {
    171.     const [comments, setComments] = useState([]);
    172.     const [author, setAuthor] = useState('');
    173.     const [text, setText] = useState('');
    174.  
    175.     useEffect(() => {
    176.         axios.get('http://127.0.0.1:5000/api/comments')
    177.             .then(response => {
    178.                 setComments(response.data);
    179.             })
    180.             .catch(error => {
    181.                 console.error('There was an error fetching the comments!', error);
    182.             });
    183.     }, []);
    184.  
    185.     const addComment = () => {
    186.         const newComment = {
    187.             author,
    188.             text,
    189.             parent_id: null,
    190.             level: 0,
    191.         };
    192.         axios.post('http://127.0.0.1:5000/api/comments', newComment)
    193.             .then(response => {
    194.                 setComments([...comments, response.data]);
    195.                 setAuthor('');
    196.                 setText('');
    197.             })
    198.             .catch(error => {
    199.                 console.error('There was an error adding the comment!', error);
    200.             });
    201.     };
    202.  
    203.     const handleReply = (commentId, replyAuthor, replyText) => {
    204.         const newReply = {
    205.             author: replyAuthor,
    206.             text: replyText,
    207.             parent_id: commentId,
    208.             level: 0,
    209.         };
    210.         axios.post('http://127.0.0.1:5000/api/comments', newReply)
    211.             .then(response => {
    212.                 const updatedComments = [...comments];
    213.                 const addReplyToComment = (comments, commentId, reply) => {
    214.                     for (let comment of comments) {
    215.                         if (comment.id === commentId) {
    216.                             reply.level = comment.level + 1;
    217.                             comment.replies.push(reply);
    218.                             return true;
    219.                         }
    220.                         if (comment.replies.length > 0) {
    221.                             const found = addReplyToComment(comment.replies, commentId, reply);
    222.                             if (found) return true;
    223.                         }
    224.                     }
    225.                     return false;
    226.                 };
    227.                 
    228.                 addReplyToComment(updatedComments, commentId, response.data);
    229.                 setComments(updatedComments);
    230.             })
    231.             .catch(error => {
    232.                 console.error('There was an error adding the reply!', error);
    233.             });
    234.     };
    235.  
    236.     return (
    237.         <div>
    238.             <div>
    239.                 <input 
    240.                     type="text" 
    241.                     placeholder="Your name" 
    242.                     value={author} 
    243.                     onChange={(e) => setAuthor(e.target.value)} 
    244.                 />
    245.                 <input 
    246.                     type="text" 
    247.                     placeholder="Your comment" 
    248.                     value={text} 
    249.                     onChange={(e) => setText(e.target.value)} 
    250.                 />
    251.                 <button onClick={addComment}>Add Comment</button>
    252.             </div>
    253.             <div>
    254.                 {comments.map(comment => (
    255.                     <CommentThread key={comment.id} comment={comment} onReply={handleReply} />
    256.                 ))}
    257.             </div>
    258.         </div>
    259.     );
    260. };
    261.  
    262.  
    263.  
    264. export { CommentBox }

  • 相关阅读:
    高性能 数据库连接池 HikariCP | HikariCP 配置详解
    【新版】系统架构设计师 - 案例分析 - 数据库设计
    【Hello Go】Go语言流程控制
    Head First设计模式(阅读笔记)-02.观察者模式
    最小步数
    Day08--自定义组件的behaviors(等用于vue中的mixins)
    【SQL】sqlite数据库损坏报错：database disk image is malformed（已解决）
    【图像处理】基于双目视觉的物体体积测量算法研究（Matlab代码实现）
    常用的linux命令简要说明以及命令全名理解
    JVM简介
  • 原文地址：https://blog.csdn.net/m0_57057282/article/details/139410933