[大数据]用户注册【项目 商城】

1.项目分析

1. 项目功能：登录、注册、热销商品、用户管理（密码、个人信息、头像、收货地址）、购物车（展示、增加、删除）、订单模块。
2. 开发顺序：注册、登录、用户管理、购物车、商品、订单模块。
3. 某一个模块的开发：

• 持久层开发：依据前端页面的设计规划相关的SQL语句，以及进行配置
• 业务层开发：核心功能的控制、业务操作以及异常的处理
• 控制层开发：接受请求、处理响应
• 前端开发：JS、Query、AJAX这些技术来连接后台

2.项目开发环境

1. jdk：1.8版本及以上
2. maven：配置到idea，3.6.1版本+
3. 数据库：MariaDB 、Mysql，5.1+
4. 开发的平台：IDEA

3.搭建项目

1. 项目名称：store，表示商场
2. 结构：com.cy.store

java web
mybatis
mysql driver

对应init project

3. 资源文件：resources文件夹下（static、templates）
4. 单元测试：test.com.cy.store
5. 在properties文件中配置数据库连接

spring.datasource.url = jdbc:mysql://localhost:3306/stores?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
spring.datasource.username = root
spring.datasource.password = root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
server.port=8080

6. 创建一个store数据库

create database store

7. 测试连接

• 启动SpringBoot主类，是否有对应的Spring图形输出
• 在单元测试类中测试数据库的连接是否可以正常的加载

8. 访问项目的静态资源是否可以正常的加载。所有的静态资源复制static下
   注意：idea对应JS代码的兼容性较差，编写了js代码但是有时候不能正常去加载。
   1. idea缓存清除
   2. clear-install
   3. rebuild重新构建
   4. 重启idea和操作系统

对应测试数据库
对应static

init

访问静态资源

对应sql

用户注册

1 创建数据表

1.选中数据库

use store

2.创建t_user表:

CREATE TABLE `t_user`  (
    uid INT AUTO_INCREMENT COMMENT '用户id',
	username VARCHAR(20) NOT NULL UNIQUE  COMMENT '用户名',
	password CHAR(32) NOT NULL COMMENT'密码',
	salt CHAR(36) COMMENT'盐值',
	phone VARCHAR(20)COMMENT'电话号码',
	email VARCHAR(30)COMMENT '电子邮箱',
    gender INT COMMENT  '性别:0-女，1-男',
    avatar VARCHAR(50) COMMENT'头像',
	is_delete INT COMMENT'是否删除:0-未删除，1-已删除',
	created_user VARCHAR(20)  COMMENT'日志-创建人',
    modified_user VARCHAR(20) COMMENT'日志-最后修改执行人',
	created_time DATETIME COMMENT'日志-创建时间',
	modified_time DATETIME COMMENT'日志-最后修改时间',
    PRIMARY KEY (uid)

)ENGINE=INNODB DEFAULT CHARSET=utf8;

对应t_user.sql

2.创建用户实体类

1.通过表的结构提取出表的公共字段，放在一个实体类的基类中，起名BaseEntity基类中。

package com.cy.store.entity;

import jdk.nashorn.internal.objects.annotations.Constructor;
import lombok.*;
import org.springframework.context.annotation.Configuration;

import java.io.Serializable;
import java.util.Date;

/**
 * 作为实体类的基类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
@ToString

public class BaseEntity implements Serializable {
    private String createdUser;        //created_user VARCHAR(20)  COMMENT'日志-创建人',
    private String modifiedUser;         //modified_user VARCHAR(20) COMMENT'日志-最后修改执行人',
    private Date createdTime ;       //created_time DATETIME COMMENT'日志-创建时间',
    private Date modifiedTime ;        //modified_time DATETIME COMMENT'日志-最后修改时间',


}

Lombok使用详解

对应 基类

2.创建用户的实体类。需要继承BaseEntity基类

package com.cy.store.entity;

import lombok.*;

import java.io.Serializable;

/**
 * 用户的实体类 StringBoot约定大于配置
 */
@Data
@NoArgsConstructor
@AllArgsConstructor

