基于ant design pro和spring boot、shiro实现的通用管理系统(一)登录

对于java后端开发,写前端页面是非常痛苦的。技术全面点的能把东西做出来,但UI效果没法保证。技术不行的压根就搞不出来。支付宝开源的ant design简称antd虽然很好的解决了这个问题,但是更多的是被前端开发拿去提升效率。多数后端开发面对未知的学习成本,一般都懒得去了解。作为一名后端开发,我通过一周的学习,把之前做的一个java系统的ui全部用ant design pro重写。我想把这个过程总结一下,供更多的java后端开发人员学习。

在阅读下面的文章之前,推荐各位阅读一下ant design的官方文档,对基本的概念有所了解。
官方教程

登录页面文件位于:src\pages\User\Login.js

页面登录按钮点击事件代码:

  handleSubmit = (err, values) => {
    const { type } = this.state;
    if (!err) {
      const { dispatch } = this.props;
      dispatch({
        type: 'login/login',
        payload: {
          ...values,
          //type,
        },
      });
    }
  };

通过dva调用login相关的model中的方法(文件路径src\models\login.js)

    *login({ payload }, { call, put }) {
      const response = yield call(trainingAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // Login successfully

    },

通过第二行 yield call 异步调用trainingAccountLogin方法,

通过model文件中的import引入api.js文件中的与java后台通信的方法

import { trainingAccountLogin,  } from '@/services/api';

通过dva框架的封装,调用后端java方法变得异常简单。只需要下面几行代码就能完成一个ajax的异步请求,剩下的工作就是把传给后端的参数设置好。

export async function trainingAccountLogin(params) {
  return request('/training/login/account', {
    method: 'POST',
    body: params,
  });
}

这个过程中最重要的就是数据的流转,页面中用户输入的用户名和密码通过antd封装的组件传递到login页面的handleSubmit方法中,也就是values对象。values对象是ant design pro封装的Login组件控制的,点击submit后就把用户名和密码的输入框中的数据封装成一个json对象,格式如下:

{
  username: "admin",
  password: "123456"
}

这个json对象先被赋值给了values对象,通过handleSubmit方法放到payload对象中,然后调用dispatch方法、effect里的login方法,最后调用api中的trainingAccountLogin方法时,payload对象就通过参数传递变成了param对象。最后通过框架中的request方法发送到java后端处理。

传给后端的参数是param对象,这里可以是raw json,也可以是封装好的FromData。对应的后端代码有所不同,对于后端开发来收这不是问题,此处就不细讲。

    //接收FormData的后端代码
    @PostMapping("/login")
    @ResponseBody
    public ResponseBo login(String username, String password, String code, Boolean rememberMe)
    //接收raw json的后端代码
    @PostMapping("/login/account")
    @ResponseBody
    public ResponseBo login(@RequestBody User user)

数据发送到后端处理后,通过http的response返给前端处理。response的数据流跟request的正好相反,这些都是有dva控制,我们需要做的就是再model的代码里面处理返回的response。登录成功后,后端会返回如下的json结果

    {"msg":"操作成功","code":0,"currentAuthority":"admin"}

前端这里只处理了code字段,只要code是0,就认为登录成功了,然后就做页面跳转。由于后端shiro是用的session验证,response里会将sessionid设置到cookie中,后续所有的请求都会自动带上cookie,java后端就认为这些请求是合法的请求。

     //(文件路径template\src\models\login.js)
     // Login successfully
      if (response.code === 0) {
        reloadAuthorized();
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        let { redirect } = params;
        if (redirect) {
          const redirectUrlParams = new URL(redirect);
          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);
            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            window.location.href = redirect;
            return;
          }
        }
        yield put(routerRedux.replace(redirect || '/'));
      }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容