✨ Implement day-09

boh5 · boh5 · commit dbf33e4a439a · 2024-01-02T21:53:08.000+08:00
diff --git a/day-06/react-jike/craco.config.js b/day-06/react-jike/craco.config.js
@@ -1,9 +1,46 @@
 const path = require('path')
+const {whenProd, getPlugin, pluginByName} = require('@craco/craco')
 
 module.exports = {
   webpack: {
     alias: {
       '@': path.resolve(__dirname, 'src')
+    },
+    // 配置webpack
+    // 配置CDN
+    configure: (webpackConfig) => {
+      let cdn = {
+        js: []
+      }
+      whenProd(() => {
+        // key: 不参与打包的包(由dependencies依赖项中的key决定)
+        // value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下
+        webpackConfig.externals = {
+          react: 'React',
+          'react-dom': 'ReactDOM'
+        }
+        // 配置现成的cdn资源地址
+        // 实际开发的时候 用公司自己花钱买的cdn服务器
+        cdn = {
+          js: [
+            'https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js',
+            'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js',
+          ]
+        }
+      })
+
+      // 通过 htmlWebpackPlugin插件 在public/index.html注入cdn资源url
+      const {isFound, match} = getPlugin(
+        webpackConfig,
+        pluginByName('HtmlWebpackPlugin')
+      )
+
+      if (isFound) {
+        // 找到了HtmlWebpackPlugin的插件
+        match.options.files = cdn
+      }
+
+      return webpackConfig
     }
   }
 }
diff --git a/day-06/react-jike/package.json b/day-06/react-jike/package.json
@@ -18,13 +18,15 @@
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
+    "source-map-explorer": "^2.5.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "eslintConfig": {
     "extends": [
@@ -45,7 +47,7 @@
     ]
   },
   "devDependencies": {
-    "craco": "^0.0.3",
+    "@craco/craco": "^7.1.0",
     "sass": "^1.69.6"
   }
 }
diff --git a/day-06/react-jike/public/index.html b/day-06/react-jike/public/index.html
@@ -29,6 +29,10 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <!-- 加载第三发包的 CDN 链接 -->
+    <% htmlWebpackPlugin.options.files.js.forEach(cdnURL => { %>
+    <script src="<%= cdnURL %>"></script>
+    <% }) %>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/day-06/react-jike/src/apis/article.js b/day-06/react-jike/src/apis/article.js
@@ -22,3 +22,25 @@ export function getArticleListAPI(params) {
     params
   })
 }
+
+export function delArticleAPI(id) {
+  return request({
+    url: `/mp/articles/${id}`,
+    method: 'DELETE'
+  })
+}
+
+export function getArticleByIdAPI(id) {
+  return request({
+    url: `/mp/articles/${id}`,
+    method: 'GET'
+  })
+}
+
+export function updateArticleAPI(data) {
+  return request({
+    url: `/mp/articles/${data.id}?draft=false`,
+    method: 'PUT',
+    data
+  })
+}
diff --git a/day-06/react-jike/src/pages/Article/index.js b/day-06/react-jike/src/pages/Article/index.js
@@ -1,18 +1,19 @@
-import {Link} from 'react-router-dom'
-import {Breadcrumb, Button, Card, DatePicker, Form, Radio, Select, Space, Table, Tag} from 'antd'
+import {Link, useNavigate} from 'react-router-dom'
+import {Breadcrumb, Button, Card, DatePicker, Form, Popconfirm, Radio, Select, Space, Table, Tag} from 'antd'
 // 引入时间选择器汉化包
 import locale from 'antd/es/date-picker/locale/zh_CN'
 import {DeleteOutlined, EditOutlined} from '@ant-design/icons'
 import img404 from '@/assets/error.png'
 import {useChannelList} from "@/hooks/useChannelList"
 import {useEffect, useState} from "react"
