没有合适的资源?快使用搜索试试~ 我知道了~
十次方前端系统开发v1.0--第3章1
需积分: 0 0 下载量 132 浏览量
2022-08-03
15:27:40
上传
评论
收藏 634KB PDF 举报
温馨提示
试读
34页
第3章-使用ElementUI开发管理后台-1学习目标:掌握elementUI提供的脚手架搭建管理后台的方法掌握elementUI的table组件的使用,实现列
资源详情
资源评论
资源推荐
第3章-使用ElementUI开发管理后台-1
学习目标:
掌握elementUI提供的脚手架搭建管理后台的方法
掌握elementUI的table组件的使用,实现列表功能
掌握elementUI的pagination组件的使用,实现分页功能
掌握elementUI的form相关组件的使用,实现条件查询功能
掌握elementUI的dialog组件和$message的使用,实现弹出窗口和消息提示功能
掌握elementUI的select组件的使用,实现下拉列表功能
实现新增数据和修改数据的功能
掌握confirm的使用,实现询问框,实现删除功能
1 管理后台搭建
我们的十次方管理后台就采用ElementUI来进行搭建.
1.1 什么是ElementUI
Element 饿了么前端出品的一套 Vue.js 后台组件库
官网: http://element.eleme.io/#/zh-CN
目录名称 存储内容
build 构建工程相关脚本
config 配置相关
src 工程源码
static 静态资源
src/api 访问后端API
src/utils 工具类
src/views 页面
src/router 路由
以下是主要的目录结构:
1.3 项目初始化
1.3.1 关闭语法规范性检查
修改config/index.js ,将useEslint的值改为false。
此配置作用: 是否开启语法检查,语法检查是通过ESLint 来实现的。
我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具,可以
用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它
非常苛刻的语法检查,包括空格不能少些或多些,必须单引不能双引,语句后不可以写
分号等等,这些规则其实是可以设置的。我们作为前端的初学者,最好先关闭这种校
验,否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发,建议开
启。
1.3.2 国际化设置
打开main.js 找到这句代码
importlocalefrom'element‐ui/lib/locale/lang/en'
我们将en修改为zn-CN
importlocalefrom'element‐ui/lib/locale/lang/zh‐CN'
修改后组件都是按照中文的习惯展示
1.3.3 与easy-mock对接
(1)修改config下的dev.env.js中的BASE_API为easy-mock的Base URL
(2)easy-mock添加登陆认证模拟数据
地址: /user/login
提交方式:post
内容:
(3)添加返回用户信息url模拟数据
地址:/user/info
提交方式:get
内容:
....
BASE_API:'"http://192.168.184.133:7300/mock/5af314a4c612520d0d7650c7"',
....
{
"code":20000,
"data":{
"token":"admin"
}
}
1.3.4 更改标题与菜单
(1)修改index.html里的标题为"十次方后台管理系统",修改后浏览器自动刷新。
这就是脚手架中已经为我们添加了热部署功能。
(2)修改src/router 下的index.js 中constantRouterMap的内容
{
"code":20000,
"data":{
"roles":["admin"],
"role":["admin"],
"name":"admin",
"avatar":"https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐
56703b4acafe.gif"
}
}
剩余33页未读,继续阅读
ShepherdYoung
- 粉丝: 32
- 资源: 337
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0