• SSM整合01

    SSM01搭建SSM项目

    1.创建maven的web工程

    1.1pom.xml配置

    <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/maven-v4_0_0.xsd">
    <modelVersion>4.0.0modelVersion>
    <groupId>com.aaa.ssmgroupId>
    <artifactId>SSMDemo1artifactId>
    <packaging>warpackaging>
    <version>1.0-SNAPSHOTversion>
    <name>SSMDemo1 Maven Webappname>
    <url>http://maven.apache.orgurl>

    <properties>
        
        <spring.version>5.3.29spring.version>
    properties>
    <dependencies>
        
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-databindartifactId>
            <version>2.14.2version>
        dependency>
        
        
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-webmvcartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-webartifactId>
            <version>${spring.version}version>
        dependency>
        
        
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-aspectsartifactId>
            <version>${spring.version}version>
        dependency>
        
        
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-jdbcartifactId>
            <version>5.3.29version>
        dependency>
        
        
        <dependency>
            <groupId>org.mybatisgroupId>
            <artifactId>mybatisartifactId>
            <version>3.5.13version>
        dependency>
        
        <dependency>
            <groupId>org.mybatisgroupId>
            <artifactId>mybatis-springartifactId>
            <version>1.3.1version>
        dependency>
        
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>8.0.33version>
        dependency>
        
        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>druidartifactId>
            <version>1.2.4version>
        dependency>
        
        
        <dependency>
            <groupId>javax.servletgroupId>
            <artifactId>javax.servlet-apiartifactId>
            <version>3.1.0version>
            <scope>providedscope>
        dependency>
        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
            <version>1.18.16version>
        dependency>
        <dependency>
            <groupId>log4jgroupId>
            <artifactId>log4jartifactId>
            <version>1.2.12version>
        dependency>
        <dependency>
            <groupId>org.apache.httpcomponentsgroupId>
            <artifactId>httpclientartifactId>
            <version>4.5.14version>
        dependency>
        <dependency>
            <groupId>org.apache.httpcomponentsgroupId>
            <artifactId>httpcoreartifactId>
            <version>4.4.13version>
        dependency>
        <dependency>
            <groupId>commons-langgroupId>
            <artifactId>commons-langartifactId>
            <version>2.6version>
        dependency>
    dependencies>

project>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109

    1.2web.xml配置

    
<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_4_0.xsd"
         version="4.0">
    <display-name>Archetype Created Web Applicationdisplay-name>

    <servlet>
        <servlet-name>DispatcherServletservlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
        <init-param>
            <param-name>contextConfigLocationparam-name>
            <param-value>classpath:spring.xmlparam-value>
        init-param>
        <load-on-startup>1load-on-startup>
    servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServletservlet-name>
        <url-pattern>/url-pattern>
    servlet-mapping>

web-app>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    2.SSM配置文件

    创建resources文件夹

    2.1spring.xml

    
<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"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
http://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
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
    
    <context:annotation-config/>
    <context:component-scan base-package="com.aaa.ssm"/>
    
    <mvc:annotation-driven/>
    
    <mvc:default-servlet-handler/>
    
    <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
        <property name="location" value="classpath:druid.properties">property>
    bean>
    
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    bean>
    
    <bean id="sqlFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        
        <property name="dataSource" ref="dataSource"/>
        
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        
        <property name="mapperLocations" value="classpath:mapper/*Mapper.xml"/>

        
        <property name="typeAliasesPackage" value="com.aaa.ssm.pojo">property>
    bean>
    
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        
        <property name="basePackage" value="com.aaa.ssm.mapper"/>
        
        <property name="sqlSessionFactoryBeanName" value="sqlFactory"/>
    bean>
beans>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    2.2mybatis-config.xml

    
DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

configuration>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2.3log4j.properties

    log4j.rootLogger=ERROR, stdout

log4j.logger.com.aaa.ssm=TRACE