public class User extends BaseEntity implements Serializable {
    private Integer uid;              //    uid INT AUTO_INCREMENT COMMENT '用户id',
    private String username;          //    username VARCHAR(20) NOT NULL UNIQUE  COMMENT '用户名',
    private String password;          //    password CHAR(32) NOT NULL COMMENT'密码',
    private String salt;              //    salt CHAR(36) COMMENT'盐值',
    private String phone;             //    phone VARCHAR(20)COMMENT'电话号码',
    private String email;             //    email VARCHAR(30)COMMENT '电子邮箱',
    private Integer gender;           //    gender INT COMMENT  '性别:0-女，1-男',
    private String avatar;            //    avatar VARCHAR(50) COMMENT'头像',
    private Integer isDelete;         //    is_delete INT COMMENT'是否删除:0-未删除，1-已删除',

}

对应User

3.用户注册-持久层

通过mybatis来操作数据库。在做mybatis开发的流程

3.1规划SQL语句

1.用户的注册功能，相当于做数据的插入操作。

insert into t_user(username,password)values(值列表)

2.在用户的注册时首先去查询当前的用户名是否存在，如果存在则不能进行注册。相当于是一条查询语句。

select * from t_user where username=?

3.2创建接口与抽象方法

1.定义Mapper接口。在项目的目录结构下首先创建一个mapper文件夹，在这个包下在根据不同的功能模块来创建mapper接口。创建一个UserMapper的接口。要在接口中定义这两个sql语句抽象方法。

package com.cy.store.mapper;

import com.cy.store.entity.User;


/**
 * 用户模块的持久层接口
 */
//@Mapper
public interface UserMapper {
    /**
     * 插入用户的数据
     * @param user 用户的数据
     * @return 受影响的行数（增、删、改，都有受影响的行数作为返回值，可以根据返回值来判断是否执行）
     */
    Integer insert(User user);

    /**
     * 根据用户名来查询用户的数据
     * @param username 用户名
     * @return 如果找到对应的用户则返回用户的数据，否则返回null值
     */
    User findByUsername(String username);
}

2.在启动类配置mapper接口文件的位置

//MapperScan注解指定当前项目中的Mapper接口的路径的位置
@MapperScan("com.cy.store.mapper")

3.3编写映射

1.定义xml映射文件，与对应的接口进行关联。所有的映射文件需要放置在resources目录下，在这个目录下创建一个mapper文件夹，然后在这个文件夹下存放mapper映射文件。

2.创建接口的映射文件，遵循和接口名称保持一致即可。创建一个UserMapper.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">
<!--namespace属性：用于指定当前的映射文件和哪个接口进行映射，需要指定接口的文件路径，需要标注包的完整路径接口-->
<mapper namespace="com.cy.store.mapper.UserMapper">
  
</mapper>

