Spring实现博客系统

     在上次用Servlet实现了博客系统之后，一直觉得代码写起来比较繁琐，而且耦合度很高。直到学习了Spring，我又看到了一线生机，运用SpringBoot重新改造了我的博客系统，接下来讲讲Spring是个什么东西，并把我的改造思路给大家分享下。 

1、什么是Spring
Spring简直是个神奇的东西，它向所有的对象提供它所需的东西，同时也把对象所需要的东西提供给对方，大大降低了代码之间的耦合度。所有对象的销毁和创建都由Spring掌控，在Spring中有个主要概念，就是控制反转，那么什么是控制反转呢？对于某个具体的对象而言，以前是它控制其他对象，现在是所有对象都被spring控制，这就叫控制反转（IOC）。IoC在系统运行中时，动态的向某个对象提供它所需要的其他对象。而这就是由我们经常听过的DI来实现的，也就是依赖注入。举个例子，比如对象A需要操作数据库，以前我们总是要在A中自己编写代码来获得一个Connection对象，有了 spring我们就只需要告诉spring，A中需要一个Connection，至于这个Connection怎么构造，何时构造，A不需要知道。在系统运行时，spring会在适当的时候制造一个Connection，然后注射到A中，这样就完成了对各个对象之间关系的控制。A需要依赖 Connection才能正常运行，而这个Connection是由spring注入到A中的，依赖注入的名字就这么来的。那么DI是如何实现的呢？ 反射（reflection）就是一种手段，它允许程序在运行的时候动态的生成对象、执行对象的方法、改变对象的属性，spring就是通过反射来实现注入的。

2、Spring框架配置使用流程
（1）启动容器
（2）加载xml配置
（3）根据xml配置路径，执行包扫描
（4）把带注解的对象注册到容器中，一般常用的类注解有这几种：@Controller，@Service，@Configuration，@Repository
（5）装配对象依赖关系，有这两个常见注解：@Autowired，@Resource

3、SpringBoot、SpringMVC和Spring的关系
在学了Spring之后，我们知道了它的概念，那么SpringBoot又和Spring有什么关系呢？它对Spring的缺点进行了改善和优化，典型的特点就是基于“约定优于配置”的思想。它没有了Servlet配置繁琐的缺点，没有代码生成，无需xml文件配置，可以用于嵌入式web服务器、安全、指标、健康监测、外部配置。而SpringMVC呢，它就是一种软件架构模式，把软件系统分为模式、视图、控制器三个基本部分。它的交互流程如下：

4、项目架构
关于Spring的知识，我会另外写一篇文章进行讲述，今天重点在于博客系统的改造。项目的开发一般的流程如下：业务需求采集->产品设计->系统设计->编码设计->测试->部署上线->运维，那么博客系统架构大概如下：

对于首页：显示文章列表，有注册/登录功能
对于登录页面：后端，校验用户名，密码成功—创建session，保存用户信息，提供注销功能；
文章详情页面：显示文章信息
个人博客管理页面：和首页类似，显示文章列表，提供新增，删除，修改功能
以上是整体页面的设计；
4.1基础设施搭建
（1）准备环境
maven配置：引入SpringBoot相关依赖，SpringBoot启动配置文件application.properties，里面配置日志打印
（2）基础设施
前后端约定统一的响应格式，统一异常处理，提供自定义异常（抛自定义异常，给用户看的中文错误消息，提高用户体验感）非自定义异常，不能给用户看，需要转成用户可以看的信息，加入统一异常处理后，响应状态码都是200；前后端接口，需要使用的字段，抽象为模型类。统一用户会话管理：使用拦截器，搭配后端服务统一前缀，需要准备好页面以及后端接口；
4.2业务实现
（1）准备页面，在脑海里想象一下，页面之间是如何交互的，前后端又是如何交互的（业务流程）
（2）准备后端接口+模拟数据
特别要注意的是业务流程，如果是ajax相关，ajax发请求–后端请求映射方法，返回响应–ajax回调函数执行，收集请求数据发送。
4.3前端设计
（1）设计html页面元素
结合vue.js前端框架（快速开发前端的js框架，前端dom元素对应的双向绑定的）
绑定变量:
（1.1）标签内容绑定变量：{{变量名}}
（1.2）表单输入绑定：表单标签使用v-model=“变量名”
（1.3）条件：某个标签使用v-if=“变量名”/v-else 使用在某些条件展示内容
变量设计遵循不需要和后端交互原则，如前端按钮点击事件。
（2）设计用户事件相关
在某个事件发生时，绑定事件函数，如页面初始化事件，其他用户事件，一般是和变量结合设计。
4.4前后端开发
（1）约定好前后端接口，前端、后端可以独立开发，符合现在前后端分离的模式。
以上就是我对博客系统的整体架构，下面展示实现流程；
5、后端具体实现
5.1启动类，使用SpringApplication