log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2.4druid.properties

    
jdbc.driverClassName=com.mysql.jdbc.Driver
#注意要操作的数据库名称      此处用的是 myproject
jdbc.url=jdbc:mysql://127.0.0.1:3306/myproject?characterEncoding=utf-8&useSSL=false
#数据库连接用户名
jdbc.username=root
#数据库密码
jdbc.password=123456

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    到这里前期的准备工作就完成了

    接下来创建一下项目的基本结构如图：
    在这里插入图片描述

    3.登录模块

    数据库

    登录模块中只需要用户的账号密码，这是我的一个数据库内容
    在这里插入图片描述

    流程分析

    登录的话，当我们配置好tomcat后，启动项目应该先进入一个默认的登录页面，然后在页面中输入账号密码后，后台访问数据库进行业务处理

    我们现在webapp文件夹下，创建一个默认页面

    index.html

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/vue.js">script>
    <script src="js/jquery.min.js">script>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js">script>

    <style>
        #app {
            width: 600px;
            margin: 150px auto;
            padding: 40px;
        }
    style>
head>
<body>
<div id="app">
    <h1>欢迎登录XXX管理系统h1>
    <el-form :model="loginInfo" :rules="rules" status-icon ref="loginInfo" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
            <el-input type="text" autocomplete="off" v-model="loginInfo.username">el-input>
        el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" autocomplete="off" v-model="loginInfo.password">el-input>
        el-form-item>
        <el-form-item>
            <el-button type="primary" @click="login()">登录el-button>
            <el-button @click="reset()">重置el-button>
        el-form-item>
    el-form>
div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            loginInfo: {},
            rules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                    {min: 2, max: 10, message: '请输入2到10个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 2, max: 10, message: '请输入2到10个字符', trigger: 'blur'}
                ]
            }
        },
        methods: {
            login() {
                this.$refs["loginInfo"].validate((valid) => {
                    if (valid) {
                        //发送ajax请求到后台
                        $.post("/ssm/emp/login",app.loginInfo,function (backData) {

                        })

                    }
                });
            },
            reset: function () {
                this.$refs["loginInfo"].resetFields();
            },
        }
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    3.1页面引入文件

    在这个页面中，用到了jquery和vue的文件，我是下载到本地了，如果需要可以直接去官网下载，或者直接使用官网提供的CDN如下：

    <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js">script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    我还使用了ElementUI，在引入时要放在vue的下边

    在登录中，我们需要输入账号密码。页面中有两个按钮，一个登录一个重置

    我们在这里主要写一下登录的业务流程

    当我们点击登录时我们会执行login函数，这里有一个对表单进行验证是ElementUI自带的

         login() {
                this.$refs["loginInfo"].validate((valid) => {
                    if (valid) {
                        //发送ajax请求到后台
                        $.post("/ssm/emp/login",app.loginInfo,function (backData) {
                        })
                    }
                });
            },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    3.2controller

    我们使用ajax对后台发送请求

    这时候我们会去controller层

    在controller文件夹下创建EmpController类，进行参数的接收。这里会根据路径不同自动的进行分发操作

    package com.aaa.ssm.controller;

import com.aaa.ssm.result.AjaxResult;
import com.aaa.ssm.service.EmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @Author Grg
 * @Date 2023/9/17 14:49
 * @PackageName:com.aaa.ssm.controller
 * @ClassName: EmpController
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
@RestController
@RequestMapping("emp")
public class EmpController {
    @Autowired
    private EmpService empService;
    
