基于Vue+SpringCloud+MySQL的前后端分离的博客网站设计与实现

古城微笑少年丶 2024-03-30 16:24 58阅读 0赞

目 录  
摘 要 I  
ABSTRACT II  
1 绪论 1  
1.1 研究的背景 1  
1.2 研究的目的 1  
2 博客的相关理论与技术 2  
2.1 博客系统理论分析 2  
2.1.1 博客的微服务分析 2  
2.1.2 博客的分布式分析 3  
2.1.3 关于分布式锁分析 4  
2.1.4 博客的高可用分析 5  
2.2 前端的搭建 6  
2.2.1 Node-Npm简介 6  
2.2.2 采用的UI框架 7  
2.2.3 v-charts图表 8  
2.3 Vue架构 9  
2.3.1 关于MVVM模式 9  
2.3.2 关于Vue的生命周期 10  
2.3.3 Ajax运行原理分析 11  
2.3.4 使用Axios的原因 12  
2.4 SpringCloud架构 13  
2.4.1 SpringCloud框架 13  
2.4.2 Zuul路由网关 14  
2.4.3 Eureka服务发现组件 15  
2.4.4 Feign负载均衡 16  
2.4.5 Hystrix容错机制 17  
2.4.6 Turbine聚合微服务 18  
2.4.7 Zipkin跟踪微服务 19  
2.5 Mysql数据库 20  
2.6 Mybatis框架 21  
2.6.1 Mybatis分页插件 22  
2.7 Redis缓存中间件 23  
2.7.1 Redisson综合中间件 24  
2.8 RabbitMQ消息中间件 25  
2.9 Elasticsearch搜索引擎 26  
2.10 阿里云的增值服务 26  
2.10.1 阿里云智能验证 26  
2.10.2 阿里云短信服务 28  
2.10.3 阿里云OSS存储 29  
2.11 关于支付宝支付 30  
2.11.1 同步与异步通知 31  
2.12 本章总结 31  
3 博客的需求分析 32  
3.1 博客的微服务功能分析 32  
3.2 本章总结 32  
4 博客的设计分析 33  
4.1 博客的架构设计 33  
4.2 博客的数据库设计 34  
4.2 本章总结 34  
5 博客的设计实现 35  
5.1 博客总体架构的实现 35  
5.1.1 Vue架构的实现 35  
5.1.2 SpringCloud架构的实现 37  
5.1.3 博客的高可用的实现 38  
5.2 用户的个人中心 39  
5.2.1 登录的智能验证 39  
5.2.2 博客的登录注册 41  
5.2.3 登录的权限验证 42  
5.3 用户的安全中心 45  
5.3.1 用户的安全布局 45  
5.3.2 用户的邮箱注册 46  
5.3.3 用户的手机注册 49  
5.3.4 用户的安全认证 51  
5.3.5 用户的密码安全 52  
5.3.6 用户的账号申诉 53  
5.4 用户的文件中心 54  
5.4.1 用户的头像存储 54  
5.4.2 博客的图片存储 55  
5.5 用户的签到中心 56  
5.6 用户的会员中心 58  
5.6.1 会员的流程控制 58  
5.7 用户的支付中心 59  
5.7.1 用户的支付中心 59  
5.7.2 用户的账户钱包 60  
5.7.3 用户的会员支付 63  
5.7.4 用户的支付账单 67  
5.8 用户的博客中心 69  
5.8.1 用户的访问主页 69  
5.8.2 用户的文章中心 70  
5.8.3 用户的文章布局 75  
5.8.4 点赞用户的文章 76  
5.8.5 收藏用户的文章 78  
5.8.6 评论用户的文章 79  
5.8.7 博客的文章排行榜 80  
5.9 博客的搜索中心 82  
5.9.1 搜索引擎的应用 82  
5.9.2 博客的分类搜索 83  
5.9.3 博客的分类主页 85  
5.10 本章总结 85  
6 博客的测试分析 86  
6.1 博客的请求抗压性分析 86  
6.2 博客的功能扩展性分析 87  
7 博客的注意事项 88  
7.1 博客整合Hystrix后首次请求失败问题 88  
7.2 SpringCloud中Turbine 1.X版本BUG 88  
7.3 关于前后分离的CORS跨域问题 89  
7.3.1 前后端分离的跨域 89  
7.3.2 Nginx反向代理 90  
8 结束语 91  
致 谢 92  
参考文献 93  
3 博客的需求分析  
3.1 博客的微服务功能分析  
博客是互联网的一种分享类型的技术产物，但是如何留着用户才是重要的，并不都是所有的功能都会涉及到“高并发”，博客的功能多样性会增强用户的体验，让用户对博客的使用产生依赖性，利用从众心态合理地开发增值功能。  
本次系统的开发采用了主流的微服务架构方式，所以把控每个微服务的功能相互独立和完整是“微服务”系统的关键。由于博客的实现比较简单，所以只有涉及到“高并发”的时候需要断点分析即可，下面将介绍博客系统的一些功能。  
博客基本的功都具备，例如博客的核心功能：博客的发表，删除，浏览，评论，点赞等。除了这些，还可以每天定时签到提升博客的等级，充值会员提升使用体验。个人的安全信息也非常重要，所以我单独划分一个微服务中心来实现。同样我在每行重要的代码上都增加了明显的注释，这对于我以后的维护和扩充博客功能可以打下坚实的基础，尽可能地符合软件设计开发原则。  
关于博客的功能一共涉及到8个微服务中心：  
1．用户的个人中心：包含登录、注册、智能验证。  
2．用户的安全中心：安全信息、手机与邮箱的基本功能和安全认证的接口。  
3．用户的博客中心：发表和管理个人的博客，游客可以浏览公开的博客。  
4．用户的文件中心：发表博客需要用到的图片和个人用户的头像。  
5．用户的签到中心：博客的签到累计的经验值和签到奖励。  
6．用户的会员中心：包含普通会员和超级会员。  
7．用户的支付中心：VIP的充值功能，个人钱包功能，账单等。  
8．用户的搜索中心：根据摘要或者文章标题的关键字搜索指定的博客。  
3.2 本章总结  
本章写的大多是要实现的博客需求，下一章会具体提到博客的架构设计。  
4 博客的设计分析  
4.1 博客的架构设计  
划分完需求后，博客的微服务架构涉及如图4-1所示：  
![在这里插入图片描述][5b29c01d23b547f08a03249d0ec7fa2e.png]

