使用SSM框架实现登陆注册

君壹

3127人浏览 · 2024-04-03 21:40:07

君壹 · 2024-04-03 21:40:07 发布

一.项目简介

Gitee的网址是:https://gitee.com/qianhaian/pro_ssm.git

1.项目内容

（1）内容

实现注册和登录功能

后端主要是SSM框架（Spring SpringMVC MyBatis）的使用，后续建project，只需要粘贴配置文件略加改动即可使用

前端主要引入了layui 和JQuery 使用 HTML写页面

（2）版本

idea版本 IntelliJ IDEA 2023.3.4 (Ultimate Edition)

tomcat 版本 9.0.85

navicat 版本 16.0.1.1

（3）界面

2.项目结构

二、创建项目

1.创建数据库

数据库名称：test1 表名: tb_user2

/*
 Navicat Premium Data Transfer

 Source Server         : qha
 Source Server Type    : MySQL
 Source Server Version : 50521
 Source Host           : localhost:3306
 Source Schema         : test1

 Target Server Type    : MySQL
 Target Server Version : 50521
 File Encoding         : 65001

 Date: 03/04/2024 20:21:44
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for tb_user2
-- ----------------------------
DROP TABLE IF EXISTS `tb_user2`;
CREATE TABLE `tb_user2`  (
  `username` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `password` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`username`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Records of tb_user2
-- ----------------------------
INSERT INTO `tb_user2` VALUES ('202205A424', '12345');

SET FOREIGN_KEY_CHECKS = 1;

2.创建maven的web project

3.在pom.xml文件中导入依赖


<!-- webmvc依赖以及关联其他spring核心依赖 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.1.6.RELEASE</version>
    </dependency>
    <!-- aspectj -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>5.1.6.RELEASE</version>
    </dependency>

    <!-- spring支持Dao -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.1.6.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.13.1</version>
      <scope>test</scope>
    </dependency>
    <!-- mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.7</version>
    </dependency>
    <!-- 数据库驱动 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>
    <!-- 日志 -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.17</version>
    </dependency>
    <!-- 分页插件 -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.3.0</version>
    </dependency>
    <!-- 数据源 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.2.8</version>
    </dependency>
    <!-- spring整合mybatis专业包 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!-- Servlet -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
    </dependency>
    <!-- json转换-Jackson -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.8</version>
    </dependency>

    <!-- 文件上传1 -->
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <!-- 文件上传2 -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.3</version>
      <!-- 排除,防止依赖冲突 -->
      <exclusions>
        <exclusion>
          <groupId>javax.servlet</groupId>
          <artifactId>servlet-api</artifactId>
        </exclusion>
      </exclusions>
    </dependency>

（1）注意：

如果tomcat的版本是10.0及以上要将上面的Servlet依赖换成下面的依赖，不然运行会报错

<dependency>
    <groupId>jakarta.servlet</groupId>
    <artifactId>jakarta.servlet-api</artifactId>
    <version>5.0.0</version>
</dependency>
 
<dependency>
    <groupId>jakarta.servlet.jsp</groupId>
    <artifactId>jakarta.servlet.jsp-api</artifactId>
    <version>3.0.0</version>
</dependency>

（2）pom.xml额外配置

可以添加在</dependencies>标签下面

 <build>
    <!--IDEA的maven项目中，默认源代码(java)目录下的xml等资源文件并不会在编译的时候一块打包进classes文件夹，而是直接舍弃掉。
        方法1：将xml或properties等配置文件放到resource下，并修改获取配置文件的代码，比如注册mapper.xml的位置等；
        方法2：在maven中添加过滤：将java下的xml过滤-->
    <resources>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>*.xml</include><!-- 默认（新添加自定义则失效） -->
          <include>**/*.xml</include><!-- 新添加 */代表1级目录 **/代表多级目录 -->
        </includes>
        <filtering>true</filtering>
      </resource>
    </resources>
  </build>

4.根据下图补全项目结构

资源文件，以后可以复用

5.资源文件

(1)applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       https://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/aop
       http://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!-- 开始扫描注解-->
    <!-- 为了防止重复扫描,applicationContext,扫描全部注解,除了Controller注解 -->
    <context:component-scan base-package="sch.qha">
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

<!--   1 加载properties配置文件-->
    <context:property-placeholder location="classpath:db.properties"/>

<!--   2 创建数据源-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <property name="initialSize" value="${jdbc.initialSize}"/>
    </bean>

