springboot单表CRUD

一、开发环境

系统环境：windows7旗舰版

IDE:eclipse 2019-09 R (4.13.0)

数据库:MySQL5.7.13

前端编辑器:Vishual Studio Code 1.39.2

二、 数据库建表

# 新建用户表
CREATE TABLE users(
uid INT PRIMARY KEY auto_increment,
uname VARCHAR(20),
ubirthday DATE,
umoney DOUBLE
);

三、 后端项目工程

maven版本：3.6.2

pom.xml配置

<!-- Spring Boot 启动父依赖 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.4.RELEASE</version>
    </parent>
    <dependencies>
        <!-- Spring Boot 项目启动所必须的web依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- 引入mybatis starter依赖 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.0</version>
        </dependency>
        <!-- 导入jdbc环境，以及Spring Boot推荐的数据源，必须配置数据源，不配置，启动时就会报错！ -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- 引入mysql驱动依赖 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <!-- mysql依赖的version不能删除，如果删除则变为了8版本，而8版本的url写法很麻烦！！ -->
            <version>5.1.35</version>
        </dependency>
        <!-- 引入Mybatis逆向工程依赖 -->
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.3.7</version>
        </dependency>
        <!-- 引入Spring Boot 开发依赖 -->
        <!-- 引入该依赖后服务器支持热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <!-- 引入Spring Aop 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <!-- 如果要使用jsp，必须引入jsp相关依赖 -->
       <!--  <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency> -->
    </dependencies>

application.yml

#配置服务端口号
server:
  port: 8888

#配置Spring Boot 推荐使用的数据源
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test?characterEncoding=utf8
    username: root
    password: 111111
    driver-class-name: com.mysql.jdbc.Driver

在src/test/resources目录下配置Mybatis逆向工程配置文件generatorConfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
  PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
  "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>    
    <context id="ctx1">
        <!-- 配置pojo的序列化 -->
        <plugin type="org.mybatis.generator.plugins.SerializablePlugin" />
    
        <commentGenerator>
            <!-- 是否去除自动生成的注释 true：是 ： false:否 -->
            <property name="suppressAllComments" value="true" />
        </commentGenerator>
        <!--数据库连接的信息：驱动类、连接地址、用户名、密码,这里配置的是mysql的，当然也可以配置oracle等数据库 -->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
            connectionURL="jdbc:mysql://localhost:3306/test?characterEncoding=utf8" userId="root"
            password="111111">
        </jdbcConnection>

        <!-- 默认false，把JDBC DECIMAL 和 NUMERIC 类型解析为 Integer，为 true时把JDBC DECIMAL 
            和 NUMERIC 类型解析为java.math.BigDecimal -->
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>

        <!-- targetProject:生成PO类的位置 -->
        <javaModelGenerator targetPackage="com.woniuxy.domain"
            targetProject=".\src\main\java">
            <!-- enableSubPackages:是否让schema作为包的后缀 -->
            <property name="enableSubPackages" value="false" />
            <!-- 从数据库返回的值被清理前后的空格 -->
            <property name="trimStrings" value="true" />
        </javaModelGenerator>
        <!-- targetProject:mapper映射文件生成的位置 -->
        <sqlMapGenerator targetPackage="com.woniuxy.dao"
            targetProject=".\src\main\java">
            <!-- enableSubPackages:是否让schema作为包的后缀 -->
            <property name="enableSubPackages" value="false" />
        </sqlMapGenerator>
        <!-- targetPackage：mapper接口生成的位置 -->
        <javaClientGenerator type="XMLMAPPER"
            targetPackage="com.woniuxy.dao" targetProject=".\src\main\java">
            <!-- enableSubPackages:是否让schema作为包的后缀 -->
            <property name="enableSubPackages" value="false" />
        </javaClientGenerator>
        <!-- 指定数据库表 -->
        <table tableName="users"></table>
    </context>
</generatorConfiguration>

在src/test/java目录下配置Mybatis逆向工程启动类com.woniuxy.test.GeneratorSqlmap.java

package com.woniuxy.test;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.internal.DefaultShellCallback;

/**
 * Mybatis逆向工程启动类
 * @author Administrator
 *
 */
public class GeneratorSqlmap {
    public void generator() throws Exception {
        List<String> warnings = new ArrayList<String>();
        boolean overwrite = true;
        //指定逆向工程配置文件所在的路径
        File configFile = new File("src/test/resources/generatorConfig.xml");
        ConfigurationParser cp = new ConfigurationParser(warnings);
        Configuration config = cp.parseConfiguration(configFile);
        DefaultShellCallback callback = new DefaultShellCallback(overwrite);
        MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config,callback, warnings);
        myBatisGenerator.generate(null);
        