package org.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

// 启动类
public class Application {

    //SpringBoot在idea中运行，是在taregt/class目录下

    public static void main(String[] args) {

        // 注意第一个参数是当前类的类对象
        SpringApplication.run(Application.class, args);

    }


}

5.2自定义异常和响应数据的设计

package org.example.exception;


public class AppException extends RuntimeException{

    public AppException(String message) {
        super(message);
    }

    public AppException(String message,Throwable cause) {
        super(message,cause);
    }
}

package org.example.base;


import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@ToString
@Getter
@Setter

public class ResponseResult {

    //业务操作是否成功：前端统一在成功回调处理
    private boolean ok;

    //业务操作成功.
    private Object data;

    //业务操作失败，返回提示信息
    private String message;
}

package org.example.config;

import lombok.extern.slf4j.Slf4j;
import org.example.base.ResponseResult;
import org.example.exception.AppException;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 统一异常处理：
 * 响应需要返回统一数据格式（ok=false，messgae）
 * 自定义异常，直接取异常携带中文信息，以便用户读懂
 * 非自定义异常，转换
 */

@ControllerAdvice
@Slf4j
public class ExceptionAdvice {

    @ExceptionHandler(AppException.class)
    @ResponseBody
    public Object handleAppException(AppException e){

        //异常的打印
        log.debug("自定义异常",e);
        ResponseResult json = new ResponseResult();

        json.setMessage(e.getMessage());
        return json;
    }


    @ExceptionHandler(Exception.class)
    @ResponseBody
    public Object handleException(Exception e){

        log.error("系统出错了！",e);
        ResponseResult json = new ResponseResult();

        json.setMessage("未知错误，请联系管理员！");
        return json;

    }
}

5.3用户和文章字段设计

package org.example.model;


import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

import java.io.Serializable;

@ToString
@Setter
@Getter
//User对象需要保存在session里，属于java对象序列化(序列化为二进制数据)
public class User implements Serializable {


    private static final long serialVersionUID = 0;

    /**
     * 用户名
     */
    private String username;

    /**
     * 密码
     */
    private String password;

    /**
     * 昵称
     */

    private String nickname;

    /**
     * 邮箱
     */

    private String email;

    /**
     * 头像
     */

    private String head;


}

package org.example.model;


import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@ToString
@Setter
@Getter
public class Article {

    /**
     * 文章id
     */
    private Integer id;

    /**
     * 文章标题
     */
    private String title;

    /**
     * 文章内容
     */
    private String content;

}

5.4数据的模拟以及对象注册

package org.example.config;

import org.example.model.Article;
import org.example.model.User;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.ArrayList;
import java.util.List;

@Configuration
public class DataConfig {


    @Bean
    public User user(){
        User user = new User();
        user.setUsername("abc");
        user.setPassword("123");
        user.setNickname("Kaiser");
//        user.setEmail("1732000@qq.com");

        return user;
    }

    @Bean
    public List<Article> articleList(){

        List<Article> list = new ArrayList<>();

        Article a1 = new Article();
        a1.setId(1);
        a1.setTitle("手动蝶阀带我飞");
        a1.setContent("举舞弄轻盈");
        list.add(a1);

        Article a2 = new Article();
        a2.setId(2);
        a2.setTitle("单身宿舍");
        a2.setContent("的单色驱蚊器而且我开发及");
        list.add(a2);

        Article a3 = new Article();
        a3.setId(3);
        a3.setTitle("慕课上");
        a3.setContent("开发，十一哦哦巨大市财政局");
        list.add(a3);

        return list;

    }
}

