[前后端分离Blog]项目介绍

项目介绍

项目框架

• 这是一个我在Github发掘的一个博客管理项目，前端采用Vue+ElementIu制作，后台框架由SpringBoot+Mybatis+MySQL搭建的一个前后端分离项目
• 为了提高开发效率我添加了MybatisPlus和Hutools，lombok辅助开发
• 同时为了扩展博客管理系统的高性能和高可用我做了扩展，搭建服务器集群同时用Nginx做负载均衡，使用Redis实现会话共享的同时搭建了Redis集群

项目功能

可以在博客界面实现博客系统登录，博客列表分页展示，博客详情查询和博客编辑页面，最后实现博客系统的注销

前端开发

• 登录页面采用elenmrntui提供的三项布局并提供了一个表单，采用基于axios发送ajax请求提交表单，检验后端传来的数据是否含jwt，含有则跳转到博客列表页面
• 做了全局axios拦截，后端返回的jason串中的status字段如果不正常，为了提高用户交互体验需要弹窗提示如重新登录，权限不足等提醒
• 在/src新建components目录开发了一个公共组件Header,vue，用于展示用户信息（登录成功后在/store/index.js中的sessionStorage），“主页”按钮，发表文章按钮，登录/退出按钮（这个按钮根据hasLogin这个参数控制切换）
• 博客列表有博客头，用elementui提供的时间线组件做列表的样式和分页组件在一个个card卡片中展示博客的id，标题等内容
• 在博客列表Header点击发表文章会路由到博客编辑页面，因为做markdown编辑集成了一个mavon-editor插件，编辑完成后发送成功会跳转到博客列表页面
• 在博客列表页面点击card可以查看博客详情回显博客信息，由于是markdown格式使用markdown-it插件渲染并需要github-markdown.css合法显示在页面上，header上的发表文章
• 最后做了一个路由拦截，（拿到token，存在则继续执行逻辑，不存在则跳转到登录界面）除了登录以外的所有页面路由都需要登录才能访问

后端开发

问题

能不能介绍一下Vue开发的全过程

工具准备

• 一个vue工程创建导入IDEA进行开发后，/src下有/components /router /virws /store目录
• 需要先在IDEA安装elements-ui并引入main.js插件以获取优质组件取得更好的数据渲染效果开发界面
• 安装axios并引入main.js，组件可以发送ajax请求

页面开发

根据项目需求在/views目录下定义了四个页面并删除掉原生的Home.vue

• Login.vue
• Blogs.vue
• BlogDetail.vue
• BlogEdit.vue
  至于每个页面的开发在template标签下只能放进一个标签（如一个< div>）并在里面引入其他的elemrntui组件

路由中心配置

• 在/router/index.js中进行路由中心的配置为定义的4个路由

什么是ajax请求

无需重新加载整个页面能够更新部分页面的技术

介绍一下在Vue开发中使用指令

• v-show：指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏，在本项目中通过hsalogin控制显示header上的一个标签是否显示为登录还是退出

     < span v-show="!hasLogin">