<!--    3 创建SqlSessionFactory-->
    <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <!-- 这些配置,如果再mybatis-config.xml中写过,这里就不要写 -->
        <property name="typeAliasesPackage" value="sch.qha.model"/>

        <property name="plugins">
            <set>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
                        </props>
                    </property>
                </bean>
            </set>
        </property>

        <!-- 这些配置,也可以通过mybatis-config.xml-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>



    <!-- 4 扫描mapper,使mapper加入spring容器 -->
    <!-- mapper加入容器后,Service中就可以注入使用mapper -->
    <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 此处是上面工厂的id -->
        <property name="sqlSessionFactoryBeanName" value="sessionFactory"/>

        <!-- 扫描Mapper,产生代理对象,加入spring容器 -->
        <property name="basePackage" value="sch.qha.mapper"/>
    </bean>

    <!-- 5 事务管理器(相当于是切面)-->
    <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 需要注入数据源 -->
        <property name="dataSource" ref="dataSource"/>
    </bean>


    <!-- 6 开启事务注解 -->
    <tx:annotation-driven transaction-manager="txManager"/>

</beans>

(2)db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/test1?useSSL=false
jdbc.username=root
jdbc.password=root
jdbc.initialSize=5
jdbc.maxActive=20
jdbc.minIdle=3
jdbc.maxWait=0
jdbc.timeBetweenEvictionRunsMillis=0
jdbc.minEvictableIdleTimeMillis=0

(3)log4j.properties

# ERROR\u662F\u7EA7\u522B
# \u7EA7\u522B\u4ECE\u4F4E\u5230\u9AD8: debug,info,warn,error (\u65E5\u5FD7\u4FE1\u606F\u4ECE\u8BE6\u7EC6\u5230\u7B80\u5355)
# stdout: standard output\u7684\u7F29\u5199,\u6807\u51C6\u8F93\u51FA,\u5176\u5B9E\u5C31\u662F\u8F93\u51FA\u5230\u63A7\u5236\u53F0
log4j.rootLogger=error

# \u56E0\u4E3A\u6574\u4E2Amybatis\u65E5\u5FD7\u592A\u591A,\u53EF\u4EE5\u6307\u5B9A\u53EA\u8F93\u51FA\u81EA\u5DF1\u9879\u76EE\u4E2D\u6307\u5B9A\u4F4D\u7F6E\u7684\u65E5\u5FD7
log4j.logger.sch.qha.mapper=debug,stdout


# \u4E0A\u9762\u7684stdout,\u662F\u8DDF\u6B64\u5904\u7684stdout\u4E00\u6837
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

(4)mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

    <!-- 交给spring配置的,这里可以删除 -->

    <settings>
        <!-- 设置使用log4j日志 -->
        <setting name="logImpl" value="LOG4J"/>
        <!-- 开启下划线转驼峰 -->
        <!-- 把数据库create_time,变成createTime列 -->
        <setting name="mapUnderscoreToCamelCase" value="true"/>
        
        <!-- 开启缓存(默认就是true) -->
        <setting name="cacheEnabled" value="true"/>
    </settings>

</configuration>

(5)sprimgmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       https://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 扫描注解 -->
    <!-- 为了重复扫描注解,规定springmvc只扫描Controller注解,其他一概不管 -->
    <context:component-scan base-package="sch.qha" use-default-filters="false">
        <!-- 包含 -->
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!-- mvc注解驱动 -->
    <mvc:annotation-driven/>

    <!--    &lt;!&ndash;  静态资源映射    这样就不用加.do了-->
    <!--          mapping="访问路径"-->
    <!--          location="本地资源位置"&ndash;&gt;-->
    <!--    <mvc:resources mapping="/**" location="/"/>-->


    <!--   配置拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/index.html"/>
            <mvc:exclude-mapping path="/user/login.do"/>
            <mvc:exclude-mapping path="/view/register.html"/>
            <mvc:exclude-mapping path="/user/register.do"/>
            <bean class="sch.qha.interceptor.MyInterceptor"/>

        </mvc:interceptor>
    </mvc:interceptors>


    
    <!-- 视图解析 -->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/view/"/>
        <property name="suffix" value=".html"/>
    </bean>

    <!-- 文件上传解析器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="104857600"/>
    </bean>
</beans>

（6）WEB-INF下的web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

  <!-- 定义监听器 -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!-- 监听到服务器启动,就会加载配置文件 -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>


  <!-- 前端控制器 -->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springmvc.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>

  <!-- 编码格式拦截器 -->
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

