前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Spring Boot + LayUi登陆遇到问题记录

Spring Boot + LayUi登陆遇到问题记录

作者头像
凯哥Java
发布2019-06-28 14:57:37
9360
发布2019-06-28 14:57:37
举报
文章被收录于专栏:凯哥Java凯哥Java

在使用Spring Boot 和LayUi Admin做项目的时候,因为之前没有用过layUI Admin这个框架。所以,在第一个页面登陆。就不知道怎么弄。

我们先看页面效果:

3f500ab4fa9c96bcb06085a82b1c5bc2.png
3f500ab4fa9c96bcb06085a82b1c5bc2.png

在看看页面中怎么使用:

css引入:

代码语言:javascript
复制
<link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${path}/style/admin.css" media="all">
<link rel="stylesheet" href="${path}/style/login.css" media="all">
1500c7b31adb2342778ebf6e8750abae.png
1500c7b31adb2342778ebf6e8750abae.png

js引入:

代码语言:javascript
复制
<script src="${path}/layui/layui.js"></script>
226ea93f4c3806e8f864e0ccf8c3cace.png
226ea93f4c3806e8f864e0ccf8c3cace.png

说明:

layui相关文件在resource下目录:

9b3abe065c2bc8247a615020c2ef090e.png
9b3abe065c2bc8247a615020c2ef090e.png

需要说明:

我的项目名是空的。所以我就把layuiadmin相关的文件直接放到了static下。如果相关文件在layuiadmin文件夹下的话,会出问题的。

在访问的时候,会提示localhost/config.js 404的这个错误。

这个错误,凯哥找了好多没找到解决方案。所以就将文件都从layuiadmin文件夹下提升了一个层次。然后就可以了。

页面都修改好,访问F12,console也不报错了。那么,接下来登陆下看看。

如果出现下面错误:

4a2167168bdddd85aa52ce5d11545920.png
4a2167168bdddd85aa52ce5d11545920.png

那么恭喜你,离成功不远了!

我们查看页面原路径:

27a05b9651d5bb51308c4f9a6573f474.png
27a05b9651d5bb51308c4f9a6573f474.png

发现是一个login.js。可是这个login.js到底是什么呢?返回什么数据呢?

到layui官网,查看demo演示

返回数据如下:

dfa534b0dfff396b76309df7555ebdb0.png
dfa534b0dfff396b76309df7555ebdb0.png

原来是json数据

修改后台Java代码:

3dddb82acec659ddab22072839d374b9.png
3dddb82acec659ddab22072839d374b9.png
代码语言:javascript
复制
@RequestMapping("/")
@ResponseBody
public Map<String,Object> login(String username, String password, HttpServletResponse response){
    System.out.println("===>开始访问登陆页面。");
    log.info("username:{} password:{}",username,password);
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
    Map<String,Object> map = new HashMap<>();
    Map map1 = new HashMap();
    map.put("code", 0);
    map.put("msg", "登录成功");
    map1.put("access_token","c262e61cd13ad99fc650e6908c7e5e65b63d2f32185ecfed6b801ee3fbdd5c0a");
    map.put("data", map1);
    return  map;
}

再次访问。终于提示登陆成功了!

接着修改后台访问页面:

843c0dd2153c81a225451c9ceffeda4a.png
843c0dd2153c81a225451c9ceffeda4a.png

这样就可以了。

总结:

1:资源文件路径

2:返回的是json字符串

    说明:

        1:layuiAdmin 默认成功返回码是0

        2:layuiAdmin鉴权使用的是jwt鉴权,而不是传统的基于session鉴权

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-06-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档