基于Vue和微服务框架博客网站系统设计与实现

阳光穿透心脏的1/2处 2024-04-06 09:37 25阅读 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

本次设计使用的是JavaWeb开发中主流的微服务架构方式，微服务一定会涉及分布式，一般提到微服务大多在系统逻辑与物理结构设计上，而分布式则涉及到的都是一些机器或者实现技术，阅读本章可以理解整个博客用到的理论及其技术。  
3 博客的需求分析  
3.1 博客的微服务功能分析  
博客是互联网的一种分享类型的技术产物，但是如何留着用户才是重要的，并不都是所有的功能都会涉及到“高并发”，博客的功能多样性会增强用户的体验，让用户对博客的使用产生依赖性，利用从众心态合理地开发增值功能。  
本次系统的开发采用了主流的微服务架构方式，所以把控每个微服务的功能相互独立和完整是“微服务”系统的关键。由于博客的实现比较简单，所以只有涉及到“高并发”的时候需要断点分析即可，下面将介绍博客系统的一些功能。  
博客基本的功都具备，例如博客的核心功能：博客的发表，删除，浏览，评论，点赞等。除了这些，还可以每天定时签到提升博客的等级，充值会员提升使用体验。个人的安全信息也非常重要，所以我单独划分一个微服务中心来实现。本文转载自http://www.biyezuopin.vip/onews.asp?id=15080同样我在每行重要的代码上都增加了明显的注释，这对于我以后的维护和扩充博客功能可以打下坚实的基础，尽可能地符合软件设计开发原则。  
关于博客的功能一共涉及到8个微服务中心：  
1．用户的个人中心：包含登录、注册、智能验证。  
2．用户的安全中心：安全信息、手机与邮箱的基本功能和安全认证的接口。  
3．用户的博客中心：发表和管理个人的博客，游客可以浏览公开的博客。  
4．用户的文件中心：发表博客需要用到的图片和个人用户的头像。  
5．用户的签到中心：博客的签到累计的经验值和签到奖励。  
6．用户的会员中心：包含普通会员和超级会员。  
7．用户的支付中心：VIP的充值功能，个人钱包功能，账单等。  
8．用户的搜索中心：根据摘要或者文章标题的关键字搜索指定的博客。

权限验证相当于系统的第一道大门，如今的安全框架越来越丰富，例如SpringSecurity，Shiro，OAuth等，shiro->security->oauth的上手难度逐渐提升。若是需要对密码加密的，可以需根据个人开发自行配置使用对应的安全框架。
    
    
    登录验证的前端钩子与拦截器实现前端的Token的检测的代码如以下所示：
    
    //钩子方法验证Token是否存在
    router.beforeEach((to, from, next) => {
        
      //改变网页的标题
      window.document.title = to.meta.title;
      //强制登录并且检测token
      let token = localStorage.getItem('token');
      if (!token && to.path !== '/home/login') {
        
        return next('/home/login')}
      next()
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        
      // 对响应数据做点什么
      return response;
    }, function (error) {
        
      // 对响应错误做点什么
      if (error.response.status === 401){
        
        router.replace({
        name: 'Login'}).then(res =>{
        
          alert('身份验证失效,请重新登录!');
          window.localStorage.clear();
        })
      }else{
        
        alert('服务开了小差,请稍后再试!');
      }
      // if (error.response.status === 500)
      return Promise.reject(error);
    });
    登录验证的后端拦截所有的URL请求实现Token检测的代码如以下所示：
    
    //拦截所有从前端传过来的请求，必须被@AuthToken注解修饰
    //Springboot2.X之后是实现WebMvcConfigurer接口
    //Springboot1.X-2.X之间是继承WebMvcConfigurer缺省适配器类
    @Configuration
    public  class WebAppConfiguration extends WebMvcConfigurerAdapter {
        
        //拦截所有的URL请求
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
        
            registry.addInterceptor(new AuthorizationInterceptor()).addPathPatterns("/**");
        }}
    
    //自定义注解Token,凡是被@AuthToken注解修饰的要验证headers中的TOKEN
    @Target({
        ElementType.METHOD, ElementType.TYPE})
    @Retention(RetentionPolicy.RUNTIME)
    public @interface AuthToken {
        
    }
    
    // 如果打上了AuthToken注解则需要验证token
    if (method.getAnnotation(AuthToken.class) != null || handlerMethod.getBeanType().getAnnotation(AuthToken.class) != null) {
        
    String token = request.getHeader(httpHeaderName);//从headers中获得TOKEN码
      //String token = request.getParameter(httpHeaderName);//从URL上面获得TOKEN 
                String username = "";
                Jedis jedis = new Jedis("localhost", 6379);
                if (token != null && token.length() != 0) {
        
                    username = jedis.get(token);
                }
    }