    @RequestMapping("login")
    public AjaxResult login(String username, String password) {
        return empService.login(username, password);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    3.3service

    登录时，我们发送的请求路径是"/ssm/emp/login"

    所以就会执行login方法

    在此之前，我们需要用EmpService接口并通过注解@Autowired进行自动注入

    我们去service文件夹下创建一个impl文件夹(存放的是Service的实现类)和一个EmpService接口

    3.3.1EmpService

    package com.aaa.ssm.service;
import com.aaa.ssm.result.AjaxResult;

/**
 * @Author Grg
 * @Date 2023/9/17 14:58
 * @PackageName:com.aaa.ssm.service
 * @ClassName: EmpService
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
public interface EmpService {
    AjaxResult login(String username, String password);
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    3.3.2EmpServiceImpl

    编写实现类EmpServiceImpl

    package com.aaa.ssm.service.impl;

import com.aaa.ssm.mapper.EmpMapper;
import com.aaa.ssm.pojo.dto.EmpDTO;
import com.aaa.ssm.pojo.dto.LoginDTO;
import com.aaa.ssm.result.AjaxResult;
import com.aaa.ssm.service.EmpService;
import com.aaa.ssm.sysconst.DeptState;
import com.aaa.ssm.sysconst.EmpState;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.servlet.http.HttpSession;

/**
 * @Author Grg
 * @Date 2023/9/17 15:00
 * @PackageName:com.aaa.ssm.service.impl
 * @ClassName: EmpServiceImpl
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
@Service
public class EmpServiceImpl implements EmpService {
    @Autowired
    private EmpMapper empMapper;
    @Autowired
    private HttpSession session;
    @Override
    public AjaxResult login(String username, String password) {
        //1.验证账号密码是否正确
        LoginDTO login = empMapper.login(username, password);
        //1.5账号的状态是什么 state 0在职  1冻结  2离职
        if (login == null) {
            return AjaxResult.error("账号或者密码错误");
        }
        if (login.getState() == EmpState.EMP_DONGJIE) {
            return AjaxResult.error("账号被冻结");
        }
        if (login.getState() == EmpState.EMP_LIZHI) {
            return AjaxResult.error("员工已经离职 联系管理员");
        }
        //2.如果正确 获取员工编号 查询员工信息
        Integer eid = login.getEid();
        EmpDTO empInfo = empMapper.getEmpInfoByEid(eid);
        if (empInfo.getDept().getState() == DeptState.DEPT_STATE_BILE) {
            return AjaxResult.error("部门已倒闭 请联系主管");
        }
        //登录成功
        //将当前用户信息存储近Session中
        session.setAttribute("emp", empInfo);
        return AjaxResult.success();
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    3.4mapper

    这里我们需要用到mapper通过mybatis进行数据库的操作

    在mapper文件夹中新建EmpMapper

    3.4.1EmpMapper

    package com.aaa.ssm.mapper;
import com.aaa.ssm.pojo.dto.EmpDTO;
import com.aaa.ssm.pojo.dto.LoginDTO;
import org.apache.ibatis.annotations.Param;

/**
 * @Author Grg
 * @Date 2023/9/17 15:02
 * @PackageName:com.aaa.ssm.mapper
 * @ClassName: EmpMapper
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
public interface EmpMapper {
    LoginDTO login(@Param("username")String username,@Param("password") String password);
    EmpDTO getEmpInfoByEid(Integer eid);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在resources配置文件夹下新建一个mapper文件夹

    创建EmpMapper.xml文件

    3.4.2EmpMapper.xml

    
DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.aaa.ssm.mapper.EmpMapper">
    <select id="login" resultType="com.aaa.ssm.pojo.dto.LoginDTO">
        select * from t_emp_login where username = #{username} and password = #{password};
    select>
    <resultMap id="empInfo" type="empDTO">
        <id column="id" property="id">id>
        <result column="ename" property="ename">result>
        <result column="hiredate" property="hiredate">result>
        <result column="telephone" property="telephone">result>
        <association property="dept" javaType="deptDTO">
            <id column="did" property="id">id>
            <result column="dname" property="dname">result>
            <result column="dstate" property="state">result>
        association>
        <association property="role" javaType="roleDTO">
            <id column="rid" property="id">id>
            <result column="rname" property="rname">result>
            <result column="rstate" property="state">result>
        association>
    resultMap>
    <select id="getEmpInfoByEid" resultMap="empInfo">
        SELECT e.id,
               e.ename,
               e.hiredate,
               e.telephone,
               d.id    did,
               d.dname,
               d.other,
               d.state dstate,
               r.id    rid,
               r.rname,
               r.state rstate
        from t_emp_info e
                 LEFT JOIN t_dept d on e.did = d.id
                 LEFT JOIN t_role r on e.rid = r.id
        where e.id = #{eid};
    select>
mapper>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    3.5result

    我们在实现类中需要用到一个结果集，在业务处理完成后响应信息

    在result文件夹下创建AjaxResult

    package com.aaa.ssm.result;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Author Grg
 * @Date 2023/8/28 15:58
 * @PackageName:com.grg.Result
 * @ClassName: AjaxResult
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class AjaxResult {
    private Integer code;
    private String msg;
    private Object data;
    
    public static AjaxResult success() {
        return new AjaxResult(1,"操作成功",null);
    }
    public static AjaxResult success(Object data) {
        return new AjaxResult(1,"操作成功",data);
    }
    public static AjaxResult error() {
        return new AjaxResult(2,"操作失败",null);
    }
    public static AjaxResult error(String msg) {
        return new AjaxResult(2,msg,null);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    3.6pojo

    我们在pojo中创建几个实体类用于结果的接收

    在pojo文件夹下新建dto文件夹

    3.6.1DeptDTO

    package com.aaa.ssm.pojo.dto;
import lombok.Data;
import java.io.Serializable;
/**
 * @Author Grg
 * @Date 2023/9/17 15:22
 * @PackageName:com.aaa.ssm.pojo.dto
 * @ClassName: DeptDTO
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
@Data
public class DeptDTO implements Serializable {
    private Integer id;
    private String dname;
    private String other;
    private Integer state;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    3.6.2EmpDTO

    package com.aaa.ssm.pojo.dto;

import lombok.Data;

import java.io.Serializable;

/**
 * @Author Grg
 * @Date 2023/9/17 15:20
 * @PackageName:com.aaa.ssm.pojo.dto
 * @ClassName: EmpDTO
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
@Data
public class EmpDTO implements Serializable {
    private Integer id;
    private String ename;
    private String hiredate;
    private String telephone;

    //数据库中存在外键，我们通过 成员对象来对应
    private DeptDTO dept;
    private RoleDTO role;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    3.6.3LoginDTO

    package com.aaa.ssm.pojo.dto;
import lombok.Data;
import java.io.Serializable;
/**
 * @Author Grg
 * @Date 2023/9/17 15:03
 * @PackageName:com.aaa.ssm.pojo
 * @ClassName: LoginDTO
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
@Data
public class LoginDTO implements Serializable {
    private Integer id;
    private String username;
    private String password;
    private Integer eid;
    private Integer state;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    3.6.4RoleDTO

    package com.aaa.ssm.pojo.dto;
import lombok.Data;
import java.io.Serializable;
/**
 * @Author Grg
 * @Date 2023/9/17 15:25
 * @PackageName:com.aaa.ssm.pojo.dto
 * @ClassName: RoleDTO
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
@Data
public class RoleDTO implements Serializable {
    private Integer id;
    private String rname;
    private String other;
    private Integer state;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    3.7sysconst

    这个文件夹中我们主要用来创建接口，接口中存放一些常量，用来消除魔法值

    3.7.1DeptState

    package com.aaa.ssm.sysconst;
/**
 * @Author Grg
 * @Date 2023/9/17 15:42
 * @PackageName:com.aaa.ssm.sysconst
 * @ClassName: DeptState
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
public interface DeptState {
    int DEPT_STATE_BILE = 1;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    3.7.2EmpState

    package com.aaa.ssm.sysconst;
/**
 * @Author Grg
 * @Date 2023/9/17 15:16
 * @PackageName:com.aaa.ssm.sysconst
 * @ClassName: EmpState
 * @Description: 又是码代码的一天
 * @Version plus max 宇宙无敌终极版本
 */
public interface EmpState {
    int EMP_DONGJIE = 1;
    int EMP_LIZHI = 2;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    4.项目启动

    4.1测试

    到这里我们就完成了登录模块

    启动tomcat首先进入到登录页面
    在这里插入图片描述

    按下F12进入页面网络检查

    首先进行错误检查，输入一个错误的账号或密码，查看响应信息
    在这里插入图片描述

    在输入正确的账号密码，我的数据库中是123，123
    在这里插入图片描述

    可以看到响应的数据正确

    此时做一个登录成功后的页面跳转就可以了

    4.2页面优化跳转

    我们做一个当登录失败时给用户的提示，此时也是用的ElementUI中的

    在index.html页面中

    this.$refs["loginInfo"].validate((valid) => {
                    if (valid) {
                        //发送ajax请求到后台
                        $.post("/ssm/emp/login", app.loginInfo, function (backData) {
                            if (backData.code == 1) {
							    window.location.href = "main.html"
                            } else {
                                app.$notify.error({
                                    title: '温馨提示',
                                    message: '账号或者密码错误'
                                });
                            }
                        })

                    }
                });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    这里做一个更改加入提示信息 效果如下
    在这里插入图片描述

    当登录成功时我们就跳转到新页面main.html
    在这里插入图片描述
    此时登录模块就基本做好了，可以自行在页面中进行美化等

  • 相关阅读:
    rpm包管理器常见用法
    超纯水制备抛光树脂及填装要求
    笔记软件选择的晋级之路
    mysql的约束和表关系
    【JAVA知识梳理】异常机制
    WordPress做缓存Memcached Is Your Friend+Batcache
    如何使用Plotly和Dash进行数据可视化
    安卓手机便签数据迁移到苹果手机怎么操作？
    SpringMVC笔记——配置异常处理
    数据库——事务
  • 原文地址：https://blog.csdn.net/g877835148/article/details/132948355