12.个人博客系统（Java项目基于spring和vue）

软件系统体系结构分为两种，是客户机/服务器结构和浏览器/服务器结构。其中的浏览器/服务器结构就是B/S结构。

C/s模式：是客户端/服务器(Client/Server)模式，主要指的是传统的桌面级的应用程序。比如我们经常用的信息管理系统。

B/S模式：是浏览器/服务器(Browser/Server)模式，主要指的是web应用程序，就像电子商务网站，如淘宝，阿里巴巴等。相对于C/S模式的应用程序来说，B/S模式最大的优势在于客户端只要有浏览器就可以运行。而C/S模式的应用程序需要在客户端进行安装，而且升级也不太方便。而B/S模式的应用程序对于客户端来说，永远都是最新版本的。

个人博客系统开发结合个人需求而开发，能解决用户可以通过互联网来展现自己等诸多问题，因此该项目符合开发条件，具有成熟的基础，并且，从前面的分析来看，技术上的操作是十分成熟并且开源免费广为人们使用，从系统的操作上是可行的。

图4-1  系统流程图

本个人博客系统分为两个角色，分别是博主和游客。只有博主才能登录后台管理系统，进行博客发表。

1.首先要通过用户名和密码登录后台管理系统，才能发布博客。

2.博主和游客都可以阅读博客。

3.博主和游客都可以发表评论。

4.经过博主的评论审核，评论才可以发布。

5.此时博主和游客才可以观看到评论。

图4-2博主用例图

博主的功能简介：

1.登入功能

登入后台管理系统：首先进入登录页面，需要输入账号和密码。它会使用Shiro进行安全管理，对前台输入的密码进行加密运算，然后与数据库中的进行比较。成功后才能登入后台系统。

1. 博客管理功能

博客管理功能分为写博客和博客信息管理。写博客是博主用来发表编写博客的，需要博客标题，然后选择博客类型，最后将博客内容填入百度的富文本编辑器中，点击发布博客按钮即可发布博客。

1. 博客类别管理系统

博主类别管理系统可以添加，修改和删除博客类型名称和排序序号。将会显示到首页的按日志类别区域。游客可以从这里查找相关的感兴趣的博客内容。

4.评论管理功能

评论管理功能分为评论审核和评论信息管理两部分。评论审核是当有游客或自己发表了评论之后，博主需要在后台管理系统中审核评论。若想将此评论显示在页面上则点击审核通过，否则点击审核不通过。

5.个人信息管理功能

在这里可以修改博主的个人信息，可以修改昵称，个性签名，可以添加个人头像，修改个人简介。

6.系统管理功能

这里的功能有友情链接管理，修改密码，刷新系统缓存和安全退出。

友情链接管理可以添加，修改，删除友情链接网址。

图4-3游客用例图

图4-4博客类图

本系统主要功能和模块的JavaBean主要集中博客、博客类型、评论、友情链接这四个类。

一、博客类

1.功能

用于存储博主发表的博客的一些信息

2.属性

id; // 编号                                                        

title; // 博客标题                                                     

summary; // 摘要                                                    

leaseDate; // 发布日期                                                

clickHit; // 查看次数                                                

replyHit; // 回复次数                                                

content; // 博客内容                                                  

contentNoTag; // 博客内容 无网页标签 Lucene分词用                             

blogType; // 博客类型                                               

blogCount; // 博客数量 非博客实际属性，主要是 根据发布日期归档查询博客数量用                   

releaseDateStr; // 发布日期字符串 只取年和月                                  keyWord; // 关键字                                              

3.方法

都是属性对应的setter,getter方法

二、博客类型类

1.功能：对博客进行分类，将博客分为几大类型

2.属性： 

id; // 编号        

userName; // 用户名  

password; // 密码   

nickName; // 昵称   

sign; // 个性签名     

proFile; // 个人简介  

imageName; // 博主头像

3.方法：

对应的setter,getter方法，也可用lombok@data注解

三，评论类：

1.功能：对博客评论数据保存。

2,。属性：

id; // 编号                           

userIp; // 用户IP                      

content; // 评论内容                     

blog; // 被评论的博客                        

commentDate; // 评论日期                   

state; // 审核状态  0 待审核 1 审核通过 2 审核未通过

3.方法：

