[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署

春天的菠菜2023-08-19 13:33

目录

[一 什么是Vue](#一 什么是Vue)

[1.1 Vue快速入门](#1.1 Vue快速入门)

[1.2 常用指令](#1.2 常用指令)

[1.2.1 v-bind && v-model](#1.2.1 v-bind && v-model)

[1.2.2 v-on](#1.2.2 v-on)

[1.2.3 v-if && v-show](#1.2.3 v-if && v-show)

[1.2.4 v-for](#1.2.4 v-for)

[1.2.5 案例](#1.2.5 案例)

[1.3 生命周期](#1.3 生命周期)

[二 Ajax](#二 Ajax)

[2.1 Ajax介绍](#2.1 Ajax介绍)

[2.2 同步与异步](#2.2 同步与异步)

[2.3 原生Ajax（繁琐，过时了）](#2.3 原生Ajax（繁琐，过时了）)

[2.4 Axios 【重点】](#2.4 Axios 【重点】)

[2.4.1 Axios介绍](#2.4.1 Axios介绍)

[2.4.2 Axios入门](#2.4.2 Axios入门)

[2.4.3 案例](#2.4.3 案例)

[三 前后端分离开发](#三 前后端分离开发)

[3.1 前后端混合开发](#3.1 前后端混合开发)

[3.2 前后端分离开发](#3.2 前后端分离开发)

[3.2.1 介绍前后端分离开发](#3.2.1 介绍前后端分离开发)

[3.2.2 界面原型](#3.2.2 界面原型)

[3.2.3 接口文档示例](#3.2.3 接口文档示例)

[3.2.3.1 根据ID查询员工](#3.2.3.1 根据ID查询员工)

[3.2.3.1.1 基本信息](#3.2.3.1.1 基本信息)

[3.2.3.1.2 请求参数](#3.2.3.1.2 请求参数)

[3.2.3.1..3 响应数据](#3.2.3.1..3 响应数据)

[3.2.4 YAPI接口文档管理平台](#3.2.4 YAPI接口文档管理平台)

[3.2.4.1 添加项目](#3.2.4.1 添加项目)

[3.2.4.2 添加分类](#3.2.4.2 添加分类)

[3.2.4.3 添加接口](#3.2.4.3 添加接口)

[3.2.4.4 编辑接口](#3.2.4.4 编辑接口)

[3.2.4.5 高级Mock](#3.2.4.5 高级Mock)

[四 前端工程化](#四 前端工程化)

[4.1 环境准备（vue-cli 脚手架）](#4.1 环境准备（vue-cli 脚手架）)

[4.1.1 安装node.js](#4.1.1 安装node.js)

[4.1.1.1. 双击资料中提供的安装包](#4.1.1.1. 双击资料中提供的安装包)

[4.1.1.2. 选择安装目录](#4.1.1.2. 选择安装目录)

[4.1.1.3. 验证NodeJS环境变量](#4.1.1.3. 验证NodeJS环境变量)

[4.1.1.4. 配置npm的全局安装路径](#4.1.1.4. 配置npm的全局安装路径)

[4.1.1.5. 切换npm的淘宝镜像](#4.1.1.5. 切换npm的淘宝镜像)

[4.1.1.6. 安装Vue-cli](#4.1.1.6. 安装Vue-cli)

[4.2 Vue项目简介](#4.2 Vue项目简介)

[4.2.1 Vue项目创建](#4.2.1 Vue项目创建)

[4.2.1.1 创建一个vue目录，cmd输入vue ui](#4.2.1.1 创建一个vue目录，cmd输入vue ui)

[4.2.1.2 创建](#4.2.1.2 创建)

[4.2.2 Vue项目-目录结构](#4.2.2 Vue项目-目录结构)

[4.2.3 Vue项目-启动](#4.2.3 Vue项目-启动)

[4.2.4 Vue项目-配置端口](#4.2.4 Vue项目-配置端口)

[4.3 Vue项目开发流程](#4.3 Vue项目开发流程)

[五 Vue组件库Element](#五 Vue组件库Element)

[5.1 Element快速入门](#5.1 Element快速入门)

[5.1.1 安装组件](#5.1.1 安装组件)

[5.1.2main.js 引入ElementUi组件库，记得保存](#5.1.2main.js 引入ElementUi组件库，记得保存)

[5.1.3 views目录下新建emement文件夹，再新建ElementView.vue文件](#5.1.3 views目录下新建emement文件夹，再新建ElementView.vue文件)

[5.1.4 根组件App.vue 引入ElementView.vue](#5.1.4 根组件App.vue 引入ElementView.vue)

[5.1.5 启动项目](#5.1.5 启动项目)

[5.2 常见组件](#5.2 常见组件)

[5.2.1 常见组件-表格](#5.2.1 常见组件-表格)

[5.2.2 常见组件-分页](#5.2.2 常见组件-分页)

[5.2.2.1 事件](#5.2.2.1 事件)

[5.2.2.2 复制代码](#5.2.2.2 复制代码)

[5.2.3 常见组件-对话框](#5.2.3 常见组件-对话框)

[5.2.4 常见组件-表单](#5.2.4 常见组件-表单)

[5.2.5 常见组件-Container布局容器](#5.2.5 常见组件-Container布局容器)

[5.3 案例](#5.3 案例)

[5.3.1 实现效果目标：](#5.3.1 实现效果目标：)

[5.3.2 分析](#5.3.2 分析)

[5.3.3 views下新建study文件夹再新建EmpView.vue文件](#5.3.3 views下新建study文件夹再新建EmpView.vue文件)

[5.3.4 修改App.vue](#5.3.4 修改App.vue)

[5.3.5 框架布局](#5.3.5 框架布局)

[​编辑 5.3.6 查询条件Form表单布局](#编辑 5.3.6 查询条件Form表单布局)

[5.3.6.1 日期控件](#5.3.6.1 日期控件)

[5.3.6.2 查询表单设置完毕](#5.3.6.2 查询表单设置完毕)

[5.3.7 分页条](#5.3.7 分页条)

[5.3.8 列表数据异步加载，并渲染展示](#5.3.8 列表数据异步加载，并渲染展示)

[5.3.8.1 安装Axios](#5.3.8.1 安装Axios)

[5.3.8.2 引入Axios](#5.3.8.2 引入Axios)

[六 Vue路由](#六 Vue路由)

[6.1 安装路由](#6.1 安装路由)

[6.2 定义路由](#6.2 定义路由)

[6.2.1 先在 views-》study文件夹再新建DeptView.vue文件，](#6.2.1 先在 views-》study文件夹再新建DeptView.vue文件，)

[6.2.2 修改APP.vue（配置动态路由方式）](#6.2.2 修改APP.vue（配置动态路由方式）)

[6.2.3 定义路由以及重定向](#6.2.3 定义路由以及重定向)

[6.3 案例：完成左侧菜单切换效果](#6.3 案例：完成左侧菜单切换效果)

[6.3.1 EmpView.vue](#6.3.1 EmpView.vue)

[6.3.2 DeptView.vue](#6.3.2 DeptView.vue)

[七 打包](#七 打包)

[八 部署](#八 部署)

[8.1 下载安装ngnix](#8.1 下载安装ngnix)

[8.2 部署](#8.2 部署)

[8.3 启动](#8.3 启动)

[8.3.1 如果进程没有查看错误日志](#8.3.1 如果进程没有查看错误日志)

[8.3.2 变更ngnix端口(访问需要加端口)](#8.3.2 变更ngnix端口(访问需要加端口))

前言：Vue学习：快速入门、常用指令、生命周期等；Ajax、Element、打包部署等

一 什么是Vue

1.1 Vue快速入门

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

1.2 常用指令

1.2.1 v-bind && v-model

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</html>

1.2.2 v-on

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

1.2.3 v-if && v-show

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

1.2.4 v-for

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <div v-for="addr in addrs">{{addr}}</div>

        <hr>

        <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

1.2.5 案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

1.3 生命周期

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

二 Ajax

2.1 Ajax介绍

2.2 同步与异步

2.3 原生Ajax（繁琐，过时了）

2.4 Axios 【重点】

2.4.1 Axios介绍

2.4.2 Axios入门

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })


        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        // axios.get("http://199.28.10.137:8081/api/mock/100012/emp/list").then(result => {
            console.log(result.data);
        })
    }

    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method: "post",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
        // axios.post("http://199.28.10.137:8081/api/mock/100012/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
    }
</script>
</html>

2.4.3 案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        // axios.get("http://199.28.10.137:8081/api/mock/100012/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>

三 前后端分离开发

3.1 前后端混合开发

3.2 前后端分离开发

3.2.1 介绍前后端分离开发

3.2.2 界面原型

https://download.csdn.net/download/legend818/88222560

3.2.3 接口文档示例

3.2.3.1 根据ID查询员工

3.2.3.1.1 基本信息

请求路径：/emp

请求方式：GET

接口描述：该接口用于根据ID查询员工信息

3.2.3.1.2 请求参数

参数说明：

参数名 类型 是否必须 备注
id number 必须 员工ID

请求样例：

复制代码 
GET http://localhost:8080/emp?id=15
3.2.3.1..3 响应数据

参数格式：application/json

参数说明：

名称 类型 是否必须 备注 其他信息
code number 必须 响应码, 1 成功 , 0 失败
msg string 非必须 提示信息
data object 必须 返回的数据
|- id number 非必须 id
|- name string 非必须 姓名
|- gender number 非必须 性别 , 1 男 ; 2 女
|- image string 非必须 图像
|- job number 非必须 职位
|- entrydate string 非必须 入职日期
|- updateTime string 非必须 更新时间

响应数据样例：

复制代码 
{
    "code": 1,
    "message": "success",
    "data": {
        "id": 15,
        "name": "谢逊",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2008-05-09",
        "updatetime": "2022-10-01 12:00:00"
    }
}

3.2.4 YAPI接口文档管理平台

3.2.4.1 添加项目

3.2.4.2 添加分类

3.2.4.3 添加接口

3.2.4.4 编辑接口

3.2.4.5 高级Mock

四 前端工程化

4.1 环境准备（vue-cli 脚手架）

4.1.1 安装node.js

NodeJS安装

4.1.1.1. 双击资料中提供的安装包

4.1.1.2. 选择安装目录

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

4.1.1.3. 验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

4.1.1.4. 配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

复制代码 
npm config set prefix "E:\develop\NodeJS"

查看是否成功

我是：npm config set prefix "D:\Program Files\nodejs"

注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

<这里我出现了一个错误：npm WARN config global `--global`, `--local` are deprecated. Use `--location报错>

【解决方案：找到将npm、npm.cmd、npx、npx.cmd中的 prefix -g 替换为 prefix --location=global 。一定要将这4个文件夹的权限修改为完全控制】

4.1.1.5. 切换npm的淘宝镜像

使用管理员身份运行命令行，在命令行中，执行如下指令：

复制代码 
npm config set registry https://registry.npm.taobao.org

4.1.1.6. 安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

复制代码 
npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

我的是：

检查：vue --version

4.2 Vue项目简介

4.2.1 Vue项目创建

4.2.1.1 创建一个vue目录，cmd输入vue ui

4.2.1.2 创建

耐心等待

4.2.2 Vue项目-目录结构

4.2.3 Vue项目-启动

插曲：Visual Studio Code中npm脚本找不到

4.2.4 Vue项目-配置端口

ctrl+ c

修改需要重启服务

4.3 Vue项目开发流程

五 Vue组件库Element

5.1 Element快速入门

5.1.1 安装组件

插曲：npm运行脚本不见了，这样能切换回来

npm install element-ui@2.15.3

5.1.2main.js 引入ElementUi组件库，记得保存

javascript 复制代码 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入ElementUI 组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5.1.3 views目录下新建emement文件夹，再新建ElementView.vue文件

html 复制代码 
<template>
    
</template>

<script>
export default {
    
}
</script>

<style>

</style>

上官网的button组件，复制代码

Element - The world's most popular Vue UI framework

html 复制代码 
<template>
    <div>
        <!-- button按钮-->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>
    
</template>

<script>
export default {
    
}
</script>

<style>

</style>

5.1.4 根组件App.vue 引入ElementView.vue

输入<element-view></element-view>会自动引入import

html 复制代码 
<template>
  <div>
      <!-- <h1>{{message}}</h1> -->
      <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },
  data () {
    return {
      message: "Hello Vue!"
    }
  },
  methods: {
    
  },
}

</script>


<style>

</style>

5.1.5 启动项目

5.2 常见组件

5.2.1 常见组件-表格

ElementView.vue 注意除了复制template部分还需要复制数据模型部分

html 复制代码 
<template>
  <div>
    <!-- button按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data () {
        return {
                  tableData: [{
          date: '2010-05-02',
          name: '舒淇',
          address: '香港鹏罗湾区18 弄'
        }, {
          date: '2011-05-04',
          name: '黑泽',
          address: '岛国74i弄'
        }, {
          date: '2013-05-01',
          name: '伊莲娜',
          address: '漂亮国111弄'
        }, {
          date: '2014-05-03',
          name: '邱淑贞',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        }
    }

};
</script>

<style>
</style>

要了解表格属性，看官方表格的最下方

5.2.2 常见组件-分页

根据属性修改

5.2.2.1 事件

5.2.2.2 复制代码

html 复制代码 
<template>
  <div>
    <!-- button按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br />
    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <!-- Pagination 分页 -->
    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2010-05-02",
          name: "舒淇",
          address: "香港鹏罗湾区18 弄",
        },
        {
          date: "2011-05-04",
          name: "黑泽",
          address: "岛国74i弄",
        },
        {
          date: "2013-05-01",
          name: "伊莲娜",
          address: "漂亮国111弄",
        },
        {
          date: "2014-05-03",
          name: "邱淑贞",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  // 新增这2个方法
  methods: {
    handleSizeChange:function(val){
        alert("每页记录数变化" + val)

    },
    handleCurrentChange:function(val){
        alert("页码发生变化" + val)

    }
  },
};
</script>

<style>
</style>

5.2.3 常见组件-对话框

html 复制代码 
<template>
  <div>
    <!-- button按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br />
    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <!-- Pagination 分页 -->
    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    >
    </el-pagination>
    <br /><br />
    <!-- Dialog 对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      tableData: [
        {
          date: "2010-05-02",
          name: "舒淇",
          address: "香港鹏罗湾区18 弄",
        },
        {
          date: "2011-05-04",
          name: "黑泽",
          address: "岛国74i弄",
        },
        {
          date: "2013-05-01",
          name: "伊莲娜",
          address: "漂亮国111弄",
        },
        {
          date: "2014-05-03",
          name: "邱淑贞",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  // 新增这2个方法
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
  },
};
</script>

<style>
</style>

5.2.4 常见组件-表单

没有使用表单的全部内容删除了部分字段

html 复制代码 
<template>
  <div>
    <!-- button按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br />
    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <!-- Pagination 分页 -->
    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    >
    </el-pagination>
    <br /><br />
    <!-- Dialog 对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>

    <br /><br />
    <!-- Dialog 对话框 里面展示Form表单-->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套Form表单 Dialog</el-button
    >

    <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>      
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',          
        },
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [
        {
          date: "2010-05-02",
          name: "舒淇",
          address: "香港鹏罗湾区18 弄",
        },
        {
          date: "2011-05-04",
          name: "黑泽",
          address: "岛国74i弄",
        },
        {
          date: "2013-05-01",
          name: "伊莲娜",
          address: "漂亮国111弄",
        },
        {
          date: "2014-05-03",
          name: "邱淑贞",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  // 新增这2个方法
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit:function(){
        alert(JSON.stringify(this.form));
    }
  },
};
</script>

<style>
</style>

5.2.5 常见组件-Container布局容器

5.3 案例会使用（略）

5.3 案例

原型见 智能学习辅助系统原型下载 打开直接点登录--》员工管理

5.3.1 实现效果目标：

5.3.2 分析

5.3.3 views下新建study文件夹再新建EmpView.vue文件

html 复制代码 
<template>
    <div></div>
</template>

<script>
export default {
    
}
</script>


<style>

</style>

5.3.4 修改App.vue

输<emq + Enter 会自动导入import

html 复制代码 
<template>
  <div>
      <!-- <h1>{{message}}</h1> -->
      <!-- <element-view></element-view>   这个是之前的页面1-->

      <!-- 员工管理 -->
     <emp-view></emp-view>
  </div>
</template>

<script>
import EmpView from './views/study/EmpView.vue'
/*  import ElementView from './views/element/ElementView.vue'  这个是之前的页面1 */
export default {
  components: {EmpView /* ElementView  这个是之前的页面1 */},
  data () {
    return {
      message: "Hello Vue!"
    }
  },
  methods: {
    
  },
}

</script>


<style>

</style>


<!--
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

-->

5.3.5 框架布局

html 复制代码 
<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>


<style>
</style>

通过实例复制优化代码

html 复制代码 
<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</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">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main
          ><el-table :data="tableData"  border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></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></el-main
        >
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data () {
        return {
           tableData: []
        }
    }
};
</script>


<style>
</style>

布局完成

5.3.6 查询条件Form表单布局

5.3.6.1 日期控件

5.3.6.2 查询表单设置完毕

html 复制代码 
<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</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">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </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-picker
                v-model="searchForm.entrydata"
                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>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></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></el-main
        >
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
      entrydata: []
    };
  },
  methods: {
    onSubmit: function () {
      alert("查询数据");
    },
  },
};
</script>


<style>
</style>

5.3.7 分页条

html 复制代码 
<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</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">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </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-picker
                v-model="searchForm.entrydata"
                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>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></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>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="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>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
      entrydata: []
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
};
</script>


<style>
</style>

5.3.8 列表数据异步加载，并渲染展示

5.3.8.1 安装Axios

html 复制代码 
npm install axios

5.3.8.2 引入Axios

html 复制代码 
import axios from 'axios';

技巧 ：输入 thenc 回车即可

html 复制代码 
<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</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">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </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-picker
                v-model="searchForm.entrydata"
                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>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></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>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="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: "",
      },
      entrydata: []
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
  mounted() {
    // 发送异步请求，获取数据  thenc 回车即可
    axios.get("http://199.28.10.137:8081/api/mock/100012/emp/list").then((result) => {
        this.tableData = result.data.data  // result.data 是固定，  再。data 是因为我们需要(我们接口自己定义的是data)json返回的data
    });
  },
};
</script>


<style>
</style>

继续处理上面2个部分

html 复制代码 
<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</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">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </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-picker
                v-model="searchForm.entrydata"
                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>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名"  width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180">
                <template slot-scope="scope">
                            <img :src="scope.row.image" width="100px" height="70px">               
                        </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>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="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: "",
      },
      entrydata: []
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
  mounted() {
    // 发送异步请求，获取数据  thenc 回车即可
    axios.get("http://199.28.10.137:8081/api/mock/100012/emp/list").then((result) => {
        this.tableData = result.data.data  // result.data 是固定，  再。data 是因为我们需要(我们接口自己定义的是data)json返回的data
    });
  },
};
</script>


<style>
</style>

六 Vue路由

6.1 安装路由

本文略，因为上面创建项目的时候，勾选了路由自动创建了

6.2 定义路由

6.2.1 先在 views-》study文件夹再新建DeptView.vue文件，

javascript 复制代码 
<template>
    <div></div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

6.2.2 修改APP.vue（配置动态路由方式）

javascript 复制代码 
<template>
  <div>
      <!-- <h1>{{message}}</h1> -->
      <!-- <element-view></element-view>   这个是之前的页面1-->

    <!-- 有路由之后，就可以通过合作方式，动态展示 -->
      <router-view></router-view>   
      <!-- 员工管理 -->
     <!-- <emp-view></emp-view> -->
  </div>
</template>

<script>

/* import EmpView from './views/study/EmpView.vue' */
/*  import ElementView from './views/element/ElementView.vue'  这个是之前的页面1 */
export default {
  components: {/* EmpView */ /* ElementView  这个是之前的页面1 */},
  data () {
    return {
      message: "Hello Vue!"
    }
  },
  methods: {
    
  },
}

</script>


<style>

</style>


<!--
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

-->

6.2.3 定义路由以及重定向

javascript 复制代码 
import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/emp'
  },
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/study/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/study/DeptView.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

6.3 案例：完成左侧菜单切换效果

6.3.1 EmpView.vue

javascript 复制代码 
<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</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-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-picker
                v-model="searchForm.entrydata"
                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>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名"  width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180">
                <template slot-scope="scope">
                            <img :src="scope.row.image" width="100px" height="70px">               
                        </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>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="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: "",
      },
      entrydata: []
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
  mounted() {
    // 发送异步请求，获取数据  thenc 回车即可
    axios.get("XXXX/api/mock/100012/emp/list").then((result) => {
        this.tableData = result.data.data  // result.data 是固定，  再。data 是因为我们需要(我们接口自己定义的是data)json返回的data
    });
  },
};
</script>


<style>
</style>

6.3.2 DeptView.vue

javascript 复制代码 
<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</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-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>
              <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 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>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="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: "",      
      },     
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
  mounted() {
    // 发送异步请求，获取数据  thenc 回车即可
    axios.get("XXXX/api/mock/100012/dept/list").then((result) => {
        this.tableData = result.data.data  // result.data 是固定，  再。data 是因为我们需要(我们接口自己定义的是data)json返回的data
    });
  },
};
</script>


<style>
</style>

七 打包

八 部署

8.1 下载安装ngnix

8.2 部署

ngnix--》html目录下的初始化文件可删除了，再复制dist

8.3 启动

启动一闪而过，什么情况，查看进程，发现有ngnix.exe

输入：http://localhost/ 可访问系统

8.3.1 如果进程没有查看错误日志

javascript 复制代码 
# cmd查看80端口被占用命令
netstat -ano | findStr 80

8.3.2 变更ngnix端口(访问需要加端口)

conf ---> ngnix.conf

相关推荐
轻口味21 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami23 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs：GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习（三）
前端
AiFlutter1 小时前
Flutter-底部分享弹窗（showModalBottomSheet）
java·前端·flutter
麦兜*1 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库