项目SpringBoot+Mysql+Maven+MyBatis。IDE是IDEA 2018.3.X。
1.首先先看一下,pom文件需要的依赖
<?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 http://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.1.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>tang.chun</groupId>
<artifactId>jia</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>jia</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-devtools</artifactId>
<optional>true</optional>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.2.3</version>
<classifier>jdk15</classifier><!-- 指定jdk版本 -->
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8.1</version>
</dependency>
<!-- mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.6</version>
</dependency>
<!-- mybatis 和 SpringBoot整合 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.2.0</version>
</dependency>
<!-- Mysql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.13</version>
</dependency>
<!-- JDBC -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
<addResources>true</addResources>
</configuration>
</plugin>
</plugins>
<resources>
<!-- maven项目中src源代码下的xml等资源文件编译进classes文件夹,
注意:如果没有这个,它会自动搜索resources下是否有mapper.xml文件,
如果没有就会报org.apache.ibatis.binding.BindingException:
Invalid bound statement (not found): com.pet.mapper.PetMapper.selectByPrimaryKey-->
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
<!--将resources目录下的配置文件编译进classes文件 -->
</resources>
</build>
</project>
2.创建User实体类
package tang.chun.jia.registry.entity;
public class User {
private String username;
private String password;
private String idcard;
private int sex;
private String realname;
private Long mobile;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getIdcard() {
return idcard;
}
public void setIdcard(String idcard) {
this.idcard = idcard;
}
public int getSex() {
return sex;
}
public void setSex(int sex) {
this.sex = sex;
}
public String getRealname() {
return realname;
}
public void setRealname(String realname) {
this.realname = realname;
}
public Long getMobile() {
return mobile;
}
public void setMobile(Long mobile) {
this.mobile = mobile;
}
@Override
public String toString() {
return "User{" + "username='" + username + '\'' + ", password='" + password + '\'' + ", idcard='" + idcard + '\'' + ", sex=" + sex + ", realname='" + realname + '\'' + ", mobile=" + mobile + '}';
}
}
3.创建UserMapper接口
package tang.chun.jia.registry.mapper;
import org.apache.ibatis.annotations.Mapper;
import tang.chun.jia.registry.entity.User;
@Mapper
public interface UserMapper {
void insertUser(User user);
}
4.创建UserMapper.xml
xml文件的名字必须和mapper接口一样
<?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="tang.chun.jia.registry.mapper.UserMapper">
<insert id="insertUser" parameterType ="tang.chun.jia.registry.entity.User">
insert into user(username,password,idcard,sex,mobile,realname)
values (#{username},#{password},#{idcard},#{sex},#{mobile},#{realname})
</insert>
</mapper>
5.创建UserService
package tang.chun.jia.registry.service;
import tang.chun.jia.registry.entity.User;
public interface UserService {
void insertUser(User user);
}
6.创建UserServiceImp
UserService的实现类
package tang.chun.jia.registry.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import tang.chun.jia.registry.mapper.UserMapper;
import tang.chun.jia.registry.entity.User;
@Service
public class UserServiceImp implements UserService {
@Autowired(required=true)
private UserMapper userMapper;
public UserMapper getMapper() {
return userMapper;
}
public void setMapper(UserMapper userMapper) {
this.userMapper = userMapper;
}
@Override
public void insertUser(User user) {
userMapper.insertUser(user);
}
}
7.写一个Controller
package tang.chun.jia.registry.controller;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import tang.chun.jia.registry.entity.User;
import tang.chun.jia.registry.service.UserService;
@Controller
public class RegistryUser {
@Autowired
private UserService userService;
@RequestMapping(value="/registry",method= RequestMethod.POST)
@ResponseBody
public String insertUser(User user) {
try {
userService.insertUser(user);
return "index.html";
} catch(Exception e) {
return "404.html";
}
}
}
8.现在写前端页面(样式不多)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<!--import vue-->
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<!--import vue-resource-->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<!--import vue-axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <!–import ivew–>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<!–import ivew css–>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
</head>
<body>
<div id="app">
<!-- <i-button @click="show">Click me!</i-button>
<Modal v-model="visible" title="Welcome">Welcome to iView</Modal>-->
<form action="/registry" method="post" id="user">
<table>
<tr>
<td class="text_right">用户名:</td>
<td class="text_left"><input placeholder="输入用户名" v-model="user.username" name="username" autocomplete="off"/></td>
</tr>
<tr>
<td class="text_right">密码:</td>
<td class="text_left"><input placeholder="请输入密码密码" type="password" v-model="user.password" name="password" autocomplete="off"/></td>
</tr>
<tr>
<td class="text_right">再一次输入密码:</td>
<td class="text_left"><input placeholder="请再次输入密码" type="password" v-model="passwords" autocomplete="off"/></td>
</tr>
<tr>
<td class="text_right"> 身份证:</td>
<td class="text_left"><input placeholder="请输入身份证号码" v-model="user.idcard" type="number" name="idcard" autocomplete="off"/></td>
</tr>
<tr>
<td class="text_right">sex:</td>
<td class="text_left"><input type="radio" value="1" v-model="user.sex" name="sex">男<input type="radio" value="2" v-model="user.sex" name="sex">女</td>
</tr>
<tr>
<td class="text_right">真实姓名:</td>
<td class="text_left"><input placeholder="请输入真实姓名" v-model="user.realname" type="text" autocomplete="off" name="realname"/></td>
</tr>
<tr>
<td class="text_right">手机号码:</td>
<td class="text_left"><input placeholder="请输入手机号码" v-model="user.mobile" type="number" autocomplete="off" name="mobile"/></td>
</tr>
<tr>
<td class="text_right"><input type="submit" value="注册"/></td>
<td class="text_left"><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</div>
</body>
<script>
var Vm =new Vue({
el:"#app",
data:{
user:{},
passwords:"",
}
})
</script>
<style>
#app{
text-align: center;
margin:100px 500px;
}
.text_right{
text-align: right;
}
.text_left{
text-align: left;
}
</style>
</html>
9.yml文件配置增加Mybatis配置:
mybatis:
mapper-locations: classpath:tang/chun/jia/registry/mapper/*.xml
type-aliases-package: tang.chun.jia.registry.entity
10.启动项目,进入页面
点击注册按钮
查询数据库,发现数据已经进入到数据库里。
11.项目目录:
中间其实会碰到很多问题,比如扫不到Mapper接口,mapper.xml创建不了实例,from表单post不到后端,如果遇到这些问题,仔细对应依赖,接口类的注解,yml的配置,一定会解决的。