定制网站建设宝安西乡,北京手机网站搭建多少钱,网站为什么续费,微信ios版下载黑马JavaWeb开发跟学三.Web前端开发Vue-Element 1 Ajax1.1 Ajax介绍1.1.1 Ajax概述1.1.2 Ajax作用1.1.3 同步异步 1.2 原生Ajax1.3 Axios1.3.1 Axios的基本使用1.3.2 Axios快速入门1.3.3 请求方法的别名1.3.4 案例 2 前后台分离开发2.1 前后台分离开发介绍2.2 YAPI2.2.1 YAPI介… 黑马JavaWeb开发跟学三.Web前端开发Vue-Element 1 Ajax1.1 Ajax介绍1.1.1 Ajax概述1.1.2 Ajax作用1.1.3 同步异步 1.2 原生Ajax1.3 Axios1.3.1 Axios的基本使用1.3.2 Axios快速入门1.3.3 请求方法的别名1.3.4 案例 2 前后台分离开发2.1 前后台分离开发介绍2.2 YAPI2.2.1 YAPI介绍2.2.2 接口文档管理 3 前端工程化3.1 前端工程化介绍3.2 前端工程化入门3.2.1 环境准备3.2.2 Vue项目简介3.2.2.1 创建vue项目3.2.2.2 vue项目目录结构介绍3.2.2.3 运行vue项目 3.2.3 Vue项目开发流程 4 Vue组件库Element4.1 Element介绍4.2 快速入门4.3 Element组件4.3.1 Table表格4.3.1.1 组件演示4.3.1.2 组件属性详解 4.3.2 Pagination分页4.3.2.1 组件演示4.3.2.2 组件属性详解4.3.2.3 组件事件详解 4.3.3 Dialog对话框4.3.3.1 组件演示4.3.3.2 组件属性详解 4.3.4 Form表单4.3.4.1 组件演示 4.4 案例4.4.1 案例需求4.4.2 案例分析4.4.3 代码实现4.4.3.1 环境搭建4.4.3.2 整体布局4.4.3.3 顶部标题4.4.3.4 左侧导航栏4.4.3.5 右侧核心内容4.4.3.5.1 表格编写4.4.3.5.2 表单编写4.4.3.5.3 分页工具栏 4.4.3.6 异步数据加载4.4.3.6.1 异步加载数据4.4.3.6.2 性别内容展示修复4.4.3.6.3 图片内容展示修复 5 Vue路由5.1 路由介绍5.2 路由入门 6 打包部署6.1 前端工程打包6.2 部署前端工程6.2.1 nginx介绍6.2.2 部署 1 Ajax
1.1 Ajax介绍
1.1.1 Ajax概述
我们前端页面中的数据如下图所示的表格中的学生信息应该来自于后台那么我们的后台和前端是互不影响的2个程序那么我们前端应该如何从后台获取数据呢因为是2个程序所以必须涉及到2个程序的交互所以这就需要用到我们接下来学习的Ajax技术。 Ajax: 全称Asynchronous JavaScript And XML异步的JavaScript和XML。其作用有如下2点
与服务器进行数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。
1.1.2 Ajax作用
我们详细的解释一下Ajax技术的2个作用 与服务器进行数据交互 如下图所示前端资源被浏览器解析但是前端页面上缺少数据前端可以通过Ajax技术向后台服务器发起请求后台服务器接受到前端的请求从数据库中获取前端需要的资源然后响应给前端前端在通过我们学习的vue技术可以将数据展示到页面上这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解。 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。 如下图所示当我们再百度搜索java时下面的联想数据是通过Ajax请求从后台服务器得到的在整个过程中我们的Ajax请求不会导致整个百度页面的重新加载并且只针对搜索栏这局部模块的数据进行了数据的更新不会对整个页面的其他地方进行数据的更新这样就大大提升了页面的加载速度用户体验高。
1.1.3 同步异步
针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。 同步请求发送过程如下图所示 浏览器页面在发送请求给服务器在服务器处理请求的过程中浏览器页面不能做其他的操作。只能等到服务器响应结束后才能浏览器页面才能继续做其他的操作。 异步请求发送过程如下图所示 浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面还可以做其他的操作。
1.2 原生Ajax
对于Ajax技术有了充分的认知了我们接下来通过代码来演示Ajax的效果。此处我们先采用原生的Ajax代码来演示。因为Ajax请求是基于客户端发送请求服务器响应数据的技术。所以为了完成快速入门案例我们需要提供服服务器端和编写客户端。 服务器端 因为我们暂时还没学过服务器端的代码所以此处已经直接提供好了服务器端的请求地址我们前端直接通过Ajax请求访问该地址即可。后台服务器地址http://yapi.smart-xwork.cn/mock/169327/emp/list 上述地址我们也可以直接通过浏览器来访问访问结果如图所示只截取部分数据 客户端 客户端的Ajax请求代码如下有如下4步接下来我们跟着步骤一起操作一下。 第一步首先我们再VS Code中创建AJAX的文件夹并且创建名为01. Ajax-原生方式.html的文件提供如下代码主要是按钮绑定单击事件我们希望点击按钮来发送ajax请求 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title原生Ajax/title
/head
bodyinput typebutton value获取数据 onclickgetData()div iddiv1/div/body
scriptfunction getData(){}
/script
/html第二步创建XMLHttpRequest对象用于和服务器交换数据也是原生Ajax请求的核心对象提供了各种方法。代码如下 //1. 创建XMLHttpRequest
var xmlHttpRequest new XMLHttpRequest();第三步调用对象的open()方法设置请求的参数信息例如请求地址请求方式。然后调用send()方法向服务器发送请求代码如下 //2. 发送异步请求
xmlHttpRequest.open(GET,http://yapi.smart-xwork.cn/mock/169327/emp/list);
xmlHttpRequest.send();//发送请求第四步我们通过绑定事件的方式来获取服务器响应的数据。 //3. 获取服务响应数据
xmlHttpRequest.onreadystatechange function(){//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应 200表示这是一个正确的Http请求没有错误if(xmlHttpRequest.readyState 4 xmlHttpRequest.status 200){document.getElementById(div1).innerHTML xmlHttpRequest.responseText;}
}最后我们通过浏览器打开页面请求点击按钮发送Ajax请求最终显示结果如下图所示 并且通过浏览器的f12抓包我们点击网络中的XHR请求发现可以抓包到我们发送的Ajax请求。XHR代表的就是异步请求
1.3 Axios
上述原生的Ajax请求的代码编写起来还是比较繁琐的所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装简化书写。Axios官网是https://www.axios-http.cn
1.3.1 Axios的基本使用
Axios的使用比较简单主要分为2步 引入Axios文件 script srcjs/axios-0.18.0.js/script使用Axios发送请求并获取响应结果官方提供的api很多此处给出2种如下 发送 get 请求 axios({method:get,url:http://localhost:8080/ajax-demo1/aJAXDemo1?usernamezhangsan
}).then(function (resp){alert(resp.data);
})发送 post 请求 axios({method:post,url:http://localhost:8080/ajax-demo1/aJAXDemo1,data:usernamezhangsan
}).then(function (resp){alert(resp.data);
});axios()是用来发送异步请求的小括号中使用 js的JSON对象传递请求相关的参数 method属性用来设置请求方式的。取值为 get 或者 post。url属性用来书写请求的资源路径。如果是 get 请求需要将请求参数拼接到路径的后面格式为 url?参数名参数值参数名2参数值2。data属性作为请求体被发送的数据。也就是说如果是 post 请求的话数据需要作为 data 属性的值。 then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数意思是该匿名函数在发送请求时不会被调用而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象通过 resp.data 可以获取到响应的数据。
1.3.2 Axios快速入门 后端实现 查询所有员工信息服务器地址http://yapi.smart-xwork.cn/mock/169327/emp/list 根据员工id删除员工信息服务器地址http://yapi.smart-xwork.cn/mock/169327/emp/deleteById 前端实现 首先在VS Code中创建js文件夹与html同级然后将资料/axios-0.18.0.js 文件拷贝到js目录下然后创建名为02. Ajax-Axios.html的文件工程结果如图所示 然后在html中引入axios所依赖的js文件并且提供2个按钮绑定单击事件分别用于点击时发送ajax请求完整代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/titlescript srcjs/axios-0.18.0.js/script
/head
bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/body
scriptfunction get(){//通过axios发送异步请求-get}function post(){//通过axios发送异步请求-post}
/script
/html然后分别使用Axios的方法完整get请求和post请求的发送 get请求代码如下 //通过axios发送异步请求-getaxios({method: get,url: http://yapi.smart-xwork.cn/mock/169327/emp/list}).then(result {console.log(result.data);})post请求代码如下 //通过axios发送异步请求-postaxios({method: post,url: http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,data: id1}).then(result {console.log(result.data);})浏览器打开f12抓包然后分别点击2个按钮查看控制台效果如下 完整代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/titlescript srcjs/axios-0.18.0.js/script
/head
bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/body
scriptfunction get(){//通过axios发送异步请求-getaxios({method: get,url: http://yapi.smart-xwork.cn/mock/169327/emp/list}).then(result {console.log(result.data);})}function post(){// 通过axios发送异步请求-postaxios({method: post,url: http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,data: id1}).then(result {console.log(result.data);})}
/script
/html1.3.3 请求方法的别名
Axios还针对不同的请求提供了别名方式的api,具体如下
方法描述axios.get(url [, config])发送get请求axios.delete(url [, config])发送delete请求axios.post(url [, data[, config]])发送post请求axios.put(url [, data[, config]])发送put请求
我们目前只关注get和post请求所以在上述的入门案例中我们可以将get请求代码改写成如下
axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result {console.log(result.data);
})post请求改写成如下
axios.post(http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,id1).then(result {console.log(result.data);
})1.3.4 案例 需求基于Vue及Axios完成数据的动态加载展示如下图所示 其中数据是来自于后台程序的地址是http://yapi.smart-xwork.cn/mock/169327/emp/list 分析 前端首先是一张表格我们缺少数据而提供数据的地址已经有了所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢页面的数据应该是页面加载完成自动发送请求展示数据所以我们需要借助vue的mounted钩子函数。那么拿到数据了我们该怎么将数据显示表格中呢这里就得借助v-for指令来遍历数据展示数据。 步骤 首先创建文件提前准备基础代码包括表格以及vue.js和axios.js文件的引入我们需要在vue的mounted钩子函数中发送ajax请求获取数据拿到数据数据需要绑定给vue的data属性在tr标签上通过v-for指令遍历数据展示数据 代码实现 首先创建文件提前准备基础代码包括表格以及vue.js和axios.js文件的引入 提供初始代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios-案例/titlescript srcjs/axios-0.18.0.js/scriptscript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/trtr aligncenter td1/tdtdTom/tdtdimg src width70px height50px/tdtdspan男/span!-- span女/span--/tdtd班主任/tdtd2009-08-09/tdtd2009-08-09 12:00:00/td/tr/table/div
/body
scriptnew Vue({el: #app,data: {}});
/script
/html在vue的mounted钩子函数编写Ajax请求请求数据代码如下 mounted () {//发送异步请求,加载数据axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result {})
}ajax请求的数据我们应该绑定给vue的data属性之后才能进行数据绑定到视图并且浏览器打开后台地址数据返回格式如下图所示 因为服务器响应的json中的data属性才是我们需要展示的信息所以我们应该将员工列表信息赋值给vue的data属性代码如下 //发送异步请求,加载数据
axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result {this.emps result.data.data;
})其中data中生命emps变量代码如下 data: {emps:[]
},在tr标签上通过v-for指令遍历数据展示数据其中需要注意的是图片的值需要使用vue的属性绑定男女的展示需要使用条件判断其代码如下 tr aligncenter v-for(emp,index) in empstd{{index 1}}/tdtd{{emp.name}}/tdtdimg :srcemp.image width70px height50px/tdtdspan v-ifemp.gender 1男/spanspan v-ifemp.gender 2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td
/tr完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios-案例/titlescript srcjs/axios-0.18.0.js/scriptscript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/trtr aligncenter v-for(emp,index) in empstd{{index 1}}/tdtd{{emp.name}}/tdtdimg :srcemp.image width70px height50px/tdtdspan v-ifemp.gender 1男/spanspan v-ifemp.gender 2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td/tr/table/div
/body
scriptnew Vue({el: #app,data: {emps:[]},mounted () {//发送异步请求,加载数据axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result {console.log(result.data);this.emps result.data.data;})}});
/script
/html2 前后台分离开发
2.1 前后台分离开发介绍
在之前的课程中我们介绍过前端开发有2种方式前后台混合开发和前后台分离开发。
前后台混合开发顾名思义就是前台后台代码混在一起开发如下图所示 这种开发模式有如下缺点
沟通成本高后台人员发现前端有问题需要找前端人员修改前端修改成功再交给后台人员使用分工不明确后台开发人员需要开发后台代码也需要开发部分前端代码。很难培养专业人才不便管理所有的代码都在一个工程中不便维护和扩展前端代码更新和后台无关但是需要整个工程包括后台一起重新打包部署。
所以我们目前基本都是采用的前后台分离开发方式如下图所示 我们将原先的工程分为前端工程和后端工程这2个工程然后前端工程交给专业的前端人员开发后端工程交给专业的后端人员开发。前端页面需要数据可以通过发送异步请求从后台工程获取。但是我们前后台是分开来开发的那么前端人员怎么知道后台返回数据的格式呢后端人员开发怎么知道前端人员需要的数据格式呢所以针对这个问题我们前后台统一指定一套规范我们前后台开发人员都需要遵循这套规范开发这就是我们的接口文档。接口文档有离线版和在线版本接口文档示可以查询今天提供资料/接口文档示例里面的资料。那么接口文档的内容怎么来的呢是我们后台开发者根据产品经理提供的产品原型和需求文档所撰写出来的产品原型示例可以参考今天提供资料/页面原型里面的资料。
那么基于前后台分离开发的模式下我们后台开发者开发一个功能的具体流程如何呢如下图所示 需求分析首先我们需要阅读需求文档分析需求理解需求。接口定义查询接口文档中关于需求的接口的定义包括地址参数响应数据类型等等前后台并行开发各自按照接口文档进行开发实现需求测试前后台开发完了各自按照接口文档进行测试前后段联调测试前段工程请求后端工程测试功能
2.2 YAPI
2.2.1 YAPI介绍
前后台分离开发中我们前后台开发人员都需要遵循接口文档所以接下来我们介绍一款撰写接口文档的平台。
YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。
其官网地址http://yapi.smart-xwork.cn/
YApi主要提供了2个功能
API接口管理根据需求撰写接口包括接口的地址参数响应等等信息。Mock服务模拟真实接口生成接口的模拟测试数据用于前端的测试。
2.2.2 接口文档管理
接下来我们演示一下YApi是如何管理接口文档的。
首先我们登录YAPI的官网然后使用github或者百度账号登录没有的话去注册一个如下图所示 登录进去后在个人空间中选择项目列表-添加测试项目效果如图所示 然后点击创建的项目进入到项目中紧接着先添加接口的分类如下图所示 然后我们选择当前创建的分类创建接口信息如下图所示 紧接着我们来到接口的编辑界面对接口做生层次的定制例如接口的参数接口的返回值等等效果图下图所示 添加接口的请求参数如下图所示 添加接口的返回值如下图所示 然后保存上述设置紧接着我们可以来到接口的预览界面查询接口的信息其效果如下图所示篇幅有限只截取部分 最后我们还可以设置接口的mock信息 来到接口的Mock设置窗口如下图所示 紧接着我们来到接口的预览界面直接点击Mock地址如下图所示 我们发现浏览器直接打开并返回如下数据 如上步骤就是YAPI接口平台中对于接口的配置步骤。
3 前端工程化
3.1 前端工程化介绍
我们目前的前端开发中当我们需要使用一些资源时例如vue.js和axios.js文件都是直接再工程中导入的如下图所示 但是上述开发模式存在如下问题
每次开发都是从零开始比较麻烦多个页面中的组件共用性不好js、图片等资源没有规范化的存储目录没有统一的标准不方便维护
所以现在企业开发中更加讲究前端工程化方式的开发主要包括如下4个特点
模块化将js和css等做成一个个可复用模块组件化我们将UI组件css样式js行为封装成一个个的组件便于管理规范化我们提供一套标准的规范的目录接口和编码规范所有开发人员遵循这套规范自动化项目的构建测试部署全部都是自动完成
所以对于前端工程化说白了就是在企业级的前端项目开发中把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。
3.2 前端工程化入门
3.2.1 环境准备
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能
统一的目录结构本地调试热部署单元测试集成打包上线
我们需要运行Vue-cli需要依赖NodeJSNodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS然后才能安装Vue-cli NodeJS安装和Vue-cli安装 详细安装步骤请参考资料/NodeJS安装文档/NodeJS安装文档.md文件 3.2.2 Vue项目简介
环境准备好了接下来我们需要通过Vue-cli创建一个vue项目然后再学习一下vue项目的目录结构。Vue-cli提供了如下2种方式创建vue项目: 命令行直接通过命令行方式创建vue项目 vue create vue-project01图形化界面通过命令先进入到图形化界面然后再进行vue工程的创建 vue ui图形化界面如下
3.2.2.1 创建vue项目
此处我们通过第二种图形化界面方式给大家演示。
首先我们再桌面创建vue文件夹然后双击进入文件夹来到地址目录输入cmd然后进入到vue文件夹的cmd窗口界面如下图所示 然后进入如下界面 然后再当前目录下直接输入命令vue ui进入到vue的图形化界面如下图所示
然后我门选择创建按钮在vue文件夹下创建项目如下图所示 然后来到如下界面进行vue项目的创建 然后预设模板选择手动如下图所示
然后再功能页面开启路由功能如下图所示
然后再配置页面选择语言版本和语法检查规范如下图所示
然后创建项目进入如下界面
最后我们只需要等待片刻即可进入到创建创建成功的界面如下图所示
到此vue项目创建结束
3.2.2.2 vue项目目录结构介绍
我们通过VS Code打开之前创建的vue文件夹打开之后呈现如下图所示页面
vue项目的标准目录结构以及目录对应的解释如下图所示: 其中我们平时开发代码就是在src目录下
3.2.2.3 运行vue项目
那么vue项目开发好了我们应该怎么运行vue项目呢主要提供了2种方式
第一种方式通过VS Code提供的图形化界面 如下图所示注意NPM脚本窗口默认不显示可以参考本节的最后调试出来 点击之后我们等待片刻即可运行在终端界面中我们发现项目是运行在本地服务的8080端口我们直接通过浏览器打开地址 最终浏览器打开后呈现如下界面表示项目运行成功 其实此时访问的是 src/App.vue这个根组件此时我们打开这个组件修改代码添加内容Vue
只要我们保存更新的代码我们直接打开浏览器不需要做任何刷新发现页面呈现内容发生了变化如下图所示
这就是我们vue项目的热更新功能
对于8080端口经常被占用所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容添加如下代码
devServer:{port:7000
}如下图所示然后我们关闭服务器并且重新启动
重新启动如下图所示
端口更改成功可以通过浏览器访问7000端口来访问我们之前的项目 第二种方式命令行方式 直接基于cmd命令窗口在vue目录下执行输入命令npm run serve即可如下图所示
补充NPM脚本窗口调试出来
第一步通过设置/用户设置/扩展/MPM更改NPM默认配置如下图所示
然后重启VS Code并且双击打开package.json文件然后点击资源管理器处的3个小点勾选npm脚本选项如图所示 然后就能都显示NPM脚本小窗口了。
3.2.3 Vue项目开发流程
那么我们访问的首页是index.html但是我们找到public/index.html文件打开之后发现里面没有什么代码但是能够呈现内容丰富的首页如下图所示
我们自习观察发现index.html的代码很简洁但是浏览器所呈现的index.html内容却很丰富代码和内容不匹配所以vue是如何做到的呢接下来我们学习一下vue项目的开发流程。
对于vue项目index.html文件默认是引入了入口函数main.js文件我们找到src/main.js文件其代码如下
import Vue from vue
import App from ./App.vue
import router from ./routerVue.config.productionTip falsenew Vue({router,render: h h(App)
}).$mount(#app)
上述代码中包括如下几个关键点
import: 导入指定文件并且重新起名。例如上述代码import App from ./App.vue导入当前目录下得App.vue并且起名为Appnew Vue(): 创建vue对象$mount(‘#app’);将vue对象创建的dom对象挂在到idapp的这个标签区域中作用和之前学习的vue对象的le属性一致。router: 路由详细在后面的小节讲解render: 主要使用视图的渲染的。
来到public/index.html中我们删除div的idapp属性打开浏览器发现之前访问的首页一片空白如下图所示这样就证明了我们main.js中通过代码挂在到index.html的idapp的标签区域的。
此时我们知道了vue创建的dom对象挂在到idapp的标签区域但是我们还是没有解决最开始的问题首页内容如何呈现的这就涉及到render中的App了如下图所示
那么这个App对象怎么回事呢我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分
template: 模板部分主要是HTML代码用来展示页面主体结构的script: js代码区域主要是通过js代码来控制模板的数据来源和行为的style: css样式部分主要通过css样式控制模板的页面效果得
如下图所示就是一个vue组件的小案例
此时我们可以打开App.vue观察App.vue的代码其中可以发现App.vue组件的template部分内容和我们浏览器访问的首页内容是一致的如下图所示
接下来我们可以简化模板部分内容添加script部分的数据模型删除css样式完整代码如下
templatediv idapp{{message}}/div
/templatescript
export default {data(){return {message:hello world}}
}
/script
style/style保存直接回到浏览器我们发现首页展示效果发生了变化如下图所示
4 Vue组件库Element
4.1 Element介绍
不知道同学们还否记得我们之前讲解的前端开发模式MVVM我们之前学习的vue是侧重于VM开发的主要用于数据绑定到视图的那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架主要用于开发美观的页面的。
Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。
Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比可以发现ElementUI提供的各式各样好看的按钮 ElementUI的学习方式和我们之前的学习方式不太一样对于ElementUI我们作为一个后台开发者只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。其官网地址https://element.eleme.cn/#/zh-CN我们主要学习的是ElementUI中提供的常用组件至于其他组件同学们可以通过我们这几个组件的学习掌握到ElementUI的学习技巧然后课后自行学习。
4.2 快速入门
首先我们要掌握ElementUI的快速入门接下来同学们就一起跟着步骤来操作一下。
首先我们先要安装ElementUI的组件库打开VS Code停止之前的项目然后在命令行输入如下命令
npm install element-ui2.15.3 具体操作如下图所示
然后我们需要在main.js这个入口js文件中引入ElementUI的组件库其代码如下
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);具体操作如图所示
然后我们需要按照vue项目的开发规范在src/views目录下创建一个vue组件文件注意组件名称后缀是.vue并且在组件文件中编写之前介绍过的基本组件语法代码如下
template/templatescript
export default {}
/scriptstyle/style具体操作如图所示 最后我们只需要去ElementUI的官网找到组件库然后找到按钮组件抄写代码即可具体操作如下图所示 然后找到按钮的代码如下图所示 紧接着我们复制组件代码到我们的vue组件文件中操作如下图所示 最后我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件具体操作步骤如下 然后App.vue组件中的具体代码如下代码是我们通过上述步骤引入element-view组件时自动生成的。
templatediv idapp!-- {{message}} --element-view/element-view/div
/templatescript
import ElementView from ./views/Element/ElementView.vue
export default {components: { ElementView },data(){return {message:hello world}}
}
/script
style/style
然后运行我们的vue项目浏览器直接访问之前的7000端口展示效果如下图所示
到此我们ElementUI的入门程序编写成功
4.3 Element组件
接下来我们来学习一下ElementUI的常用组件对于组件的学习比较简单我们只需要参考官方提供的代码然后复制粘贴即可。
4.3.1 Table表格
4.3.1.1 组件演示
Table 表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。
接下来我们通过代码来演示。
首先我们需要来到ElementUI的组件库中找到表格组件如下图所示 然后复制代码到我们之前的ElementVue.vue组件中需要注意的是我们组件包括了3个部分如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示
template模板部分
script脚本部分
ElementView.vue组件文件整体代码如下
templatediv!-- Button按钮 --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row!-- Table表格 --el-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table/div
/templatescript
export default {data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}}
}
/scriptstyle/style
此时回到浏览器我们页面呈现如下效果 4.3.1.2 组件属性详解
那么我们的ElementUI是如何将数据模型绑定到视图的呢主要通过如下几个属性
data: 主要定义table组件的数据模型prop: 定义列的数据应该绑定data中定义的具体的数据模型label: 定义列的标题width: 定义列的宽度
其具体示例含义如下图所示 PS:Element组件的所有属性都可以在组件页面的最下方找到如下图所示 4.3.2 Pagination分页
4.3.2.1 组件演示
Pagination: 分页组件主要提供分页工具条相关功能。其展示效果图下图所示
接下来我们通过代码来演示功能。
首先在官网找到分页组件我们选择带背景色分页组件如下图所示 然后复制代码到我们的ElementView.vue组件文件的template中拷贝如下代码
el-paginationbackgroundlayoutprev, pager, next:total1000
/el-pagination浏览器打开呈现如下效果 4.3.2.2 组件属性详解
对于分页组件我们需要关注的是如下几个重要属性可以通过查阅官网组件中最下面的组件属性详细说明得到
background: 添加北京颜色也就是上图蓝色背景色效果。layout: 分页工具条的布局其具体值包含sizes, prev, pager, next, jumper, -, total, slot 这些值total: 数据的总数量
然后根据官方分页组件提供的layout属性说明如下图所示 我们修改layout属性如下 layoutsizes,prev, pager, next,jumper,total浏览器打开呈现如下效果 发现在原来的功能上添加了一些额外的功能其具体对应关系如下图所示
4.3.2.3 组件事件详解
对于分页组件除了上述几个属性还有2个非常重要的事件我们需要去学习
size-change pageSize 改变时会触发current-change currentPage 改变时会触发
其官方详细解释含义如下图所示
对于这2个事件的参考代码我们同样可以通过官方提供的完整案例中找到如下图所示
然后我们找到对应的代码首先复制事件复制代码如下
size-changehandleSizeChange
current-changehandleCurrentChange此时Panigation组件的template完整代码如下
!-- Pagination分页 --
el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000
/el-pagination紧接着需要复制事件需要的2个函数需要注意methods属性和data同级其代码如下
methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},此时Panigation组件的script部分完整代码如下
script
export default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}}
}
/script回到浏览器中我们f12打开开发者控制台然后切换当前页码和切换每页显示的数量呈现如下效果 4.3.3 Dialog对话框
4.3.3.1 组件演示
Dialog: 在保留当前页面状态的情况下告知用户并承载相关操作。其企业开发应用场景示例如下图所示
首先我们需要在ElementUI官方找到Dialog组件如下图所示 然后复制如下代码到我们的组件文件的template模块中
brbr
!--Dialog 对话框 --
!-- Table --
el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-column propertydate label日期 width150/el-table-columnel-table-column propertyname label姓名 width200/el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table
/el-dialog并且复制数据模型script模块中 gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}],dialogTableVisible: false,其完整的script部分代码如下
script
export default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},data() {return {gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}],dialogTableVisible: false,tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}}
}
/script然后我们打开浏览器点击按钮呈现如下效果 4.3.3.2 组件属性详解
那么ElementUI是如何做到对话框的显示与隐藏的呢是通过如下的属性
visible.sync 是否显示 Dialog
具体释意如下图所示 visible属性绑定的dialogTableVisble属性一开始默认是false所以对话框隐藏然后我们点击按钮触发事件修改属性值为true
然后对话框visible属性值为true所以对话框呈现出来。
4.3.4 Form表单
4.3.4.1 组件演示
Form 表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。
表单在我们前端的开发中使用的还是比较多的接下来我们学习这个组件与之前的流程一样我们首先需要在ElementUI的官方找到对应的组件示例如下图所示 我们的需求效果是在对话框中呈现表单内容类似如下图所示 所以首先我们先要根据上一小结所学习的内容制作一个新的对话框其代码如下
brbr
!-- Dialog对话框-Form表单 --
el-button typetext clickdialogFormVisible true打开嵌套Form的 Dialog/el-buttonel-dialog titleForm表单 :visible.syncdialogFormVisible/el-dialog还需要注意的是针对这个新的对话框我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示代码如下 dialogFormVisible: false,打开浏览器此时呈现如图所示的效果 然后我们复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中但是此处官方提供的表单项标签太多所以我们只需要保留前面3个表单项组件其他多余的删除所以最终template部分代码如下
el-dialog titleForm表单 :visible.syncdialogFormVisibleel-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelform.date2 stylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog观察上述代码我们发现其中表单项标签使用了v-model双向绑定所以我们需要在vue的数据模型中声明变量同样可以从官方提供的代码中复制粘贴但是我们需要去掉我们不需要的属性通过观察上述代码我们发现双向绑定的属性有4个分别是form.name,form.region,form.date1,form.date2,所以最终数据模型如下 form: {name: ,region: ,date1: ,date2:},同样官方的代码中在script部分中还提供了onSubmit函数表单的立即创建按钮绑定了此函数我们可以输入表单的内容而表单的内容是双向绑定到form对象的所以我们修改官方的onSubmit函数如下即可而且我们还需要关闭对话框最终函数代码如下 onSubmit() {console.log(this.form); //输出表单内容到控制台this.dialogFormVisiblefalse; //关闭表案例的对话框}然后打开浏览器我们打开对话框并且输入表单内容点击立即创建按钮呈现如下效果 最终vue组件完整代码如下同学们可以针对form表单案例参考该案例对应的template部分和script部分代码
templatediv!-- Button按钮 --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row!-- Table表格 --el-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-tablebr!-- Pagination分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000/el-paginationbrbr!--Dialog 对话框 --!-- Table --el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-column propertydate label日期 width150/el-table-columnel-table-column propertyname label姓名 width200/el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table/el-dialogbrbr!-- Dialog对话框-Form表单 --el-button typetext clickdialogFormVisible true打开嵌套Form的 Dialog/el-buttonel-dialog titleForm表单 :visible.syncdialogFormVisibleel-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelform.date2 stylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog/div
/templatescript
export default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});},//表单案例的提交事件onSubmit() {console.log(this.form); //输出表单内容到控制台this.dialogFormVisiblefalse; //关闭表案例的对话框}},data() {return {//表单案例的数据双向绑定form: {name: ,region: ,date1: ,date2:},gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}],dialogTableVisible: false,dialogFormVisible: false, //控制form表单案例的对话框tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}}
}
/scriptstyle/style
4.4 案例
4.4.1 案例需求
参考 资料/页面原型/tlias智能学习辅助系统/首页.html 文件浏览器打开点击页面中的左侧栏的员工管理如下所示 需求说明 制作类似格式的页面 即上面是标题左侧栏是导航右侧是数据展示区域 右侧需要展示搜索表单 右侧表格数据是动态展示的数据来自于后台 实际示例效果如下图所示
数据Mock地址http://yapi.smart-xwork.cn/mock/169327/emp/list浏览器打开数据格式如下图所示 通过观察数据我们发现返回的json数据的data属性中才是返回的人员列表信息
4.4.2 案例分析
整个案例相对来说功能比较复杂需求较多所以我们需要先整体后局部细节。整个页面我们可以分为3个部分如下图所示 一旦这样拆分那么我们的思路就清晰了主要步骤如下
创建页面完成页面的整体布局规划然后分别针对3个部分进行各自组件的具体实现针对于右侧核心内容展示区域需要使用异步加载数据以表格渲染数据
4.4.3 代码实现
4.4.3.1 环境搭建
首先我们来到VS Code中在views目录下创建 tlias/EmpView.vue这个vue组件并且编写组件的基本模板代码其效果如下图所示其中模板代码在之前的案例中已经提供此处不再赘述 并且需要注意的是我们默认访问的是App.vue这个组件而我们App.vue这个组件之前是引入了element-view这个组件此时我们需要修改成引入emp-view这个组件并且注释掉之前的element-view这个组件此时App.vue整体代码如下
templatediv idapp!-- {{message}} --!-- element-view/element-view --emp-view/emp-view/div
/templatescript
import EmpView ./views/tlias/EmpView.vue
// import ElementView ./views/Element/ElementView.vue
export default {components: {EmpView },data(){return {message:hello world}}
}
/script
style/style
打开浏览器我们发现之前的element案例内容没了从而呈现的是一片空白那么接下来我们就可以继续开发了。
4.4.3.2 整体布局
此处肯定不需要我们自己去布局的我们直接来到ElementUI的官网找到布局组件如下图所示 从官网提供的示例我们发现由现成的满足我们需求的布局所以我们只需要做一位代码搬运工即可。拷贝官方提供的如下代码直接粘贴到我们EmpView.vue组件的template模块中即可
el-containerel-headerHeader/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container
/el-container打开浏览器此时呈现如下效果 因为我们没有拷贝官方提供的css样式所以和官方案例的效果不太一样但是我们需要的布局格式已经有具体内容我们有自己的安排。首先我们需要调整整体布局的高度所以我们需要在el-container上添加一些样式代码如下
!-- 设置最外层容器高度为700px,在加上一个很细的边框 --
el-container styleheight: 700px; border: 1px solid #eee到此我们布局功能就完成了
4.4.3.3 顶部标题
对于顶部我们需要实现的效果如下图所示 所以我们需要修改顶部的文本内容并且提供背景色的css样式具体代码如下
el-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-header此时浏览器打开呈现效果如下图所示 至此我们的顶部标题就搞定了
此时整体代码如下
templatediv!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container/el-container/div
/templatescript
export default {}
/scriptstyle/style
4.4.3.4 左侧导航栏
接下来我们来实现左侧导航栏那么还是在上述布局组件中提供的案例找到左侧栏的案例如下图所示 所以我们依然只需要搬运代码然后做简单修改即可。官方提供的导航太多我们不需要所以我们需要做删减在我们的左侧导航栏中粘贴如下代码即可
el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-submenu
/el-menu删减前后对比图 然后我们打开浏览器展示如下内容 最后我们只需要替换文字内容即可。
此时整体代码如下
templatediv!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-main/el-main/el-container/el-container/div
/templatescript
export default {}
/scriptstyle/style
4.4.3.5 右侧核心内容
4.4.3.5.1 表格编写
右侧显示的是表单和表格首先我们先来完成表格的制作我们同样在官方直接找表格组件也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例如下图所示 然后找到表格的代码复制到我们布局容器的主题区域template模块代码如下
el-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-column
/el-table表格是有数据模型的绑定的所以我们需要继续拷贝数据模型代码如下 data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}]}浏览器打开呈现如下效果 但是这样的表格和数据并不是我们所需要的所以接下来我们需要修改表格添加列并且修改列名。代码如下
el-table-column propname label姓名 width180/el-table-column
el-table-column propimage label图像 width180/el-table-column
el-table-column propgender label性别 width140/el-table-column
el-table-column propjob label职位 width140/el-table-column
el-table-column propentrydate label入职日期 width180/el-table-column
el-table-column propupdatetime label最后操作时间 width230/el-table-column
el-table-column label操作 el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button
/el-table-column需要注意的是我们列名的prop属性值得内容并不是乱写的因为我们将来需要绑定后台的数据的所以如下图所示 并且此时我们data中之前的数据模型就不可用了所以需要清空数据设置为空数组代码 如下 data() {return {tableData: []}}此时打开浏览器呈现如下效果 此时整体页面代码如下
templatediv!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-mainel-table :datatableDatael-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180/el-table-columnel-table-column propgender label性别 width140/el-table-columnel-table-column propjob label职位 width140/el-table-columnel-table-column propentrydate label入职日期 width180/el-table-columnel-table-column propupdatetime label最后操作时间 width230/el-table-columnel-table-column label操作 el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button/el-table-column/el-table/el-main/el-container/el-container/div
/templatescript
export default {data() {return {tableData: []}}
}
/scriptstyle/style
4.4.3.5.2 表单编写
在表格的上方还需要如下图所示的表单 所以接下来我们需要去ElementUI官网在表单组件中找到与之类似的示例加以修改从而打成我们希望的效果官方示例如下图所示 所以我们直接拷贝代码主体区域的table组件的上方即可并且我们需要修改数据绑定的的变量名最终代码如下 !-- 表单 --
el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.gender placeholder性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item
/el-form代码修改前后对比图 既然我们表单使用v-model进行数据的双向绑定了所以我们紧接着需要在data中定义searchForm的数据模型代码如下 data() {return {tableData: [],searchForm:{name:,gender:}}}而且表单的提交按钮绑定了onSubmit函数所以我们还需要在methods中定义onSubmit函数代码如下
注意的是methods属性需要和data属性同级 methods:{onSubmit:function(){console.log(this.searchForm);}
}浏览器打开如图所示 可以发现我们还缺少一个时间所以可以从elementUI官网找到日期组件如下图所示 参考官方代码然后在我们之前的表单中添加一个日期表单具体代码如下 /el-form-itemel-form-item label入职日期el-date-pickerv-modelsearchForm.entrydatetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-item我们添加了双向绑定所以我们需要在data的searchForm中定义出来需要注意的是这个日期包含2个值所以我们定义为数组代码如下 searchForm:{name:,gender:,entrydate:[]
}此时我们打开浏览器填写表单并且点击查询按钮查看浏览器控制台可以看到表单的内容效果如下图所示 此时完整代码如下所示
templatediv!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-main!-- 表单 --el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.gender placeholder性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-item label入职日期el-date-pickerv-modelsearchForm.entrydatetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form!-- 表格 --el-table :datatableDatael-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180/el-table-columnel-table-column propgender label性别 width140/el-table-columnel-table-column propjob label职位 width140/el-table-columnel-table-column propentrydate label入职日期 width180/el-table-columnel-table-column propupdatetime label最后操作时间 width230/el-table-columnel-table-column label操作 el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button/el-table-column/el-table/el-main/el-container/el-container/div
/templatescript
export default {data() {return {tableData: [],searchForm:{name:,gender:,entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);}}
}
/scriptstyle/style
4.4.3.5.3 分页工具栏
分页条我们之前做过所以我们直接找到之前的案例复制即可代码如下
其中template模块代码如下 !-- Pagination分页 --
el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000
/el-pagination同时methods中需要声明2个函数代码如下
handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}此时打开浏览器效果如下图所示 此时整体代码如下
templatediv!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-main!-- 表单 --el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.gender placeholder性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-item label入职日期el-date-pickerv-modelsearchForm.entrydatetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form!-- 表格 --el-table :datatableDatael-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180/el-table-columnel-table-column propgender label性别 width140/el-table-columnel-table-column propjob label职位 width140/el-table-columnel-table-column propentrydate label入职日期 width180/el-table-columnel-table-column propupdatetime label最后操作时间 width230/el-table-columnel-table-column label操作 el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button/el-table-column/el-table!-- Pagination分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000/el-pagination/el-main/el-container/el-container/div
/templatescript
export default {data() {return {tableData: [],searchForm:{name:,gender:,entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);},handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}}
}
/scriptstyle/style
4.4.3.6 异步数据加载
4.4.3.6.1 异步加载数据
对于案例我们只差最后的数据了而数据的mock地址已经提供http://yapi.smart-xwork.cn/mock/169327/emp/list
我们最后要做的就是异步加载数据所以我们需要使用axios发送ajax请求。
在vue项目中对于axios的使用分为如下2步
安装axios: npm install axios需要使用axios时导入axios: import axios ‘axios’
接下来我们先来到项目的执行终端然后输入命令安装axios具体操作如下图所示 然后重启项目来到我们的EmpView.vue组件页面通过import命令导入axios代码如下
import axios axios;那么我们什么时候发送axios请求呢页面加载完成自动加载所以可以使用之前的mounted钩子函数并且我们需要将得到的员工数据要展示到表格所以数据需要赋值给数据模型tableData所以我们编写如下代码 mounted(){axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(resp{this.tableDataresp.data.data; //响应数据赋值给数据模型});}此时浏览器打开呈现如下效果 但是很明显性别和图片的内容显示不正确所以我们需要修复。
4.4.3.6.2 性别内容展示修复
首先我们来到ElementUI提供的表格组件找到如下示例 我们仔细对比效果和功能实现代码发现其中涉及2个非常重要的点
template : 用于自定义列的内容 slot-scope: 通过属性的row获取当前行的数据
所以接下来我们可以通过上述的标签自定义列的内容即可修改性别列的内容代码如下 el-table-column propgender label性别 width140template slot-scopescope{{scope.row.gender1?男:女}}/template/el-table-column此时打开浏览器效果如下图所示性别一列的值修复成功 4.4.3.6.3 图片内容展示修复
图片内容的修复和上述一致需要借助template标签自定义列的内容需要需要展示图片直接借助img标签即可并且需要设置图片的宽度和高度所以直接修改图片列的代码如下
el-table-column propimage label图像 width180template slot-scopescopeimg :srcscope.row.image width100px height70px/template
/el-table-column此时回到浏览器效果如下图所示图片展示修复成功 此时整个案例完整其完整代码如下
templatediv!-- 设置最外层容器高度为700px,在加上一个很细的边框 --el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width230px styleborder: 1px solid #eeeel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item index1-1部门管理/el-menu-itemel-menu-item index1-2员工管理/el-menu-item/el-submenu/el-menu/el-asideel-main!-- 表单 --el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.gender placeholder性别el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-item label入职日期el-date-pickerv-modelsearchForm.entrydatetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form!-- 表格 --el-table :datatableDatael-table-column propname label姓名 width180/el-table-columnel-table-column propimage label图像 width180template slot-scopescopeimg :srcscope.row.image width100px height70px/template/el-table-columnel-table-column propgender label性别 width140template slot-scopescope{{scope.row.gender1?男:女}}/template/el-table-columnel-table-column propjob label职位 width140/el-table-columnel-table-column propentrydate label入职日期 width180/el-table-columnel-table-column propupdatetime label最后操作时间 width230/el-table-columnel-table-column label操作 el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button/el-table-column/el-table!-- Pagination分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000/el-pagination/el-main/el-container/el-container/div
/templatescript
import axios axios
export default {data() {return {tableData: [],searchForm:{name:,gender:,entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);},handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},mounted(){axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(resp{this.tableDataresp.data.data;});}
}
/scriptstyle/style
5 Vue路由
5.1 路由介绍
将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级其结构如下 此时我们希望基于4.4案例中的功能实现点击侧边栏的部门管理显示部门管理的信息点击员工管理显示员工管理的信息效果如下图所示 这就需要借助我们的vue的路由功能了。
前端路由URL中的hash(#号之后的内容与组件之间的对应关系如下图所示 当我们点击左侧导航栏时浏览器的地址栏会发生变化路由自动更新显示与url所对应的vue组件。
而我们vue官方提供了路由插件Vue Router,其主要组成如下
VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件router-link请求链接组件浏览器会解析成arouter-view动态视图组件用来渲染展示与路由路径对应的组件
其工作原理如下图所示 首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;
然后我们页面提供一个router-link组件,用户点击发出路由请求;
接着我们的VueRouter根据路由请求在路由表中找到对应的vue组件
最后VueRouter会切换router-view中的组件从而进行视图的更新
5.2 路由入门
接下来我们来演示vue的路由功能。
首先我们需要先安装vue-router插件可以通过如下命令
npm install vue-router3.5.1但是我们不需要安装因为当初我们再创建项目时已经勾选了路由功能已经安装好了。
然后我们需要在src/router/index.js文件中定义路由表根据其提供的模板代码进行修改最终代码如下
import Vue vue
import VueRouter vue-routerVue.use(VueRouter)const routes [{path: /emp, //地址hashname: emp,component: () import(../views/tlias/EmpView.vue) //对应的vue组件},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)}
]const router new VueRouter({routes
})export default router
注意需要去掉没有引用的import模块。
在main.js中我们已经引入了router功能如下图所示 路由基本信息配置好了路由表已经被加载此时我们还缺少2个东西就是router-lin和router-view,所以我们需要修改2个页面EmpView.vue和DeptView.vue我们左侧栏的2个按钮为router-link,其代码如下
el-menu-item index1-1router-link to/dept部门管理/router-link
/el-menu-item
el-menu-item index1-2router-link to/emp员工管理/router-link
/el-menu-item然后我们还需要在内容展示区域即App.vue中定义route-view作为组件的切换其App.vue的完整代码如下
templatediv idapp!-- {{message}} --!-- element-view/element-view --!-- emp-view/emp-view --router-view/router-view/div
/templatescript
// import EmpView ./views/tlias/EmpView.vue
// import ElementView ./views/Element/ElementView.vue
export default {components: { },data(){return {message:hello world}}
}
/script
style/style
但是我们浏览器打开地址 http://localhost:7000/ 发现一片空白因为我们默认的路由路径是/,但是路由配置中没有对应的关系
所以我们需要在路由配置中/对应的路由组件代码如下
const routes [{path: /emp,name: emp,component: () import(../views/tlias/EmpView.vue)},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)},{path: /,redirect:/emp //表示重定向到/emp即可},
]此时我们打开浏览器访问http://localhost:7000 发现直接访问的是emp的页面并且能够进行切换了其具体如下图所示 到此我们的路由实现成功。
6 打包部署
我们的前端工程开发好了但是我们需要发布那么如何发布呢主要分为2步
前端工程打包通过nginx服务器发布前端工程
6.1 前端工程打包
接下来我们先来对前端工程进行打包
我们直接通过VS Code的NPM脚本中提供的build按钮来完整如下图所示直接点击即可 然后会在工程目录下生成一个dist目录用于存放需要发布的前端资源如下图所示 6.2 部署前端工程
6.2.1 nginx介绍
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。
niginx在windows中的安装是比较方便的直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下直接解压即可如下图所示就是nginx的解压目录以及目录结构说明 很明显我们如果要发布直接将资源放入到html目录中。
6.2.2 部署
将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下如下图所示 然后我们通过双击nginx下得nginx.exe文件来启动nginx如下图所示 nginx服务器的端口号是80所以启动成功之后我们浏览器直接访问http://localhost:80 即可其中80端口可以省略其浏览器展示效果如图所示 到此我们的前端工程发布成功。
PS: 如果80端口被占用我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示
