【JavaWeb】Vue下篇（Element）

旧城等待， 2024-04-26 03:02 1阅读 0赞

> 🔥 本文由 [程序喵正在路上][Link 1] 原创，CSDN首发！  
> 💖 系列专栏：[JavaWeb开发][JavaWeb]  
> 🌠 首发时间：2024年2月2日  
> 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

#### 目录 ####

*  Vue组件库Element
 *   *  Element介绍
     *  快速入门
     *  常见组件
     *  案例
 *  Vue路由
 *  打包部署

## Vue组件库Element ##

### Element介绍 ###

*  Element：是由饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
 *  什么是组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等
 *  官网：[https://element.eleme.cn/\#/zh-CNListener][https_element.eleme.cn_zh-CNListener]

原始效果和使用Element效果对比：

![在这里插入图片描述][b17b91de11ec44cc8cd2b9fd4f5e9510.png]

### 快速入门 ###

1.  安装ElementUI组件库 （在当前工程的目录下）
    
     *  首先，先关闭 Vscode 中任务的执行
     *  在项目文件夹处右键，选择在集成终端中打开  
        ![在这里插入图片描述][605710aa1ccb47909ab7210d5dd50b79.png]
     *  执行指令：`npm install element-ui@2.15.3`  
        ![在这里插入图片描述][82d2a07dffd64c2eb47d8608b20053b7.png]
     *  安装完成，element-ui 会存放在 node\_modules 文件夹下  
        ![在这里插入图片描述][85399da19e964db5881c95e498ccd044.png]
2.  引入ElementUI组件库
    
     *  打开 main.js 文件，添加以下代码：
        
            import ElementUI from 'element-ui';
            import 'element-ui/lib/theme-chalk/index.css';
            Vue.use(ElementUI);
        
        ![在这里插入图片描述][eb7457c4b1314075ae9df54f81d60d8e.png]
3.  访问官网，复制组件代码，调整
    
     *  在 views 文件夹下新建一个文件夹 element，并在 element 中新建一个组件文件 ElementView.vue，命令建议使用驼峰命令法，不然可能会报错
        
        ![在这里插入图片描述][ea6da281c489436ca1bcd1572b10c882.png]
     *  填入基础框架
        
        ![在这里插入图片描述][7cdedc3dfdc744d5b7bcdbb1cdffe839.png]
     *  下面我们演示一下 element 的 button 按钮，在 element 的官网中，找到组件部分的 Button 按钮，选择我们想要的按钮，复制其代码即可
        
        ![在这里插入图片描述][3b60263633aa44278170d4ace5cafedd.png]
     *  将复制的代码粘贴到 div 标签中，并使用快捷键 Shift\+Alt\+F 格式化一下代码，如果代码有相应的 CSS 样式，也要记得复制过来
        
        ![在这里插入图片描述][d3dbcc02d2e74559948b0586d893a5ec.png]
     *  在 App.vue 中导入 ElementView.vue 组件文件，先删去 App.vue 文件中 div 标签中的内容，然后敲出 <element，在提示框中按下向下的方向键到 ElementViewVue 选项，然后回车，最后再将 div 标签中的内容修改一下即可
        
        ![在这里插入图片描述][49796045b63f440cb9ae1f207b24a2c7.png]
        
        最终结果：
        
        ![在这里插入图片描述][baa7d8191a5f41b993da9f1473aed00e.png]
     *  启动
        
        ![在这里插入图片描述][fb4cbacb98b94c3d8fd5add2ab90b821.png]

### 常见组件 ###

**Table 表格**

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

![在这里插入图片描述][23e05b2877a5475a86f06cd93a159103.png]

还是跟之前一样的套路，在 Element 官网找到 Table 表格，选择自己想要的表格样式，将其源代码复制到我们的工程中即可

![在这里插入图片描述][f65c006db7e94205a68e742e0ee5ca67.png]

效果：

![在这里插入图片描述][c95c74bb5d34405b86c90e5183d1603c.png]

在官网的 Table 表格最下方，有关于源代码中每个参数的介绍：

![在这里插入图片描述][c8efcd5011dd447c9d347fa6b39b13b6.png]

**Pagination 分页**

Pagination 分页：当数据量过多时，使用分页分解数据

![在这里插入图片描述][c5f410eba74b40dfbf7075af20d1c6c0.png]

我们下面演示的是带有背景色的分页

初始代码及效果：

![在这里插入图片描述][1fdd1451024b4fc6aef7873701ec6977.png]

![在这里插入图片描述][624fab30f2bf48e3a37e802d80ccc6cd.png]  
我们查看 Pagination 分页的参数介绍，发现参数 layout 还有其它组件：

![在这里插入图片描述][2d24cb2734264bc9b1632169b70e7d2b.png]

添加一些试试看：

![在这里插入图片描述][dea3f36fb9074787ae13a1b6143987dd.png]  
![在这里插入图片描述][5faeaf5e5d5144a1a16f958de672d52f.png]

除此之外，我们还可以给分页添加事件，我们主要学习两个事件即可：

![在这里插入图片描述][2988d1905c3a494896f4332b5ddbdcfe.png]

在附加功能的源代码中，我们可以看到它是如何添加事件的，我们将其复制粘贴到我们的代码中即可：

![在这里插入图片描述][6beed28c51934bfabde80e464f744388.png]

![在这里插入图片描述][9a812a7ebd984d88a87391569906ebff.png]

添加后的代码及效果：

![在这里插入图片描述][40e6cc87fa1b4057aade0f8b83c6fce2.png]

`script` 标签里面添加用于事件的方法，注意逗号：

![在这里插入图片描述][0d6a7543668847b4b6afcd42800f4a57.png]

警告不用管：

![在这里插入图片描述][033e85ceb9474021a36619ec1ffb320a.png]

**Dialog 对话框**

Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作

还是一样的套路，我们这里就演示一下自定义内容的对话框：

![在这里插入图片描述][97f5906efac041e7beb25dc78b201525.png]

复制粘贴代码：

![在这里插入图片描述][c69a7e84ba124f38807c0dc8b7a88a5b.png]  
![在这里插入图片描述][2008e4865f77405a95c4a94b9dff76c1.png]

效果：

![在这里插入图片描述][2aebbf07923647fca3d6a14e53322e47.png]

**Form 表单**

Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

![在这里插入图片描述][0d77714a18c84b079b5fbf410903eb11.png]

下面我们来使用一下典型的表单，我们模仿前面对话框的写法，实现点击页面上的按钮就可以了弹出表单的效果

我们将官网的代码复制粘贴并进行一定的改进，使其实现我们预期的效果，完整代码如下：

`template` 标签内添加的代码：

<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
    
    <el-dialog title="活动" :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 label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
    
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
    
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
    
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
    
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

`script` 标签内添加的代码：

效果：

![在这里插入图片描述][2f73b383167c4e80b8c8ee1bd7a0bcbe.png]

### 案例 ###

使用 Element 组件库实现下面这个界面，由于没有服务端的数据，所以请求数据部分可以不写：

![在这里插入图片描述][39fe869298724ae38da40b14257f467d.png]

步骤：

*  创建页面，完成页面的整体布局规划
 *  布局中各个部分的组件实现

在工程的 views 文件夹下新建一个文件夹 tlias，再新建一个组件文件 EmpView.vue，将基础内容写入 EmpView.vue 文件中：

![在这里插入图片描述][2b6f58ac0dc247c8ab2f5a34507924c7.png]

同时，要在 App.vue 文件中引用该组件，页面才会显示这个新组件：

![在这里插入图片描述][5a023e35731b449fac88f389bb9470f7.png]

接下来，我们开始来写页面

在 Element 中，存在着一个[布局容器组件][Link 2]，可以帮助我们快速搭建页面：

![在这里插入图片描述][9ae5a754d0304662873bc269dd289fa1.png]

找到适合案例的布局：

![在这里插入图片描述][29a6b837a63946fca4f276f55fadffa2.png]

也就是第四个：

![在这里插入图片描述][be0e2f6a91324583822e46f831eb59e6.png]

复制对应的代码到 EmpView.vue 中：

![在这里插入图片描述][3b15e4b62f8f4824bf6b935338ca9d92.png]

接下来，参考官网这个实例的代码，来完成页面的整体布局规划：

![在这里插入图片描述][c2b5ff27a88a4255933d4dad5787a43b.png]

具体过程就是复制粘贴，再稍微修改一下就行，完整代码：

效果：

![在这里插入图片描述][0cb6753b66034bd3bae15ba3ea2116c9.png]

接下来，参考官网[ Form 表单中行内表单][Form]、[DatePicker 日期选择器中的选择日期范围][DatePicker]和前面我们所学的分页的源代码，将页面完善：

完善后代码：

<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']">
                <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>
              
              <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.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>
    
              
              <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
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="sizes, prev, pager, next, jumper, total"
                :total="1000"
              ></el-pagination>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
          
      data() {
          
        return {
          
          tableData: [],
          searchForm: {
          
            name: "",
            gender: "",
            entrydate: []
          }
        };
      },
      methods: {
          
        onSubmit() {
          
          alert("查询数据");
        },
        handleSizeChange(val) {
          
          console.log(`每页 ${ val} 条`);
        },
        handleCurrentChange(val) {
          
          console.log(`当前页: ${ val}`);
        }
      }
    };
    </script>
    
    <style>
    </style>

