网站备案查询平台,建设通网站是免费的吗,北京网站建设服务中心,logo制作软件第三节 前后端分离开发
1、介绍
开发模式 前后端混合开发#xff1a;传统开发模式 前后端分离开发#xff1a;当前最为主流的开发模式 页面原型需求案例#xff1a;分析出接口文档 离线开发文档示例#xff1a;
2、YAPI#xff08;官网已停用#xff09;
202…第三节 前后端分离开发
1、介绍
开发模式 前后端混合开发传统开发模式 前后端分离开发当前最为主流的开发模式 页面原型需求案例分析出接口文档 离线开发文档示例
2、YAPI官网已停用
2023.7停止维护了已经登录不上官网了。
在线接口文档管理平台
介绍YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务地址 http://yapi.smart-xwork.cn/2个功能 API接口管理Mock服务通过YAPI平台模拟真实接口生成接口的模拟测试数据用于前端工程测试。这样即使后端的人员没有开发完毕前端开发人员也可以使用YAPI平台所提供的Mock地址来进行模拟数据的测试。
使用
可以部署在公司内部服务器公司内部自己使用。也可以使用YAPI官方提供的公网部署的YAPI平台注册一个账号使用。
2.1、添加项目
步骤
2.2、添加分类
步骤
2.3、添加接口
步骤
2.4、编辑接口详细信息
步骤
2.5、预览效果
接口文档保存后会自动生成一个Mock地址 点击此地址可以看到会自动的生成Mock测试数据前端人员在测试的时候就可以直接访问此地址进行测试。 这个数据是根据定义接口时指定的返回数据格式生成的
2.6、高级Mock
当然这个返回数据里面的值是个比较宽泛的数据可以在高级Mock功能中手动指定当前接口生成的测试数据是什么。 修改value中的值 再次点击预览中的MocK地址可以看到生成的测试数据已经被改变了。
第四节 前端工程化
1、说明 当前开发中使用到的前端资源我们什么时候使用就什么时候引用。 最终形成的工程结构如下 缺点在大型项目开发中会存在很多问题每一次开发一个功能都是从0开始多个页面当中的组件或者是功能复用性并不好并且js文件、图片文件没有规范化的存储目录想怎么定义就怎么定义团队协作开发时每个开发人员都有自己的开发习惯这样就很不方便项目的维护以及管理。 现在的前端开发都讲究前端开发的模块化、组件化、规范化、自动化 模块化把js、css制作成一个个可以复用的模块 组件化把UI组件css样式js行为封装为一个个的组件便于管理。 规范化提供一套标准规范的目录结构和编码规范所有开发人员都遵循这一套统一的规范进行开发。 自动化项目的构建、项目的部署、项目的测试都可以自动化的完成。 问题使用前端工程化以后在使用vue开发大型项目的时候我们就需要考虑代码的目录结构项目的目录结构部署以及代码的单元测试等事情。如果每一个项目都手动的完成这些工作那么效率是非常低下的。 所以通常会使用一些现成的工具来帮助我们完成这些事情这个工具就是vue官方提供的脚手架工具。
2、Vue脚手架的环境准备
介绍Vue-cli 是Vue官方提供的一个脚手架用于快速生成一个Vue的项目模板。 心Vue-cli提供了如下功能 统一的目录结构本地调试热部署单元测试集成打包上线 依赖环境Node]s类似于java当中的jdk
2.1、安装NodeJS 官网https://nodejs.org/en 安装步骤 双击资料中提供的安装包 选择安装目录选择安装到一个没有中文没有空格的目录下新建一个文件夹NodeJS 验证NodeJS环境变量 NodeJS 安装完毕后会自动配置好环境变量我们验证一下是否安装成功通过 node -v 配置npm的全局安装路径 使用管理员身份运行命令行在命令行中执行如下指令 npm config set prefix E:\develop\NodeJS 注意E:\develop\NodeJS 这个目录是NodeJS的安装目录 切换npm的淘宝镜像可以加速资源下载 使用管理员身份运行命令行在命令行中执行如下指令 npm config set registry https://registry.npm.taobao.org 安装Vue-cli 使用管理员身份运行命令行在命令行中执行如下指令 npm install -g vue/cli 这个过程中会联网下载可能会耗时几分钟耐心等待。 查看Vue-cli是否安装成功vue --version
3、Vue项目简介
3.1、基于脚手架创建Vue项目
基于脚手架创建好一个工程化的vue项目 方式一命令行直接在命令行中输入vue create 项目名称 方式二图形化界面在命令行中输入命令vue ui回车后就会vue的项目管理器图形化界面在此界面中再来创建vue项目 案例测试以方式二为例 在F盘新创建一个文件夹以管理员身份打开命令提示符窗口在窗口中进入到这个新创建的文件夹目录。输入指令vue ui调出图形化界面。 之后会在后台联网进行创建 创建好后页面显示效果此时这个页面和dos窗口就可以关闭了。 可以看到磁盘目录已经创建好vue项目了
3.2、项目目录结构
基于Vue脚手架创建出来的工程有标准的目录结构如下
4、使用vscode打开vue项目
打开vue项目所在的文件夹
5、运行vue项目 2种方式 图形化界面命令行 说明图形化界面方式需要使用npm脚本运行vue项目所以要先打开npm脚本工具栏。 重启VS Code并且双击打开package.json文件然后点击资源管理器处的3个小点勾选npm脚本选项如图所示 以图形化界面方式为例运行当前案例的vue项目 以管理员方式打开vscode之后使用npm运行vue项目构建完毕后它会自动启动一个服务运行在8080端口号上所以可以通过此链接访问当前项目。 这个页面是vue项目中自动提供的根组件App.vue这个组件指的就是一个页面。 修改页面的文本Home—Vue Home之后ctrls保存发现没有重启项目也没有刷新浏览器页面仍然发生了变化这就是vue项目提供的热部署功能。
6、修改前端vue项目的端口号
在vue的配置文件vue.config.js中进行修改ctrls进行保存。由于修改了端口号所以在终端中停掉当前的服务之后重新启动。 重新启动
7、Vue项目开发流程重点
7.1、如何进行挂载
开发流程 启动工程化的vue项目访问到的页面其实就是vue项目项目默认提供的首页index.html在public目录下。 在index.html首页中public目录下它是默认引入了入口文件main.js此文件是vue项目的入口js文件在src目录下 在入口文件main.js中又引入了很多的公共组件import关键字引入模块export关键字将对象或函数导出为模块。这样就可以通过export关键字来导出一个模块然后在使用到的地方通过import这个关键字再将其导入进来。 import Vue from vue导入vue对象并起名为Vue import router from ./router导入路由信息并起名为router 详细在后面的小节讲解 import App from ./App.vue表示导入当前目录下的App.vue这个组件并且给它起个名字为App之后就可以在这个main.js文件中使用这个App组件了。 new Vue(): 创建vue对象 router: 路由详细在后面的小节讲解 之前js定义属性属性名属性值router: router ES6语法如果属性名和属性值一致那么冒号后面的部分可以省略router render: 它是一个函数作用就是将我们上面导入进来的App当中所定义的视图创建出对应的虚拟dom元素然后挂载到这个#app所对应的区域主要使用视图的渲染的。$mount(‘#app’)将vue对象创建的dom对象挂在到idapp的这个标签区域中作用和之前学习的vue对象的el属性一致。
来到public/index.html中我们删除div的idapp属性打开浏览器发现之前访问的首页一片空白如下图所示这样就证明了我们main.js中通过代码确实挂在到了index.html的idapp的标签区域的。 7.2、如何进行视图渲染的
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
!-- 模版部分一般需要有一对跟标签div --div h1{{message}}/h1 !-- 插值表达式绑定文本属性 --/div
/template!--export default:表示将定义的这一部分对象导出去,只有在这个地方将它导出一个模块,在别的地方才可以通过import关键字导入进来。(标准格式自动生成不用管)定义vue当中的数据模型:以前: new一个vue对象,之后声明一个属性data,然后在里面指定一个对象。现在: 不能指定一个对象只能是指定一个函数function,之后在function函数中声明一个对象,并且要把对象return回去
--
script //输入script选中javascript.vue会自动生成script标签以及里面的export default结构
export default { /* data: function(){return {message: Hello vue} *///简化形式定义js对象中的函数冒号以及之后的function可以省略data(){ //输入data选中第二个会自动生成这个data(){return{}}结构return {message: Hello vue}},methods: { //通过methods属性来定义vue对象中的方法}}
/scriptstyle/style
使用管理员方式打开vscode并运行发现数据模型的数据已经被改变了 说明vue项目的开发其实很少操作main.js入口文件和首页index.heml主要操作的就是一些组件文件.vue结尾的文件。
第五节 Vue组件库Element
1、什么是Element Element是饿了么团队研发的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 组件组成网页的部件例如 超链接、按钮、图片、表格、表单、分页条等等。 官网https://element.eleme.cn/#/zh-CNListener 为什么要学Element通过下图的原始html标签所构建的网页和Element提供的各个的网页组件构建的网页效果对比可以看出右边的完胜。 ElementUI的学习方式和我们之前的学习方式不太一样对于ElementUI我们作为一个后台开发者只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。我们主要学习的是ElementUI中提供的常用组件至于其他组件同学们可以通过我们这几个组件的学习掌握到ElementUI的学习技巧然后课后自行学习。
2、快速入门Button按钮
2.1、步骤说明 安装ElementUI组件库 在当前工程的目录下在命令行执行指令 引入ElementUI组件库 访问官网复制组件代码调整
2.2、案例演示
1步骤1安装ElementUI组件库
安装ElementUI组件库 在当前工程的目录下
打开VS Code停止之前的项目然后在命令行输入如下命令
npm install element-ui2.15.3 具体操作如下图所示
回车后它会联网下载ElementUI的2.15.3版本并将其安装在当前项目中会存放在node_modules这个目录下
在node_modules这个目录下可以看到element-ui目录说明组件库安装成功。 2步骤2引入ElementUI组件库
在入口文件main.js中引入ElementUI组件库
查看官网快速入门可知除了我们已经引入的vue和App.vue外(main.js自带的)还要引入以下2个组件 import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI); //代表使用ElementUI这个组件3步骤3官网复制组件代码
定义一个组件文件访问官网复制组件代码调整
说明
App.vue根组件只有一个其它的组件页面可以放在src/views这个目录下它自带的有2个vue组件。定义文件夹element定义文件ElementView.vue注意组件名称后缀是.vue 组件名驼峰规则
在组件文件中编写之前介绍过的基本组件语法代码如下 template/templatescript
export default {}
/scriptstyle/style我们只需要去ElementUI的官网找到组件库然后找到按钮组件抄写代码即可具体操作如下图所示 紧接着我们复制组件代码到我们的vue组件文件中操作如下图所示 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运行测试 管理员方式打开vscode并运行此项目 index.html首页默然显示的是之前修改后的根组件App.vue里面的内容。 Vue项目开发流程index.html默认引入main.js页面main.js文件通过import导入App.vue根组件即运行vue项目首页index.html显示的内容默认来自于根组件App.vue 此时想要展示ElementView.vue这个组件里面的内容 可以在根组件App.vue中引入ElementView.vue当中的内容即index.html—main.js—App.vue—ElementView.vue
具体修改步骤 注释掉根组件App.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、常用组件
3.1、常见组件-表格
1 组件演示
Table 表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。
接下来我们通过代码来演示。
首先我们需要来到ElementUI的组件库中找到表格组件如下图所示
有很多种表格这里以基础表格为例演示 然后复制代码到我们之前的ElementVue.vue组件中需要注意的是我们组件包括了3个部分如果官方有除了template部分之外的style和script那么都需要复制。具体操作如下图所示
ctrlaltL页面格式化更规整的显示。不需要选中页面光标放在页面上直接执行。
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
此时回到浏览器我们页面呈现如下效果 2 组件属性详解
那么我们的ElementUI是如何将数据模型绑定到视图的呢主要通过如下几个属性
data: 主要定义table组件的数据模型prop: 定义列的数据应该绑定data中定义的具体的数据模型label: 定义列的标题width: 定义列的宽度
其具体示例含义如下图所示 PS:Element组件的所有属性都可以在各自组件页面的最下方找到如下图所示 3.2、常见组件-分页
1 组件演示
Pagination: 分页组件主要提供分页工具条相关功能。其展示效果图下图所示 接下来我们通过代码来演示功能。
首先在官网找到分页组件我们选择带背景色分页组件如下图所示 然后复制代码到我们的ElementView.vue组件文件的template中拷贝如下代码
el-paginationbackgroundlayoutprev, pager, next:total1000
/el-pagination浏览器打开呈现如下效果 2 组件属性详解
对于分页组件我们需要关注的是如下几个重要属性可以通过查阅官网组件中最下面的组件属性详细说明得到
background: 添加背景颜色也就是上图蓝色背景色效果。layout: 分页工具条的布局其具体值包含sizes, prev, pager, next, jumper, -, total, slot 这些值total: 数据的总数量
然后根据官方分页组件提供的layout属性说明如下图所示 我们修改layout属性如下 layoutsizes,prev, pager, next,jumper,total浏览器打开呈现如下效果 发现在原来的功能上添加了一些额外的功能其具体对应关系如下图所示 3 组件事件详解
对于分页组件除了上述几个属性还有2个非常重要的事件我们需要去学习
size-change pageSize每页展示记录数 改变时会触发current-change currentPage当前页码 改变时会触发
其官方详细解释含义如下图所示 对于这2个事件的参考代码我们同样可以通过官方提供的完整案例中找到如下图所示 然后我们找到对应的代码首先复制事件复制代码如下
size-changehandleSizeChange
current-changehandleCurrentChange或者
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) {//val接受的是每页条数console.log(每页记录数变化val);},handleCurrentChange(val) {console.log(页码发生变化val); //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打开开发者控制台然后切换当前页码和切换每页显示的数量呈现如下效果 3.3、常见组件-对话框
1 组件演示
Dialog: 在保留当前页面状态的情况下告知用户并承载相关操作。其企业开发应用场景示例如下图所示 首先我们需要在ElementUI官方找到Dialog组件如下图所示 以打开嵌套表格的 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然后我们打开浏览器点击按钮呈现如下效果 2 组件属性详解
那么ElementUI是如何做到对话框的显示与隐藏的呢是通过如下的属性
visible.sync 是否显示 Dialog
具体释意如下图所示 visible属性绑定的dialogTableVisble属性一开始默认是false所以对话框隐藏然后我们点击按钮触发事件修改属性值为true
然后对话框visible属性值为true所以对话框呈现出来。
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来控制对话框的隐藏与显示代码如下
//false隐藏对话框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函数如下即可而且我们还需要关闭对话框最终函数代码如下
官网
自己的代码 /*表单项的提交数据已经绑定到了一个数据模型form中了所以想要查看表单输出的数据把form对象输出出来就可以了 不能直接输出form需要通过当前对象获取form直接输出的是对象对象看不到里面的值可以把它转化为json字符串输出javaweb的知识
*/onSubmit() {console.log(this.form); //输出表单内容到控制台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 :datatableData stylewidth: 100%el-table-column propdate label日期 width180 /el-table-columnel-table-column propname label姓名 width180 /el-table-columnel-table-column propaddress label地址 /el-table-column/el-table!-- Pagination分页 分页的事件--el-paginationbackgroundlayoutsizes,prev, pager, next,jumper,totalsize-changehandleSizeChangecurrent-changehandleCurrentChange:total1000/el-paginationbr /!-- Dialog对话框 --el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-buttonel-dialog title收货地址 :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 /!--Dialog对话框-Form表单 --el-button typetext clickdialogFormVisible true打开嵌套Form的 Dialog/el-buttonel-dialog titleForm表单 :visible.syncdialogFormVisible el-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-pickertypedateplaceholder选择日期v-modelform.date1stylewidth: 100%/el-date-picker/el-colel-col classline :span2-/el-colel-col :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
/templatescript
export default {data() {return {/* Dialog对话框-Form表单 */form: {name: ,region: ,date1: ,date2: },/* Dialog对话框 */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,//Dialog对话框-Form表单表单放在对话框里面所以需要先声明对话框的jsdialogFormVisible: false,/* table表格的js */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 弄,},],};},/* Pagination分页的事件 */methods: {handleSizeChange(val) {//val接受的是每页条数console.log(每页记录数变化 val);},handleCurrentChange(val) {//val接受的是当前访问的是哪一页console.log(页码发生变化 val);},/* Dialog对话框-Form表单 */onSubmit() {/*表单项的提交数据已经绑定到了一个数据模型form中了所以想要查看表单输出的数据把form对象输出出来就可以了 不能直接输出form需要通过当前对象获取form直接输出的是对象对象看不到里面的值可以把它转化为json字符串输出javaweb的知识*/alert(JSON.stringify(this.form)); this.dialogFormVisiblefalse; //关闭表案例的对话框不用再点x号关闭输出完成自动关闭}}};
/scriptstyle
/style
4、案例
基于element中的各个组件来制作一个完整的页面。
4.1 案例需求
参考 资料/页面原型/tlias智能学习辅助系统/首页.html 文件浏览器打开点击页面中的左侧栏的员工管理如下所示 需求说明 制作类似格式的页面 即上面是标题左侧栏是导航右侧是数据展示区域 右侧需要展示搜索表单 右侧表格数据是动态展示的数据来自于后台 实际示例效果如下图所示 数据Mock地址http://yapi.smart-xwork.cn/mock/169327/emp/list浏览器打开数据格式如下图所示 通过观察数据我们发现返回的json数据的data属性中才是返回的人员列表信息
4.2 案例分析
整个案例相对来说功能比较复杂需求较多所以我们需要先整体后局部细节。整个页面我们可以分为3个部分如下图所示 一旦这样拆分那么我们的思路就清晰了主要步骤如下
创建页面完成页面的整体布局规划然后分别针对3个部分进行各自组件的具体实现针对于右侧核心内容展示区域需要使用异步加载数据以表格渲染数据
4.3 代码实现
1 环境搭建
首先我们来到VS Code中在views目录下创建 tlias/EmpView.vue这个vue组件并且编写组件的基本模板代码其效果如下图所示其中模板代码在之前的案例中已经提供此处不再赘述 templatediv/div
/templatescript
export default {}
/scriptstyle/style并且需要注意的是我们默认访问的是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案例内容没了从而呈现的是一片空白那么接下来我们就可以继续开发了。
通过App.vue组件的emp-view/emp-view标签就可以使用EmpView组件的内容此时index.html不再是ElementView.vue组件的内容而是EmpView.vue组件的内容此组件里面还没有定义元素只有基础骨架index.html----main.js-----App.vue----EmpView.vue
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到此我们布局功能就完成了
3 顶部标题
对于顶部我们需要实现的效果如下图所示 所以我们需要修改顶部的文本内容并且提供背景色的css样式具体代码如下 el-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-header此时浏览器打开呈现效果如下图所示 至此我们的顶部标题就搞定了
此时整体代码如下
templatediv!-- 布局组件 --el-container styleheight: 700px; border: 1px solid #eee!-- 顶部标题 --el-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 左侧导航栏
接下来我们来实现左侧导航栏那么还是在上述布局组件中提供的案例找到左侧栏的案例如下图所示 所以我们依然只需要搬运代码然后做简单修改即可。官方提供的导航太多我们不需要所以我们需要做删减在我们的左侧导航栏中粘贴如下代码即可 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!-- 布局组件 --el-container styleheight: 700px; border: 1px solid #eee!-- 顶部标题 --el-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-container!-- 左侧导航栏 --el-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-mainMain/el-main/el-container/el-container/div
/templatescript
export default {}
/scriptstyle/style 5右侧核心内容
5.1 表格编写
右侧显示的是表单和表格首先我们先来完成表格的制作我们同样在官方直接找表格组件也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例如下图所示 然后找到表格的代码复制到我们布局容器的主题区域template模块代码如下 !--border加上边框--el-table :datatableData borderel-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!-- 布局组件 --el-container styleheight: 700px; border: 1px solid #eee!-- 顶部标题 --el-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-container!-- 左侧导航栏 --el-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-aside!-- 右侧核心内容 --el-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
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-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!-- 布局组件 --el-container styleheight: 700px; border: 1px solid #eee!-- 顶部标题 --el-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-container!-- 左侧导航栏 --el-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-aside!-- 右侧核心内容 --el-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-item!-- 入职日期表单项 --el-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 :datatableData borderel-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(){alert(查询数据);}}
}
/scriptstyle/style
5.3 分页工具栏
分页条我们之前做过所以我们直接找到之前的案例复制即可代码如下
其中template模块代码如下 !-- Pagination分页 --
el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChangebackgroundlayoutsizes,prev, pager, next,jumper,total:total1000
/el-pagination同时methods中需要声明2个函数代码如下 handleSizeChange(val) {alert(每页记录数变化val)},handleCurrentChange(val) {alert(页码发生变化val)}此时打开浏览器效果如下图所示 此时整体代码如下
templatediv!-- 布局组件 --el-container styleheight: 700px; border: 1px solid #eee!-- 顶部标题 --el-header stylefont-size:40px;background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-container!-- 左侧导航栏 --el-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-aside!-- 右侧核心内容 --el-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-item!-- 入职日期表单项 --el-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 :datatableData borderel-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-tablebr!-- 分页条 --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(){alert(查询数据);},handleSizeChange(val) {alert(每页记录数变化val)},handleCurrentChange(val) {alert(页码发生变化val)}}
}
/scriptstyle/style
6 异步数据加载
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 from axios;
接下来我们先来到项目的执行终端然后输入命令安装axios具体操作如下图所示 然后重启项目来到我们的EmpView.vue组件页面通过import命令导入axios代码如下 import axios from axios;那么我们什么时候发送axios请求呢页面加载完成自动加载所以可以使用之前的mounted钩子函数并且我们需要将得到的员工数据要展示到表格所以数据需要赋值给数据模型tableData所以我们编写如下代码 //和methods属性平级mounted() {//发送异步请求,获取数据 axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result{this.tableDataresult.data.data; //响应数据赋值给数据模型});}此时浏览器打开呈现如下效果 但是很明显性别和图片的内容显示不正确所以我们需要修复。
6.2 性别内容展示修复
首先我们来到ElementUI提供的表格组件找到如下示例 我们仔细对比效果和功能实现代码发现其中涉及2个非常重要的点
template : 用于自定义列的内容 slot-scope: 插槽通过这个插槽可以获rowrow这一行所有的字段值
所以接下来我们可以通过上述的标签自定义列的内容即可修改性别列的内容代码如下
scope.row通过插槽获得这一行数据scope.row.gender获取这一行数据的gender字段 !-- propgender可以不写了--el-table-column propgender label性别 width140template slot-scopescope{{scope.row.gender1?男:女}}/template/el-table-column此时打开浏览器效果如下图所示性别一列的值修复成功 6.3 图片内容展示修复
图片内容的修复和上述一致需要借助template标签自定义列的内容需要需要展示图片直接借助img标签即可并且需要设置图片的宽度和高度所以直接修改图片列的代码如下 !-- propimage可以不写了--
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
6.4 左侧导航栏修复 边框线太短 解决添加边框 此时页面效果可能会出现滚动条因为你设置的宽度有点小 解决设置宽度大一点
5、Vue路由
5.1 路由介绍
将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级其结构如下 此时我们希望基于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, //起个名字//访问上面的地址所对应的vue组件(相对路径地址)component: () import(../views/tlias/EmpView.vue) },{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)}
]const router new VueRouter({routes
})export default router
注意需要去掉没有引用的import模块因为有2种引入方式略。
在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的完整代码如下
App.vue中定义route-view因为现在这2个组件是在App.vue中定义的注释掉原来引入员工组件EmpView.vue的方式
template
!-- 模版部分一般需要有一对跟标签div --div !-- h1{{message}}/h1 -- !-- 插值表达式绑定文本属性 --!-- element-view/element-view --!-- 员工管理这个标签和组件的名字对应--!-- emp-view/emp-view --router-view/router-view/div
/template!-- export default:表示将定义的这一部分对象导出去,只有在这个地方将它导出一个模块,在别的地方才可以通过import关键字导入进来。(标准格式自动生成不用管)定义vue当中的数据模型:以前: new一个vue对象,之后声明一个属性data,然后在里面指定一个对象。现在: 不能指定一个对象只能是指定一个函数function,之后在function函数中声明一个对象,并且要把对象return回去--
script //输入script选中javascript.vue会自动生成script标签以及里面的export default结构
/* import EmpView from ./views/tlias/EmpView.vue */
/* import ElementView from ./views/element/ElementView.vue */
export default {components: {/* EmpView */ /* ElementView */ }, /* data: function(){return {message: Hello vue} *///简化形式定义js对象中的函数冒号以及之后的function可以省略data(){ //输入data选中第二个会自动生成这个data(){return{}}结构return {message: Hello vue}},methods: { //通过methods属性来定义vue对象中的方法}}
/scriptstyle/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 部署前端工程
1 nginx介绍
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。
niginx在windows中的安装是比较方便的直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下直接解压即可如下图所示就是nginx的解压目录以及目录结构说明 很明显我们如果要发布直接将资源放入到html目录中。
2 部署
将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下如下图所示 然后我们通过双击nginx下得nginx.exe文件来启动nginx如下图所示 nginx服务器的端口号是80所以启动成功之后我们浏览器直接访问http://localhost:80 即可其中80端口可以省略其浏览器展示效果如图所示
windows系统中 80通常被系统进程占用所以要修改端口号。 到此我们的前端工程发布成功。
PS: 如果80端口被占用我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示 我这里改为了90端口号访问地址http://localhost:90/可以看到访问成功。
