开发实战
# 开发实战
以餐饮后台的菜品管理为例 使用Rdesign是如何实现一个菜品管理的列表
目标页面:
# 一、添加页及路由
1. 首先复制现有列表页面模板 在src下的pages下 拷贝baseUp模板列表页并 改名 dishManage
2. 添加路由 ./src/router/modules/components.ts
- 一级菜单 列表页 下添加列表页面
{
path: '/list', // 主路由
name: 'list', // 页面名称 英文
component: Layout, // 页面架构
redirect: '/list/upBase', // 重定向 及打开 http://xxx/#/list 时会跳转到 http://xxx/#/list/base
meta: { // 页面消息
title: '列表页', // 页面标题 页面中会使用
icon: ListIcon // icon 导航中使用
},
children: [ // 子路由的 内容
{
path: 'upBase', // 子路由
name: 'upBase', // 子路由名
component: () => import('@/pages/list/baseUp/index.vue'), // 路由所对应的页面
meta: {
title: '列表'
}
}
]
}
3. 添加对应的路由并执行
到这里 我们的页面就添加完成了 接下来 对接后端的API
# 二、添加API请求
由于我们的 API是Mock数据 所以我们先模拟创建一个 接口 如果是java人员可以自行在自己的java工程里添加对应的接口进行调试
- 在Yapi下先建创建一个模拟的接口
1. 创建接口 在 ./src/api/list.ts中添加接口
2. 在页面中添加请求
在页面中导入接口
添加调用
# 三、调整接口数据
1. 开启接口调试
2. 打开接口调试 查看接口是否通着
3. 按接口返回字段 修改列表字段 字段一般都定义在constants.ts 中
并在对应的TableList 及搜索的 SearchForm列表组件中和首页中删除无用的字段、属性等代码
最终的效果
← 公用样式