一、创建spring工程。
step1
step2 添加maven依赖
二、创建静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>用户首页</h1>
<a href="/reg.html">注册</a>
<a href="/login.html">登录</a>
</div>
</body>
</html>
login.html注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" placeholder="请输入用户名" v-model="user.username">
<input type="text" placeholder="请输入密码" v-model="user.password">
<input type="button" value="登录" @click="f_login()" >
</div>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js
"></script>
<script>
let v= new Vue({
el: 'body>div',
data: {
user:{
username:"",
password:"",
}
},
methods:{
f_login(){
axios.post("/login",v.user).then(function (response){
if(response.data==1)
{
alert("登录成功!")
}
else if(response.data==2)
{
alert("密码错误")
}
else {
alert("用户名不存在!")
}
})
}
}
})
</script>
</body>
</html>
reg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>注册界面</h1>
<input type="text" placeholder="请输入用户名" v-model="user.username">
<input type="text" placeholder="请输入密码" v-model="user.password">
<input type="text" placeholder="请输入昵称" v-model="user.nick">
<input type="submit" value="注册" @click="f_reg()">
</div>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- 通过cdn地址引入Vue;-->
<!-- import JavaScript -->
<!--引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js
"></script>
<script>
let v= new Vue({
el: 'body>div',
data: {
user:{
id:"",
username:"",
password:"",
nick:""
}
},
methods:{
f_reg(){
axios.post("/reg",v.user).then(function (response){
// 将input框双向绑定的用户名及密码绑定到user对象
// 将user对象传入controller,在数据库中查询是否存在用户名,若存在向前端页面返回2,不存在返回1
if(response.data==1)
{
alert("注册成功");
location.href="/";
}
else
{
alert("用户名重复");
}
})
}
}
})
</script>
</body>
</html>
User实体类
package com.mennan.practice.entity;
public class User {
private Integer id;
private String username;
private String password;
private String nick;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
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 getNick() {
return nick;
}
public void setNick(String nick) {
this.nick = nick;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
", nick='" + nick + '\'' +
'}';
}
}
mapper
package com.mennan.practice.mapper;
import com.mennan.practice.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
@Mapper
public interface UserMapper {
@Insert("insert into user values(null,#{username},#{password},#{nick})")
void insert(User user);
@Select("select password from user where username=#{username}")
User selectByUsername(String username);
}
controller
package com.mennan.practice.controller;
import com.mennan.practice.entity.User;
import com.mennan.practice.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UseController {
@Autowired
UserMapper mapper;
@RequestMapping("/reg")
public int userReg(@RequestBody User user) {
User u = mapper.selectByUsername(user.getUsername());
//如果前端传过来的用户名能在数据库查到则用户名已存在,反之则可以执行注册操作
if (u != null) {
//u不为空则数据库查到了用户名
return 2;
} else {
mapper.insert(user);
return 1;
}
}
@RequestMapping("/login")
public int userLogin(@RequestBody User user) {
User u = mapper.selectByUsername(user.getUsername());
if (u != null) {
if (u.getPassword().equals(user.getPassword())) {
return 1;//登录成功
}
return 2;//密码错误
}
return 3;//用户名不存在
}
}
application.properties文件
spring.datasource.url=jdbc:mysql://localhost:3306/empdb?characterEncoding=utf8&serverTimezon=Asia"
spring.datasource.username=root
spring.datasource.password=123456
依赖
<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.2.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>