3.配置接口中的方法对应上SQL语句。需要借助标签来完成。insert\update\delete\select,对应sql语句的增删改查操作。

   <!--自定义映射规则：  resultMap标签来完成自定义映射规则  -->
    <!--
        id属性：标签给这个映射负责分配一个唯一的id值，对应的就是resultMap="id属性"
        type属性：取值是一个类，表示数据库中的查询结果与java中的哪一个实体类进行结果集的映射    
    -->
    <resultMap id="UserEntityMap" type="com.cy.store.entity.User">
        <!--  将表的字段和类的属性不一致的字段进行匹配指定，名称一致可以省略不写      -->
        <!--
            配合完成名称不一致的映射
              column 属性：表中的字段名称
              property 属性：类中的属性名称  
        -->
        <!--  在定义映射规则时，注解不可以省略的  -->
        <id column="uid" property="uid"/>
        <result column="is_delete" property="isDelete"/>
        <result column="created_user" property="createdUser"/>
        <result column="created_time" property="createdTime"/>
        <result column="modified_user" property="modifiedUser"/>
        <result column="modified_time" property="modifiedTime"/>
    </resultMap>

    <!-- id属性：表示映射的接口中方法的名称，直接在标签的内容中编写SQL -->
    <!--
            useGeneratedKeys属性：表示开启某个字段的值递增（主键设置为递增）
            keyProperty属性：表示将表中的哪个字段作为主键进行递增
    -->
    <insert id="insert" useGeneratedKeys="true" keyProperty="uid">
        INSERT INTO
            t_user (username, password, salt, phone, email, gender, avatar, is_delete, created_user, created_time, modified_user, modified_time)
        VALUES
        (#{username}, #{password}, #{salt}, #{phone}, #{email}, #{gender}, #{avatar}, #{isDelete}, #{createdUser}, #{createdTime}, #{modifiedUser}, #{modifiedTime})
    </insert>

    <!--select语句在执行的时候，查询的结构是一个对象，多个对象    -->
    <!--
        resultType:表示查询的结构集类型，只需要指定对应类的类型，并且包含完整接口：resultType="com.cy.store.entity.User"
        resultMap: 标签当表的字段和类的属性字段名称不一致时，来自定义查询结果集的映射规则
    -->
    <select id="findByUsername" resultMap="UserEntityMap">
        SELECT * FROM t_user WHERE username = #{username}
    </select>

对应UserMapper

3.将mapper文件的位置注册到properties对应的配置文件中。

mybatis.mapper-locations=classpath:mapper/*.xml

3.单元测试：每一个独立的层编写完毕后需要编写单元测试方法，来测试当前的功能。在test包结构下创建一个mapper包，在这个包下在创建对持久层的测试。

package com.cy.store.mapper;

import com.cy.store.entity.User;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

//@SpringBootTest：表示标注当前的类是测试类，不会随同项目一块打包
@SpringBootTest
//@RunWith：表示启动这个单元测试类（单元测试类是不能够运行的），需要传递一个参数，必须是SpringRunner的实例类型
//@RunWith(SpringRunner.class)
public class UserMapperTests {

    //idea有检测的功能，接口是不能直接创建Bean的（动态代理技术来解决），
    //File | Settings | Editor | Inspections
    //Spring | Spring Core | Code | Autowiring for bean class
    //error-->warning
    @Autowired
    private UserMapper userMapper;

    /**
     * 单元测试方法，就可以单独独立运行，不用启动整个项目，可以做单元测试，提升了代码的测试效率
     * 1.必须被Test注解所修饰
     * 2.返回值类型必须是void
     * 3.方法的参数列表不指定任何类型
     * 4.方法的访问修饰符必须是public
     */
    @Test
    public void insert(){
        User user=new User();
        user.setUsername("tim");
        user.setPassword("123");
        Integer row = userMapper.insert(user);
        System.out.println(row);
    }

    @Test
    public void findByUsername(){
        User user = userMapper.findByUsername("tim");
        System.out.println(user);
    }
}

UsermapperTest

修改权限

//File | Settings | Editor | Inspections
//Spring | Spring Core | Code | Autowiring for bean class
//error–>warning

前

后

测试

4.用户注册业务层

4.1 规划异常

1.RuntimeException异常，作为这异常的子类，然后再去定义具体的异常类型来继承这个异常业务层异常的基类，ServiceException异常。这个异常继承RuntimeException 异常。异常机制的建立。

service|ex|ServiceException

package com.cy.store.service.ex;

/**
 * 业务层异常的基类
 * throws new ServiceException("业务层产生未知的异常")
 */
public class ServiceException extends RuntimeException{
    //Ctrl+O
    public ServiceException() {
        super();
    }

    public ServiceException(String message) {
        super(message);
    }

    public ServiceException(String message, Throwable cause) {
        super(message, cause);
    }

    public ServiceException(Throwable cause) {
        super(cause);
    }

    protected ServiceException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
        super(message, cause, enableSuppression, writableStackTrace);
    }
}

ServiceException

 根据业务层不同的功能来详细定义具体的异常的类型，统一的去继承ServiceException异常类。

2.用户在进行注册时可能会产生用户名被占用的错误，抛出一个异常：UsernameDuplicatedException异常。

package com.cy.store.service.ex;

public class UsernameDuplicatedException extends ServiceException{
    //alt + insert -- override methods .. 


    public UsernameDuplicatedException() {
        super();
    }

    public UsernameDuplicatedException(String message) {
        super(message);
    }

    public UsernameDuplicatedException(String message, Throwable cause) {
        super(message, cause);
    }

    public UsernameDuplicatedException(Throwable cause) {
        super(cause);
    }

