antdesign java_基于ant design pro和spring boot、shiro实现的通用管理系统（一）登录

最新推荐文章于 2023-02-22 14:15:33 发布

竹石文化传播有限公司

最新推荐文章于 2023-02-22 14:15:33 发布

阅读量731

点赞数

文章标签： antdesign java

本文链接：https://blog.csdn.net/weixin_42502040/article/details/114840009

版权

对于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后端就认为这些请求是合法的请求。