最终效果：

![在这里插入图片描述][574d67c7e7c5405fb9eb0ff887858d16.png]

## Vue路由 ##

![在这里插入图片描述][07dd8a706e554e168155e69891833bc9.png]

在前面的案例中，我们写的界面中有两个菜单，分别为部门管理和员工管理，它们分别由两个组件文件来实现，如果我们想实现在界面中点击哪个菜单就跳转到相应的界面，这就涉及到 Vue 路由的知识了

前面我们只写了员工管理页面的代码，这里我们给出部门管理的代码，后面需要用到，请在 tlias 文件夹下新建组件文件 DeptView.vue，并将代码复制到其中：

前端路由：URL 中的 hash（\#号）与组件之间的对应关系

**什么是Vue路由**

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

![在这里插入图片描述][cd62e76d2d3e4b46abe0106726a978e7.png]

**如何使用 Vue 路由**

1.  安装 (创建Vue项目时已选择)，这一步在前面创建 Vue 工程时我们已经勾选，所以直接跳过
    
    指令：`npm install vue-router@3.5.1`
2.  在 `router` 文件夹下的 `index.js` 中定义路由
    
    我们可以看到，在 `index.js` 中，已经向我们展示了如何来定义路由：
    
    ![在这里插入图片描述][add7e47ca72a4ed2862c1ea0b174d0e3.png]
    
     *  方式一：在前面导入要使用的组件文件，参数 path 设置为 ‘/’，component 设置为对应的组件名称
     *  方式二：参数 path 设置为 ‘/组件名缩写’，直接在 component 中导入要使用的组件文件
     *  两种方式都可以

