页面原型需求案例分析出接口文档

管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务地址

http://yapi.smart-xwork.cn/2个功能

API接口管理Mock服务通过YAPI平台模拟真实接口生成接口的模拟测试数据用于前端工程测试。

这样即使后端的人员没有开发完毕前端开发人员也可以使用YAPI平台所提供的Mock地址来进行模拟数据的测试。

可以部署在公司内部服务器公司内部自己使用。

也可以使用YAPI官方提供的公网部署的YAPI平台注册一个账号使用。

2.1、添加项目

点击此地址可以看到会自动的生成Mock测试数据前端人员在测试的时候就可以直接访问此地址进行测试。

2.6、高级Mock

当然这个返回数据里面的值是个比较宽泛的数据可以在高级Mock功能中手动指定当前接口生成的测试数据是什么。

再次点击预览中的MocK地址可以看到生成的测试数据已经被改变了。

第四节

缺点在大型项目开发中会存在很多问题每一次开发一个功能都是从0开始多个页面当中的组件或者是功能复用性并不好并且js文件、图片文件没有规范化的存储结构和编码规范所有开发人员都遵循这一套统一的规范进行开发。

问题使用前端工程化以后在使用vue开发大型项目的时候我们就需要考虑代码的结构部署以及代码的单元测试等事情。

如果每一个项目都手动的完成这些工作那么效率是非常低下的。

所以通常会使用一些现成的工具来帮助我们完成这些事情这个工具就是vue官方提供的脚手架工具。

介绍Vue-cli

是Vue官方提供的一个脚手架用于快速生成一个Vue的项目模板。

2.1、安装NodeJS

https://registry.npm.taobao.org

安装Vue-cli

ui回车后就会vue的项目管理器图形化界面在此界面中再来创建vue项目

在F盘新创建一个文件夹以管理员身份打开命令提示符窗口在窗口中进入到这个新创建的文件夹已经创建好vue项目了

3.2、项目目录结构

说明图形化界面方式需要使用npm脚本运行vue项目所以要先打开npm脚本工具栏。

重启VS

Code并且双击打开package.json文件然后点击资源管理器处的3个小点勾选npm脚本选项如图所示

以管理员方式打开vscode之后使用npm运行vue项目构建完毕后它会自动启动一个服务运行在8080端口号上所以可以通过此链接访问当前项目。

这个页面是vue项目中自动提供的根组件App.vue这个组件指的就是一个页面。

Home之后ctrls保存发现没有重启项目也没有刷新浏览器页面仍然发生了变化这就是vue项目提供的热部署功能。

在vue的配置文件vue.config.js中进行修改ctrls进行保存。

由于修改了端口号所以在终端中停掉当前的服务之后重新启动。

重新启动

启动工程化的vue项目访问到的页面其实就是vue项目项目默认提供的首页index.html在public下它是默认引入了入口文件main.js此文件是vue项目的入口js文件在src下的App.vue这个组件并且给它起个名字为App之后就可以在这个main.js文件中使用这个App组件了。

new

ES6语法如果属性名和属性值一致那么冒号后面的部分可以省略router

render:

它是一个函数作用就是将我们上面导入进来的App当中所定义的视图创建出对应的虚拟dom元素然后挂载到这个#app所对应的区域主要使用视图的渲染的。

