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

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

文章目录

第四章创建前端项目以及完成登录页面
前言
一、创建前端项目
- 1.新建项目
- 2.拷贝Layui MINI前端文件
- 3.新建page包
- 4.登录页面
- 5.主页
- 6.欢迎页面
二、登录请求
- 1.后端
- 2.前端
三、跨域问题
- 1.什么是跨域问题
- 2.如何解决
四、完成登录页面
- 1.打开IDEA
- 2.打开WebStorm

前言

这一章将介绍如何创建前端项目以及完成登录页面
工具：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原理和应用以及实现功能菜单

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

【高校宿舍管理系统】终章完成主页以及项目总结
终章完成主页以及项目总结提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录终章完成主页以及项目总结前言一.完成主页 1. ...
【高校宿舍管理系统】第九章寝室编号设置和宿舍初始化以及预选设置
第九章寝室编号设置和宿舍初始化以及预选设置提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第九章寝室编号设置和宿舍初始化以 ...
【高校宿舍管理系统】第二章整合Mybatis和写CRUD的基本流程以及使用代码生成器生成Mapper等相关代码
第二章整合Mybatis和写CRUD的基本流程以及使用代码生成器生成Mapper等相关代码提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正 ...
【高校宿舍管理系统】第一章建立数据库以及项目框架搭建
第一章建立数据库以及项目框架搭建提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第一章建立数据库以及项目框架搭建前言一 ...
【高校宿舍管理系统】第七章机构管理和功能菜单权限分配
第七章机构管理和功能菜单权限分配提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第七章机构管理和功能菜单权限分配前言一 ...
【高校宿舍管理系统】第三章 Layui整合Axios
第三章 Layui整合Axios 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第三章 Layui整合Axios 前言一.下 ...
【高校宿舍管理系统】第十一章学生系统
第十一章学生系统提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第十一章学生系统前言一.学生登录二.个人详情三.在 ...
【高校宿舍管理系统】第八章学生管理和楼宇管理以及寝室管理
第八章学生管理和楼宇管理以及宿舍管理提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第八章学生管理和楼宇管理以及宿舍管理 ...
【毕业设计】大学宿舍管理系统高校宿舍管理系统
基于Springboot的大学宿舍管理系统&&高校宿舍管理系统绪论课题主要内容系统建设目标系统采用 B/S 架构,后端基于 Java 语言和 SpringBoot 框架的方式进 ...

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

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

文章目录

前言

一、创建前端项目

1.新建项目

2.拷贝Layui MINI前端文件

3.新建page包

4.登录页面

5.主页

6.欢迎页面

二、登录请求

1.后端

2.前端

三、跨域问题

1.什么是跨域问题

2.如何解决

四、完成登录页面

1.打开IDEA

2.打开WebStorm

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

最新文章

热门文章

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

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

文章目录

前言

一、创建前端项目

1.新建项目

2.拷贝Layui MINI前端文件

3.新建page包

4.登录页面

5.主页

6.欢迎页面

二、登录请求

1.后端

2.前端

三、跨域问题

1.什么是跨域问题

2.如何解决

四、完成登录页面

1.打开IDEA

2.打开WebStorm

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

最新文章

热门文章

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

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

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