</web-app>

（7）注意：

包的名称要根据自己建的项目结构进行更改

db.properties文件中要根据自己建立数据库的用户名和密码进行更改

springmvc.xml里面要根据自己建立的文件更改路径

6.后端java代码

(1)controller包下的UserController.java

package sch.qha.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
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.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import sch.qha.model.User;
import sch.qha.service.UserService;
import sch.qha.util.ResultData;

import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.HashMap;

/**
 * @Author QHA
 * @Date 2024/3/31 16:26
 * @Description:
 */
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping ("/login")
    public ResultData login(User user, HttpServletRequest request) throws IOException {
        ResultData resultData = userService.findUser(user);

        if (resultData.getCode()==0) {
            request.getSession().setAttribute("user", user);
        }
        return resultData;
    }
    @RequestMapping("/register")
    public ResultData register(User user,HttpServletRequest request){
        System.out.println("user = " + user);
        int i= userService.addUser(user);
        ResultData resultData=new ResultData();
        if (i>0){
            return resultData.ok();
        }
        else {
            return resultData.fail();
        }
    }

}

(2)interceptor包下的MyInterceptor.java

package sch.qha.interceptor;

import com.sun.net.httpserver.Filter;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import sch.qha.model.User;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @Author QHA
 * @Date 2024/3/29 9:29
 * @Description:    拦截器
 */

public class MyInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 假设登录状态保存在 session 中，示例代码如下
        User user = (User) request.getSession().getAttribute("user");
        if (user != null) {
            // 用户已登录，放行请求
            return true;
        } else {
            // 用户未登录，重定向到登录页面
            response.sendRedirect("/index.html");
            return false;
        }
    }
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}

(3)mapper包下的UserMapper.interface（接口）

package sch.qha.mapper;

import sch.qha.model.User;

/**
 * @Author QHA
 * @Date 2024/3/31 16:38
 * @Description:
 */
public interface UserMapper {
    User findUser(User user);

    int addUser(User user);
}

（4）mapper包下的UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="sch.qha.mapper.UserMapper">


    <select id="findUser" resultType="User">
        select
            *
        from
            tb_user2
        where
            username=#{username} and password=#{password}
    </select>
    <insert id="addUser" >
        INSERT INTO tb_user2 (username, password) VALUES (#{username}, #{password})
    </insert>
</mapper>

(5)model包下的User.java

package sch.qha.model;

import java.util.HashMap;

/**
 * @Author QHA
 * @Date 2024/3/31 16:32
 * @Description:    用户类
 */
public class User {
    private String username;
    private String password;



    private HashMap<User,User> userMap;
    public User() {

    }
    public User(String username, String password, HashMap<User, User> userMap) {
        this.username = username;
        this.password = password;
        this.userMap = userMap;
    }



    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;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }


    public HashMap<User, User> getUserMap() {
        return userMap;
    }
    public void setUserMap(HashMap<User, User> userMap) {
        this.userMap = userMap;
    }
}

(6)service包下的UserService.interface

package sch.qha.service;

import sch.qha.model.User;
import sch.qha.util.ResultData;

/**
 * @Author QHA
 * @Date 2024/3/31 16:27
 * @Description:
 */
public interface UserService {
    ResultData findUser(User user);
    int addUser(User user);
}

(7)service.impl包下的UserServiceImpl.java

package sch.qha.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import sch.qha.mapper.UserMapper;
import sch.qha.model.User;
import sch.qha.service.UserService;
import sch.qha.util.ResultData;

/**
 * @Author QHA
 * @Date 2024/3/31 16:28
 * @Description:
 */
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Override
    public ResultData findUser(User user) {
        User user1= userMapper.findUser(user);
        if (user1!=null){
            return ResultData.ok(user1);
        }else {
            return ResultData.fail();
        }
    }

    @Override
    public int addUser(User user) {
        int i=userMapper.addUser(user);
        return i;
    }
}

(8)util包下的ResultData.java

package sch.qha.util;

/**
 * @Author QHA
 * @Date 2024/3/27 14:48
 * @Description:
 */
public class ResultData {
    private int code; // 0是成功,其他都是不成功
    private String msg;
    private long count;
    private Object data;

    public ResultData() {
    }

    public static ResultData ok() {
        ResultData resultData = new ResultData( );
        resultData.setCode(0);
        resultData.setMsg("成功");
        return resultData;
    }