接下来，我们来定义路由：

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

定义完路由，我们还需要修改一些代码，才能实现页面切换的效果：

将 `DeptView.vue` 和 `EmpView.vue` 中这两处地方都套上一层 `router-link` 标签，来实现当我们点击哪个文本就选择哪个路由的效果：

![在这里插入图片描述][2524ff8e9f864ed7883c63f7d49f7047.png]

然后在 App.vue 中使用 router-view 标签来动态决定展示哪个页面：

![在这里插入图片描述][ae1e3d7e2b744e5eb4c1fe798b58d5b0.png]

最终效果：

![在这里插入图片描述][6dbc71ba22574c79a42c8a2312b02a54.png]

![在这里插入图片描述][3b17396e84f44b1fafd19f31fd90c6d0.png]

但是，如果我们重新启动一下项目，会发现页面变成了空白：

![在这里插入图片描述][a4c5834417e045eab81044c4c128af81.png]

这是因为系统默认一开始访问的路径是 `'/'`，但是我们并没有配置 `'/'` 的路由，所以访问不到页面，我们只需要配置一下就好了

![在这里插入图片描述][a693d6a488064af69b85848534ace354.png]

我们给它配置当访问 `'/'` 时，重定向到 `'\dept'`，这样就可以访问到页面了

![在这里插入图片描述][04b753cc7be44577a5afd9a884536bf3.png]

## 打包部署 ##

在前后端分离开发中，前端人员开发前端程序，后端人员开发后端程序，这两部分程序需要分开部署在对应的服务器上

打包部署分为打包和部署两个步骤

**打包**

Vscode 中前端程序的打包很简单，我们只需要点击一下 NPM 脚本中的 build，然后就会自动打包到项目的 dist 文件夹中：

![在这里插入图片描述][dfe295613d584bcba68189dd0c63e2c6.png]

**部署**

Nginx

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

下面我们来安装 Nginx

点击下载：

![在这里插入图片描述][e00c32128ec54786ad66f58acc2a3b9d.png]

选择稳定版本下载：

![在这里插入图片描述][24c301540f584b7d8d26ce9a765236a1.png]

将其解压到一个路径没有中文没有空格的文件夹下：

![在这里插入图片描述][158d339abfa4440a843d4b91c60c3f20.png]

这里简单介绍一下这个文件夹：

![在这里插入图片描述][faf5e610567c4abb95ff1465ce3cc0e4.png]

接下来，我们先将 html 目录下的内容删除，再将打包好的 dist 目录下的文件复制到 nginx 安装目录的 html 目录下：

![在这里插入图片描述][12add301efaf4de884060a7f68e9a6e8.png]

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

