热门标签
热门文章
- 1java调用百度地图API根据地理位置获取经纬度_java 百度地图xy轴坐标转经纬度
- 2Python代理IP异常：requests.exceptions.ProxyError: HTTPSConnectionPool(host=‘xxxx‘, port=443)
- 3QT QIFW Windows下制作安装包(一)_qt程序安装包制作
- 4Android ：RxJava学习笔记之转换操作符_rxjava groupby
- 5前端之vuejs再启航_将vue.js添加到项目中主要有四种方式:在页面上以cdn包的形式导入
- 6长短期记忆网络（Long Short-Term Memory networks, LSTM）
- 7SOTA是什么？
- 8HTTP详解
- 9银河麒麟V10安装后，网速慢，断网，网络图标显示“！”、网卡：RTL8111/8168/8411_银河麒麟v10网卡驱动
- 10《Docker 简易速速上手小册》第9章 Docker 与持续集成（2024 最新版）
当前位置: article > 正文
使用vue+element-ui进行简单前端开发_vue element ui搭建前端教程
作者：IT小白 | 2024-02-19 07:19:49
赞
踩
vue element ui搭建前端教程
案例来源：黑马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是否安装成功
- 1
- 2
- 3
- 4
- 5
- 6
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,
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
运行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: {
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
（3）style：写css代码。
2、vue组件库Element
（1）安装：在vscode当前工程目录下的终端中执行命令：
npm install element-ui@2.15.3
- 1
安装完成后可以在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);
- 1
- 2
- 3
- 4
- 5
（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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
这个配置代码可以直接生效，因为在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>
- 1
- 2
- 3
- 4
- 5
- 6
（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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
都完成就可以实现点击员工管理出现员工相关的界面，点击部门管理出现部门管理相关的界面。
结果展示：
附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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
三、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换成新的端口号。回车即可访问到部署的前端项目。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/113333
推荐阅读
相关标签