-import {getArticleListAPI} from "@/apis/article"
+import {delArticleAPI, getArticleListAPI} from "@/apis/article"
 
 const {Option} = Select
 const {RangePicker} = DatePicker
 
 const Article = () => {
   const {channelList} = useChannelList()
+  const navigate = useNavigate()
 
   // 定义 status 枚举
   const status = {
@@ -62,30 +63,83 @@ const Article = () => {
       render: data => {
         return (
           <Space size="middle">
-            <Button type="primary" shape="circle" icon={<EditOutlined />} />
-            <Button
-              type="primary"
-              danger
-              shape="circle"
-              icon={<DeleteOutlined />}
-            />
+            <Button type="primary" shape="circle" icon={<EditOutlined />}
+                    onClick={() => navigate(`/publish?id=${data.id}`)}/>
+            <Popconfirm
+              placement="top"
+              title="删除文章"
+              description="确认要删除当前文章吗"
+              okText="Yes"
+              cancelText="No"
+              onConfirm={() => onDelConfirm(data)}
+            >
+              <Button
+                type="primary"
+                danger
+                shape="circle"
+                icon={<DeleteOutlined />}
+              />
+            </Popconfirm>
           </Space>
         )
       }
     }
   ]
 
+  // 筛选功能
+  // 1. 准备参数
+  const [reqData, setReqData] = useState({
+    status: '',
+    channel_id: '',
+    begin_pubdate: '',
+    end_pubdate: '',
+    page: 1,
+    per_page: 4
+  })
+
+  // 2. 获取筛选数据
+  const onFinish = (formValue) => {
+    // 3. 把表单数据放到参数中
+    setReqData({
+      ...reqData,
+      channel_id: formValue.channel_id,
+      status: formValue.status,
+      begin_pubdate: formValue.date[0].format('YYYY-MM-DD'),
+      end_pubdate: formValue.date[1].format('YYYY-MM-DD')
+    })
+  }
+
+  // 4. 重新拉取文章列表 + 渲染 table 逻辑（复用）
+  // 由 reqData 依赖项变化，重复执行 useEffect
+
+  // 分页
+  const onPageChange = (page) => {
+    setReqData({
+      ...reqData,
+      page: page.current
+    })
+  }
+
   // 获取文章列表
   const [articleList, setArticleList] = useState([])
   const [articleCount, setArticleCount] = useState(0)
   useEffect(() => {
     async function getList() {
-      const res = await getArticleListAPI()
+      const res = await getArticleListAPI(reqData)
       setArticleList(res.data.results)
       setArticleCount(res.data.total_count)
     }
+
     getList()
-  }, []);
+  }, [reqData])
+
+  // 删除
+  const onDelConfirm = async (data) => {
+    await delArticleAPI(data['id'])
+    setReqData({
+      ...reqData
+    })
+  }
 
   return (
     <div>
@@ -98,7 +152,7 @@ const Article = () => {
         }
         style={{marginBottom: 20}}
       >
-        <Form initialValues={{status: ''}}>
+        <Form initialValues={{status: ''}} onFinish={onFinish}>
           <Form.Item label="状态" name="status">
             <Radio.Group>
               <Radio value={''}>全部</Radio>
@@ -110,7 +164,6 @@ const Article = () => {
           <Form.Item label="频道" name="channel_id">
             <Select
               placeholder="请选择文章频道"
-              defaultValue="lucy"
               style={{width: 120}}
             >
               {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
@@ -130,7 +183,16 @@ const Article = () => {
         </Form>
       </Card>
       <Card title={`根据筛选条件共查询到 ${articleCount} 条结果：`}>
-        <Table rowKey="id" columns={columns} dataSource={articleList} />
+        <Table
+          rowKey="id"
+          columns={columns}
+          pagination={{
+            total: articleCount,
+            pageSize: reqData.per_page
+          }}
+          onChange={onPageChange}
+          dataSource={articleList}
+        />
       </Card>
     </div>
   )
diff --git a/day-06/react-jike/src/pages/Publish/index.js b/day-06/react-jike/src/pages/Publish/index.js
@@ -1,12 +1,13 @@
 import {Breadcrumb, Button, Card, Form, Input, message, Radio, Select, Space, Upload} from 'antd'
-import {Link} from 'react-router-dom'
+import {Link, useSearchParams} from 'react-router-dom'
 import './index.scss'
 import ReactQuill from "react-quill"
 import 'react-quill/dist/quill.snow.css'
-import {useState} from "react"
-import {createArticleAPI} from "@/apis/article"
+import {useEffect, useState} from "react"
+import {createArticleAPI, getArticleByIdAPI, updateArticleAPI} from "@/apis/article"
 import {PlusOutlined} from "@ant-design/icons"
 import {useChannelList} from "@/hooks/useChannelList"
+import article from "@/pages/Article"
 
 const {Option} = Select
 
@@ -26,11 +27,24 @@ const Publish = () => {
       content,
       cover: {
         type: imageType,
-        images: imageList.map(item => item.response.data.url)
+        images: imageList.map(item => {
+          if (item.response) {
+            // 只有新增才能按这个逻辑
+            return item.response.data.url
+          } else {
+            return item.url
+          }
+        })
       },
       channel_id
     }
-    createArticleAPI(reqData)
+    if (articleId) {
+      // 编辑
+      updateArticleAPI({...reqData, id: articleId})
+    } else {
+      // 新增
+      createArticleAPI(reqData)
+    }
   }
 
   // 上传图片回调
@@ -45,13 +59,40 @@ const Publish = () => {
     setImageType(e.target.value)
   }
 
+  // 回填数据
+  const [searchParams] = useSearchParams()
+  const articleId = searchParams.get('id')
+  // 获取实例
+  const [form] = Form.useForm()
+  useEffect(() => {
+    async function getArticleDetail() {
+      const res = await getArticleByIdAPI(articleId)
+      const data = res.data
+      const {cover} = data
+      form.setFieldsValue({
+        ...data,
+        type: cover.type,
+      })
+      // 为什么现在的写法无法回填封面？
+      // 数据结构不一样
+      setImageType(cover.type)
+      setImageList(cover.images.map(url => {
+        return {url}
+      }))
+    }
+    // 只有有 id 的时候才调用
+    if (articleId) {
+      getArticleDetail()
+    }
+  }, [articleId, form]);
+
   return (
     <div className="publish">
       <Card
         title={
           <Breadcrumb items={[
             {title: <Link to={'/'}>首页</Link>},
-            {title: '发布文章'},
+            {title: `${articleId ? '编辑' : '发布'}文章`},
           ]}
           />
         }
@@ -61,6 +102,7 @@ const Publish = () => {
           wrapperCol={{span: 16}}
           initialValues={{type: 0}}
           onFinish={onFinish}
+          form={form}
         >
           <Form.Item
             label="标题"
@@ -93,6 +135,7 @@ const Publish = () => {
               action='http://geek.itheima.net/v1_0/upload'
               onChange={onChange}
               maxCount={imageType}
+              fileList={imageList}
             >
               <div style={{marginTop: 8}}>
                 <PlusOutlined />
diff --git a/day-06/react-jike/src/router/index.js b/day-06/react-jike/src/router/index.js
diff --git a/day-06/react-jike/yarn.lock b/day-06/react-jike/yarn.lock

-Original file line number
+Diff line change
 import Login from "@/pages/Login"
 import Layout from "@/pages/Layout"
 import {AuthRoute} from "@/compenents/AuthRoute"
 -import Home from "@/pages/Home"
 -import Article from "@/pages/Article"
 -import Publish from "@/pages/Publish"
 +// import Home from "@/pages/Home"
 +// import Article from "@/pages/Article"
 +// import Publish from "@/pages/Publish"
 +import {lazy, Suspense} from "react"
++
 +// 1. lazy 函数对组件进行导入
 +const Home = lazy(() => import('@/pages/Home'))
 +const Article = lazy(() => import('@/pages/Article'))
 +const Publish = lazy(() => import('@/pages/Publish'))
++
 const router = createBrowserRouter([
+  {
     children: [
+      {
         index: '/',
 -        element: <Home />
 +        element: <Suspense fallback={'加载中'}><Home /></Suspense>
       },
+      {
         path: 'article',
 -        element: <Article />
 +        element: <Suspense fallback={'加载中'}><Article /></Suspense>
       },
+      {
         path: 'publish',
 -        element: <Publish />
 +        element: <Suspense fallback={'加载中'}><Publish /></Suspense>
       },
+    ]
   },