我们双击 nginx.exe，会发现什么都没有发生，按住 Ctrl \+ Shift \+ ESC 打开任务管理器，查看一下是否有 nginx.exe 这个进程：

![在这里插入图片描述][f0536109f11245e0ad68c4febb22ea76.png]

如果没有，那应该是 80 端口已经被占用了，我们可以修改一下 nginx.exe 的默认占用端口：

打开 conf 目录下的 nginx.conf：

![在这里插入图片描述][1a17627f21bf4abb8cdd5a0466907e3a.png]

找到图中的内容，将 80 修改为一个没有占用的端口号即可：

![在这里插入图片描述][99e6266067fd4255b8a561e0250a5a5d.png]

nginx 启动后，我们来到浏览器，在地址栏输入 `localhost:80`（端口号和我不一样的要改），然后回车，就可以访问到部署在 nginx 服务器上的页面了

![在这里插入图片描述][76c6046d0be74b44bf4c05dbd7031e7a.png]

[Link 1]: https://blog.csdn.net/weixin_62511863?spm=1011.2421.3001.5343
[JavaWeb]: https://blog.csdn.net/weixin_62511863/category_12511257.html?spm=1001.2014.3001.5482
[https_element.eleme.cn_zh-CNListener]: https://element.eleme.cn/#/zh-CNListener
[b17b91de11ec44cc8cd2b9fd4f5e9510.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0efadb5282c04c579790355150308185.png
[605710aa1ccb47909ab7210d5dd50b79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0209dc4ad1954e1bbc1b335b09e84ef3.png
[82d2a07dffd64c2eb47d8608b20053b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ad944c93221748678ed6a4a18f8e21a2.png
[85399da19e964db5881c95e498ccd044.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0d20e98fd5584b628da8ed5691bf52d6.png
[eb7457c4b1314075ae9df54f81d60d8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/edb22b2504754b1bbb59a553861666e5.png
[ea6da281c489436ca1bcd1572b10c882.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3328f90a9ce746ab98dc7856c3d7dc9b.png
[7cdedc3dfdc744d5b7bcdbb1cdffe839.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3383ba705056456b92fd8b072dded52d.png
[3b60263633aa44278170d4ace5cafedd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/876833eaa79045618f04520852904308.png
[d3dbcc02d2e74559948b0586d893a5ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/02a23ef086ac4197bfa146db09b5a862.png
[49796045b63f440cb9ae1f207b24a2c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4297410155be4d899c7356d364e49e41.png
[baa7d8191a5f41b993da9f1473aed00e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f66f0b8ddf0947afa5779b72c2ae3b65.png
[fb4cbacb98b94c3d8fd5add2ab90b821.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a87e7c3c7a174b0492b4949c18a7c856.png
[23e05b2877a5475a86f06cd93a159103.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ed65ad7082cc4d6c9df694400ec61eae.png
[f65c006db7e94205a68e742e0ee5ca67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8ad790b1cc4040f2aa7803dc283edf71.png
[c95c74bb5d34405b86c90e5183d1603c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e1dcfe08a4d44dcdafbae68074f3adf7.png
[c8efcd5011dd447c9d347fa6b39b13b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/71c848996a514cbd89a361ff5a9098c1.png
[c5f410eba74b40dfbf7075af20d1c6c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ea94957e743d422cb8838c2f0ea75fb1.png
[1fdd1451024b4fc6aef7873701ec6977.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c2a2127285fd4401b01cc730e7cecd03.png
[624fab30f2bf48e3a37e802d80ccc6cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/66a93c7dd3854bdcb35f66304aa540c0.png
[2d24cb2734264bc9b1632169b70e7d2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/150402af19d149ed9b08a42b8dc75632.png
[dea3f36fb9074787ae13a1b6143987dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e563473410e344a5ad8ef0a9f1778df2.png
[5faeaf5e5d5144a1a16f958de672d52f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/04d4b72440ea47ee88ea5e3f14f865ee.png
[2988d1905c3a494896f4332b5ddbdcfe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3095f1539b894b92a244ee5dbe0fc7c0.png
[6beed28c51934bfabde80e464f744388.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/cf31ff4fef1f49e7af66bd3122e03bfe.png
[9a812a7ebd984d88a87391569906ebff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0a41ad35a2af4bd7bcac06409663c76d.png
[40e6cc87fa1b4057aade0f8b83c6fce2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/cf218dcb4d1046728b49cc48197b8731.png
[0d6a7543668847b4b6afcd42800f4a57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/15e3f9813a364e62ba2e59f081032988.png
[033e85ceb9474021a36619ec1ffb320a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/88b24b8cf8ad419789a0c58058dc52ab.png
[97f5906efac041e7beb25dc78b201525.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/424edc56cb854c4cbd247fc108f61730.png
[c69a7e84ba124f38807c0dc8b7a88a5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ff89f851f31145b4929293a73d2dae99.png
[2008e4865f77405a95c4a94b9dff76c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b9ead2a07de44893905ae21268c9bf2e.png
[2aebbf07923647fca3d6a14e53322e47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/72d769c7a591468da2b99e0888227216.png
[0d77714a18c84b079b5fbf410903eb11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/03421e6681ff4113806d8538f0701a7a.png
[2f73b383167c4e80b8c8ee1bd7a0bcbe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/bc17417f3726442789576a3b2fdb7fbc.png
[39fe869298724ae38da40b14257f467d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7cf7336b89f74973942ef24178b61f8e.png
[2b6f58ac0dc247c8ab2f5a34507924c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8ae5b6a424054143a6e71774b8a69e4c.png
[5a023e35731b449fac88f389bb9470f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1645874696834c1eb9d092e3bb139720.png
[Link 2]: https://element.eleme.cn/#/zh-CN/component/container
[9ae5a754d0304662873bc269dd289fa1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a50f811c4704408fb1b91627a669d787.png
[29a6b837a63946fca4f276f55fadffa2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5eca258a0d6e468b8f2c04c6e652ea73.png
[be0e2f6a91324583822e46f831eb59e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7ae6b8f8d49041d3808bd13ce6737e86.png
[3b15e4b62f8f4824bf6b935338ca9d92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4a8ecfbba2714c0698bafeb89c1fbe52.png
[c2b5ff27a88a4255933d4dad5787a43b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/51019523ac5b4411b9d65d28ca9ab3ee.png
[0cb6753b66034bd3bae15ba3ea2116c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d87da56b33cd4d15a7c011e9c8368ac7.png
[Form]: https://element.eleme.cn/#/zh-CN/component/form
[DatePicker]: https://element.eleme.cn/#/zh-CN/component/date-picker
[574d67c7e7c5405fb9eb0ff887858d16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5011edd23a744e9f9cafdddc13f7fc05.png
[07dd8a706e554e168155e69891833bc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/75739d2ad6cf46c0a66d651e17595449.png
[cd62e76d2d3e4b46abe0106726a978e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/137194cd10754134b9d88e9b0817e6dc.png
[add7e47ca72a4ed2862c1ea0b174d0e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fb81aa59e309459c86e281b06580a071.png
[2524ff8e9f864ed7883c63f7d49f7047.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/130457950f6d4fb69f8f31f5ef2b222a.png
[ae1e3d7e2b744e5eb4c1fe798b58d5b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/60c00a10782b45a4af60b986177ecf3d.png
[6dbc71ba22574c79a42c8a2312b02a54.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/dbc9d6833d794655993f102807bb6fb6.png
[3b17396e84f44b1fafd19f31fd90c6d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/727772296edb444b95537802ad43f50d.png
[a4c5834417e045eab81044c4c128af81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/889cd870687a48e4a9cf76216ce48bec.png
[a693d6a488064af69b85848534ace354.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fea1fb64eaa34e7bb30de1665b52f983.png
[04b753cc7be44577a5afd9a884536bf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b21cfe8307554ced8957758b0406e23f.png
[dfe295613d584bcba68189dd0c63e2c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/dbc1bffd76d64d449fe9351fcd39c790.png
[https_nginx.org]: https://nginx.org/
[e00c32128ec54786ad66f58acc2a3b9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7702480ae2f3411498b93f4b7bd04b1f.png
[24c301540f584b7d8d26ce9a765236a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b3a6b056d2444790aea97a336242e38f.png
[158d339abfa4440a843d4b91c60c3f20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/be428e904a5e42efa3a0887afc31333f.png
[faf5e610567c4abb95ff1465ce3cc0e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/176d7d09c88b407cb12ded311a4d4e4f.png
[12add301efaf4de884060a7f68e9a6e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a746cf7edb6b4537a47707da974f1ae2.png
[f0536109f11245e0ad68c4febb22ea76.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/424a9049c7964797969549babf04015a.png
[1a17627f21bf4abb8cdd5a0466907e3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/dee7d4957b8e426fa250b68a5a850a58.png
[99e6266067fd4255b8a561e0250a5a5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0257bdda4d1c437990b958d16fe9ee27.png
[76c6046d0be74b44bf4c05dbd7031e7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9d9b46e5c3084774ac7a4c9f3356a2d5.png