案例来源：黑马javaweb第三天案例
一、要求，实现下图的界面。
环境安装：
1、安装node.js
node -v //查看node.js版本号
npm config set prefix "node.js的安装路径" //配置npm的全局安装路径（以管理员身份运行命令行）
npm config get prefix //来判断是否安装成功，输出为node.js的安装路径
npm config set registry http://registry.npmmirror.com //设置npm的淘宝镜像（目前最新的）
npm install -g @vue/cli //安装vue脚手架工具（管理员）
vue --version //确定vue是否安装成功
2、成功创建一个vue项目
新建一个文件夹，存放生成的vue项目，如D:/vue
在这个文件夹下打开终端输入vue ui启动vue的图形化界面
打开之后点击在此创建新项目
选择router
vue项目生成好之后可以用vscode打开，主要关注src文件夹和vue.config.js文件。
src：存放源码
vue.config.js：保存vue配置的文件，如：代理、端口的配置等。
默认端口是8080，重新配置端口，在此文件夹下添加devServer。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port:7897,
}
})
运行vue项目，vscode左下角点击运行。
如果左下角没有npm脚本运行，左上角菜单栏选终端–>运行任务–>弹出的输入框种搜索npm，选择npm:serve vue-project。
或是在vue-project项目下打开终端输入npm run serve。
main.js是入口文件，一般不作更改。
以.vue为尾缀的文件是可以操作的文件，可以在里面写前端代码，一个.vue文件有三个模块：
（1）template：模板部分，用来写html代码，必须有一个根标签，一般为<div></div>。
（2）script：选javascript vue，写js代码，默认生成export default{}，意思是要将定义的这部分对象导出去，只有在此处把他导出成一个模块，才能在别的地方通过import关键字导入。
<script>
export default {
data() {
return {
message:"Hello vue222"
}
},
methods: {
}
}
（3）style：写css代码。
2、vue组件库Element
（1）安装：在vscode当前工程目录下的终端中执行命令：
npm install element-ui@2.15.3
安装完成后可以在vue项目下的node_modules可以找到该模块。
（2）引入ElementUI组件库
详见ElementUI官网：https://element.eleme.cn/#/zh-CN，右上角点组件，左边菜单栏点快速上手。
//main.js中导入：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
（3）新建一个vue组件：不放在根组件App.vue文件中，在views文件夹下新建一个文件夹，如views/element/ElementView.vue，文件名必须采用驼峰命名法，否则会报错。
新建一个文件必须写全三个模块，之后要引用新建的vue文件，在根组件App.vue中，在template的div标签中输入新建的文件名，如ElementView，则输入<element-view></element-view>，输入会有提示，这个标签和文件名对应，标签创建之后会自动将ElementView.vue组件import进来。
（4）导入ElementView.vue：
在App.vue中，在template的div标签中输入
<element-view></element-view>
在script中会自动出现
import ElementView from './views/element/ElementView.vue'
3、vue项目中使用axios
在打开的vue项目的终端输入npm install axios
在哪个页面中需要使用axios，就导入axios，import axios from 'axios';，位置在script标签中第一行导入。
案例实现
分析：用到的组件（Element-ui官网）有
（1）Container 布局容器：选择Header、Aside、Main的布局，这个布局下面有个实例，可以直接拷过来再改。
（2）Table表格：基础表格
（3）Form表单：选行内表单
（4）DatePicker日期选择器：选择日期范围
（5）Pagination 分页：选带有背景色的分页
EmpView.vue
<template>
<div class="demo-input-size, block">
<el-container style="height: 700px; border: 1px solid #eee">
<el-header>学习系统</el-header>
<el-container>
<!-- 如果不加style="border: 1px solid #eee aside右边的线不完整 -->
<el-aside width="200px" 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">部门管理</el-menu-item>
<el-menu-item index="1-2">员工管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!-- :model 绑定一个对象，从输入框获得，赋值给searchForm对象中每个参数，searchForm需要在script的data中创建 -->
<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="性别：">
<!-- 输入男/女，将其转为1/2-->
<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-picker
v-model="searchForm.entrydate"
type="daterange"
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>
<!-- :data 是实现分页符与表格联动的基本步骤，这是（1） -->
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column label="图像">
<template slot-scope="scope">
<!-- :是动态绑定的意思 将图片的地址绑定给src属性，就能输出图片 -->
<img :src="scope.row.image" width="15px">
</template>
</el-table-column>
<el-table-column label="性别">
<template slot-scope="scope">
<!-- 获得的数据是1/2，使用下面的代码显示男或女在界面上 -->
{{ scope.row.gender == 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="job" label="职位">
</el-table-column>
<el-table-column prop="entrydate" label="入职日期">
</el-table-column>
<el-table-column prop="updatetime" label="最后操作时间">
</el-table-column>
<el-table-column prop="operator" label="操作">
<el-row>
<el-button type="primary" size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-row>
</el-table-column>
</el-table>
<br>
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="currentPage"
:page-size="pagesize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="tableData.length"
>
<!-- current-page、page-size 两个属性动态绑定 -->
</el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
// import axios from 'axios';
export default {
data() {
return {
// 我没办法打开异步请求的链接，所以数据直接在tableData，如果有类似的数据，就把这里的注释掉，写成tableData:[],通过异步请求把数据解析到tableData中去。
tableData: [
{
"id": "1",
"name": "abc",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "2",
"name": "tom",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "讲师",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "3",
"name": "job",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "4",
"name": "angera",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 2,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "5",
"name": "anna",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "讲师",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "6",
"name": "朱丽叶",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "7",
"name": "爱丽丝",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "讲师",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "8",
"name": "谢谢",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "教授",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "9",
"name": "对不起",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},{
"id": "10",
"name": "不好意思",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 2,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "11",
"name": "没关系",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
],
// 数据模型
searchForm: {
name: "",
gender: "",
entrydate: []
},
input: '',
currentPage:1, //默认开始页面
pagesize:10,//每页数据条数
};
},
methods: {
// 每页显示的条目数
handleSizeChange:function(val){
this.pagesize = val
},
// 当前页数
handleCurrentChange:function(val){
this.currentPage = val
},
onSubmit:function(){
}
},
// mounted vue对象一创建挂载完成会自动发送请求加载数据
// mounted(){
// // 发送异步请求，获取数据
// axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list).then((result) => {
// this.tableData = result.data.data;
// });
// }
}
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
font-size: 28px;
/* 字体加粗 */
}
.el-aside {
background-color: #D3DCE6;
color: #333;
/* text-align: center;
line-height: 200px; */
}
.el-main {
background-color: white;
color: #333;
text-align: center;
/* line-height: 160px; */
}
</style>
http://yapi.smart-xwork.cn/mock/169327/emp/list中内容格式为：（视频中说是从yapi中创建的，没弄懂）
二、实现路由功能
之前新建vue项目时已经添加了路由功能，不需要再下载，若新建vue项目时没有添加路由功能，可通过命令npm install vue-router@3.5.1安装。
1、vue路由组成
（1）VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
（2）<router-link>：请求链接组件，浏览器会解析成<a>
（3）<router-view>：动态视图组件，用来选额按展示与路由路径对应的vue组件
2、vue路由的功能：即左侧菜单栏，点击部门管理，出现的是部门管理页面，点击员工管理，出现员工管理页面，感觉这个实现类似于每个路由地址对应不同的页面组件。
已有DeptView.vue和EmpView.vue两个组件：
（1）找到文件夹/vue-project/router/index.js，在这个文件夹下配置DeptView.vue和EmpView.vue两个组件的路由组件信息。
path：代表你访问的地址后面跟着'/'，即http://localhost:7897/；或'/emp'，即http://localhost:7897/#/emp
redirect：表示如果访问地址http://localhost:7897/，则直接重定向为http://localhost:7897/#/dept
component: () => import('../views/tlias/EmpView.vue')：表示要导入的组件在这个项目中的相对路径
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/dept'
},
{
path: '/emp',
name: 'dept',
component: () => import('../views/tlias/EmpView.vue')
},
{
path: '/dept',
name: 'dept',
component: () => import( '../views/tlias/DeptView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
这个配置代码可以直接生效，因为在main.js中已经导入了路由信息，代码为import router from './router'，并且在创建vue对象时已经指定了路由。
（2）找到DeptView.vue和EmpView.vue两个组件，找部门管理和员工管理关键词，使用标签<router-link>修改成下面的样子。设置完，这时点击员工管理或部门管理地址栏会发生变化，但是页面没有变化，因此需要加<router-view>标签指示动态展示的组件。
<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>
（3）在App.vue中加上<router-view>标签，之前的<element-view></element-view>这种引用方式都注释掉。
<template>
<div>
<!-- <h1>{{message}}</h1> -->
<!-- <element-view></element-view> -->
<!-- <emp-view></emp-view> -->
<router-view></router-view>
</div>
</template>
都完成就可以实现点击员工管理出现员工相关的界面，点击部门管理出现部门管理相关的界面。
结果展示：
附DeptView.vue和EmpView.vue两个组件代码：
DeptView.vue
<template>
<div>
<el-container style="height: 700px; border: 1px solid #eee">
<el-header>学习系统</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>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
font-size: 28px;
/* 字体加粗 */
}
</style>
EmpView.vue
<template>
<div class="demo-input-size, block">
<el-container style="height: 700px; border: 1px solid #eee">
<el-header>学习系统</el-header>
<el-container>
<!-- 如果不加style="border: 1px solid #eee aside右边的线不完整 -->
<el-aside width="200px" 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>
<!-- :model 绑定一个对象，从输入框获得，赋值给searchForm对象中每个参数，searchForm需要在script的data中创建 -->
<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="性别：">
<!-- 输入男/女，将其转为1/2-->
<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-picker
v-model="searchForm.entrydate"
type="daterange"
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>
<!-- :data 是实现分页符与表格联动的基本步骤，这是（1） -->
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column label="图像">
<template slot-scope="scope">
<!-- :是动态绑定的意思 将图片的地址绑定给src属性，就能输出图片 -->
<img :src="scope.row.image" width="15px">
</template>
</el-table-column>
<el-table-column label="性别">
<template slot-scope="scope">
<!-- 获得的数据是1/2，使用下面的代码显示男或女在界面上 -->
{{ scope.row.gender == 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="job" label="职位">
</el-table-column>
<el-table-column prop="entrydate" label="入职日期">
</el-table-column>
<el-table-column prop="updatetime" label="最后操作时间">
</el-table-column>
<el-table-column prop="operator" label="操作">
<el-row>
<el-button type="primary" size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-row>
</el-table-column>
</el-table>
<br>
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="currentPage"
:page-size="pagesize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="tableData.length"
>
<!-- current-page、page-size 两个属性动态绑定 -->
</el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
// import axios from 'axios';
export default {
data() {
return {
// 我没办法打开异步请求的链接，所以数据直接在tableData，如果有类似的数据，就把这里的注释掉，写成tableData:[],
tableData: [
{
"id": "1",
"name": "abc",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "2",
"name": "tom",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "讲师",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "3",
"name": "job",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "4",
"name": "angera",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 2,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "5",
"name": "anna",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "讲师",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "6",
"name": "朱丽叶",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "7",
"name": "爱丽丝",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "讲师",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "8",
"name": "谢谢",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "教授",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "9",
"name": "对不起",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},{
"id": "10",
"name": "不好意思",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 2,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": "11",
"name": "没关系",
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F10cb5890-f726-4de7-87d1-9a877ec82f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705650497&t=95099d904f0983b7f391146c69e87acd",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
],
// 数据模型
searchForm: {
name: "",
gender: "",
entrydate: []
},
input: '',
currentPage:1, //默认开始页面
pagesize:10,//每页数据条数
};
},
methods: {
// 每页显示的条目数
handleSizeChange:function(val){
this.pagesize = val
},
// 当前页数
handleCurrentChange:function(val){
this.currentPage = val
},
onSubmit:function(){
}
},
// mounted vue对象一创建挂载完成会自动发送请求加载数据
// mounted(){
// // 发送异步请求，获取数据
// axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list).then((result) => {
// this.tableData = result.data.data;
// });
// }
}
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
font-size: 28px;
/* 字体加粗 */
}
.el-aside {
background-color: #D3DCE6;
color: #333;
/* text-align: center;
line-height: 200px; */
}
.el-main {
background-color: white;
color: #333;
text-align: center;
/* line-height: 160px; */
}
</style>
三、nginx部署
（1）打包vue项目，vscode左下角点击build。
如果左下角没有npm脚本build，左上角菜单栏选终端–>运行任务–>弹出的输入框种搜索npm，选择npm:build vue-project。
打包好的项目在dist文件夹下。
（2）官网下载nginx，下载稳定版本。
nginx目录下有一个html文件夹用于存放静态文件，把dist目录里的所有文件拷贝到html文件夹（原有的直接删除）下。
（3）启动nginx，直接双击nginx.exe即可，默认端口80。
注：如果双击没有反应，任务管理器中也没有这个进程，查看nginx目录下的error.log文件，显示可能是端口80被占用。
打开cmd，输入netstat -ano | findStr 80，可以查看80端口被谁占用。
如果端口被别的进程占用，可以更换端口，在nginx/conf/nginx.conf，找到server–>listen，改为其他端口号。
之后双击nginx.exe，找到nginx.exe正在运行。
在浏览器中输入http://localhost:80，端口号换了就把80换成新的端口号。回车即可访问到部署的前端项目。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