    protected UsernameDuplicatedException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
        super(message, cause, enableSuppression, writableStackTrace);
    }
}

UsernameDuplicatedException

3.正在执行数据插入操作的时候，服务器、数据库宕机。处于正在插入的过程中所产生的异常：InsertException异常

package com.cy.store.service.ex;

/**
 * 数据在插入过程中所产生的异常
 */
public class InsertException extends ServiceException{
    public InsertException() {
        super();
    }

    public InsertException(String message) {
        super(message);
    }

    public InsertException(String message, Throwable cause) {
        super(message, cause);
    }

    public InsertException(Throwable cause) {
        super(cause);
    }

    protected InsertException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
        super(message, cause, enableSuppression, writableStackTrace);
    }
}

InsertException

4.2 设计接口抽象与方法

在service包下创建一个IUserService接口。

package com.cy.store.service;

import com.cy.store.entity.User;

/**
 * 用户模块业务接口
 */
public interface IUserService {
    /**
     * 用户注册方法
     * @param user 用户的数据对象
     */
    void reg(User user);
}

2.创建一个实现类UserServiceImpl类，需要实现这个接口，并且实现抽象的方法。
实现抽象方法：UserServiceImpl，进行获取用户名，查询，创建，异常处理，数据加密，抛出异常

package com.cy.store.service.impl;

import com.cy.store.entity.User;
import com.cy.store.mapper.UserMapper;
import com.cy.store.service.IUserService;
import com.cy.store.service.ex.InsertException;
import com.cy.store.service.ex.UsernameDuplicatedException;
import org.springframework.beans.factory.annotation.Autowired;

import javax.xml.crypto.Data;
import java.util.Date;

/**
 * 用户模块业务层的实现接口
 */
public class UserServiceImpl implements IUserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public void reg(User user) {
        //通过user参数来获取传递过来的username
        String username = user.getUsername();
        //调用findByUsername(username)判断用户是否被注册过
        User result = userMapper.findByUsername(username);
        //判断结果集是否不为null，则抛出用户名被占用的异常
        if(result!=null){
            //抛出异常
            throw new UsernameDuplicatedException("用户名被占用");
        }

        //补全数据：is_delete=0
        user.setIsDelete(0);
        //补全数据：4个日志字段信息
        user.setCreatedUser(username);
        user.setModifiedUser(username);
        Date date=new Date();
        user.setCreatedTime(date);
        user.setModifiedTime(date);

        //执行注册业务功能的实现(rows==1)
        Integer rows = userMapper.insert(user);
        if (rows!=1){
            throw new InsertException("在用户注册过程中产生未知的异常");
        }

    }
}

UserService

3.在单元测试包下创建一个UserServiceTests类，在这个类中添加单元测试的功能。

UserServiceTests

测试

加密

package com.cy.store.service.impl;

import com.cy.store.entity.User;
import com.cy.store.mapper.UserMapper;
import com.cy.store.service.IUserService;
import com.cy.store.service.ex.InsertException;
import com.cy.store.service.ex.UsernameDuplicatedException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.DigestUtils;

import javax.xml.crypto.Data;
import java.nio.charset.StandardCharsets;
import java.util.Date;
import java.util.Locale;
import java.util.UUID;

/**
 * 用户模块业务层的实现接口
 */
@Service//@Service注解：将当前类的对象交给Spring来管理，自动创建对象以及对象的维护
public class UserServiceImpl implements IUserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public void reg(User user) {
        //通过user参数来获取传递过来的username
        String username = user.getUsername();
        //调用findByUsername(username)判断用户是否被注册过
        User result = userMapper.findByUsername(username);
        //判断结果集是否不为null，则抛出用户名被占用的异常
        if(result!=null){
            //抛出异常
            throw new UsernameDuplicatedException("用户名被占用");
        }

        //密码加密处理的实现：md5算法的形式：
        //（串 + password + 串） ---- md5算法进行加密，连续加载三次
        //盐值 + password + 盐值 ----盐值是一个随机的字符串
        String oldPassword = user.getPassword();
        //获取盐值（随机生成一个盐值）
        String salt = UUID.randomUUID().toString().toUpperCase();
        //补全数据：盐值的记录
        user.setSalt(salt);
        //将密码和盐值作为一个整体进行加密处理
        String md5Password = getMd5Password(oldPassword, salt);
        //将加密之后的密码重新补全设置到user对象中
        user.setPassword(md5Password);