5.5封装Controller里返回空的情况

package org.example.config;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.example.config.web.RequestResponseBodyMethodProcessorWrapper;
import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.method.support.HandlerMethodReturnValueHandler;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter;
import org.springframework.web.servlet.mvc.method.annotation.RequestResponseBodyMethodProcessor;

import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;

//定义SpringMVC的启动配置类
@Configuration
public class AppConfig implements WebMvcConfigurer, InitializingBean {

    @Autowired
    private ObjectMapper objectMapper;

    @Resource
    private RequestMappingHandlerAdapter adapter;

    //之前以@ControllerAdvice+实现ResponseBodyAdvice接口，完成统一处理返回数据包装：无法解决返回值为null需要包装
    //改用现在这种方式，可以解决返回null包装为自定义类型
    @Override
    public void afterPropertiesSet() throws Exception {

        List<HandlerMethodReturnValueHandler> returnValueHandlers = adapter.getReturnValueHandlers();
        List<HandlerMethodReturnValueHandler> handlers = new ArrayList(returnValueHandlers);
        for(int i=0; i<handlers.size(); i++){
            HandlerMethodReturnValueHandler handler = handlers.get(i);
            if(handler instanceof RequestResponseBodyMethodProcessor){
                handlers.set(i, new RequestResponseBodyMethodProcessorWrapper(handler));
            }

        }
        adapter.setReturnValueHandlers(handlers);

    }


    //配置Controller中请求映射方法路径匹配规则
    @Override
    public void configurePathMatch(PathMatchConfigurer configurer) {
        //设置路径前缀的规则，以第二个参数的返回值作为请求映射方法是否添加前缀
        configurer.addPathPrefix("api", c->true);

    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {

    }

}

package org.example.config.web;

import org.example.base.ResponseResult;
import org.springframework.core.MethodParameter;
import org.springframework.web.context.request.NativeWebRequest;
import org.springframework.web.method.support.HandlerMethodReturnValueHandler;
import org.springframework.web.method.support.ModelAndViewContainer;

public class RequestResponseBodyMethodProcessorWrapper implements HandlerMethodReturnValueHandler {

    private final HandlerMethodReturnValueHandler delegate;

    public RequestResponseBodyMethodProcessorWrapper(HandlerMethodReturnValueHandler delegate) {
        this.delegate = delegate;
    }

    @Override
    public boolean supportsReturnType(MethodParameter returnType) {
        return delegate.supportsReturnType(returnType);
    }

    @Override
    public void handleReturnValue(Object returnValue, MethodParameter returnType, ModelAndViewContainer mavContainer, NativeWebRequest webRequest) throws Exception {
        //returnValue是Controller请求方法执行完，返回值
        if(!(returnValue instanceof ResponseResult)){//返回值本身就是需要的类型，不进行处理
            ResponseResult json = new ResponseResult();
            json.setOk(true);
            json.setData(returnValue);
            returnValue = json;
        }

        delegate.handleReturnValue(returnValue, returnType, mavContainer, webRequest);
    }
}

5.6后端对于用户登录、注销的响应

package org.example.controller;

import org.example.exception.AppException;
import org.example.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private User user;


    @PostMapping("/login")
    public Object login(@RequestBody User user, HttpServletRequest request){

        //模拟请求账号密码，在数据库查询对比
        if (!this.user.getUsername().equals(user.getUsername())){

            throw new AppException("账号不存在");
        }

        if (!this.user.getPassword().equals(user.getPassword())){

            throw new AppException("密码错误！");

        }

        HttpSession session = request.getSession();
        session.setAttribute("user",this.user);
        return null;

    }

    //注销功能
    @GetMapping("/logout")
    public Object logout(HttpSession session){

        session.removeAttribute("user");
        return null;

    }
}

5.7后端对于文章的新增、查看、修改、删除的响应

package org.example.controller;


import org.example.exception.AppException;
import org.example.model.Article;
import org.example.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.NumberFormat;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/article")
public class ArticleController {

    @Autowired
    private List<Article> articleList;


