输入一组基因做网络图的网站,wordpress判断登录用户为vip,江门seo外包服务,刷百度指数网站目录 Element组件案例案例需求与分析环境搭建整体布局顶部标题左侧导航栏核心-右侧导航栏表格编写表单编写分页工具栏编写 异步数据加载异步加载数据性别展示修复图片展示修复 Vue路由Vue路由简介Vue路由入门 打包部署前端工程打包部署前端工程nginx介绍部署 Element组件案例
… 目录 Element组件案例案例需求与分析环境搭建整体布局顶部标题左侧导航栏核心-右侧导航栏表格编写表单编写分页工具栏编写 异步数据加载异步加载数据性别展示修复图片展示修复 Vue路由Vue路由简介Vue路由入门 打包部署前端工程打包部署前端工程nginx介绍部署 Element组件案例
案例需求与分析
1. 制作类似格式的页面,即上面是标题左侧栏是导航右侧是数据展示区域
2. 右侧需要展示搜索表单
3. 右侧表格数据是动态展示的数据来自于后台
4. 实际示例效果如下图所示数据使用yapi测试接口。
由上图可以看出整个页面可以分为3个部分主要步骤如下
1. 创建页面完成页面的整体布局规划
2. 然后分别针对3个部分进行各自组件的具体实现
3. 针对于右侧核心内容展示区域需要使用异步加载数据以表格渲染数据环境搭建
在views目录下创建 tlias/EmpView.vue这个vue组件并且编写组件的基本模板代码App.vue这个组件之前是引入了element-view这个组件此时我们需要修改成引入emp-view这个组件。 整体布局
抄ElementUI组件 !-- style设置最外层容器高度为700px,在加上一个很细的边框 --
el-container styleheight: 700px; border: 1px solid #eeeel-headerHeader/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container
/el-container顶部标题
修改顶部的文本内容并且提供背景色的css样式
el-header stylefont-size:40px;background-color: rgb(238, 241,
246)tlias 智能学习辅助系统/el-header左侧导航栏
继续抄刚刚上述布局组件中提供的案例 搬运代码然后做简单修改即可 此时整体代码如下
div
!-- 设置最外层容器高度为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]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核心-右侧导航栏
根据实际示例效果右侧显示的是表单、表格还有分页栏。 表格编写
表格的制作我们同样在官方直接找表格组件也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例 然后找到表格的代码复制到我们布局容器的主题区域修改表格添加列并且修改列名。
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然后在data里return一个空的tableData:
script
export default {data() {return {tableData:[]}},
};
/script需要注意的是我们列名的prop属性值的内容并不是乱写的因为我们将来需要绑定后台的数据的所以如下图所示 表单编写
在表格的上方还需要如下图所示的表单 去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-formdata() {return {tableData: [],searchForm: {name: ,gender: ,},};
},
methods: {onSubmit: function () {console.log(this.searchForm);},
},表单的提交按钮绑定了onSubmit函数所以我们还需要在methods中定义onSubmit函数
效果 可以发现我们还缺少一个时间所以可以从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!-- 设置最外层容器高度为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]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-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropimagelabel图像width180/el-table-columnel-table-columnpropgenderlabel性别width140/el-table-columnel-table-columnpropjoblabel职位width140/el-table-columnel-table-columnpropentrydatelabel入职日期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分页工具栏编写
分页条我们之前做过所以我们直接找到之前的案例复制即可
!-- 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});},此时效果 异步数据加载
异步加载数据
对于案例我们只差最后的数据了,数据使用该地址作为测试。
使用axios发送ajax请求。 在vue项目中对于axios的使用分为如下2步
1. 安装axios: npm install axios
2. 需要使用axios时导入axios: import axios axios接下来我们先来到项目的执行终端然后输入命令安装axios 然后重启项目来到我们的EmpView.vue组件页面通过import命令导入axios
那么我们什么时候发送axios请求呢页面加载完成自动加载所以可以使用之前的mounted钩子函数并且我们需要将得到的员工数据要展示到表格所以数据需要赋值给数据模型tableData所以我们编写如下代码
mounted() {axios.get(https://mock.apifox.cn/m1/3128855-0-default/emp/list).then((resp) {this.tableData resp.data.data; //响应数据赋值给数据模型});},此时浏览器打开呈现如下效果 但是很明显性别和图片的内容显示不正确所以我们需要修复。
性别展示修复
来到ElementUI提供的表格组件找到如下示例 我们仔细对比效果和功能实现代码发现其中涉及2个非常重要的点
template : 用于自定义列的内容
slot-scope: 通过属性的row获取当前行的数据所以接下来我们可以通过上述的标签自定义列的内容即可修改性别列的内容代码如下
el-table-column propgender label性别 width140template slot-scopescope{{scope.row.gender1?男:女}}/template
/el-table-column此时打开浏览器发现性别一列的值修复成功。
图片展示修复
图片内容的修复和上述一致需要借助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 width200pxel-menu :default-openeds[1]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-columnpropnamelabel姓名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.gender 1 ? 男 : 女 }}/template/el-table-columnel-table-columnpropjoblabel职位width140/el-table-columnel-table-columnpropentrydatelabel入职日期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 from 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(https://mock.apifox.cn/m1/3128855-0-default/emp/list).then((resp) {this.tableData resp.data.data; //响应数据赋值给数据模型});},
};
/scriptstyle
/styleVue路由
我们希望基于4.4案例中的功能实现点击侧边栏的部门管理显示部门管理的信息点击员工管理显示员工管理的信息效果如下图所示 这就需要借助我们的vue的路由功能了。 Vue路由简介
前端路由URL中的hash(#号之后的内容与组件之间的对应关系如下图所示 当我们点击左侧导航栏时浏览器的地址栏会发生变化路由自动更新显示与url所对应的vue组件。
vue官方提供了路由插件Vue Router,其主要组成如下
VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件
router-link请求链接组件浏览器会解析成a
router-view动态视图组件用来渲染展示与路由路径对应的组件工作原理如下图所示 VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表; 然后我们页面提供一个组件,用户点击发出路由请求; 接着我们的VueRouter根据路由请求在路由表中找到对应的vue组件 最后VueRouter会切换中的组件从而进行视图的更新。 Vue路由入门
安装vue-router插件:
npm install vue-router3.5.1我们不需要在创建vue项目时我们已经勾选了路由功能。 然后我们需要在src/router/index.js文件中定义路由表根据其提供的模板代码进行修改注意需要去掉没有引用的import模块最终代码如下
import Vue from vue
import VueRouter from 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在main.js中引入router功能 将代码DeptView.vue拷贝到我们当前EmpView.vue同级
templatedivel-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-1router-link to/dept部门管理/router-link/el-menu-itemel-menu-item index1-2router-link to/emp员工管理/router-link/el-menu-item/el-submenu/el-menu/el-asideel-main!-- 表格 --el-table :datatableData borderel-table-column propname label名称 width250/el-table-columnel-table-column propupdatetime label最后操作时间 width250/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: [{id:1,name:学工部,updatetime:2010-01-01 12:00:00},{id:2,name:教研部,updatetime:2010-01-01 12:00:00},{id:3,name:就业部,updatetime:2010-01-01 12:00:00},{id:4,name:人事部,updatetime:2010-01-01 12:00:00},{id:5,name:行政部,updatetime:2010-01-01 12:00:00}]}},methods: {}
}
/scriptstyle/style路由基本信息配置好了路由表已经被加载此时我们还缺少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的页面并且能够进行切换了: 打包部署
我们的前端工程开发好了当我们需要发布主要分为2步
前端工程打包通过nginx服务器发布前端工程
前端工程打包
我们直接通过VS Code的NPM脚本中提供的build按钮来完整如下图所示直接点击即可 然后会在工程目录下生成一个dist目录用于存放需要发布的前端资源如下图所示 部署前端工程
nginx介绍
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。 niginx在windows中的安装是比较方便的直接解压即可。所以我们在官网下载将nginx-1.22.0.zip压缩文件拷贝到无中文的目录下直接解压即可如下图所示就是nginx的解压目录以及目录结构说明 很明显我们如果要发布直接将资源放入到html目录中。
部署
将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下如下图所示 然后我们通过双击nginx下的nginx.exe文件来启动nginx
nginx服务器的端口号是80所以启动成功之后我们浏览器直接访问http://localhost:80 即可其中80端口可以省略其浏览器展示效果如图所示 到此我们的前端工程发布成功。
PS: 如果80端口被占用我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示 如果想查询哪个进场占用了80端口可以在windows命令行输入以下命令:
netstat -ano / findstr 80如图所示进程id4占用了80端口打开任务管理器可以看到pid为4的是系统进程那就需要更改端口号了。 最后,在nginx根目录下调用cmd输入nginx -s quit关闭。