图4-1 博客的微服务架构图

从宏观设计来说，各个微服务中心都是一个moudle，需要注册到一个高可用的微服务注册中心上保证机器信息的正确性。  
从微观运行来说，用户的请求API都经过Zuul，再由Zuul负载均衡分配给需要的微服务中心，所以Zuul也需要高可用保证用户流量可以得到回应。通过zuul网关后，请求通过Feign实现微服务之间数据的交互。  
当发生错误运行时，利用Hystrix的回退机制保护系统的稳定运行，不会发生级联占用效应，保证每一个请求API都可以得到响应。当发生网络不可用的情况下，需要触发用户的补偿机制，当出现不可知的错误时，也可以直接管理机器的集群来维护系统的稳定运行。  
4.2 博客的数据库设计  
对于用户来说，需要输入账号和密码，若是不存在可以注册自己的账号和密码。注册的时候提供30分钟填写博客信息的有效时间，不填写则直接登录。需要设置个人的手机和邮箱来绑定安全认证，若想要开通我的钱包则需要实名注册，同样也包含校园认证。丢失了个人信息，则可以用身份证申诉。每天凌晨开始可以开始签到，根据会员的不同增益不同，签到的持续天数不同经验值累加也不同。会员的开通只包含支付宝，账单是每笔消费的记录。核心表是用户博客之类的表，文章均存在数据库，不过ElasticSearch也保存了文章的标题和摘要。每个用户可以评论他人的文章，私密的文章不会出现，会员的文章会出现在会员专区。  
博客一共含有8个主功能，所以一共涉及用户表，用户信息表，安全表，头像表，签到表，签到奖励表（两种奖励），会员表，钱包表，订单表，博客表，博客分类表，博客标签表，博客图片表，博客的评论表，点赞表和收藏表17个表。  
各个微服务所需要的表如图4-2所示：  
![在这里插入图片描述][331999fd00474daa8af8cad15e74ef96.png]

图4-2 博客的Mysql关系图