    @GetMapping("/init")
    public Object init(HttpServletRequest request){
        Map<String,Object> data = new HashMap<>();

        //获取用户信息
        HttpSession session = request.getSession(false);
        if (session != null) {
            User user = (User) session.getAttribute("user");
            if (user != null) {

                data.put("user",user);
            }
        }
        data.put("articleList",articleList);
        return data;//ok=true,data={user:{},articleList:[{}]

    }


    @GetMapping("/detail")
    public Object detail(Integer id){

        for (Article a:articleList){
            if(Integer.compare(a.getId(),id)==0){
                return a;
            }
        }

        throw new AppException("找不到该文章"+id);
    }

    @PostMapping("/add")
    public Object add(@RequestBody Article a){

        int max = 0;
        for (Article cur:articleList){
            if (cur.getId()>max){
                max = cur.getId();

            }

        }
        a.setId(max+1);
        articleList.add(a);
        return null;

    }

    @PostMapping("/update")
    public Object update(@RequestBody Article a){

        for (int i=0;i<articleList.size();i++){

            Article cur = articleList.get(i);

            if (Integer.compare(cur.getId(),a.getId())==0){
                articleList.set(i,a);
                return null;

            }
        }

       throw new AppException("修改失败，没有该文章"+a.getId());

    }


    @GetMapping("/delete")
    public Object delete(int id){

        for (int i=0;i<articleList.size();i++){

            Article cur = articleList.get(i);

            if (cur.getId()==id){

                articleList.remove(id);

                return null;
            }

        }

        throw new AppException("删除失败，没有该文章"+id);

    }

}

6、前端页面的实现
6.1首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YYCN博客</title>

</head>
<body>


<div id="app">
    <h2>YYCN首页</h2>
       <!--    绑定变量 {{...}}-->
    <div v-if="user.nickname">欢迎你，{{user.nickname}} <a href="javascript:void(0)" @click="logout()">注销</a> <a href="personalArticle.html">个人博客管理</a> </div>
    <div v-else> <a href="login.html">登录</a>/<a href="register.html">注册</a></div>

    <ul>
        <li v-for="article in articles">
            <a href="javascript:void(0)" onclick="toDetail(article.id)">{{article.title}}</a>

        </li>

    </ul>

    <!--    以弹出框展示登录页面 展示和隐藏-->
<!--    <button @click="showLogin">登录</button>-->
<!--    <div v-if="showLogin">-->
<!--        用户名:<input type="text">-->


    </div>
    <!--    设计用户事件相关 在某个动作发生时，绑定事件函数   1、页面初始化事件 created：function（）{  2、其他用户事件，比如按钮、链接/div元素/图片..点击-->
    <!--    标签上：v-on：click-"方法名" 简写@click="方法名"  定义方法 methods：{ 方法名 function（）{  -->
    <!--    涉及后端的数据，需要前后端ajax （1）发送请求 （2）解析响应-->


<script type="application/x-javascript" src="vue.js"></script>
<script type="application/x-javascript" src="axios.js"></script>


<script>
    let app = new Vue({

        el: "#app",
        data: {

            user: {},

            articles: [],

        },
        methods: {

            toDetail: function () {

                localStorage.setItem('aid', id);
                window.location.href = "detail.html";

            },

            logout: function () {

                axios.get("api/user/logout")
                    .then(function (resp) {
                        let body = resp.data;

                        if (body.ok) {

                            app.user = {};

                        } else {
                            alert(body.message)
                        }

                    })
              }
            },

        //初始化方法，页面加载后就执行
        created: function () {
            //发送首页初始化ajax请求，获取用户登录及文章列表信息
            axios.get("api/article/init")
                .then(function (resp) {
                    // console.log(resp)
                    let body = resp.data;

                    if (body.ok) {

                        //如果||前的值等于空，就赋值为||后的值
                        app.user = body.data.user || {};
                        app.articles = body.data.articleList || [];


                    } else {

                        alert(body.message)

                    }
                })

        }


    })
</script>
</body>
</html>

前端页面比较多，这里就不一一上传了，大家可以看我的github账号：github账号
引入SpringBoot框架之后，后端代码少了很多，也少了很多配置，总之引用框架好处太多了，可以跨各种平台部署，灵活的依赖注入，通过POJO缓解了注射测试的数据。