![在这里插入图片描述][667e20f2175a43f792102edf095e7bdb.png_pic_center]  
![在这里插入图片描述][084219eef1cc416abf18b2da0c65e89b.png_pic_center]  
![在这里插入图片描述][1e1b50afcd994485b1045295d70c325f.png_pic_center]  
![在这里插入图片描述][d7db60eba1a04bc18c4aa51f921927d2.png_pic_center]  
![在这里插入图片描述][1f2e92ea8adf40d59ca3d7348725d757.png_pic_center]  
![在这里插入图片描述][c618aff0175b48bbaa1a60abafabd981.png_pic_center]  
![在这里插入图片描述][0f6bc780dd10401f87bf8b1353f11d43.png_pic_center]  
![在这里插入图片描述][be7cfc886bbd43c1be7e22cb38bdacbb.png_pic_center]  
![在这里插入图片描述][a423b2b80b9c4bef84695cd559e63fb4.png_pic_center]  
![在这里插入图片描述][d066919cab074baba97f51355f85ba2d.png_pic_center]  
![在这里插入图片描述][23c64f09b3fa4177a20d6512aecadb66.png_pic_center]  
![在这里插入图片描述][274f6d704bd4457aab5a8f68a1f5f91f.png_pic_center]  
![在这里插入图片描述][0cdc7d5cc18b44cfb4fde2122644e3d7.png_pic_center]  
![在这里插入图片描述][70ac3df9b77849239bf7245e3e16e5be.png_pic_center]  
![在这里插入图片描述][6820f5d3f40b46de85260c3a812d1559.png_pic_center]  
![在这里插入图片描述][607b9c721e374f70b8fecdb0bc31b6a1.png_pic_center]  
![在这里插入图片描述][4e9301bc43bd4b0b8750c03ed2c1d97c.png_pic_center]  
![在这里插入图片描述][671b45cd5c9a40d1b667ca77fd88a950.png_pic_center]  
![在这里插入图片描述][7c3fac4791c94ce995b01df033188b6c.png_pic_center]  
![在这里插入图片描述][7007ba9355b944e897b4a3b76de3368b.png_pic_center]  
![在这里插入图片描述][a3308dda8b544254a6ef3b2cc61c83cf.png_pic_center]  
![在这里插入图片描述][5ead1765a6bf45c1b319401ed8e55987.png_pic_center]  
![在这里插入图片描述][dae7b65bbada46fd8b5918866056d6f9.png_pic_center]  
![在这里插入图片描述][3bb3be7846b34c3cb6add65960aa2c0b.png_pic_center]  
![在这里插入图片描述][a44dc962fcf1404faa53235927d32375.png_pic_center]  
![在这里插入图片描述][08c8d680c06d48a58ccd8624f1de7b64.png_pic_center]  
![在这里插入图片描述][749965f3e16d47ee9534362b3ca2a03b.png_pic_center]  
![在这里插入图片描述][2a5a20ea5c5c4376a51b7bf7acc5637b.png_pic_center]  
![在这里插入图片描述][e24ab6f29b18411fbaad8b49d0419982.png_pic_center]  
![在这里插入图片描述][6b24afc57efd4fa391cf0994e3611f33.png_pic_center]

