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>

至此，基本功能就已完成
展示效果