SSM整合01

news2024/11/18 7:45:19

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.0</modelVersion>
    <groupId>com.aaa.ssm</groupId>
    <artifactId>SSMDemo1</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>SSMDemo1 Maven Webapp</name>
    <url>http://maven.apache.org</url>

    <properties>
        <!-- Spring版本号 -->
        <spring.version>5.3.29</spring.version>
    </properties>
    <dependencies>
        <!-- jackson依赖包 springmvc中 转json数据 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.14.2</version>
        </dependency>
        <!-- springmvc依赖包 -->
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <!-- spring面向切面编程依赖包 aop -->
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <!-- spring数据库依赖包 -->
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.3.29</version>
        </dependency>
        <!-- mybatis依赖包 -->
        <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.13</version>
        </dependency>
        <!-- mybatis 与 spring整合的jar包 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.1</version>
        </dependency>
        <!-- mysql数据库驱动依赖包 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.33</version>
        </dependency>
        <!-- druid连接池依赖包 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.4</version>
        </dependency>
        <!-- servlet-api依赖包 -->
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.16</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.12</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.14</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpcore</artifactId>
            <version>4.4.13</version>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>
    </dependencies>

</project>

1.2web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<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 Application</display-name>

    <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:spring.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>

2.SSM配置文件

创建resources文件夹

2.1spring.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"
       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">
    <!-- spring注解扫描 @Controller @Service @autowired -->
    <context:annotation-config/>
    <context:component-scan base-package="com.aaa.ssm"/>
    <!-- spring mvc 注解驱动 @ResquestMapping -->
    <mvc:annotation-driven/>
    <!-- 静态文件加载配置 -->
    <mvc:default-servlet-handler/>
    <!-- 属性文件加载 我们现在要使用 druid的数据库连接池
    druid的数据库连接池有一个配置文件 druid.properties 里面都是druid的配置信息
    此时在spring的配置文件中 需要去读druid.properties中的信息
    在spring 中可以配置PropertyPlaceholderConfigurer 这样的bean
    这个bean 就会根据location 配置的地址classpath:druid.properties
    去读取配置信息
    -->
    <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
        <property name="location" value="classpath:druid.properties"></property>
    </bean>
    <!-- 我们当前项目 使用的数据库连接池是 阿里巴巴的 druid
    数据库连接池的使用 创建数据库连接池对象 ，需要连接对象conn的时候 从连接池对象中
    获取
    此时我们使用spring 创建连接池对象的工作就交给spring
    配置当前bean class 是com.alibaba.druid.pool.DruidDataSource
    此时spring就会管理数据库连接池对象的创建
    -->
    <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>
    <!-- spring整合 mybatis SqlSessionFactoryBean -->
    <bean id="sqlFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 使用哪个数据库连接池 此时使用 ref引用 dataSource 代表使用的是 上面的
        druid数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 配置 mybatis的 配置文件位置-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!-- 扫描 所有的 mapper.xml文件的位置 注意 此处容易出问题 -->
        <property name="mapperLocations" value="classpath:mapper/*Mapper.xml"/>

        <!--别名扫描-->
        <property name="typeAliasesPackage" value="com.aaa.ssm.pojo"></property>
    </bean>
    <!-- mapper 扫描接口 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- mapper对应的接口的包名 -->
        <property name="basePackage" value="com.aaa.ssm.mapper"/>
        <!-- 扫描接口的时候 要知道为谁扫描的-->
        <property name="sqlSessionFactoryBeanName" value="sqlFactory"/>
    </bean>
</beans>

2.2mybatis-config.xml

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

</configuration>

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

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

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

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

3.登录模块

数据库

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

流程分析

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

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

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>

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

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

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

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

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

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

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

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

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

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

创建EmpMapper.xml文件

3.4.2EmpMapper.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.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>

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

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

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

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

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

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

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

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: '账号或者密码错误'
                                });
                            }
                        })

                    }
                });

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1018325.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【每日一题】981. 基于时间的键值存储

【每日一题】981. 基于时间的键值存储

981. 基于时间的键值存储 - 力扣&#xff08;LeetCode&#xff09; 设计一个基于时间的键值数据结构&#xff0c;该结构可以在不同时间戳存储对应同一个键的多个值&#xff0c;并针对特定时间戳检索键对应的值。 实现 TimeMap 类&#xff1a; TimeMap() 初始化数据结构对象void…
阅读更多...
开始为 Android 开发 PWA 或混合 Web 应用

开始为 Android 开发 PWA 或混合 Web 应用

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 PWA 或混合 Web 应用的功能 Apache Cordova Ionic 通过安装所需工具开始使用 Ionic 使用 Ionic Cordova 和 Ang…
阅读更多...
小白新手一文完成Git+Github/GITEE傻瓜式入门详解部署教程（内含TortoiseGit配置）

小白新手一文完成Git+Github/GITEE傻瓜式入门详解部署教程（内含TortoiseGit配置）

本文创作时版本为 Git-2.41.0&#xff0c;使用目标为笔记存储和代码库&#xff0c;部分公司向使用的设置可能不一样 一 Git 1.1 何为 Git Git是一款免费、开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理项目、项目版本管理。 原本是为了帮助管理 Linux 内核开发而开…
阅读更多...
Docker 网络学习

Docker 网络学习

docker的网络模式 当你开始大规模使用Docker时&#xff0c;你会发现需要了解很多关于网络的知识。Docker作为目前最火的轻量级容器技术&#xff0c;有很多令人称道的功能&#xff0c;如Docker的镜像管理。然而&#xff0c;Docker同样有着很多不完善的地方&#xff0c;网络方面…
阅读更多...
ARM64汇编基础