$mount(‘#app’)将vue对象创建的dom对象挂在到idapp的这个标签区域中作用和之前学习的vue对象的el属性一致。

来到public/index.html中我们删除div的idapp属性打开浏览器发现之前访问的首页一片空白如下图所示这样就证明了我们main.js中通过代码确实挂在到了index.html的idapp的标签区域的。

1问题分析

问题那么我们访问的首页是index.html但是我们找到public/index.html文件打开之后发现里面没有什么代码只有一个空的div标签但是能够呈现内容丰富的首页如下图所示

答这就涉及到render中的App了在创建vue对象的时候通过render函数创建了对应的虚拟Dom元素这部分Dom元素是在App.vue这个根组件中定义的。

2App.vue根组件介绍

在vue项目中会看到很多以.vue为结尾的文件这样的文件被叫做组件文件每个组件文件都由三部分组成。

template模板部分主要是HTML代码用来展示页面主体结构的scriptjs代码区域主要是通过js代码来控制模板的数据来源和行为的

模版中的数据来源比如这个message那在下面的数据模型当中就需要定义这样一个message。

如果在上面的模版当中调用了vue当中的一个函数那就需要再下面这一块当中定义vue当中的一个函数。

stylecss样式部分主要通过css样式控制模板的页面效果得

此时我们可以打开App.vue观察App.vue的代码其中可以发现App.vue组件的template部分内容和我们浏览器访问的首页内容是一致的如下图所示

3案例测试改造App.vue组件

接下来我们可以简化模板部分内容添加script部分的数据模型删除css样式完整代码如下

template

default:表示将定义的这一部分对象导出去,只有在这个地方将它导出一个模块,在别的地方才可以通过import关键字导入进来。

(标准格式自动生成不用管)定义vue当中的数据模型:以前:

new一个vue对象,之后声明一个属性data,然后在里面指定一个对象。

现在:

不能指定一个对象只能是指定一个函数function,之后在function函数中声明一个对象,并且要把对象return回去

script

//输入script选中javascript.vue会自动生成script标签以及里面的export

default结构

*///简化形式定义js对象中的函数冒号以及之后的function可以省略data(){

//输入data选中第二个会自动生成这个data(){return{}}结构return

{message:

使用管理员方式打开vscode并运行发现数据模型的数据已经被改变了

说明vue项目的开发其实很少操作main.js入口文件和首页index.heml主要操作的就是一些组件文件.vue结尾的文件。

第五节

Element是饿了么团队研发的一套为开发者、设计师和产品经理准备的基于

Vue

官网https://element.eleme.cn/#/zh-CNListener

为什么要学Element通过下图的原始html标签所构建的网页和Element提供的各个的网页组件构建的网页效果对比可以看出右边的完胜。

ElementUI的学习方式和我们之前的学习方式不太一样对于ElementUI我们作为一个后台开发者只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。

我们主要学习的是ElementUI中提供的常用组件至于其他组件同学们可以通过我们这几个组件的学习掌握到ElementUI的学习技巧然后课后自行学习。

2、快速入门Button按钮

回车后它会联网下载ElementUI的2.15.3版本并将其安装在当前项目中会存放在node_modules这个目录下

2步骤2引入ElementUI组件库

查看官网快速入门可知除了我们已经引入的vue和App.vue外(main.js自带的)还要引入以下2个组件

import

element-ui/lib/***me-chalk/index.css;Vue.use(ElementUI);

//代表使用ElementUI这个组件3步骤3官网复制组件代码

定义一个组件文件访问官网复制组件代码调整

App.vue根组件只有一个其它的组件页面可以放在src/views这个目录下它自带的有2个vue组件。

定义文件夹element定义文件ElementView.vue注意组件名称后缀是.vue

组件名驼峰规则

/scriptstyle/style我们只需要去ElementUI的官网找到组件库然后找到按钮组件抄写代码即可具体操作如下图所示

templatediv!--

button按钮如果我们复制的组件比较繁琐还要往下看一下是否还有一些其它的数据模型或者vue中方法的定义如果有也要一并复制过来。

--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/div

/template运行测试

index.html首页默然显示的是之前修改后的根组件App.vue里面的内容。

Vue项目开发流程index.html默认引入main.js页面main.js文件通过import导入App.vue根组件即运行vue项目首页index.html显示的内容默认来自于根组件App.vue

可以在根组件App.vue中引入ElementView.vue当中的内容即index.html—main.js—App.vue—ElementView.vue

具体修改步骤

在div标签中输入el根据提示信息(element-view)回车

div标签中自动生成element-view/element-view标签script标签中自动使用import关键字将这个组件导入进来vue对象中自动把这个组件加入进来了

此时通过根组件App.vue中的这个element-view/element-view标签就可以展示出组件ElementView.vue当中的内容。

打开浏览器index.html显示的就是组件ElementView.vue中的内容

不需要重新启动项目不需要重新刷新浏览器由于vue项目提供的热部署功能修改完页面当中的数据后在浏览器中会自动发生变化。

3、常用组件

表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。

首先我们需要来到ElementUI的组件库中找到表格组件如下图所示

然后复制代码到我们之前的ElementVue.vue组件中需要注意的是我们组件包括了3个部分如果官方有除了template部分之外的style和script那么都需要复制。

具体操作如下图所示

ctrlaltL页面格式化更规整的显示。

不需要选中页面光标放在页面上直接执行。

template模板部分

--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

那么我们的ElementUI是如何将数据模型绑定到视图的呢主要通过如下几个属性

data:

定义列的数据应该绑定data中定义的具体的数据模型label:

其具体示例含义如下图所示

PS:Element组件的所有属性都可以在各自组件页面的最下方找到如下图所示

3.2、常见组件-分页

然后复制代码到我们的ElementView.vue组件文件的template中拷贝如下代码

el-paginationbackgroundlayoutprev,

pager,

对于分页组件我们需要关注的是如下几个重要属性可以通过查阅官网组件中最下面的组件属性详细说明得到

background:

发现在原来的功能上添加了一些额外的功能其具体对应关系如下图所示

组件事件详解

对于分页组件除了上述几个属性还有2个非常重要的事件我们需要去学习

size-change

对于这2个事件的参考代码我们同样可以通过官方提供的完整案例中找到如下图所示

current-changehandleCurrentChange或者

current-changehandleCurrentChange()此时Panigation组件的template完整代码如下

!--

el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev,

pager,

/el-pagination紧接着需要复制事件需要的2个函数需要注意methods属性和data同级其代码如下

methods:

${val});}},此时Panigation组件的script部分完整代码如下

script

{//val接受的是每页条数console.log(每页记录数变化val);},handleCurrentChange(val)

{return

/script回到浏览器中我们f12打开开发者控制台然后切换当前页码和切换每页显示的数量呈现如下效果

3.3、常见组件-对话框

在保留当前页面状态的情况下告知用户并承载相关操作。

其企业开发应用场景示例如下图所示

首先我们需要在ElementUI官方找到Dialog组件如下图所示

Dialog为例

:visible.syncdialogTableVisibleel-table

propertydate

width150/el-table-columnel-table-column

propertyname

width200/el-table-columnel-table-column

propertyaddress

label地址/el-table-column/el-table

gridData:

那么ElementUI是如何做到对话框的显示与隐藏的呢是通过如下的属性

visible.sync

visible属性绑定的dialogTableVisble属性一开始默认是false所以对话框隐藏然后我们点击按钮触发事件修改属性值为true

3.4、常见组件-表单

表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。

表单在我们前端的开发中使用的还是比较多的接下来我们学习这个组件与之前的流程一样我们首先需要在ElementUI的官方找到对应的组件示例如下图所示

所以首先我们先要根据上一小结所学习的内容制作一个新的对话框其代码如下

brbr

:visible.syncdialogFormVisible/el-dialog还需要注意的是针对这个新的对话框我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示代码如下

然后我们复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中但是此处官方提供的表单项标签太多所以我们只需要保留前面3个表单项组件以及最后一个表单项其他多余的删除所以最终template部分代码如下

el-dialog

:visible.syncdialogFormVisibleel-form

refform

v-modelform.name/el-input/el-form-itemel-form-item

label活动区域el-select

valueshanghai/el-optionel-option

label区域二

valuebeijing/el-option/el-select/el-form-itemel-form-item

label活动时间el-col

100%;/el-date-picker/el-colel-col

classline

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:

,date2:},同样官方的代码中在script部分中还提供了onSubmit函数表单的立即创建按钮绑定了此函数我们可以输入表单的内容而表单的内容是双向绑定到form对象的所以我们修改官方的onSubmit函数如下即可而且我们还需要关闭对话框最终函数代码如下

/*表单项的提交数据已经绑定到了一个数据模型form中了所以想要查看表单输出的数据把form对象输出出来就可以了

不能直接输出form需要通过当前对象获取form直接输出的是对象对象看不到里面的值可以把它转化为json字符串输出javaweb的知识

*/onSubmit()

//输出表单内容到控制台this.dialogFormVisiblefalse;

//关闭表案例的对话框}然后打开浏览器我们打开对话框并且输入表单内容点击立即创建按钮呈现如下效果

最终vue组件完整代码如下同学们可以针对form表单案例参考该案例对应的template部分和script部分代码

templatediv!--

button按钮如果我们复制的组件比较繁琐还要往下看一下是否还有一些其它的数据模型或者vue中方法的定义如果有也要一并复制过来。

--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-columnel-table-column

propname

/el-table-columnel-table-column

propaddress

分页的事件--el-paginationbackgroundlayoutsizes,prev,

pager,

next,jumper,totalsize-changehandleSizeChangecurrent-changehandleCurrentChange:total1000/el-paginationbr

/!--

:visible.syncdialogTableVisibleel-table

:datagridDatael-table-columnpropertydatelabel日期width150/el-table-columnel-table-columnpropertynamelabel姓名width200/el-table-columnel-table-column

propertyaddress

label地址/el-table-column/el-table/el-dialogbr

/br

v-modelform.name/el-input/el-form-itemel-form-item

label活动区域el-select

valueshanghai/el-optionel-option

label区域二

valuebeijing/el-option/el-select/el-form-itemel-form-item

label活动时间el-col

:span11el-date-pickertypedateplaceholder选择日期v-modelform.date1stylewidth:

100%/el-date-picker/el-colel-col

classline

:span11el-time-pickerplaceholder选择时间v-modelform.date2stylewidth:

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

false,//Dialog对话框-Form表单表单放在对话框里面所以需要先声明对话框的jsdialogFormVisible:

false,/*

{//val接受的是每页条数console.log(每页记录数变化

val);},handleCurrentChange(val)

{//val接受的是当前访问的是哪一页console.log(页码发生变化

val);},/*

{/*表单项的提交数据已经绑定到了一个数据模型form中了所以想要查看表单输出的数据把form对象输出出来就可以了

不能直接输出form需要通过当前对象获取form直接输出的是对象对象看不到里面的值可以把它转化为json字符串输出javaweb的知识*/alert(JSON.stringify(this.form));

//关闭表案例的对话框不用再点x号关闭输出完成自动关闭}}};

/scriptstyle

数据Mock地址http://yapi.smart-xwork.cn/mock/169327/emp/list浏览器打开数据格式如下图所示

通过观察数据我们发现返回的json数据的data属性中才是返回的人员列表信息

4.2

整个案例相对来说功能比较复杂需求较多所以我们需要先整体后局部细节。

整个页面我们可以分为3个部分如下图所示

创建页面完成页面的整体布局规划然后分别针对3个部分进行各自组件的具体实现针对于右侧核心内容展示区域需要使用异步加载数据以表格渲染数据

4.3

tlias/EmpView.vue这个vue组件并且编写组件的基本模板代码其效果如下图所示其中模板代码在之前的案例中已经提供此处不再赘述

templatediv/div

/scriptstyle/style并且需要注意的是我们默认访问的是App.vue这个组件而我们App.vue这个组件之前是引入了element-view这个组件此时我们需要修改成引入emp-view这个组件并且注释掉之前的element-view这个组件此时App.vue整体代码如下

templatediv

./views/Element/ElementView.vue

export

打开浏览器我们发现之前的element案例内容没了从而呈现的是一片空白那么接下来我们就可以继续开发了。

通过App.vue组件的emp-view/emp-view标签就可以使用EmpView组件的内容此时index.html不再是ElementView.vue组件的内容而是EmpView.vue组件的内容此组件里面还没有定义元素只有基础骨架index.html----main.js-----App.vue----EmpView.vue

整体布局

此处肯定不需要我们自己去布局的我们直接来到ElementUI的官网找到布局组件如下图所示

从官网提供的示例我们发现由现成的满足我们需求的布局所以我们只需要做一位代码搬运工即可。

拷贝官方提供的如下代码直接粘贴到我们EmpView.vue组件的template模块中即可

el-containerel-headerHeader/el-headerel-containerel-aside

width200pxAside/el-asideel-mainMain/el-main/el-container

因为我们没有拷贝官方提供的css样式所以和官方案例的效果不太一样但是我们需要的布局格式已经有具体内容我们有自己的安排。

首先我们需要调整整体布局的高度所以我们需要在el-container上添加一些样式代码如下

!--

所以我们需要修改顶部的文本内容并且提供背景色的css样式具体代码如下

el-header

stylefont-size:40px;background-color:

rgb(238,

智能学习辅助系统/el-header此时浏览器打开呈现效果如下图所示

此时整体代码如下

stylefont-size:40px;background-color:

rgb(238,

智能学习辅助系统/el-headerel-containerel-aside

width200pxAside/el-asideel-mainMain/el-main/el-container/el-container/div

/templatescript

接下来我们来实现左侧导航栏那么还是在上述布局组件中提供的案例找到左侧栏的案例如下图所示

所以我们依然只需要搬运代码然后做简单修改即可。

官方提供的导航太多我们不需要所以我们需要做删减在我们的左侧导航栏中粘贴如下代码即可

el-menu

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删减前后对比图

stylefont-size:40px;background-color:

rgb(238,

智能学习辅助系统/el-headerel-container!--

左侧导航栏

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-mainMain/el-main/el-container/el-container/div

/templatescript

右侧显示的是表单和表格首先我们先来完成表格的制作我们同样在官方直接找表格组件也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例如下图所示

然后找到表格的代码复制到我们布局容器的主题区域template模块代码如下

:datatableData

width140/el-table-columnel-table-column

propname

width120/el-table-columnel-table-column

propaddress

/el-table表格是有数据模型的绑定的所以我们需要继续拷贝数据模型代码如下

data()

但是这样的表格和数据并不是我们所需要的所以接下来我们需要修改表格添加列并且修改列名。

代码如下

el-table-column

/el-table-column需要注意的是我们列名的prop属性值得内容并不是乱写的因为我们将来需要绑定后台的数据的所以如下图所示

并且此时我们data中之前的数据模型就不可用了所以需要清空数据设置为空数组代码

data()

stylefont-size:40px;background-color:

rgb(238,

智能学习辅助系统/el-headerel-container!--

左侧导航栏

classel-icon-message/i系统信息管理/templateel-menu-item

index1-1部门管理/el-menu-itemel-menu-item

index1-2员工管理/el-menu-item/el-submenu/el-menu/el-aside!--

右侧核心内容

width180/el-table-columnel-table-column

propimage

width180/el-table-columnel-table-column

propgender

width140/el-table-columnel-table-column

propjob

width140/el-table-columnel-table-column

propentrydate

width180/el-table-columnel-table-column

propupdatetime

width230/el-table-columnel-table-column

label操作

sizemini删除/el-button/el-table-column/el-table/el-main/el-container/el-container/div

/templatescript

所以接下来我们需要去ElementUI官网在表单组件中找到与之类似的示例加以修改从而打成我们希望的效果官方示例如下图所示

所以我们直接拷贝代码主体区域的table组件的上方即可并且我们需要修改数据绑定的的变量名最终代码如下

!--

classdemo-form-inlineel-form-item

label姓名el-input

placeholder姓名/el-input/el-form-itemel-form-item

label性别el-select

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()

[],searchForm:{name:,gender:}}}而且表单的提交按钮绑定了onSubmit函数所以我们还需要在methods中定义onSubmit函数代码如下

methods:{onSubmit:function(){console.log(this.searchForm);}

}浏览器打开如图所示

可以发现我们还缺少一个时间所以可以从elementUI官网找到日期组件如下图所示

参考官方代码然后在我们之前的表单中添加一个日期表单具体代码如下

!--

--el-date-pickerv-modelsearchForm.entrydatetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/el-form-item我们添加了双向绑定所以我们需要在data的searchForm中定义出来需要注意的是这个日期包含2个值所以我们定义为数组代码如下

searchForm:{name:,gender:,entrydate:[]}此时我们打开浏览器填写表单并且点击查询按钮查看浏览器控制台可以看到表单的内容效果如下图所示

此时完整代码如下所示

stylefont-size:40px;background-color:

rgb(238,

智能学习辅助系统/el-headerel-container!--

左侧导航栏

classel-icon-message/i系统信息管理/templateel-menu-item

index1-1部门管理/el-menu-itemel-menu-item

index1-2员工管理/el-menu-item/el-submenu/el-menu/el-aside!--

右侧核心内容

classdemo-form-inlineel-form-item

label姓名el-input

placeholder姓名/el-input/el-form-itemel-form-item

label性别el-select

value2/el-option/el-select/el-form-item!--

入职日期表单项

--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

width180/el-table-columnel-table-column

propimage

width180/el-table-columnel-table-column

propgender

width140/el-table-columnel-table-column

propjob

width140/el-table-columnel-table-column

propentrydate

width180/el-table-columnel-table-column

propupdatetime

width230/el-table-columnel-table-column

label操作

sizemini删除/el-button/el-table-column/el-table/el-main/el-container/el-container/div

/templatescript

{name:,gender:,entrydate:[]}}},methods:

{onSubmit:function(){alert(查询数据);}}

/scriptstyle/style

el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev,

pager,

/el-pagination同时methods中需要声明2个函数代码如下

{alert(每页记录数变化val)},handleCurrentChange(val)

{alert(页码发生变化val)}此时打开浏览器效果如下图所示

此时整体代码如下

stylefont-size:40px;background-color:

rgb(238,

智能学习辅助系统/el-headerel-container!--

左侧导航栏

classel-icon-message/i系统信息管理/templateel-menu-item

index1-1部门管理/el-menu-itemel-menu-item

index1-2员工管理/el-menu-item/el-submenu/el-menu/el-aside!--

右侧核心内容

classdemo-form-inlineel-form-item

label姓名el-input

placeholder姓名/el-input/el-form-itemel-form-item

label性别el-select

value2/el-option/el-select/el-form-item!--

入职日期表单项

--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

width180/el-table-columnel-table-column

propimage

width180/el-table-columnel-table-column

propgender

width140/el-table-columnel-table-column

propjob

width140/el-table-columnel-table-column

propentrydate

width180/el-table-columnel-table-column

propupdatetime

width230/el-table-columnel-table-column

label操作

sizemini删除/el-button/el-table-column/el-tablebr!--

分页条

--el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev,

pager,

next,jumper,total:total1000/el-pagination/el-main/el-container/el-container/div

/templatescript

{name:,gender:,entrydate:[]}}},methods:

{onSubmit:function(){alert(查询数据);},handleSizeChange(val)

{alert(每页记录数变化val)},handleCurrentChange(val)

{alert(页码发生变化val)}}

对于案例我们只差最后的数据了而数据的mock地址已经提供http://yapi.smart-xwork.cn/mock/169327/emp/list

我们最后要做的就是异步加载数据所以我们需要使用axios发送ajax请求。

安装axios:

接下来我们先来到项目的执行终端然后输入命令安装axios具体操作如下图所示

然后重启项目来到我们的EmpView.vue组件页面通过import命令导入axios代码如下

import

axios;那么我们什么时候发送axios请求呢页面加载完成自动加载所以可以使用之前的mounted钩子函数并且我们需要将得到的员工数据要展示到表格所以数据需要赋值给数据模型tableData所以我们编写如下代码

{//发送异步请求,获取数据

axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).***n(result{this.tableDataresult.data.data;

6.2

所以接下来我们可以通过上述的标签自定义列的内容即可修改性别列的内容代码如下

scope.row通过插槽获得这一行数据scope.row.gender获取这一行数据的gender字段

!--

propgender可以不写了--el-table-column

propgender

slot-scopescope{{scope.row.gender1?男:女}}/template/el-table-column此时打开浏览器效果如下图所示性别一列的值修复成功

6.3

图片内容的修复和上述一致需要借助template标签自定义列的内容需要需要展示图片直接借助img标签即可并且需要设置图片的宽度和高度所以直接修改图片列的代码如下

!--

/el-table-column此时回到浏览器效果如下图所示图片展示修复成功

此时整个案例完整其完整代码如下

stylefont-size:40px;background-color:

rgb(238,

智能学习辅助系统/el-headerel-containerel-aside

width230px

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

classdemo-form-inlineel-form-item

label姓名el-input

placeholder姓名/el-input/el-form-itemel-form-item

label性别el-select

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

width180/el-table-columnel-table-column

propimage

height70px/template/el-table-columnel-table-column

propgender

slot-scopescope{{scope.row.gender1?男:女}}/template/el-table-columnel-table-column

propjob

width140/el-table-columnel-table-column

propentrydate

width180/el-table-columnel-table-column

propupdatetime

width230/el-table-columnel-table-column

label操作

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

[],searchForm:{name:,gender:,entrydate:[]}}},methods:{onSubmit:function(){console.log(this.searchForm);},handleSizeChange(val)

{console.log(每页

${val});}},mounted(){axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).***n(resp{this.tableDataresp.data.data;});}

/scriptstyle/style

将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级其结构如下

此时我们希望基于4案例中的功能实现点击侧边栏的部门管理显示部门管理的信息点击员工管理显示员工管理的信息效果如下图所示

前端路由URL中的hash(#号之后的内容与组件之间的对应关系如下图所示

当我们点击左侧导航栏时浏览器的地址栏会发生变化路由自动更新显示与url所对应的vue组件。

Router其主要组成如下

VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件router-link请求链接组件浏览器会解析成arouter-view动态视图组件用来渲染展示与路由路径对应的组件

其工作原理如下图所示

首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

然后我们页面提供一个router-link组件用户点击发出路由请求;

接着我们的VueRouter根据路由请求在路由表中找到对应的vue组件

最后VueRouter会切换router-view中的组件从而进行视图的更新

5.2

vue-router3.5.1但是我们不需要安装因为当初我们再创建项目时已经勾选了路由功能已经安装好了。

然后我们需要在src/router/index.js文件中定义路由表根据其提供的模板代码进行修改最终代码如下

import

vue-routerVue.use(VueRouter)const

routes

//起个名字//访问上面的地址所对应的vue组件(相对路径地址)component:

import(../views/tlias/EmpView.vue)

},{path:

import(../views/tlias/DeptView.vue)}

]const

路由基本信息配置好了路由表已经被加载此时我们还缺少2个东西就是router-lin和router-view所以我们需要修改2个页面EmpView.vue和DeptView.vue我们左侧栏的2个按钮为router-link其代码如下

el-menu-item

/el-menu-item然后我们还需要在内容展示区域即App.vue中定义route-view作为组件的切换其App.vue的完整代码如下

App.vue中定义route-view因为现在这2个组件是在App.vue中定义的注释掉原来引入员工组件EmpView.vue的方式

template

default:表示将定义的这一部分对象导出去,只有在这个地方将它导出一个模块,在别的地方才可以通过import关键字导入进来。

(标准格式自动生成不用管)定义vue当中的数据模型:以前:

new一个vue对象,之后声明一个属性data,然后在里面指定一个对象。

现在:

不能指定一个对象只能是指定一个函数function,之后在function函数中声明一个对象,并且要把对象return回去--

script

//输入script选中javascript.vue会自动生成script标签以及里面的export

default结构

./views/element/ElementView.vue

export

*///简化形式定义js对象中的函数冒号以及之后的function可以省略data(){

//输入data选中第二个会自动生成这个data(){return{}}结构return

{message:

发现一片空白因为我们默认的路由路径是/但是路由配置中没有对应的关系

const

import(../views/tlias/EmpView.vue)},{path:

/dept,name:

import(../views/tlias/DeptView.vue)},{path:

/,redirect:/emp

]此时我们打开浏览器访问http://localhost:7000

发现直接访问的是emp的页面并且能够进行切换了其具体如下图所示

6、打包部署

我们的前端工程开发好了但是我们需要发布那么如何发布呢主要分为2步

6.1

Code的NPM脚本中提供的build按钮来完整如下图所示直接点击即可

6.2

Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。

其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。

niginx在windows中的安装是比较方便的直接解压即可。

所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的以及中。

然后我们通过双击nginx下得nginx.exe文件来启动nginx如下图所示

nginx服务器的端口号是80所以启动成功之后我们浏览器直接访问http://localhost:80

windows系统中

如果80端口被占用我们需要通过conf/nginx.conf配置文件来修改端口号。

如下图所示

我这里改为了90端口号访问地址http://localhost:90/可以看到访问成功。