[667e20f2175a43f792102edf095e7bdb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b66dd26747214062873b2397b4efd75f.png
[084219eef1cc416abf18b2da0c65e89b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a5fc4a9845d046308bb08e999507f6f2.png
[1e1b50afcd994485b1045295d70c325f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/78f20b7a706a40ad8ac9627671c8d224.png
[d7db60eba1a04bc18c4aa51f921927d2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f56b53e2e8534b3da36cf7d7e336e009.png
[1f2e92ea8adf40d59ca3d7348725d757.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/af28b68b80b8428ba1aa38810341fefb.png
[c618aff0175b48bbaa1a60abafabd981.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8ec7edff92444fdc89c03e84228870e0.png
[0f6bc780dd10401f87bf8b1353f11d43.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b869b8a9e3fa4277893a1c9497c76fb5.png
[be7cfc886bbd43c1be7e22cb38bdacbb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1eda2ed21ace48e5b33a6cfa9cebbaf0.png
[a423b2b80b9c4bef84695cd559e63fb4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/32c485adab404602b5c81ab5f9471c6d.png
[d066919cab074baba97f51355f85ba2d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2e5fa63a2c934ae2a5ace4a84ec33f06.png
[23c64f09b3fa4177a20d6512aecadb66.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/093e8a17d85945d489a8ed3f0c271cfd.png
[274f6d704bd4457aab5a8f68a1f5f91f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/28fe7d0b17e94e66a8dc1e9bf34bb546.png
[0cdc7d5cc18b44cfb4fde2122644e3d7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b7bb4881f57c4ad8812950bef9bbf88b.png
[70ac3df9b77849239bf7245e3e16e5be.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c10d9ae437744450bd73d3d55df965dd.png
[6820f5d3f40b46de85260c3a812d1559.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0d72e8bb64bb429884f93464a21dbede.png
[607b9c721e374f70b8fecdb0bc31b6a1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9415f56f033f47c9b697aa60abfea3f6.png
[4e9301bc43bd4b0b8750c03ed2c1d97c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/751d45648f9443a3b40d7708be9bfcc5.png
[671b45cd5c9a40d1b667ca77fd88a950.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/21c8a53216014510a1d745d3e7266703.png
[7c3fac4791c94ce995b01df033188b6c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d2fbdba81ce34695b337f2b3204d1e36.png
[7007ba9355b944e897b4a3b76de3368b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1e0ad5a162d6439b905980d9c1ed7140.png
[a3308dda8b544254a6ef3b2cc61c83cf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f8628ad4aa8b4e4f93e2fed62004b597.png
[5ead1765a6bf45c1b319401ed8e55987.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a5a8aeae99eb49958f91a787b3bc5349.png
[dae7b65bbada46fd8b5918866056d6f9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f2837333d9284203982f151392149fab.png
[3bb3be7846b34c3cb6add65960aa2c0b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b2043a7b3f6243a6a0851fa005bfa816.png
[a44dc962fcf1404faa53235927d32375.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/55499b5681f04064b87a031ecbc16c63.png
[08c8d680c06d48a58ccd8624f1de7b64.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2174f53065524d1884c13edd0bdeffa9.png
[749965f3e16d47ee9534362b3ca2a03b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/702690cce24346a8a4f80b9852601d2c.png
[2a5a20ea5c5c4376a51b7bf7acc5637b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6e390a8eccc64c948d3cd36c421eaded.png
[e24ab6f29b18411fbaad8b49d0419982.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8fc909308b124ab897b78d861f1e98b2.png
[6b24afc57efd4fa391cf0994e3611f33.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3df478789cb34647a4b129da8aaf47f0.png