import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/components/login/Login'
    import Register from '@/components/login/Register'
    import Customer from '@/components/customer/Customer'
    import HomePage from '@/components/main/Homepage'
    import Home from '@/components/main/Home'
    import UserMsg from '@/components/message/UserMsg'
    import Reply from '@/components/message/userMessage/Reply'
    import At from '@/components/message/userMessage/At'
    import Love from '@/components/message/userMessage/Love'
    import System from '@/components/message/userMessage/System'
    import MyMessage from '@/components/message/userMessage/MyMessage'
    import Friends from '@/components/message/userMessage/Friends'
    import MessageConfig from '@/components/message/userMessage/MessageConfig'
    import Article from '@/components/main/home/Article'
    import ArticleSearch from '@/components/main/home/ArticleSearch'
    import Mation from '@/components/login/Mation'
    import MationNext from '@/components/login/MationNext'
    import Person from "@/components/person/Person"
    import Mine from "@/components/person/Mine"
    import Change from "@/components/person/password/Change"
    import Reset from "@/components/person/password/Reset"
    import Email from "@/components/person/technology/Email"
    import Phone from "@/components/person/technology/Phone"
    import IdCard from "@/components/person/security/IdCard"
    import SchoolCard from "@/components/person/security/SchoolCard"
    import Appeal from "@/components/person/security/Appeal"
    import ChangeBlog from "@/components/person/blog/ChangeBlog"
    import BlogMain from '@/components/blog/BlogMain'
    import Recommend from '@/components/blog/others/Recommend'
    import BlogVip from '@/components/blog/others/BlogVip'
    import C from '@/components/blog/language/C'
    import CPlus from '@/components/blog/language/CPlus'
    import Java from '@/components/blog/language/Java'
    import PHP from '@/components/blog/language/PHP'
    import Python from '@/components/blog/language/Python'
    import Go from '@/components/blog/language/Go'
    import Test from '@/components/blog/skill/Test'
    import Operation from '@/components/blog/skill/Operation'
    import FrontEnd from '@/components/blog/skill/FrontEnd'
    import BackEnd from '@/components/blog/skill/BackEnd'
    import FullStack from '@/components/blog/skill/FullStack'
    import Framework from '@/components/blog/skill/Framework'
    import Sign from '@/components/sign/Sign'
    import Member from '@/components/member/Member'
    import Svip from '@/components/member/vip/Svip'
    import Vip from '@/components/member/vip/Vip'
    import Power from '@/components/member/vip/Power'
    import Pay from '@/components/pay/Pay'
    import PaySuccess from '@/components/pay/PaySuccess'
    import PayRedirect from '@/components/pay/PayRedirect'
    import Wallet from '@/components/wallet/Wallet'
    import WalletSecurity from '@/components/wallet/WalletSecurity'
    import MyWallet from '@/components/wallet/business/MyWallet'
    import Account from '@/components/wallet/business/Account'
    import SecuritySet from '@/components/wallet/business/SecuritySet'
    import Cost from '@/components/wallet/business/Cost'
    import BankCard from '@/components/wallet/business/BankCard'
    import Coupon from '@/components/wallet/business/Coupon'
    import CouponInvalid from '@/components/wallet/business/CouponInvalid'
    import UserMain from '@/components/userBlog/UserMain'
    import UserPublish from '@/components/userBlog/userAction/UserPublish'
    import UserUpdate from '@/components/userBlog/userAction/UserUpdate'
    import UserManage from '@/components/userBlog/userAction/UserManage'
    import UserCollection from '@/components/userBlog/userAction/UserCollection'
    import Details from '@/components/userBlog/urlShow/Details'
    
    Vue.use(Router);
    
    export default new Router({
        
      //HTML的路由模式，可以不使用。
      mode: 'history',
      routes: [
        {
        
          path: '/customer',
          meta: {
        
            title: '博客的客服中心'
          },
          name: 'Customer',
          component: Customer
        },
        {
        
          path: '/',
          meta: {
        
            title: '博客的主页面'
          },
          name: 'HomePage',
          component: HomePage,
        },
        {
        
          path: '/login',
          meta: {
        
            title: '博客的登录与注册'
          },
          name: 'Login',
          component: Login
        },
        {
        
          path: '/register',
          meta: {
        
            title: '博客的登录与注册'
          },
          name: 'Register',
          component: Register
        },
        {
        
          path: '/mation',
          meta: {
        
            title: '博客的注册个人信息'
          },
          name: 'Mation',
          component: Mation
        },
        {
        
          path: '/mationNext',
          meta: {
        
            title: '博客的注册个人信息'
          },
          name: 'MationNext',
          component: MationNext
        },
        {
        
          path: '/home',redirect: '/home/article',
          meta: {
        
            title: '博客的主页面'
          },
          name: 'Home',
          component: Home,
          children: [
            {
        
              path: 'sign',
              meta: {
        
                title: '博客的签到中心'
              },
              name: 'Sign',
              component: Sign
            },
            {
        
              path: 'article',
              meta: {
        
                title: '博客的浏览中心'
              },
              name: 'Article',
              component: Article
            },
            {
        
              path: 'details/:id',
              meta: {
        
                title: '博客的展示中心'
              },
              name: 'Details',
              component: Details
            },
            {
        
              path: 'articleSearch',
              meta: {
        
                title: '博客的搜索中心'
              },
              name: 'ArticleSearch',
              component: ArticleSearch
            },
            {
        
              path: '/userMsg',redirect: '/userMsg/reply',
              meta: {
        
                title: '博客的消息中心'
              },
              name: 'UserMsg',
              component: UserMsg,
              children:[
                {
        
                  path: 'reply',
                  meta:{
        
                    title: '回复我的博客'
                  },
                  name: 'Reply',
                  component: Reply
                },
                {
        
                  path: 'at',
                  meta:{
        
                    title: 'at我的博客'
                  },
                  name: 'At',
                  component: At
                },
                {
        
                  path: 'love',
                  meta:{
        
                    title: '点赞我的博客'
                  },
                  name: 'Love',
                  component: Love
                },
                {
        
                  path: 'system',
                  meta:{
        
                    title: '系统通知中心'
                  },
                  name: 'System',
                  component: System
                },
                {
        
                  path: 'myMessage',
                  meta:{
        
                    title: '我的博客消息'
                  },
                  name: 'MyMessage',
                  component: MyMessage
                },
                {
        
                  path: 'friends',
                  meta:{
        
                    title: '好友通知中心'
                  },
                  name: 'Friends',
                  component: Friends
                },
                {
        
                  path: 'messageConfig',
                  meta:{
        
                    title: '消息隐私设置'
                  },
                  name: 'MessageConfig',
                  component: MessageConfig
                }
              ]
            }
          ]
        },
        {
        
          path: '/person',redirect: '/person/mine',
          meta: {
        
            title: '博客的安全中心'
          },
          name: 'Person',
          component: Person,
          children: [{
        
            path: 'change',
            meta: {
        
              title: '博客的修改密码中心'
            },
            name: 'Change',
            component: Change
          },{
        
            path: 'reset',
            meta: {
        
              title: '博客的重置密码中心'
            },
            name: 'Reset',
            component: Reset
          },{
        
            path: 'email',
            meta: {
        
              title: '博客的邮箱中心'
            },
            name: 'Email',
            component: Email
          },{
        
            path: 'phone',
            meta: {
        
              title: '博客的手机中心'
            },
            name: 'Phone',
            component: Phone
          },{
        
            path: 'idCard',
            meta: {
        
              title: '博客的实名认证中心'
            },
            name: 'IdCard',
            component: IdCard
          },{
        
            path: 'schoolCard',
            meta: {
        
              title: '博客的校园认证中心'
            },
            name: 'SchoolCard',
            component: SchoolCard
          },{
        
            path: 'appeal',
            meta: {
        
              title: '博客的账号申诉中心'
            },
            name: 'Appeal',
            component: Appeal
          },{
        
            path: 'changeBlog',
            meta: {
        
              title: '博客的个人信息中心'
            },
            name: 'ChangeBlog',
            component: ChangeBlog
          },{
        
            path: 'mine',
            meta: {
        
              title: '博客的安全中心个人页面'
            },
            name: 'Mine',
            component: Mine
          }]
        },
        {
        
          path: '/blogMain',redirect: '/blogMain/recommend',
          meta: {
        
            title: '博客的浏览中心'
          },
          name: 'BlogMain',
          component: BlogMain,
          children: [{
        
            path: 'recommend',
            meta: {
        
              title: '博客的推荐中心'
            },
            name: 'Recommend',
            component: Recommend
          },{
        
            path: 'blogVip',
            meta: {
        
              title: '博客的vip中心'
            },
            name: 'BlogVip',
            component: BlogVip
          },{
        
            path: 'c',
            meta: {
        
              title: '博客的C语言中心'
            },
            name: 'C',
            component: C
          },{
        
            path: 'cPlus',
            meta: {
        
              title: '博客的C++语言中心'
            },
            name: 'CPlus',
            component: CPlus
          },{
        
            path: 'java',
            meta: {
        
              title: '博客的Java语言中心'
            },
            name: 'Java',
            component: Java
          },{
        
            path: 'php',
            meta: {
        
              title: '博客的php语言中心'
            },
            name: 'PHP',
            component: PHP
          },{
        
            path: 'python',
            meta: {
        
              title: '博客的python语言中心'
            },
            name: 'Python',
            component: Python
          },{
        
            path: 'go',
            meta: {
        
              title: '博客的GO语言中心'
            },
            name: 'Go',
            component: Go
          },{
        
            path: 'test',
            meta: {
        
              title: '博客的测试中心'
            },
            name: 'Test',
            component: Test
          },{
        
            path: 'operation',
            meta: {
        
              title: '博客的运维中心'
            },
            name: 'Operation',
            component: Operation
          },{
        
            path: 'frontEnd',
            meta: {
        
              title: '博客的前端中心'
            },
            name: 'FrontEnd',
            component: FrontEnd
          },{
        
            path: 'BackEnd',
            meta: {
        
              title: '博客的后端中心'
            },
            name: 'BackEnd',
            component: BackEnd
          },{
        
            path: 'fullStack',
            meta: {
        
              title: '博客的全栈中心'
            },
            name: 'FullStack',
            component: FullStack
          },{
        
            path: 'framework',
            meta: {
        
              title: '博客的架构中心'
            },
            name: 'Framework',
            component: Framework
          }]
        },
        {
        
          path: '/member',redirect: '/member/power',
          meta: {
        
            title: '博客的会员中心'
          },
          name: 'Member',
          component: Member,
          children: [{
        
            path: 'svip',
            meta: {
        
              title: '博客的超级会员'
            },
            name: 'Svip',
            component: Svip
          },{
        
            path: 'vip',
            meta: {
        
              title: '博客的普通会员'
            },
            name: 'Vip',
            component: Vip
          },{
        
            path: 'power',
            meta: {
        
              title: '博客的会员特权'
            },
            name: 'Power',
            component: Power
          }]
        },
        {
        
          path: '/wallet',redirect: '/wallet/myWallet',
          meta: {
        
            title: '博客的账户中心'
          },
          name: 'Wallet',
          component: Wallet,
          children: [
            {
        
              path: 'myWallet',
              meta: {
        
                title: '博客的账户中心'
              },
              name: 'MyWallet',
              component: MyWallet,
            },
            {
        
              path: 'account',
              meta: {
        
                title: '博客的账户中心'
              },
              name: 'Account',
              component: Account,
            },
            {
        
              path: 'securitySet',
              meta: {
        
                title: '博客的收支中心'
              },
              name: 'SecuritySet',
              component: SecuritySet,
            }
            ,{
        
            path: 'cost',
            meta: {
        
              title: '博客的账单中心'
            },
            name: 'Cost',
            component: Cost,
          },
            {
        
              path: 'bankcard',
              meta: {
        
                title: '博客的账单中心'
              },
              name: 'BankCard',
              component: BankCard,
            },
            {
        
              path: 'coupon',
              meta: {
        
                title: '博客的兑换券中心'
              },
              name: 'Coupon',
              component: Coupon,
            },
            {
        
              path: 'couponInvalid',
              meta: {
        
                title: '博客的兑换券失效中心'
              },
              name: 'CouponInvalid',
              component: CouponInvalid,
            }]
        },{
        
          path: '/walletSecurity',
          meta: {
        
            title: '博客的账户开通中心'
            },
            name: 'WalletSecurity',
            component: WalletSecurity
        },
        {
        
          path: '/pay',
          meta: {
        
            title: '博客的支付中心'
          },
          name: 'Pay',
          component: Pay
        },
        {
        
          path: '/paySuccess',
          meta: {
        
            title: '博客的支付成功中心'
          },
          name: 'PaySuccess',
          component: PaySuccess
        },
        {
        
          path: '/payRedirect',
          meta: {
        
            title: '博客的支付中心'
          },
          name: 'PayRedirect',
          component: PayRedirect
        },
        {
        
          path: '/userMain',redirect: '/userMain/userPublish',
          meta: {
        
            title: '博客的用户主页面'
          },
          name: 'UserMain',
          component: UserMain,
          children: [{
        
            path: 'userPublish',
            meta: {
        
              title: '博客的发表中心'
            },
            name: 'UserPublish',
            component: UserPublish,
    
          },{
        
            path: 'userManage',
            meta: {
        
              title: '博客的管理中心'
            },
            name: 'UserManage',
            component: UserManage,
          },{
        
            path: 'userCollection',
            meta: {
        
              title: '博客的收藏中心'
            },
            name: 'UserCollection',
            component: UserCollection
          },
            {
        
              path: 'userUpdate/:id',
              meta: {
        
                title: '博客的修改中心'
              },
              name: 'UserUpdate',
              component: UserUpdate
            }
          ]
        },
      ]
    })

