八、Vue前端项目案例关键过程记录

案例要求

案例步骤分析

完成管理页面前端开发后，通过Axios完成数据异步加载（涉及到钩子方法（mounted方法））

钩子方法代码块

mounted() {//发送异步请求,获取数据axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {this.tableData = result.data.data;});}

Vue路由

通过Vue的路由VueRouter完成前端左侧菜单栏点击切换页面效果

点击启动build服务对项目打包成dist文件夹

安装nginx软件后复制打包好的目录文件到nginx的html目录下并启动前端项目

本地访问所部署项目

涉及到的代码：

DeptView.vue（部门管理前端页面代码）

<template><div><el-container  style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header><el-container><el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="name" label="名称" width="250"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="250"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></div>
</template><script>
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: {}
}
</script><style></style>

EmpVue.vue（员工管理前端页面代码）

<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)" >tlias 智能学习辅助系统</el-header><el-container><el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item-group><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><el-main><!--表单--><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchForm.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入职日期"><!--日期选择器--><el-date-pickerv-model="searchForm.entrydate"type="datetimerange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--表格--><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column label="图像" width="180"><template slot-scope="scope"><img :src="scope.row.image" alt="image" style="width: 100px;"></template></el-table-column><el-table-column label="性别" width="140"><template slot-scope="scope">{{ scope.row.gender==1 ? '男' : '女' }}</template></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><br><br><!--分页条--><el-paginationbackgroundlayout="sizes, prev, pager, next, jumper, total"@size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></el-main></el-container></el-container></div>
</template>
<script>
import axios from "axios";
export default {data(){return{tableData: [],searchForm:{name:"",gender:"",entrydate:[]}}},methods:{onSubmit:function () {alert("查询信息")},handleSizeChange: function (val) {alert("每页记录数变化" + val)},handleCurrentChange: function (val) {alert("页码发生变化" + val)}},mounted() {//发送异步请求,获取数据axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {this.tableData = result.data.data;});}
}
</script>
<style></style>

index.js（设置路由）

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/emp',name: 'emp',component: () => import('../views/tlias/EmpVue.vue'),},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect: '/dept',}
]const router = new VueRouter({routes
})export default router

App.vue（根据路由显示前端界面）

<template><div>
<!--    <h1>{{message}}</h1>-->
<!--    <element-view></element-view>--><!--员工管理 -->
<!--    <emp-vue></emp-vue>--><router-view></router-view></div>
</template>
<script>
// import ElementView from "@/views/element/ElementView.vue";// import EmpVue from "@/views/tlias/EmpVue.vue";export default {components: {// EmpVue/*ElementView*/},data(){return{message:"Hello Vue"}},methods:{}
}
</script>
<style></style>