该注册页面用了thymeleaf的前端模板，前端样式使用了bootstrap，使用jquery添加属性
前端表单提交的部分没有用到thymeleaf，而是改用vue.js使用axios（ajax）向后端发起请求，后端接收数据验证（持久层使用mybatis处理数据库）并将结果返回前端，前端接收数据并给出提示重新渲染页面
vue验证：
1.用户输入用户名失去焦点（@blur）之后会验证该用户在后端是否存在，若存在，返回提示，加入disable属性使按钮失效
2.用户输入字符开始验证，每输入一个验证一次（@keyup），两个不同的密码会提示两次密码不同，按钮失效
3.若其中一个密码输入框为空，则不显示密码不同
4.以上全部正确，删除disable使按钮重现
以上输入框均使用v-model同步数据，监听事件行为，触发执行函数
注：
数据改变，页面不渲染可使用:key,监听对象原始的的key,key改变则重新渲染页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" th:href="@{/bootstrap-3.3.7/dist/css/bootstrap.css}">
<link rel="stylesheet" th:href="@{/css/bootstrapValidator.css}">
<style>
*{
margin: 0px;
padding: 0px;
}
.navbar{
margin-bottom: 0px;
}
#div_content{
background-image: url("/img/index.png");
background-size: 100% 650px;
width: 100%;
height: 580px;
}
#div_panel{
float: right;
margin-right: 80px;
margin-top: 150px;
}
#div_panel{
text-align: center;
padding: 0px;
}
.form_div{
margin-top: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" th:href="@{/index}">BB商城</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li><a th:href="@{/login}">登录</a></li>
<li class="active"><a th:href="@{/registered}">注册</a></li>
</ul>
</div>
</div>
</nav>
<div id="div_content">
<div id="div_panel" class="container form-horizontal col-lg-4 panel panel-default">
<div class="panel-heading">
<h3 class="container-fluid panel-title">注 册</h3>
</div>
<form role="form" class="form_div" method="post">
<div class="form-group">
<label for="user" class="col-lg-3 control-label">账号</label>
<div class="col-lg-8">
<input type="text" @blur="user_judge" @keyup="data_judge" class="form-control " name="user_name" id="user" v-model="user_name" placeholder="请输入账号">
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-3 control-label">密码</label>
<div class="col-lg-8">
<input type="text" @keyup="data_judge()" @blur="data_judge()" v-model="pwd1" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="password2" class="col-lg-3 control-label">重复密码</label>
<div class="col-lg-8">
<input type="text" @keyup="data_judge()" @blur="data_judge()" v-model="pwd2" class="form-control" id="password2" name="password2" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<button id="button_dis" type="button" class="btn btn-default" @click="login">注册</button>
<a type="button" class="btn btn-default" href="../static/login">登录</a>
</div>
<div id="alert_dan" v-if="mes!=null" :key="mes_key">
<div v-for="m in mes"><div v-if="m!=null">
<div v-if="m!=''" class="alert alert-danger alert-dismissible" style="width: 300px;height: 50px;margin-left: 70px;">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong >{{m}}</strong></div>
</div></div>
</div>
</form>
</div>
</div>
<script th:src="@{/js/jquery-3.5.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{https://cdn.staticfile.org/axios/0.18.0/axios.min.js}"></script>
<script>
var div_panel = new Vue({
el:"#div_panel",
data:{
mes_key:0, //数据改变更新该值重新渲染数据更新部分
user_live:false, //存放后端处理结果
user_name:"", //v-model同步更新，下同
pwd1:"",
pwd2:"",
mes:[]
},
methods:{
user_judge(){
than = this; //在成功的回调函数中无法使用this调用里面的值，故先将this赋值给than，供回调函数使用
axios.post("http://localhost:8080/user_judge?user_name="+this.user_name)
.then(function (response) {
if (response.data==true){
than.user_live = true;
than.mes[1] = "用户已存在";
}else {
than.user_live = false;
than.mes[1] = "";
}
than.mes_key++; //数据更新，重新渲染页面
}).catch(function (err) {
})
this.data_judge();
},
data_judge(){
if(this.pwd1==""||this.pwd2==""){
this.mes[0]="";
}else if(this.pwd1!=this.pwd2){
this.mes[0]="两次输入密码不一致";
}
else{
this.mes[0]="";
}
if (this.user_live){
this.mes[1] = "用户已存在";
} else {
this.mes[1] = "";
}
if (!this.user_live && this.pwd1==this.pwd2 ){
$("#button_dis").removeAttr('disabled'); //若后端数据库不存在注册的用户，则删除按钮失效的属性
this.mes = [];
}else {
$("#button_dis").attr('disabled','disabled');//若后端数据库存在注册的用户，则添加按钮失效的属性
}
this.mes_key++;
},
login:function () {
var than = this;
//使用ajax发送post请求给后端的controller处理，后端处理完返回结果给前端
axios.post("http://localhost:8080/toRegistered?user_name="+this.user_name+"&pwd1="+this.pwd1+"&pwd2="+this.pwd2)
.then(function (response) {
than.mes = response.data;
alert(than.mes);
if (than.mes=="注册成功请登陆")
window.location.replace("http://localhost:8080/login.html")
}).catch(function (err) {
than.mes = response.data
})
}
}
});
</script>
</body>
</html>
按注册按钮发送注册请求
后端部分：
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 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.4.0</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.shop</groupId>
<artifactId>shop</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>shop</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<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>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.34</version>
</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>
<!--Druid依赖 https://mvnrepository.com/artifact/com.alibaba/druid -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.21</version>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/log4j/log4j -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
<scope>true</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>
true
</fork>
</configuration>
</plugin>
</plugins>
</build>
</project>
用户类Account：
package com.shop.pojo;
public class Account {
private String user_name;
private String password;
@Override
public String toString() {
return "Account{" +
"user_name='" + user_name + '\'' +
", password='" + password + '\'' +
'}';
}
public Account() {
}
public Account(String user_name, String password) {
this.user_name = user_name;
this.password = password;
}
public Account(String user_name) {
this.user_name = user_name;
}
public String getUser_name() {
return user_name;
}
public void setUser_name(String user_name) {
this.user_name = user_name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
AccountMapper：
package com.shop.mapper;
import com.shop.pojo.Account;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface AccountMapper {
//获取所有用户
List<Account> getUserList();
//根据id寻找用户
Account getUser(String user_name);
//增加用户
int addUser(Account account);
//修改
int updata(Account account);
}
AccountMapper.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.shop.mapper.AccountMapper">
<select id="getUserList" resultType="Account">
select * from Account;
</select>
<select id="getUser" resultType="Account" parameterType="string">
select * from account where user_name = #{user_name};
</select>
<insert id="addUser" parameterType="account">
insert into shop.account(user_name, password) values(#{user_name},#{password});
</insert>
<update id="updata" parameterType="account">
update account set password=#{password} where user_name=#{user_name}
</update>
</mapper>
properties配置文件（配置数据库）：
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/shop
spring.datasource.username=root
spring.datasource.password=
注册跟验证数据的controller
package com.shop.controller;
import com.shop.mapper.AccountMapper;
import com.shop.pojo.Account;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpSession;
@RestController
public class OperateController {
@Autowired
AccountMapper accountMapper;
@RequestMapping("/toRegistered")
public String toRegistered(@RequestParam("user_name") String user_name,
@RequestParam("pwd1") String password,
@RequestParam("pwd2") String password2) {
try {
Account account = new Account(user_name, password);
if (accountMapper.addUser(account) > 0) {
return "注册成功请登陆";
} else {
return "注册失败";
}
}catch (Exception e){
return "注册失败，用户名已存在";
}
}
//验证该用户在数据库中是否存在，若存在返回true，不存在返回false
@PostMapping("/user_judge")
public Boolean user_judge(String user_name){
boolean result = false;
try {
Account account = new Account(user_name);
if ((accountMapper.getUser(user_name)) !=null) {
result = true;
}
}catch (Exception e){
result = false;
}
return result;
}
}
7643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