        //补全数据：is_delete=0
        user.setIsDelete(0);
        //补全数据：4个日志字段信息
        user.setCreatedUser(username);
        user.setModifiedUser(username);
        Date date=new Date();
        user.setCreatedTime(date);
        user.setModifiedTime(date);

        //执行注册业务功能的实现(rows==1)
        Integer rows = userMapper.insert(user);
        if (rows!=1){
            throw new InsertException("在用户注册过程中产生未知的异常");
        }

    }
    /**
     *  定义一个md5算法加密处理
     */
    private String getMd5Password(String password,String salt){
        //md5 加密算法方法的调用(进行三次加密)
        for(int i=0;i<3;i++){
             password= DigestUtils.md5DigestAsHex((salt + password + salt).getBytes()).toUpperCase();
        }

        //返回加密之后的密码
        return password;
    }
}

UserServiceImpl --加密

测试

5.注册-控制器

5.1 创建响应

状态码、状态描述信息、数据。这部分功能封装一个类中，将这个类作为方法返回值，返回给前端浏览器。
util|JsonResult

package com.cy.store.util;

import java.io.Serializable;

/**
 * Json格式的数据进行响应
 */
public class JsonResult<E> implements Serializable {
    /** 状态码*/
    private Integer state;
    /** 描述信息*/
    private String message;
    /** 数据*/
    private E data;

    public JsonResult() {
    }
    public JsonResult(Integer state) {
        super();
        this.state = state;
    }
    public JsonResult(Throwable e) {
        this.message = e.getMessage();
    }
    
    public JsonResult(Integer state, E data) {
        this.state = state;
        this.data = data;
    }

    public Integer getState() {
        return state;
    }

    public void setState(Integer state) {
        this.state = state;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public E getData() {
        return data;
    }

    public void setData(E data) {
        this.data = data;
    }
}

5.2 设计请求

依据当前的业务功能模块进行请求的设计。

请求路口：/user/reg
请求参数：User user
请求类型：PUSH
验证结果：JsonResult<Void>

5.3 处理请求

1.创建一个控制层对应的类UserController类。依赖于业务层的接口。

package com.cy.store.controller;

import com.cy.store.entity.User;
import com.cy.store.service.IUserService;
import com.cy.store.service.ex.InsertException;
import com.cy.store.service.ex.UsernameDuplicatedException;
import com.cy.store.util.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

//@Controller
@RestController //@Controller+@ResponseBody
@RequestMapping("users")
public class UserController {
    @Autowired
    private IUserService userService;
    
    @RequestMapping("reg")
//    @ResponseBody//表示此方法的响应结果以json格式进行数据的响应给到前端
    public JsonResult<Void> reg(User user){
        //创建响应结果对象
        JsonResult<Void> result=new JsonResult<>();
        try {
            userService.reg(user);
            result.setState(2000);
            result.setMessage("用户注册成功");
        } catch (UsernameDuplicatedException e) {
            result.setState(4000);
            result.setMessage("用户名被占用");
            e.printStackTrace();
        }catch (InsertException e) {
            result.setState(5000);
            result.setMessage("注册时产生未知的异常");
            e.printStackTrace();
        }
        return result;
        
    }
    
}

测试

http://localhost:8080/users/reg?username=Tom&password=123456

5.4 控制层优化设计

在控制层抽离一个父类，在这个父类中统一的取处理关于异常相关操作。编写BaseController。统一的处理异常。
**BaseController **

package com.cy.store.controller;

import com.cy.store.service.ex.InsertException;
import com.cy.store.service.ex.ServiceException;
import com.cy.store.service.ex.UsernameDuplicatedException;
import com.cy.store.util.JsonResult;
import org.springframework.web.bind.annotation.ExceptionHandler;

/**
 * 控制层类的基类
 */
public class BaseController {
    /**操作成功的状态码 */
    public static final int OK=200;