![在这里插入图片描述][9955494523f44fa38f29a3ba9f3a21be.png_pic_center]  
![在这里插入图片描述][a89c3c2a9cf240598a3d06ba49c8cdd4.png_pic_center]  
![在这里插入图片描述][c9c52081c8eb49cf8f68e8921ce53213.png_pic_center]  
![在这里插入图片描述][135834b44d454bd796f4b2744cf364c7.png_pic_center]  
![在这里插入图片描述][ad77bc3f37864db893aba158940dd396.png_pic_center]  
![在这里插入图片描述][c554b8c218c54eecbb4a7acb2364bfb7.png_pic_center]  
![在这里插入图片描述][d0c2f866c774427ebd6426f02713c5cb.png_pic_center]  
![在这里插入图片描述][50f6dc62a3074449b3f414e0e4cab58c.png_pic_center]  
![在这里插入图片描述][110408ed31564d168af2c4454203d3cd.png_pic_center]  
![在这里插入图片描述][6458a6c215a641d1aef5d7453519cd8d.png_pic_center]  
![在这里插入图片描述][eff7e4509761438db78a98cc9cf9d4d1.png_pic_center]  
![在这里插入图片描述][db08d62255b944adb9a3dd7945860e67.png_pic_center]  
![在这里插入图片描述][2e66df996c05437cb31259f6c07fdce5.png_pic_center]  
![在这里插入图片描述][8511e9f9e64249ab9c285ee6cff2fded.png_pic_center]  
![在这里插入图片描述][cd86a43d38e3498d945e0dd46ac7563d.png_pic_center]  
![在这里插入图片描述][0cf5bd78a6e444e89ee5e7bb004da090.png_pic_center]  
![在这里插入图片描述][82c6a59940bb45f6bd7e641d654200cc.png_pic_center]  
![在这里插入图片描述][750f3f0634dc40d486b262079077a21a.png_pic_center]  
![在这里插入图片描述][da9255ea606c41ab893a46056967a406.png_pic_center]  
![在这里插入图片描述][7d16ec89f1e34ad29d5ae16b7d63b585.png_pic_center]  
![在这里插入图片描述][4af03fe5b1ef408ea7a6bfc43352e0e2.png_pic_center]  
![在这里插入图片描述][faf3be671bf4415692dd3a4e814af03e.png_pic_center]  
![在这里插入图片描述][86e57e47b66d45139f7834525a6120de.png_pic_center]  
![在这里插入图片描述][5d190633c7a6431fa083a0b973a4fc3b.png_pic_center]  
![在这里插入图片描述][f1062089a9174f5ba67d51d0c20ad1d7.png_pic_center]  
![在这里插入图片描述][51956fb6e5dc4b9887912296963bcbd4.png_pic_center]  
![在这里插入图片描述][9a3adcf0e00c4447ab32212d3a85a199.png_pic_center]  
![在这里插入图片描述][c039365aa0b443b8890c6fac28b83186.png_pic_center]  
![在这里插入图片描述][bd03b4a5b2d44f14a651df435c115516.png_pic_center]  
![在这里插入图片描述][6ff65bd752354cf9b09ba0c918f6643f.png_pic_center]  
![在这里插入图片描述][7ec6961292384f47bd8a5b48092ce6af.png_pic_center]  
![在这里插入图片描述][96fe33f2b3e74d3991a1ae362252ae9e.png_pic_center]  
![在这里插入图片描述][ffc0f871af8b4e4591f246d166463bcf.png_pic_center]