        System.out.println("over");
    }
    public static void main(String[] args) throws Exception {
        try {
            GeneratorSqlmap t = new GeneratorSqlmap();
            t.generator();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

执行该类的main方法，生成实体层和dao层

定义IUserService接口

package com.woniuxy.service;

import java.util.List;

import com.woniuxy.domain.Users;

/**
 * 用户CRUD业务层接口
 * @author Administrator
 *
 */
public interface IUserService {
    void save(Users user);
    void delete(Integer uid);
    void update(Users user);
    Users findOne(Integer uid);
    List<Users> findAll();
}

实现类IUserServiceImpl.java

package com.woniuxy.service.impl;

import java.util.List;

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

import com.woniuxy.dao.UsersMapper;
import com.woniuxy.domain.Users;
import com.woniuxy.service.IUserService;

@Service
public class UserServiceImpl implements IUserService {
    
    @Autowired
    private UsersMapper mapper;

    @Override
    public void save(Users user) {
        mapper.insertSelective(user);
    }

    @Override
    public void delete(Integer uid) {
        mapper.deleteByPrimaryKey(uid);
    }

    @Override
    public void update(Users user) {
        mapper.updateByPrimaryKeySelective(user);
    }

    @Override
    public Users findOne(Integer uid) {
        Users user = mapper.selectByPrimaryKey(uid);
        return user;
    }

    @Override
    public List<Users> findAll() {
        List<Users> users = mapper.selectByExample(null);
        return users;
    }
    
}

控制层UserController.java

package com.woniuxy.web.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.woniuxy.domain.Users;
import com.woniuxy.service.IUserService;

@RestController
@RequestMapping("users")
public class UserController {
    
    @Autowired
    private IUserService service;
    
    @PostMapping
    public void save(Users user) {
        service.save(user);
    }
    
    @DeleteMapping
    public void delete(Integer uid) {
        service.delete(uid);
    }
    
    @PutMapping
    public void update(Users user) {
        service.update(user);
    }
    
    @GetMapping(value = "/{uid}")
    public Users findOne(@PathVariable Integer uid) {
        Users user = service.findOne(uid);
        System.out.println(service.findOne(uid));
        return user;
    }
    
    @GetMapping
    public List<Users> findAll() {
        List<Users> users = service.findAll();
        for (Users user : users) {
            System.out.println(user);
        }
        return users;
    }
}

前后端分离牵涉到跨域请求，这里使用CORS技术解决该问题

使用配置类CorsConfig .java实现（全局可访问）

package com.woniuxy.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class CORSConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 允许跨域范文的路径
        .allowedOrigins("*")    // 允许跨域访问的源
        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")  // 允许请求方法
        .maxAge(168000)     // 预检间隔时间
        .allowCredentials(false);   // 是否发送cookie
    }
    
}

配置服务启动类com.woniuxy.app.App.java

/**
 * Spring Boot 内置tomcat启动类
 * @author Administrator
 *  启动时检测com.woniuxy包下的所有类，使相关注解生效
 */
@SpringBootApplication(scanBasePackages = "com.woniuxy")
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
        System.out.println("seuccess!!!!!!");
    }
}

此时，服务已经可以正常启动，后端工作完成

三、前端项目工程