对应的setter,getter方法

四．友情链接类

1.功能：可以保存页面上的友情链接网址。 

2.属性：

id; // 编号              

linkName; // 链接名称       

linkUrl; // 链接地址        

orderNo; // 排序序号 从小到大排序

3.方法：

对应的setter,getter方法。

4.5 E-R图 

博客类的关系模式如下(加下滑线的是主键)：

博客(编号，博客标题，摘要，发布日期，查看次数，博客类型，关键字，博客内容)。

博主类的关系模式如下(加下滑线的是主键)：

博主实体(编号，用户名，密码，昵称，个性签名，个人简介，博主头像)。

博客类型类的关系模式如下(加下滑线的是主键)：

博客类型实体(编号，博客类型名称，数量，排序)。

评论类的关系模式如下(加下滑线的是主键)：

评论实体(编号，用户IP，评论内容，被评论的博客，评论日期，审核状态)。

友情链接类的关系模式如下(加下滑线的是主键)：

友情链接实体(编号，链接名称，链接地址，排序序号)。

图4-5博客E-R图

博客类的关系模式如下(加下滑线的是主键)：

博客(编号，博客标题，摘要，发布日期，查看次数，博客类型，关键字，博客内容)。

博客系统主要表博客，用户，博客类别，评论，标签，留言的设计如下。

表4-1 cms_blog表

表4-2 sys_user表

表4-3 cms_type表

表4-4 cms_comment表

表4-5 cms_tag表

表4-6 cms_message表

登入系统后台管理登录页面，博主首先输入用户名和密码，它回去调用Controller层代码，然后进入业务层调用数据库的一些操作确认是否用户名密码正确，然后返回到前台就会登进去。

登录首页模块主要代码：

vue代码：

使用form表单提交到后台进行数据验证：

<template>
 <div class="login">
   <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
     <h3 class="title">若依后台管理系统</h3>
     <el-form-item prop="username">
       <el-input
         v-model="loginForm.username"
         type="text"
         auto-complete="off"
         placeholder="账号"
       >
         <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
       </el-input>
     </el-form-item>
     <el-form-item prop="password">
       <el-input
         v-model="loginForm.password"
         type="password"
         auto-complete="off"
         placeholder="密码"
         @keyup.enter.native="handleLogin"
       >
         <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
       </el-input>
     </el-form-item>
     <el-form-item prop="code" v-if="captchaOnOff">
       <el-input
         v-model="loginForm.code"
         auto-complete="off"
         placeholder="验证码"
         style="width: 63%"
         @keyup.enter.native="handleLogin"
       >
         <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
       </el-input>
       <div class="login-code">
         <img :src="codeUrl" @click="getCode" class="login-code-img"/>
       </div>
     </el-form-item>
     <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
     <el-form-item style="width:100%;">
       <el-button
         :loading="loading"
         size="medium"
         type="primary"
         style="width:100%;"
         @click.native.prevent="handleLogin"
       >
         <span v-if="!loading">登 录</span>
         <span v-else>登 录 中...</span>
       </el-button>
       <div style="float: right;" v-if="register">
         <router-link class="link-type" :to="'/register'">立即注册</router-link>
       </div>
     </el-form-item>
   </el-form>
   <!--  底部  -->
   <div class="el-login-footer">
     <span>Copyright © 2018-2021 ruoyi.vip All Rights Reserved.</span>
   </div>
 </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
 name: "Login",
 data() {
   return {
     codeUrl: "",
     loginForm: {
       username: "admin",
       password: "admin123",
       rememberMe: false,
       code: "",
       uuid: ""
     },
     loginRules: {
       username: [
         { required: true, trigger: "blur", message: "请输入您的账号" }
       ],
       password: [
         { required: true, trigger: "blur", message: "请输入您的密码" }
       ],
       code: [{ required: true, trigger: "change", message: "请输入验证码" }]
     },
     loading: false,
     // 验证码开关
     captchaOnOff: true,
     // 注册开关
     register: false,
     redirect: undefined
   };
 },
 watch: {
   $route: {
     handler: function(route) {
       this.redirect = route.query && route.query.redirect;
     },
     immediate: true
   }
 },
 created() {
   this.getCode();
   this.getCookie();
 },
 methods: {
   getCode() {
     getCodeImg().then(res => {
       this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
       if (this.captchaOnOff) {
         this.codeUrl = "data:image/gif;base64," + res.img;
         this.loginForm.uuid = res.uuid;
       }
     });
   },
   getCookie() {
     const username = Cookies.get("username");
     const password = Cookies.get("password");
     const rememberMe = Cookies.get('rememberMe')
     this.loginForm = {
       username: username === undefined ? this.loginForm.username : username,
       password: password === undefined ? this.loginForm.password : decrypt(password),
       rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
     };
   },
   handleLogin() {
     this.$refs.loginForm.validate(valid => {
       if (valid) {
         this.loading = true;
         if (this.loginForm.rememberMe) {
           Cookies.set("username", this.loginForm.username, { expires: 30 });
           Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
           Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
         } else {
           Cookies.remove("username");
           Cookies.remove("password");
           Cookies.remove('rememberMe');
         }
         this.$store.dispatch("Login", this.loginForm).then(() => {
           this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
         }).catch(() => {
           this.loading = false;
           if (this.captchaOnOff) {
             this.getCode();
           }
         });
       }
     });
   }
 }
};
</script>

 java代码：使用MVC框架，对后台数据和前台form表单提交的数据进行交互  

