【高校宿舍管理系统】第四章 创建前端项目以及完成登录页面

第四章 创建前端项目以及完成登录页面

提示：本博客个为人独立博客，不是权威，仅供参考！所有思路只做交流之用！如有不足之处，望各位在评论区友善指正。

---

---

前言

这一章将介绍如何创建前端项目以及完成登录页面
工具：Firefox

---

一、创建前端项目

1.新建项目

2.拷贝Layui MINI前端文件

3.新建page包

4.登录页面

拷贝login-3作为模板

更改名称


去除验证码，去除【忘记密码】和【保持登录】按钮

去除【版权所有】

去除冗余代码

添加选择用户角色的单行选择框

5.主页

拷贝index作为主页模板

修改文件路径


修改名称

修改login内的登陆成功跳转链接

修改index内的退出登录跳转链接

6.欢迎页面

拷贝welcome-1作为模板，并改名为main

将index中homeInfo的链接改为main

二、登录请求

1.后端

创建LoginController

在UserMapper.xml里为登录功能写一个sql语句

在UserMapper里为登录功能写一个方法

在UserService里也同样新增一个方法

2.前端

引入axios和lay-config

进行登录请求的处理


测试运行，出现跨域问题

三、跨域问题

1.什么是跨域问题

跨域是指跨域名的访问，以下情况都属于跨域：

源URL	请求URL	说明
http://a.com/a	http://a.com:8080/b	端口不同
http://a.com/a	https://a.com/b	协议不同
http://www.a.com/a	http://x.a.com/b	主域名相同，但是子域名不相同
http://a.com/a	http://b.com/b	域名不相同

跨域问题是浏览器的一种安全限制，例如一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

2.如何解决

创建framework包结构

创建MyWebMvcConfigurer

测试，发现前端代码的一个小纰漏

四、完成登录页面

1.打开IDEA

创建Result类

package com.sisyphus.utils;

import com.github.pagehelper.PageInfo;

import java.util.HashMap;
import java.util.Map;

public class Result {           //操作返回的数据

    public static final Integer SUCCESS_CODE = 200;
    public static final Integer ERROR_CODE = 500;

    private Integer code;
    private String msg;
    private Object data = null;
    
    public static Result ok(Integer status,String msg,Object data){
        return new Result(status,msg,data);
    }

    public static Result ok(String msg,Object data){
        return new Result(SUCCESS_CODE,msg,data);
    }

    public static Result ok(Object data){
        return new Result(SUCCESS_CODE,"操作成功",data);
    }
    
 	public static Result ok(){
        return new Result(SUCCESS_CODE,"操作成功",null);
    }

    public static Result fail(Integer status,String msg){
        return new Result(status,msg);
    }

    public static Result fail(String msg){
        return new Result(ERROR_CODE,msg);
    }

    public static Result fail(){
        return new Result(ERROR_CODE,"操作失败");
    }

    public Result(Integer code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public Result(Integer code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public Integer getCode() {
        return code;
    }

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

    public String getMsg() {
        return msg;
    }

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

    public Object getData() {
        return data;
    }

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

禁止返回密码

修改完善LoginController

2.打开WebStorm

完成login页面的登录判断

添加密码错误提示

我们之前在axios.js中暂定设置后端返回的数据为0的时候为正常数据，现在改为200，和后端一致

删除冗余代码

在axios.js中配置全局默认baseURL


登录测试

---

# 总结 这一章比较操作起来比较繁琐，很容易犯一些小错误，需要一定的独立排错能力。

难点：
1.理解跨域问题
2.学会使用浏览器开发者工具进行基本的调试和排错（推荐使用火狐）

第五章预计三天内更新，涉及JWT原理和应用以及实现功能菜单