ARM64汇编基础

ARM64汇编基础 主要内容 到目前为止&#xff0c;大部分的移动设备都是64位的arm架构&#xff0c;一直想抽个时间系统学习下&#xff0c;这个周末就专门来学习下。毕竟两天的时间&#xff0c;也只是简单的入门了解下&#xff0c;为后续工作和学习打下基础。 本次学习的主要内容…
阅读更多...
Pytorch学习笔记（GPU训练）

Pytorch学习笔记（GPU训练）

GUP训练 配置pytorch的gup版本主要是在网络模型、输入和标记的数据、损失函数 方式一 直接.cuda()调用&#xff0c;在原有的模型训练代码中的网络模型、输入和标记的数据、损失函数部分直接调用即可 方式二 事先定义好设备device,然后直接.to(device)调用&#xff0c;在原…
阅读更多...
基于SSM的学生宿舍管理系统设计与实现

基于SSM的学生宿舍管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
[vulntarget靶场] vulntarget-a

[vulntarget靶场] vulntarget-a

靶场地址&#xff1a;https://github.com/crow821/vulntarget 拓扑结构 信息收集 主机发现 netdiscover -r 192.168.127.0/24 -i eth0端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.127.130访问目标80&#xff0c;发现为通达oa WIN7漏洞利用 通达oa后台…
阅读更多...
运行软件报错msvcr100.dll丢失的解决方法，全面分析msvcr100.dll丢失问题

运行软件报错msvcr100.dll丢失的解决方法，全面分析msvcr100.dll丢失问题

随着科技的飞速发展&#xff0c;计算机已经成为人们生活和工作中不可或缺的重要工具。然而&#xff0c;在使用计算机的过程中&#xff0c;难免会遇到一些令人困扰的问题&#xff0c;如计算机丢失 msvcr100.dll 文件就是其中之一。本文将详细介绍计算机丢失 msvcr100.dll 的困扰…
阅读更多...
文件打开表有几个？——参考《王道考研》

文件打开表有几个？——参考《王道考研》

一、 真题试练 解析&#xff1a; 二、关于文件打开表 三、 疑问&#xff1f; 不是说好的只维护一个文件打开表吗&#xff1f; 四、解答 OS维护的是总的文件打开表&#xff0c;各自用户由对应各自的打开表&#xff0c;所有用户的打开表组成OS总的打开表。
阅读更多...
layui框架学习（45： 工具集模块）

layui框架学习（45： 工具集模块）

layui的工具集模块util支持固定条、倒计时等组件&#xff0c;同时提供辅助函数处理时间数据、字符转义、批量事件处理等操作。   util模块中的fixbar函数支持设置固定条&#xff08;2.7版本的帮助文档中叫固定块&#xff09;&#xff0c;是指固定在页面一侧的工具条元素&…
阅读更多...
swift 事件

swift 事件

多个元素链接到单个IBAction 并区分
阅读更多...
图书信息管理系统

图书信息管理系统

#include<stdio.h> #include<string.h> #include<stdlib.h> #define MAXSIZE 10000typedef struct {char no[100];//图书ISBNchar name[100];//图书名字double price;//图书价格 } Book;typedef struct {Book data[MAXSIZE];int length; } SqList,*PSqList;P…
阅读更多...
算法基础:图

算法基础:图

图论 图论〔Graph Theory〕是数学的一个分支。它以图为研究对象。图论中的图是由若干给定的点及连接两点的线所构成的图形&#xff0c;这种图形通常用来描述某些事物之间的某种特定关系&#xff0c;用点代表事物&#xff0c;用连接两点的线表示相应两个事物间具有这种关系。 …
阅读更多...
Java实现Ip地址获取

Java实现Ip地址获取

Java实现Ip地址获取 一、两种实现方式二、测试结果 一、两种实现方式 package com.lyp;import org.apache.commons.lang3.ObjectUtils;import java.net.*; import java.util.ArrayList; import java.util.Enumeration; import java.util.List; import java.util.Optional;/***…
阅读更多...
创建及编辑线要素

创建及编辑线要素

17. 创建及编辑线要素 17.1 功能讲解 所有QGIS按键&#xff0c;右下角带 * 的&#xff0c;都是新建的意思。下图中&#xff0c; File encoding尽量选择 System。可自定义字段&#xff0c;例如 ‘Btype’&#xff0c;可以用其以不同的标记区分省界和区界。 保存路径&#x…
阅读更多...
「UG/NX」Block UI 指定矢量SpecifyVector

「UG/NX」Block UI 指定矢量SpecifyVector

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#
阅读更多...
ES6中WeakMap和WeakSet

ES6中WeakMap和WeakSet

这里重点说一下它们和对应的set、map的区别 WeakSet 不能遍历,没有forEach&#xff0c;没有size只能添加对象垃圾回收器完全不考虑WeakSet对该对象的引用。 WeakMap 键只能是对象它的键存储的地址不会影响垃圾回收。 let obj {name: Tom,age: 20}let map new WeakMap();…
阅读更多...
Linux安装Mysql（详细）

Linux安装Mysql（详细）

安装Mysql数据库 参考阿里云命令安装Mysql smartservice.console.aliyun.com/service/ser… 安装MySQL 1.远程连接ECS实例。 具体操作&#xff0c;请参见使用VNC登录实例。 2.运行以下命令&#xff0c;更新YUM源。 sudo rpm -Uvh https://dev.mysql.com/get/mysql80-com…
阅读更多...
C++之this指针总结(二百二十)

C++之this指针总结(二百二十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023