14 Vue CLI结合SpringBoot

14.2 后端SpringBoot项目

14.2.1 环境配置

整合Mybatis、Lombok、MySQL

• pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>

<parent>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

<version>2.2.7.RELEASE</version>

<relativePath/> <!-- lookup parent from repository -->

</parent>

<groupId>com.bsx</groupId>

<artifactId>vuecli</artifactId>

<version>0.0.1-SNAPSHOT</version>

<name>vuecli</name>

<description>Demo project for Spring Boot</description>

<properties>

<java.version>1.8</java.version>

</properties>

<dependencies>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-jdbc</artifactId>

</dependency>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<dependency>

<groupId>org.mybatis.spring.boot</groupId>

<artifactId>mybatis-spring-boot-starter</artifactId>

<version>2.1.2</version>

</dependency>

<dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<version>5.1.47</version>

<scope>runtime</scope>

</dependency>

<dependency>

<groupId>org.projectlombok</groupId>

<artifactId>lombok</artifactId>

<optional>true</optional>

</dependency>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

<scope>test</scope>

<exclusions>

<exclusion>

<groupId>org.junit.vintage</groupId>

<artifactId>junit-vintage-engine</artifactId>

</exclusion>

</exclusions>

</dependency>

<dependency>

<groupId>com.alibaba</groupId>

<artifactId>druid</artifactId>

<version>1.1.21</version>

</dependency>

</dependencies>

<build>

<plugins>

<plugin>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>

• application.yaml

spring:

datasource:

username: root

password: root

#?serverTimezone=UTC解决时区的报错

url: jdbc:mysql://localhost:3306/test?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8

driver-class-name: com.mysql.jdbc.Driver

type: com.alibaba.druid.pool.DruidDataSource # 配置使用Druid数据源

#Spring Boot 默认是不注入这些属性值的，需要自己绑定

#druid 数据源专有配置

initialSize: 5

minIdle: 5

maxActive: 20

maxWait: 60000

timeBetweenEvictionRunsMillis: 60000

minEvictableIdleTimeMillis: 300000

validationQuery: SELECT 1 FROM DUAL

testWhileIdle: true

testOnBorrow: false

testOnReturn: false

poolPreparedStatements: true

#配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入

#如果允许时报错 java.lang.ClassNotFoundException: org.apache.log4j.Priority

#则导入 log4j 依赖即可，Maven 地址：https://mvnrepository.com/artifact/log4j/log4j

filters: stat,wall,log4j

maxPoolPreparedStatementPerConnectionSize: 20

useGlobalDataSourceStat: true

connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500

server:

port: 8081

数据库

• 建vueuser表

CREATE table vueuser (

id VARCHAR(40) PRIMARY KEY,

name VARCHAR(40),

age int(3),

bir TIMESTAMP

)ENGINE=INNODB DEFAULT CHARSET=utf8;

14.2.2 后端程序开发

pojo

@Data

@AllArgsConstructor

@NoArgsConstructor

@ToString

@Accessors(chain = true)

public class User {

private String id;

private String name;

private Integer age;

@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")

private Date bir;

}

mapper

根据之前Rap2上定义的接口写

@Mapper

@Repository

public interface UserMapper {

List<User> findAll();

void add(User user);

void delete(String id);

User findOne(String id);

void update(User user);

}

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE mapper

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.bsx.vuecli.mapper.UserMapper">

<select id="findAll" resultType="com.bsx.vuecli.pojo.User">

select * from vueuser

</select>

<select id="findOne" resultType="com.bsx.vuecli.pojo.User">

select * from vueuser where id = #{id}

</select>

<insert id="add" parameterType="com.bsx.vuecli.pojo.User">

insert into vueuser values (#{id}, #{name}, #{age}, #{bir})

</insert>

<update id="update" parameterType="com.bsx.vuecli.pojo.User">

update vueuser set name = #{name}, age = #{age}, bir = #{bir} where id = #{id}

</update>

<delete id="delete">

delete from vueuser where id = #{id}

</delete>

</mapper>

service

public interface UserService {

List<User> findAll();

void add(User user);

void delete(String id);

User findOne(String id);

void update(User user);

}

serviceImpl

@Service

@Transactional

public class UserServiceImpl implements UserService{

@Autowired

private UserMapper userMapper;

@Override

public List<User> findAll() {

return userMapper.findAll();

}

@Override

public void add(User user) {

userMapper.add(user);

}

@Override

public void delete(String id) {

user.setId(UUID.randomUUID()+"");

userMapper.delete(id);

}

@Override

public User findOne(String id) {

return userMapper.findOne(id);

}

@Override

public void update(User user) {

userMapper.update(user);

}

}

controller

package com.bsx.vuecli.controller;

import com.bsx.vuecli.pojo.User;

import com.bsx.vuecli.service.UserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.*;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

@RestController

@CrossOrigin

public class UserController {

@Autowired

private UserService userService;

@GetMapping("/user/findAll")

public Map<String, Object> findAll(Integer page, Integer rows) {

Map<String, Object> map = new HashMap<>();

List<User> results = userService.findAll();

map.put("total", 10);

map.put("totalPage", 1);

map.put("page", page);

map.put("results", results);

return map;

}

@PostMapping("/user/add")

public Map<String, Object> add(@RequestBody User user) {

System.out.println(user);

Map<String, Object> map = new HashMap<>();

try {

userService.add(user);

map.put("success", true);

map.put("msg", "添加成功");

} catch (Exception e) {

map.put("success", false);

map.put("msg", "添加失败");

e.printStackTrace();

}

return map;

}

@GetMapping("/user/delete")

public Map<String, Object> delete(String id) {

Map<String, Object> map = new HashMap<>();

try {

userService.delete(id);

map.put("success", true);

map.put("msg", "删除成功");

} catch (Exception e) {

map.put("success", false);

map.put("msg", "删除失败");

e.printStackTrace();

}

return map;

}

@GetMapping("/user/findOne")

public Map<String, Object> findOne(String id) {

Map<String, Object> map = new HashMap<>();

User findOne = null;

try {

findOne = userService.findOne(id);

map.put("success", true);

map.put("msg", "查询成功");

} catch (Exception e) {

map.put("success", false);

map.put("msg", "查询失败");

e.printStackTrace();

} finally {

map.put("user", findOne);

}

return map;

}

@PostMapping("/user/update")

public Map<String, Object> update(@RequestBody User user) {

System.out.println(user);

Map<String,Object> map = new HashMap<>();

try {

userService.update(user);

map.put("success", true);

map.put("msg","修改成功");

} catch (Exception e) {

map.put("success", false);

map.put("msg","修改失败");

e.printStackTrace();

}

return map;

}

}