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

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

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 回帖 • 8 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 692 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 439 关注
  • WebComponents

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

    1 引用 • 7 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注
  • Outlook
    1 引用 • 5 回帖 • 2 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 366 关注
  • Ant-Design

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

    17 引用 • 23 回帖 • 8 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    28 引用 • 225 回帖 • 139 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    493 引用 • 928 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 39 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    410 引用 • 3578 回帖 • 1 关注
  • RemNote
    2 引用 • 16 回帖 • 9 关注
  • 思源笔记

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

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

    23929 引用 • 97395 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖 • 1 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 3 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    359 引用 • 1831 回帖 • 2 关注
  • 电影

    这是一个不能说的秘密。

    121 引用 • 606 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 6 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 2 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 482 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 255 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 242 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 558 关注
  • 区块链

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

    92 引用 • 752 回帖 • 1 关注