【Web开发手礼】探索Web开发的秘密（十八）-Vue2（4）部门管理页面、路由、打包部署

主要介绍了部门管理页面、路由、打包部署！！！

文章目录

前言

部门管理页面

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="200px">
                    <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" style="width: 100%">
                        <el-table-column prop="name" label="名称" width="180">
                        </el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="210">
                        </el-table-column>
                        <el-table-column prop="operate" 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>

 

• <router-link to="/dept">部门管理</router-link> 和 <router-link to="/emp">员工管理</router-link>: 使用 Vue Router 的 <router-link> 组件，使得点击菜单项可以进行路由导航到 /dept 和 /emp 路径。
• <el-table :data="tableData" style="width: 100%">: Element UI 的表格组件，:data="tableData" 绑定了表格的数据源为 tableData 变量，:style="width: 100%" 设置表格宽度为 100%。
• <el-table-column prop="name" label="名称" width="180">: 表格列组件，prop 属性指定数据字段，label 属性设置列名，width 属性设置列宽度。
• <el-table-column prop="updatetime" label="最后操作时间" width="210">: 另一列，显示最后操作时间。

主要实现了一个基本的管理系统界面，包括顶部标题、侧边栏菜单（包含系统信息管理的子菜单）、主内容区域（包含一个表格，用于显示名称、最后操作时间和操作按钮）。通过 Vue Router 和 Element UI 的组件，实现了路由导航和响应式的页面布局。

Vue路由

介绍： Vue Router 是 Vue 的官方路由。

组成：

• VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
• <router-link>：请求链接组件，浏览器会解析成<a>
• <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

 

• 安装 （创建Vue项目是可选择）

npm install vue-router@3.5.1

 

•  定义路由

 

import Vue from 'vue'
import VueRouter from 'vue-router'

import EmpView from '@/views/tlias/EmpView.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: EmpView
  },
  {
    path: '/emp',
    name: 'Emp',
    component: EmpView
  },
  {
    path: '/dept',
    name: 'Dept',
    component: ()=> import ('@/views/tlias/DeptView.vue')
  },
]

const router = new VueRouter({
  routes
})

export default router

•  import Vue from 'vue': 导入 Vue 模块。
• import VueRouter from 'vue-router': 导入 Vue Router 模块，用于处理路由。
• import EmpView from '@/views/tlias/EmpView.vue': 导入名为 EmpView 的视图组件，路径为 @/views/tlias/EmpView.vue。
• import DeptView from '@/views/tlias/DeptView.vue': 导入名为 DeptView 的视图组件，路径为 @/views/tlias/DeptView.vue。
• Vue.use(VueRouter): 告诉 Vue 使用 VueRouter 插件来管理路由。
• const routes = [...]: 定义了一个名为 routes 的数组，包含了路由对象的配置信息。
• 每个路由对象有以下属性：
  • path: 路由路径，例如 '/' 表示根路径，'/emp' 表示员工管理路径，'/dept' 表示部门管理路径。
  • name: 路由名称，用于标识路由。
  • component: 路由对应的视图组件。
    • component: EmpView: 根路径 '/' 和 '/emp' 使用同一个视图组件 EmpView。
    • component: () => import('@/views/tlias/DeptView.vue'): 部门管理路径 '/dept' 使用延迟加载的方式导入 DeptView 组件。
• onst router = new VueRouter({ routes }): 使用 routes 数组创建了一个 VueRouter 实例 router。
• export default router: 导出 router 实例，以便在 Vue 应用中使用该路由配置。

{
    path: '/',
    redirect: '/dept'
  },

• path: '/'

  • 这表示当访问根路径 '/' 时，将会触发重定向操作。

• redirect: '/dept'

  • 这表示将根路径 '/' 重定向到 '/dept' 路径。

• 重定向的目标路径必须在路由配置中存在。在你的路由配置中，确保有一个名为 'dept' 的路径，并且该路径正确指向了部门管理页面的组件。

• 重定向可以提供更好的用户体验，例如可以将用户直接引导到应用的主要内容页面，而不需要他们手动输入路径或者点击导航链接。

App.vue中

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

 

打包部署

 打包

部署

 介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。

官网：https://nginx.org/

 

部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下。

 

启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号

 

注：Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr  80)  

直接访问：http://localhost:端口号即可。

---

总结

主要介绍了部门管理页面、路由、打包部署！！！