[5b29c01d23b547f08a03249d0ec7fa2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a774df39a09b4d1480488d95a383d582.png
[331999fd00474daa8af8cad15e74ef96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d6c1dbb6fcf64e30980fa13be6f0dd02.png
[9955494523f44fa38f29a3ba9f3a21be.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9a160f34601642808b474f58bf28e11f.png
[a89c3c2a9cf240598a3d06ba49c8cdd4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8a534c21c44d4adca42857754675f2e9.png
[c9c52081c8eb49cf8f68e8921ce53213.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cf43e59308e142359863ccdd7c4cd8a0.png
[135834b44d454bd796f4b2744cf364c7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ed99283831d54be3aedb8df108545877.png
[ad77bc3f37864db893aba158940dd396.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2735422c82834d51be6ce48d169c0482.png
[c554b8c218c54eecbb4a7acb2364bfb7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/48c4aaa64c8f48d6b7392e43da666897.png
[d0c2f866c774427ebd6426f02713c5cb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b791a017113e41ac892958425fb24e92.png
[50f6dc62a3074449b3f414e0e4cab58c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ae9a33cd0f6d4fb4b726683960deea55.png
[110408ed31564d168af2c4454203d3cd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/30b44525ef124a548e0e54b5428db7a4.png
[6458a6c215a641d1aef5d7453519cd8d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fd0764dc86ed4ac999a4c4fca0c42f2f.png
[eff7e4509761438db78a98cc9cf9d4d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0a96fe0cfd3042c18e1c0a4df22dd05d.png
[db08d62255b944adb9a3dd7945860e67.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/16aabb729a27495db286e6ec5bf8ee9b.png
[2e66df996c05437cb31259f6c07fdce5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b73aa6c1e6f64fd2b491dbd19709cb8e.png
[8511e9f9e64249ab9c285ee6cff2fded.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/18cfbbe89bb44153bf80d5f42e42051b.png
[cd86a43d38e3498d945e0dd46ac7563d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/67def57095d64aafabadf82671bf2e47.png
[0cf5bd78a6e444e89ee5e7bb004da090.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/47e67da5d1a642fca3dc5a33765e4a59.png
[82c6a59940bb45f6bd7e641d654200cc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/82f40a09b335463f8fe278847e84f901.png
[750f3f0634dc40d486b262079077a21a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/55b73acd5c9b40e19be423dabac6ff5c.png
[da9255ea606c41ab893a46056967a406.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6087f8b311bb4c47928f67f790862398.png
[7d16ec89f1e34ad29d5ae16b7d63b585.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e9429915a3ba497bb75df0aecb1a64f0.png
[4af03fe5b1ef408ea7a6bfc43352e0e2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/52cd12f57ead4028b2cfaff391926ccb.png
[faf3be671bf4415692dd3a4e814af03e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0d8311dca5ee4f2fa2de1e8f8dc3b5ac.png
[86e57e47b66d45139f7834525a6120de.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7147b06dddac40b19897363e898cd507.png
[5d190633c7a6431fa083a0b973a4fc3b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e8a8ce9564df47c586c0ddadeba0bbfe.png
[f1062089a9174f5ba67d51d0c20ad1d7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5cce03a3834c4cf3a00f40730964be2d.png
[51956fb6e5dc4b9887912296963bcbd4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/06248cae71e940bb95abe5662e353bb8.png
[9a3adcf0e00c4447ab32212d3a85a199.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/83a2315812ad47db8e67b9b795fd4730.png
[c039365aa0b443b8890c6fac28b83186.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5fd078094a6f4c17ad8a190891d8a5cc.png
[bd03b4a5b2d44f14a651df435c115516.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5bcd2853b84749daa6cf673e89ac5c64.png
[6ff65bd752354cf9b09ba0c918f6643f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/630bf26ff2014ee3a26e4c300e25f9ee.png
[7ec6961292384f47bd8a5b48092ce6af.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/48ae821bc0c242d5b129a162888e1442.png
[96fe33f2b3e74d3991a1ae362252ae9e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/47350c94682949b9a1aa0b50c82d7423.png
[ffc0f871af8b4e4591f246d166463bcf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/64695da502fd4ba58dee85397b539d6f.png