@Autowired
private SysLoginService loginService;

@Autowired
private ISysMenuService menuService;

@Autowired
private SysPermissionService permissionService;

/**
* 登录方法
*
* @param loginBody 登录信息
* @return 结果
*/
@PostMapping("/login")
public AjaxResult login(@RequestBody LoginBody loginBody)
{
   AjaxResult ajax = AjaxResult.success();
   // 生成令牌
   String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
           loginBody.getUuid());
   ajax.put(Constants.TOKEN, token);
   return ajax;
}

博客管理管理模块为个人博客系统的用户（即博主）提供写博客和博客信息管理功能。在个人博客系统的首页上的博客就是从这里进行发布的。博客管理包含

新建：対博客的新建，博客可以含有图片，视频，音频附件。新建博客必须要有博客标题，博客类别自己选择所需要的博客类别，然后填入博客内容，最后发表文章。

搜索：在博客信息管理中，可以输入自己想要搜索的博客信息，系统会自动筛选出适合的博客展现给用户。

修改： 点击你想要修改的博客，系统会弹出修改博客页面，之后博客的标题，所属的博客类型，博客内容等都可以修改。

删除： 该系统支持单个删除和批量删除。

图4-1查询博客时序图

按条件查询博客,调用控制层的list方法,在其中调用服务层list方法，返回  blog集合：List<Blog> list。获得集合后使用方法把查询到符要求的数据传到前台，在前台对数据进行处理。中心代码如下：                   

  /**
* 首页查询文章列表
*/
@GetMapping("/cms/cmsList")
public TableDataInfo cmsList(CmsBlog cmsBlog)
{
   startPage();
   //状态为发布
   cmsBlog.setStatus("1");
   List<CmsBlog> list = cmsBlogService.selectCmsBlogList(cmsBlog);
   return getDataTable(list);
}

/**
* 首页获取文章详细信息
*/
@GetMapping(value = { "/cms/detail/", "/cms/detail/{id}" })
public AjaxResult getInfoDetail(@PathVariable(value = "id", required = false) Long id)
{
   AjaxResult ajax = AjaxResult.success();
   CmsType cmsType = new CmsType();
   CmsTag cmsTag = new CmsTag();
   ajax.put("types", cmsTypeService.selectCmsTypeList(cmsType));
   ajax.put("tags", cmsTagService.selectCmsTagList(cmsTag));
   if (StringUtils.isNotNull(id))
   {
       ajax.put(AjaxResult.DATA_TAG, cmsBlogService.selectCmsBlogById(id));
   }
   return ajax;
}

图4-2 新建博客时序图

点击写博客进入博客发布界面，填写博客内容信息，点击发布博客，提交到控制层的save方法，传入参数：Blog，该参数包含了该博客所有信息内容，在提交的时候使用javascript对博客的内容进行校验。校验成功后便会调用控制层的方法，在控制层的save（）方法中调用服务层的add（）方法，对该博客进行保存，持久到数据库中。部分代码如下

5.2.3 博客修改

图4-3 修改博客时序图

