ant-design-admin 开发之旅 (1)-- 先用起来再说

本贴最后更新于 2327 天前,其中的信息可能已经天翻地覆

1、 安装软件

下载 node.js8.x 及以上(推荐 v8.1.2),然后安装并通过命令行检查 node --version。下载 webstorm 2017.3 版,并输入 http://idea.codebeta.cn 注册。

**1、 **环境搭建

克隆项目文件:

git clone https://github.com/zuiidea/antd-admin.git

进入目录安装依赖:

#开始前请确保没有安装 roadhog、webpack 到 NPM 全局目录

npm i 或者 yarn install

编译运行:

npm run build:dll #第一次 npm run dev 时需运行此命令,使开发时编译更快

npm run dev

打开 http://localhost:8000

目录结构

├── /dist/ # 项目输出目录

├── /src/ # 项目源码目录

│ ├── /public/ # 公共文件,编译时 copy 至 dist 目录

│ ├── /components/ # UI 组件及 UI 相关方法

│ │ ├── skin.less # 全局样式

│ │ └── vars.less # 全局样式变量

│ ├── /routes/ # 路由组件

│ │ └── app.js # 路由入口

│ ├── /models/ # 数据模型

│ ├── /services/ # 数据接口

│ ├── /themes/ # 项目样式

│ ├── /mock/ # 数据 mock

│ ├── /utils/ # 工具函数

│ │ ├── config.js # 项目常规配置

│ │ ├── menu.js # 菜单及面包屑配置

│ │ ├── config.js # 项目常规配置

│ │ ├── request.js # 异步请求函数

│ │ └── theme.js # 项目需要在 js 中使用到样式变量

│ ├── route.js # 路由配置

│ ├── index.js # 入口文件

│ └── index.html

├── package.json # 项目信息

├── .eslintrc # Eslint 配置

└── .roadhogrc.js # roadhog 配置

**2、 **跨域和普通接口调用

项目自身是没有对外接口调用的,调用的数据都是 mock 数据,使用 roadhog 模拟接口,mock 接口和数据都保存在 ant-design-pro-master/.roadhogrc.mock.js 中。

接口调用代码: ant-design-pro-master/src/services/api.js

比如登录接口 fakeAccountLogin,原来调用的是 mock 数据:

export async function fakeAccountLogin(params) {

return request('/api/login/account', {

method: 'POST',

body: params,

});

}

其中/api/login/account 就是.roadhogrc.mock.js 里提供的 mock 接口,如果要调用本地的接口,做如下改动:

export async function fakeAccountLogin(params) {

return request('http://localhost:8080/xxx/accountManager/login', {

method: 'POST',

body: params,

});

}

即可。

跨域问题:

由于调用本地优购接口存在跨域问题,需要请求端(ant-design-admin)和客户端(XXX)都做调整, ant-design-admin 需要修改 ant-design-pro-master/src/utils/request.js 文件的 request 函数如下:

export default function request(url, options) {

const defaultOptions = {

credentials: 'include',

** mode: 'cors',**

};

const newOptions = { ...defaultOptions, ...options };

if (newOptions.method === 'POST' || newOptions.method === 'PUT') {

if (!(newOptions.body instanceof FormData)) {

newOptions.headers = {

Accept: 'application/json',

'Content-Type': 'application/json; charset=utf-8',

...newOptions.headers,

};

newOptions.body = JSON.stringify(newOptions.body);

} else {

// newOptions.body is FormData

newOptions.headers = {

Accept: 'application/json',

'Content-Type': 'multipart/form-data',

'Access-Control-Allow-Origin': '*',

'Access-Control-Allow-Headers': 'X-Requested-With',

'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',

...newOptions.headers,

};

}

}

服务端登录接口示例:

打开 src/com/xxx/controller/accountManager/ManagerController.java

新增代码如下:

@Resource(name="userService")

private UserService userService;

@Resource(name="roleService")

private RoleService roleService;

@Resource(name="menuService")

private MenuService menuService;

/**

  • 访问登录页 http://localhost:8080/xxx/accountManager/login

  • @return

*/

** @CrossOrigin("http://localhost:8000")**

@ApiOperation(value = "访问登录页")

@ResponseBody

@RequestMapping(value="/login",method={RequestMethod.POST},consumes="application/json;charset=UTF-8")

public ResponseEntity toLogin(@ApiParam @RequestBody(required=true) String body)throws Exception{

Map map = new HashMap();

Map params = new HashMap();

PageData pd = new PageData();

pd = this.getPageData();

String errInfo = "";

params = GsonTools.changeGsonToMap(body);

//shiro 管理的 session

Subject currentUser = SecurityUtils.getSubject();

Session session = currentUser.getSession();

if(null != params){

String sessionCode = (String)session.getAttribute(Const.SESSION_SECURITY_CODE); //获取 session 中的验证码

String USERNAME = params.get("userName");

String PASSWORD = params.get("password");

pd.put("USERNAME", USERNAME);

String passwd = new SimpleHash("SHA-1", USERNAME, PASSWORD).toString(); //密码加密

pd.put("PASSWORD", passwd);

pd = userService.getUserByNameAndPwd(pd);

if(pd != null){

pd.put("LAST_LOGIN",DateUtil.getTime().toString());

userService.updateLastLogin(pd);

User user = new User();

Role role = roleService.getRoleById(String.valueOf(pd.getLong("ROLE_ID")));

user.setUSER_ID(String.valueOf(pd.getLong("USER_ID")));

user.setUSERNAME(pd.getString("USERNAME"));

user.setPASSWORD(pd.getString("PASSWORD"));

user.setNAME(pd.getString("NAME"));

user.setRIGHTS(pd.getString("RIGHTS"));

user.setROLE_ID(String.valueOf(pd.getLong("ROLE_ID")));

user.setLAST_LOGIN(pd.getString("LAST_LOGIN"));

user.setIP(pd.getString("IP"));

user.setSTATUS(pd.getString("STATUS"));

user.setPhone(pd.getString("PHONE"));

if(role != null){

user.setRole(role);

}

session.setAttribute(Const.SESSION_USER, user);

session.removeAttribute(Const.SESSION_SECURITY_CODE);

//shiro 加入身份验证

Subject subject = SecurityUtils.getSubject();

UsernamePasswordToken token = new UsernamePasswordToken(USERNAME, PASSWORD);

try {

subject.login(token);

} catch (AuthenticationException e) {

logger.error(e.toString(), e);

errInfo = "身份验证失败!";

map.put("type", "account");

map.put("currentAuthority", "changeLoginStatus");

map.put("status", "false");

return new ResponseEntity(map,HttpStatus.OK);

}

}else{

errInfo = "usererror"; //用户名或密码有误

map.put("type", "account");

map.put("currentAuthority", "changeLoginStatus");

map.put("status", "false");

return new ResponseEntity(map,HttpStatus.OK);

}

}

if(Tools.isEmpty(errInfo)){

List allmenuList = new ArrayList();

User user = (User)session.getAttribute(Const.SESSION_USER);

if (user != null) {

User userr = (User)session.getAttribute(Const.SESSION_USERROL);

if(null == userr){

user = userService.getUserAndRoleById(user.getUSER_ID());

session.setAttribute(Const.SESSION_USERROL, user);

}else{

user = userr;

}

Role role = user.getRole();

String roleRights = role!=null ? role.getRIGHTS() : "";

//避免每次拦截用户操作时查询数据库,以下将用户所属角色权限、用户权限限都存入 session

session.setAttribute(Const.SESSION_ROLE_RIGHTS, roleRights); //将角色权限存入 session

session.setAttribute(Const.SESSION_USERNAME, user.getUSERNAME()); //放入用户名

if(null == session.getAttribute(Const.SESSION_allmenuList)){

allmenuList = menuService.listAllMenu();

if(Tools.notEmpty(roleRights)){

for(Menu menu : allmenuList){

menu.setHasMenu(RightsHelper.testRights(roleRights, menu.getMENU_ID()));

if(menu.isHasMenu()){

List subMenuList = menu.getSubMenu();

for(Menu sub : subMenuList){

sub.setHasMenu(RightsHelper.testRights(roleRights, sub.getMENU_ID()));

}

}

}

}

session.setAttribute(Const.SESSION_allmenuList, allmenuList); //菜单权限放入 session 中

}else{

allmenuList = (List)session.getAttribute(Const.SESSION_allmenuList);

}

}

errInfo = "success";

map.put("type", "account");

map.put("currentAuthority", "admin");

map.put("status", "ok");

map.put("menuList", allmenuList);

//验证成功

return new ResponseEntity(map,HttpStatus.OK);

}

return null;

}

注意和原有接口注解和返回类型的不同

**3、 **菜单数据读取

Router 决定接口调用后使用哪个 model,文件在 ant-design-pro-master/src/common/router.js,登录时会指向 model BasicLayout ,具体如下

export const getRouterData = (app) => {

const routerConfig = {

'/': {

component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),

},

登录后 BasicLayout 会加载菜单组件,代码 ant-design-pro-master/src/layouts/BasicLayout.js

/**

  • 根据菜单取得重定向地址.

*/

const redirectData = [];

const getRedirect = (item) => {

if (item && item.children) {

if (item.children[0] && item.children[0].path) {

redirectData.push({

from: /${item.path},

to: /${item.children[0].path},

});

item.children.forEach((children) => {

getRedirect(children);

});

}

}

};

getMenuData().forEach(getRedirect);

getMenuData 是通过 import { getMenuData } from '../common/menu';调用的 menu.js 里的 demo 数据,如果要使用优购的菜单数据,就需要在登录成功时先把菜单数据存储到 localStorage,然后 BasicLayout 通过 localStorage 取出来,

在登录过程中增加存储菜单函数,具体如下:

在 model :ant-design-pro-master/src/models/login.js 中先引入 menu.js 中的存储函数:** **import { setMenuData } from '../common/menu';

effects: {

*login({ payload }, { call, put }) {

const response = yield call(fakeAccountLogin, payload);

yield put({

type: 'changeLoginStatus',

payload: response,

});

// Login successfully

if (response.status === 'ok') {

** setMenuData(response);**

reloadAuthorized();

yield put(routerRedux.push('/'));

}

},

setMenuData****如下:

export function setMenuData(menus) {

return localStorage.setItem('menus', menus);

}

获取菜单数据:

export const getMenuData = () => formatter(localStorage.getItem('menus'));

可以看到 setMenuData 会将登录接口返回的菜单数据存到 localStorage 中,BasicLayout.js 再通过 getMenuData 获取菜单数据:

/**

  • 根据菜单取得重定向地址.

*/

const redirectData = [];

const getRedirect = (item) => {

if (item && item.children) {

if (item.children[0] && item.children[0].path) {

redirectData.push({

from: /${item.path},

to: /${item.children[0].path},

});

item.children.forEach((children) => {

getRedirect(children);

});

}

}

};

getMenuData().forEach(getRedirect);

  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • OnlyOffice
    4 引用 • 23 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 3 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • danl
    163 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 35 关注
  • Access
    1 引用 • 3 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • Word
    13 引用 • 41 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    589 引用 • 3538 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 60 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 4 关注
  • Visio
    1 引用 • 2 回帖 • 3 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25416 引用 • 105110 回帖 • 1 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    174 引用 • 3852 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 159 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 77 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 634 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 503 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 8 关注