    public static ResultData ok(Object data) {
        ResultData resultData = new ResultData( );
        resultData.setCode(0);
        resultData.setMsg("成功");
        resultData.setData(data);

        return resultData;
    }

    @Override
    public String toString() {
        return "ResultData{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", count=" + count +
                ", data=" + data +
                '}';
    }

    public static ResultData ok(Object data, long count) {
        ResultData resultData = new ResultData( );
        resultData.setCode(0);
        resultData.setMsg("成功");
        resultData.setData(data);
        resultData.setCount(count);
        return resultData;
    }

    public static ResultData fail() {
        ResultData resultData = new ResultData( );
        resultData.setCode(-1);
        resultData.setMsg("失败");
        return resultData;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public long getCount() {
        return count;
    }

    public void setCount(long count) {
        this.count = count;
    }

    public Object getData() {
        return data;
    }

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

7.前端代码

（1）注意要将资源文件下载

并新建文件夹 js,将JQuery.js文件复制粘贴

并将下载解压后的 Layui文件夹复制到webapp下

(2) webapp下的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
    .demo-login-container{width: 320px; margin: 21px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form" >
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>
        <div class="layui-form-item demo-login-other">
            <a href="./view/register.html">注册帐号</a>
        </div>
    </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="./layui/layui.js"></script>
<script src="./js/jquery-2.1.0.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        // 监听表单提交事件
        form.on('submit(demo-login)', function(data){


            // 获取表单数据
            var field = data.field;

            // 发起登录请求
            $.ajax({
                url: "/user/login.do",
                type:"post",
                data: field,
                success: function (ret) {
                    if (ret.code == 0) {
                        // 登录成功，显示弹框
                        layer.alert('登录成功！', function(){
                            // 关闭弹窗
                            layer.closeAll();
                            window.location.href = "/view/homepage.html"; // 跳转到首页
                        });
                    } else {
                        // 登录失败，显示错误信息
                        layer.alert('登录失败：' +
                            '用户名或者密码错误！' );
                    }
                },
                error:function (){
                    layer.alert("服务器繁忙！");
                }
            });
            return false; // 阻止默认 form 提交
        });
        // 渲染表单
        form.render();
    });

</script>
</body>
</html>

(3)view下的register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link href="../layui/css/layui.css"  rel="stylesheet">
</head>
<body>
<div class="layui-container" >
    <div class="layui-row">
        <div class="layui-col-md-offset-3 layui-col-md-6">
            <div class="content">
                <form class="layui-form" action="/user/register.do" method="post">
                    <input type="text" name="username" lay-verify="required|username" placeholder="用户名" class="layui-input">
                    <hr>
                    <input type="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
                    <hr>
                    <button class="layui-btn" lay-submit lay-filter="demo-register" >注册</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-2.1.0.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        // 自定义验证规则
        form.verify({
            // 验证用户名，且为必填项
            username: function(value, elem){
                if (/(^_)|(__)|(_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线';
                }
            },
            // 验证密码，且为必填项
            password: function(value, elem) {
                if (!/^[\S]{6,16}$/.test(value)) {
                    return '密码必须为 6 到 16 位的非空字符';
                }
            }
        });
        // 提交事件
        form.on('submit(demo-register)', function(data){
            var field = data.field; // 获取表单字段值
            // 阻止表单的默认提交行为
            event.preventDefault();
            // 此处可执行 Ajax 等操作
            $.ajax({
                url:"/user/register.do",
                type:"post",
                data:field,
                success:function (ret){
                    if (ret.code == 0) {
                        // 登录成功，显示弹框
                        layer.alert('注册成功！', function(){
                            // 关闭弹窗
                            layer.closeAll();
                            window.location.href = "/index.html";
                        });
                    } else {
                        // 登录失败，显示错误信息
                        layer.alert('注册失败：' );
                    }
                },
                error:function (){
                    layer.alert("服务器繁忙！");
                }
            })
            return true; // 阻止默认 form 跳转
        });
        // 渲染表单
        form.render();
    })
</script>

</body>
</html>

(4)view下的homepage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>首页</title>
</head>
<body>
    <h1>欢迎来到首页</h1>
</body>
</html>

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

出海企业如何依托拓氪科技AIGEO布局AI采购流量入口？

cover

AIGC课程为什么从99元到数万元都有：先把“买工具”与“买结果”分开

cover

2026年AI写作辅助平台推荐：9款实用AI工具终极合辑

所有评论(0)

查看更多评论

君壹

已为社区贡献1条内容