进入博客修改页面，修改博客内容信息，点击发布博客，提交到控制层的save方法，传入参数：Blog，该参数包含了修改后的博客所有信息内容，在提交的时候使用javascript对博客的内容进行校验。校验成功后便会调用控制层的方法，在控制层的save（）方法中调用服务层的update（）方法，对该博客进行保存，持久到数据库中。部分代码如下

/**
* 修改文章管理
*/
@PreAuthorize("@ss.hasPermi('cms:blog:edit')")
@Log(title = "文章管理", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult edit(@RequestBody CmsBlog cmsBlog)
{
   cmsBlog.setUpdateBy(getUsername());
   //删除原首图
   CmsBlog oldBlog = cmsBlogService.selectCmsBlogById(cmsBlog.getId());
   if (cmsBlog.getBlogPic().isEmpty()||!cmsBlog.getBlogPic().equals(oldBlog.getBlogPic())){
       if(!oldBlog.getBlogPic().isEmpty()){
           String blogPic = oldBlog.getBlogPic();
           if (blogPic!=null&&!"".equals(blogPic)){
               int newFileNameSeparatorIndex = blogPic.lastIndexOf("/");
               String FileName = blogPic.substring(newFileNameSeparatorIndex + 1).toLowerCase();
               sysFileInfoService.deleteSysFileInfoByFileObjectName(FileName);
           }
       }
   }
   return toAjax(cmsBlogService.updateCmsBlog(cmsBlog));
}

图4-4 删除博客时序图

在博客管理页面选择需要删除的博客，点击删除按钮，提交到控制层的delete方法，传入参数：需要删除博客的id，调用控制层的方法，在控制层的delete（）方法中调用服务层的delete（）方法，对该博客或多个博客进行删除，持久到数据库中。部分代码如下:

/**
   * 删除文章管理
   */
  @PreAuthorize("@ss.hasPermi('cms:blog:remove')")
  @Log(title = "文章管理", businessType = BusinessType.DELETE)
@DeleteMapping("/{ids}")
  public AjaxResult remove(@PathVariable Long[] ids)
  {
      //删除原首图
      for (Long id : ids) {
          CmsBlog oldBlog = cmsBlogService.selectCmsBlogById(id);
          if(!oldBlog.getBlogPic().isEmpty()){
              String blogPic = oldBlog.getBlogPic();
              if (blogPic!=null&&!"".equals(blogPic)){
                  int newFileNameSeparatorIndex = blogPic.lastIndexOf("/");
                  String FileName = blogPic.substring(newFileNameSeparatorIndex + 1).toLowerCase();
                  sysFileInfoService.deleteSysFileInfoByFileObjectName(FileName);
              }
          }
      }
      return toAjax(cmsBlogService.deleteCmsBlogByIds(ids));
  }

图4-5 添加博客类型时序图

在博客类别管理页面打开添加博客类别弹窗，填写博客类别名称和排序，点击保存按钮，提交到控制层的save方法，传入参数：需要添加的博客类型blogType，调用控制层的方法，在控制层的save（）方法中调用服务层的add()方法，添加博客类别的相关信息，持久到数据库中。部分代码如下:

/**
* 新增分类管理
*/
@PreAuthorize("@ss.hasPermi('cms:type:add')")
@Log(title = "分类管理", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody CmsType cmsType)
{
   cmsType.setCreateBy(getUsername());
   return toAjax(cmsTypeService.insertCmsType(cmsType));
}

图4-6 修改博客类型时序图

在博客类别管理页面先选择要修改的数据，点击修改按钮，打开修改博客类别弹窗，填写修改后博客类别名称和排序，点击保存按钮，提交到控制层的save方法，传入参数：需要添加的博客类型blogType，调用控制层的方法，在控制层的save（）方法中调用服务层的update()方法，修改博客类别的相关信息，持久到数据库中。部分代码如下:

/**
* 修改分类管理
*/
@PreAuthorize("@ss.hasPermi('cms:type:edit')")
@Log(title = "分类管理", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult edit(@RequestBody CmsType cmsType)
{
   cmsType.setUpdateBy(getUsername());
   return toAjax(cmsTypeService.updateCmsType(cmsType));
}

5.3.3 删除博客类别

图4-7 删除博客类型时序图

在博客类别管理页面先勾选上要删除的数据，点击删除按钮，提交到控制层的delete方法，传入参数：需要删除的博客类型的id(可以是多个)，调用控制层的方法，在控制层的delete（）方法中调用服务层的delete()方法，删除博客类别的相关信息，持久到数据库中。部分代码如下:

/**

 * 删除博客类别信息

 * @param ids

 * @param response

 * @return

 * @throws Exception

 */

/**
   * 删除分类管理
   */
  @PreAuthorize("@ss.hasPermi('cms:type:remove')")
  @Log(title = "分类管理", businessType = BusinessType.DELETE)
@DeleteMapping("/{typeIds}")
  public AjaxResult remove(@PathVariable Long[] typeIds)
  {
      return toAjax(cmsTypeService.deleteCmsTypeByTypeIds(typeIds));
  }

图4-8显示博客类型时序图

在打开博客类别管理页面时，调用控制层的list方法，传入参数：当前页数和每页数量，调用控制层的方法，在控制层的list（）方法中调用服务层的list()方法，从数据库中查询到博客类别信息，然后将博客类别的相关数据渲染页面上。部分代码如下:

/**
* 查询分类管理列表
*/
@PreAuthorize("@ss.hasPermi('cms:type:list')")
@GetMapping("/list")
public TableDataInfo list(CmsType cmsType)
{
   startPage();
   // 角色集合
   Set<String> roles = permissionService.getRolePermission(getLoginUser().getUser());
   if (!SecurityUtils.isAdmin(getUserId())&&!roles.contains("admin")&&!roles.contains("cms")){
       cmsType.setCreateBy(getUsername());
   }
   List<CmsType> list = cmsTypeService.selectCmsTypeList(cmsType);
   return getDataTable(list);
}

图4-9审核评论时序图

博主在后台页面打开评论管理页面，选择需要审核的评论，点击审核通过按钮，调用controller层的review方法，controller层调用service层的update方法，将评论的状态字段改为对应的代表通过审核的1，如果点击不通过那就是2.然后调用dao层的update方法持久化到数据库中，相关的代码如下：

  /**

     * 首页新增留言

     */

    @PostMapping("/cms/addMessage")

    public AjaxResult addMessage(@RequestBody CmsMessage cmsMessage)

    {

        Long parentId = cmsMessage.getParentId();

        if (parentId!=null){

            CmsMessage message = cmsMessageService.selectCmsMessageById(parentId);

            if (message.getMainId()!=null){

                cmsMessage.setMainId(message.getMainId());

            }else {

                cmsMessage.setMainId(parentId);

            }

        }

        return toAjax(cmsMessageService.insertCmsMessage(cmsMessage));

    }

图4-10删除评论时序图

博主在后台打开评论管理页面，选择需要删除的评论，点击删除按钮。调用controller层的delete方法，在其中的方法中调用业务逻辑层的实现方法，然后调用dao层的方法，最后持久化到数据库中，相关的代码如下：

 /**
   * 删除留言管理
   */
  @PreAuthorize("@ss.hasPermi('cms:message:remove')")
  @Log(title = "留言管理", businessType = BusinessType.DELETE)
@DeleteMapping("/{ids}")
  public AjaxResult remove(@PathVariable Long[] ids)
  {
      return toAjax(cmsMessageService.deleteCmsMessageByIds(ids));
  }

6.系统测试

浏览器的网址输入框中输入正确的地址既可以看到系统前台页面:

图5-1前台展示页面 

在前台首页可以点击登录后台按钮可以登录到后台管理页面，在后台管理页面可以进行博客管理，博客类别管理，评论审核和个人信息管理还有系统管理。但是首先要获取用户名和密码，拥有博主权限才可以进入到后台管理页面，首先输入用户名：admin，然后输入密码: 123。结果有两种，一种是密码正确成功登录，另外一种是不成功，登录失败，若是失败，则会在页面上打出红色字体：用户名或密码错误。

如下图所示：

图5-2后台登录页面

登录成功后，可以进入到后台管理页面，在这个页面，博主可以管理博客，可以新增博客，可以删除修改博客，也可以管理评论等等。

图5-2后台管理页面

测试写博客：

图5-3写博客页面

点击发布博客按钮，发布成功。