    //请求处理方法，这个方法的返回值就是需要传递给前端的数据
    //自动将异常对象传递给此方法的参数列表上
    //当前项目中产生的异常会被拦截到此方法中，这个方法此时充当的是请求处理方法，方法的返回值直接给前端
    @ExceptionHandler(ServiceException.class)//用于统一处理抛出的异常
    public JsonResult<Void> handleException(Throwable e){
        JsonResult<Void> result=new JsonResult<>(e);
        if (e instanceof UsernameDuplicatedException){
            result.setState(4000);
            result.setMessage("用户名已经被占用");
        }else if (e instanceof InsertException){
            result.setState(5000);
            result.setMessage("注册时产生未知的异常");
        }
        return result;

    }
}

**BaseController **

UserController

重新构建了reg()

package com.cy.store.controller;

import com.cy.store.entity.User;
import com.cy.store.service.IUserService;
import com.cy.store.service.ex.InsertException;
import com.cy.store.service.ex.UsernameDuplicatedException;
import com.cy.store.util.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

//@Controller
@RestController //@Controller+@ResponseBody
@RequestMapping("users")
public class UserController extends BaseController{
    @Autowired
    private IUserService userService;

    @RequestMapping("reg")
//    @ResponseBody//表示此方法的响应结果以json格式进行数据的响应给到前端
    public JsonResult<Void> reg(User user){
        userService.reg(user);
        return new JsonResult<Void>(OK);

    }

    /*
    @RequestMapping("reg")
//    @ResponseBody//表示此方法的响应结果以json格式进行数据的响应给到前端
    public JsonResult<Void> reg(User user){
        //创建响应结果对象
        JsonResult<Void> result=new JsonResult<>();
        try {
            userService.reg(user);
            result.setState(2000);
            result.setMessage("用户注册成功");
        } catch (UsernameDuplicatedException e) {
            result.setState(4000);
            result.setMessage("用户名被占用");
            e.printStackTrace();
        }catch (InsertException e) {
            result.setState(5000);
            result.setMessage("注册时产生未知的异常");
            e.printStackTrace();
        }
        return result;

    }
    */

}

UserController–优化

测试

http://localhost:8080/users/reg?username=Tom02&password=123456

6 注册-前端页面

1.在register页面中编写发送请求的方法，点击事件来完成。选中对应的按钮（$(“选择器”)），再去添加点击的事件， $.ajax()函数发送异步请求。
2.JQuery封装了一个函数，称之为 $.ajax()函数，可以异步加载相关的请求。依靠的是JavaScript提供的一个对象XHR（XmlHttpResponse），封装了这个对象。
3.ajax()使用方法。需要传递一个方法体作为方法的参数来使用。一对大括号称之为方法体。AJAX接受多个参数，参数与参数直接要求使用“,”分割，每一组参数直接使用“:”分割，参数的组成部分一个是参数的名称（不能随意的定义），是参数的值，要求使用字符串来标识。参数的声明顺序没有要求。语法结构：

$.ajax({
	url: "",
	type: "",
	data: "",
	dataType: ""
	success: function(){
	
	},
	error: function(){
	
	}
});

4.ajax()函数参数的含义

register.html

		<script type="text/javascript">
			//1.监听按钮是否被点击
			$("#btn-reg").click(function() {
				//动态获取表单中控制的数据
				//let username=$("#username").val();
				//let pwd=$("#password").val();
				//2.发送ajax()的异步请求来完成用户的注册功能
				console.log($("#form-reg").serialize());
				$.ajax({
					url: "/users/reg",
					type: "POST",
					// data: "username="+username+"&password="+pwd,
					//username=tom&password=123
					data: $("#form-reg").serialize(),
					dataType: "json",
					success: function(json) {
						if (json.state == 200) {
							alert("注册成功！");
							location.href = "login.html";
						} else {
							alert("注册失败！" + json.message);
						}
					},error:function (xhr){
						alert("注册时产生未知错误" + xhr.status)
					}
				});
			});
		</script>

6.js代码无法正常被服务器执行，体现在点击页面中的按钮没有任何的响应。解决方案：

• 在项目的maven下clear清理项目-install重新部署
• 在项目的file选项下-cash清理缓存
• 重新的构建项目：build选项下-rebuild选项
• 重启idea
• 重启电脑

regist.html

测试

README–用户注册