更多内容可以访问我的个人博客。

0. 技术栈

主要功能：登录后跳转到书籍管理页面，能够对书籍信息进行增删改查。

后端：

Spring Boot

Mybatis Plus

MySQL

前端：

Vue

Axios

Element-UI

---

1. 前端

关于怎么安装Vue以及构建Vue脚手架的部分，可见我的另一篇博客Vue的简单使用；

为了使开发的结构更加清晰，我们将Vue文件的显示部分即html部分和JavaScript部分分开写于两个文件中；本项目没有用到css文件，但css文件也可以同样方式包含进来。

1.1 Element-UI

文档在这里：Element-UI文档

搭建好Vue项目之后，首先加入Element-UI组件用以美化页面样式。

在命令行安装后，再在main.js中添加配置即可

npm i element-ui -S

/*main.js文件*/
/*...*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
/*...*/

比如在首页，用Element-UI写一个简单的登录框，用以输入账号和密码；验证成功则跳转至书籍管理页面

el开头的标签就是由Element-UI提供的。

<template>
<div>
<el-row type="flex" justify="center">
<el-col :span="6">
  <el-form label-position="left" lable-width="10px">
    <el-form-item prop="username">
      <el-row :gutter="20">
        <el-col :span="6">
          <label> 用户名：</label>
        </el-col>
        <el-col :span="14">
          <el-input v-model="user.username" class="dialog-input-text" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item prop="password">
      <el-row :gutter="20">
        <el-col :span="6">
          <label> 密码：</label>
        </el-col>
        <el-col :span="14">
          <el-input type="password" v-model="user.password" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button class="btn" type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form> 
</el-col>
</el-row>
</div>
</template>

1.2 Axios

详细文档可以看Axios中文说明

Axios 是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js 中。

简而言之，Axios是对Ajax的一种封装，我们可以在前端调用axios的接口，实现Ajax请求的发送。

安装配置步骤同上，在命令行安装后，在main.js中配置

npm install axios

/*main.js文件*/
/*...*/
import axios from 'axios'

axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://localhost:8080' /*配置前缀URL*/
/*使用this.$http.而不是axios.是因为this.$http.这种形式比较通用。如果不再使用axios，只需要在main.js中修改即可*/
/*无需再改页面代码*/
Vue.prototype.$http = axios
Vue.use(axios)
/*...*/

然后我们可以在页面中使用Axios发送请求。Axios的各种方法（GET、POST等）在官方文档中介绍地挺详细的，有疑惑可以看文档。

this.$http.post('/user/getUser', this.user)
     .then(res => {
      if (res.data.length != 0) {
        this.$router.push({path: '/home'}); //跳转到home组件中
      } else {
        console.log("登录失败");
        return false;
      }
}).catch(err => {
   console.log(err)
   this.$message.error({message: '数据异常', center: true})
});

2. 后端

后端首先搭建SpringBoot框架，可以使用Spring Initializr创建一个空的SpringBoot项目。

在Spring Boot的pom.xml文件中加入Mybatis Plus、mysql、lombok的jar包依赖，这样SpringBoot会自动从maven中引入适当版本的所需jar包。

2.1 Mybatis Plus

官方网站：https://mp.baomidou.com/

顾名思义，是Mybatis的增强版。在 MyBatis 的基础上只做了增强不做改变。

主要是在MyBatis 的基础上增加了以下特性。

无侵入：只做增强不做改变，引入它不会对现有工程产生影响，如丝般顺滑

损耗小：启动即会自动注入基本 CURD，性能基本无损耗，直接面向对象操作

强大的 CRUD 操作：内置通用 Mapper、通用 Service，仅仅通过少量配置即可实现单表大部分 CRUD 操作，更有强大的条件构造器，满足各类使用需求

支持 Lambda 形式调用：通过 Lambda 表达式，方便的编写各类查询条件，无需再担心字段写错

支持主键自动生成：支持多达 4 种主键策略（内含分布式唯一 ID 生成器 - Sequence），可自由配置，完美解决主键问题

支持 ActiveRecord 模式：支持 ActiveRecord 形式调用，实体类只需继承 Model 类即可进行强大的 CRUD 操作

支持自定义全局通用操作：支持全局通用方法注入（ Write once, use anywhere ）