vue+jquery+bootstrap+layer

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="./dist/layer-v3.1.1/layer/layer.js"></script>
    <style>
        .hidden {
            display: none;
        }

        .add {
            width: 800px;
        }

        div.form-group {
            padding-top: 24px;
        }

        #list {
            margin-top: 20px;
        }

        #addBtn {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="list">
            <table class="table table-striped table-bordered table-hover text-center col-md-8 m-auto">
                <thead>
                    <tr class="thead-light">
                        <th>用户编号</th>
                        <th>用户姓名</th>
                        <th>用户生日</th>
                        <th>用户余额</th>
                        <th>修改</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in users">
                        <td>{{item.uid}}</td>
                        <td>{{item.uname}}</td>
                        <td>{{item.ubirthday}}</td>
                        <td>{{item.umoney}}</td>
                        <td><button type="button" class="btn btn-warning" @click="addOrUpdateForm(item)">修改</button>
                        </td>
                        <td><button type="button" class="btn btn-danger" @click="del(item.uid)">删除</button></td>
                    </tr>
                </tbody>
            </table>
            <div id="addBtn" class="text-center">
                <button type="button" class="btn btn-success col-md-6" @click="addOrUpdateForm(null)">新增用户</button>
            </div>
        </div>

        <!-- 新增用户 -->
        <div id="addForm" class="hidden">
            <form>
                <input type="text" class="hidden" v-model="addUser.uid">
                <div class="form-group row col-md-8 m-auto">
                    <label for="uname" class="col-form-label col-md-3">用户名：</label>
                    <input type="text" class="form-control col-md-9" id="uname" placeholder="请输入姓名"
                        v-model="addUser.uname">
                </div>
                <div class="form-group row col-md-8 m-auto">
                    <label for="ubirthday" class="col-form-label  col-md-3">出生日期：</label>
                    <input type="date" class="form-control col-md-9" id="ubirthday" v-model="addUser.ubirthday">
                </div>
                <div class="form-group row col-md-8 m-auto">
                    <label for="umoney" class="col-form-label  col-md-3">初始金额：</label>
                    <input type="text" class="form-control col-md-9" id="umoney" placeholder="请输入初始金额"
                        v-model="addUser.umoney">
                </div>
                <div class="form-group col-md-6 m-auto">
                    <button type="button" class="btn btn-success col-md-12"
                        @click="addOrUpdate()">{{addOrUpdate_btn}}</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                users: null,
                addUser: {
                    uid: '',
                    uname: '',
                    ubirthday: '',
                    umoney: ''
                },
                addOrUpdate_btn: "确认新增",
                loyerIndex:null
            },
            methods: {
                // 显示数据库中数据
                show: function () {
                    $.ajax({
                        type: "get",
                        url: "http://192.168.1.85:8888/users",
                        success: function (response) {
                            app.users = response;
                        }
                    });
                    return this.users;
                },
                // 新增或修改用户模态框
                addOrUpdateForm(user) {
                    if (user) {
                        this.addOrUpdate_btn = "确认修改";
                        this.addUser = user;
                    } else {
                        this.addOrUpdate_btn = "确认新增";
                        this.addUser = {
                            uid: '',
                            uname: '',
                            ubirthday: '',
                            umoney: ''
                        };
                    }
                    var div = $("#addForm");
                    div.addClass("add");
                    app.loyerIndex = layer.open({
                        type: 1,
                        title: "新增用户",
                        area: ['50%', '50%'], //宽高
                        closeBtn: 0, //不显示关闭按钮
                        anim: 2,
                        shadeClose: true, //开启遮罩关闭
                        content: div
                    });
                },
                //判断是新增还是修改
                addOrUpdate() {
                    if (this.addOrUpdate_btn == "确认新增") {
                        this.add();
                    } else {
                        this.update();
                    }
                },
                add() {
                    var ubirthday = this.addUser.ubirthday;
                    this.addUser.ubirthday = ubirthday.replace(/-/g, '/');
                    $.ajax({
                        type: "post",
                        url: "http://192.168.1.85:8888/users",
                        data: this.addUser,
                        success: function () {
                            parent.layer.close(app.loyerIndex);//关闭弹出层
                            layer.msg('添加成功！');
                            app.show();
                        }
                    });

                },
                del(uid) {
                    $.ajax({
                        type: "post",
                        url: "http://192.168.1.85:8888/users",
                        data: {
                            uid: uid,
                            _method: "delete"
                        },
                        success: function () {
                            layer.msg('删除成功！');
                            app.show();
                        }
                    });
                },
                update() {
                    console.log(app.addUser.uname);
                    var user = this.addUser;
                    var ubirthday = this.addUser.ubirthday;
                    this.addUser.ubirthday = ubirthday.replace(/-/g, '/');
                    $.ajax({
                        type: "post",
                        url: "http://192.168.1.85:8888/users",
                        data: {
                            uid: user.uid,
                            uname: user.uname,
                            ubirthday: user.ubirthday,
                            umoney: user.umoney,
                            // user: '{"uid":"'+user.uid+'","uname":"'+user.uname+'","ubirthday":"'+user.ubirthday+'","umoney":"'+user.umoney+'}",',
                            _method: "put"
                        },
                        success: function () {
                            parent.layer.close(app.loyerIndex);//关闭弹出层
                            layer.msg('修改成功！');
                            app.show();
                        }
                    });

                }
            },
            mounted: function () {
                this.show();
            }
        });
    </script>
</body>

</html>

至此，基本功能就已完成