内置代码生成器：采用代码或者 Maven 插件可快速生成 Mapper 、 Model 、 Service 、 Controller 层代码，支持模板引擎，更有超多自定义配置等您来使用

内置分页插件：基于 MyBatis 物理分页，开发者无需关心具体操作，配置好插件之后，写分页等同于普通 List 查询

分页插件支持多种数据库：支持 MySQL、MariaDB、Oracle、DB2、H2、HSQL、SQLite、Postgre、SQLServer2005、SQLServer 等多种数据库

内置性能分析插件：可输出 Sql 语句以及其执行时间，建议开发测试时启用该功能，能快速揪出慢查询

内置全局拦截插件：提供全表 delete 、 update 操作智能分析阻断，也可自定义拦截规则，预防误操作

2.2 lombok

Lombok能以简单的注解形式来简化java代码，提高开发人员的开发效率。例如开发中经常需要写的javabean，都需要花时间去添加相应的getter/setter，也许还要去写构造器、equals等方法，而且需要维护，当属性多时会出现大量的getter/setter方法，这些显得很冗长也没有太多技术含量，一旦修改属性，就容易出现忘记修改对应方法的失误。

Lombok能通过注解的方式，在编译时自动为属性生成构造器、getter/setter、equals、hashcode、toString方法。省去了手动重建这些代码的麻烦，使代码看起来更简洁些。

在Spring Boot的pom.xml文件中加入lombok依赖：

<dependency>

    <groupId>org.projectlombok</groupId>

    <artifactId>lombok</artifactId>

    <optional>true</optional>

</dependency>

然后在创建实体类的时候只需要加入*@Data*注解，就无需再写getter、setter方法。

@Data
public class User implements Serializable {
    private static final long serialVersionUID = 881321600215155310L;
    //主键ID
    private Long id;
    //用户名
    private String username;
    //密码
    private String password;
    //邮箱
    private String email;

}

2.3 EasyCode

EasyCode是基于IntelliJ IDEA开发的一个代码生成插件，主要通过自定义模板（基于velocity）来生成各种你想要的代码。通常用于生成Entity、Dao、Service、Controller。如果你动手能力强还可以用于生成HTML、JS、PHP等代码。理论上来说只要是与数据有关的代码都是可以生成的。

可在IntelliJ IDEA中安装EasyCode插件，安装方法：在File-setting-Plugins-Browse repositories中，查找EasyCode进行安装。安装完成，重启IDEA后，打开IDEA的Database框，连接数据库，选择所需要进行操作的数据库表，右击后就会出现相关选项了。

除了debug.json之外的都是项目需要的。、

EasyCode生成文件的模板也是可以设置的，以适合不同项目开发的需要。

比如实体类，初始配置是直接根据数据库字段生成属性以及对应的getter和setter方法，但上面我们说过有lombok工具的存在，可以精简实体类的显示，所以在实体类entity模板中，我们可以去掉生成getter、setter方法的宏，加上lombok的包和对应注解。

2.4 编写代码

后端逻辑一般可以从SQL开始写起，在EasyCode生成的对应mapper.*.xml文件中，编写需要的SQL语句。

如上图，是一个根据条件从book数据库查找记录的SQL语句。可以在XML文件在通过**< if >标签**判断传入的对象属性是否为null，若不为null，则在条件中加入对应属性字段。比如上述传入的book对象参数的id属性不为null，其他属性均为null，那么对应的SQL就是：

SELECT ID,DATE,BOOK_NAME,PRICE,KIND FROM BOOK WHERE ID = XXX

只有ID一个条件，其他条件不会在SQL中出现。

通过这种方法，可以增加SQL的通用性。

在XML文件中写完SQL，之后到dao层，写对应的方法。

方法名和XML中SQL的id属性对应，@Param注解中的参数名和XML中SQL的参数对应。

然后是按部就班的service层。在service中写接口方法，在实现类中调用dao层。有什么业务逻辑也写在这一层。


最后在Controller层调用Service层。有什么页面跳转关系写在这一层。

@PostMapping注解中标注的是本方法的访问路径，比如访问上图中的方法，对应的路径就是：

http://服务器ip:服务器端口/book/getBook

(若在本机上8080端口的话，也就是http://localhost:8080/book/getBook )

那么在前台就可以通过Ajax请求该URL，得到响应结果，达到前后端分离的效果。