传智健康day01 项目概述和环境搭建

Dear 丶 2023-10-07 17:59 5阅读 0赞

## 1. 项目概述 ##

### 1.1 项目介绍 ###

传智健康管理系统是一款应用于健康管理机构的业务系统，实现健康管理机构工作内容可视化、会员管理专业化、健康评估数字化、健康干预流程化、知识库集成化，从而提高健康管理师的工作效率，加强与会员间的互动，增强管理者对健康管理机构运营情况的了解。

详见：资料中的传智健康PRD文档.docx

####  ####

### 1.2 原型展示 ###

参见资料中的静态原型。

### 1.3 技术架构 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16][]

### 1.4 功能架构 ###

### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 1][] ###

### 1.5 软件开发流程 ###

软件开发一般会经历如下几个阶段，整个过程是顺序展开，所以通常称为瀑布模型。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

## 二、环境搭建 ##

2.1 项目结构 本项目采用maven分模块开发方式，即对整个项目拆分为几个maven工程，每个maven 工程存放特定的一类代码，具体如下：

## ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 3][] ##

各模块职责定位：

health\_parent：父工程，打包方式为pom，统一锁定依赖的版本，同时聚合其他子模块便于统一执行maven命令

health\_common：通用模块，打包方式为jar，存放项目中使用到的一些工具类、实体类、返回结果和常量类

health\_interface：打包方式为jar，存放服务接口

health\_service\_provider：Dubbo服务模块，打包方式为war，存放服务实现类、Dao接口、Mapper映射文件等，作为服务提供方，需要部署到tomcat运行

health\_backend：传智健康管理后台，打包方式为war，作为Dubbo服务消费方，存放Controller、HTML页面、js、css、spring配置文件等，需要部署到tomcat运行

health\_mobile：移动端前台，打包方式为war，作为Dubbo服务消费方，存放Controller、HTML页面、js、css、spring配置文件等，需要部署到tomcat运行

### 2.2 maven项目搭建 ###

通过前面的项目功能架构图可以知道本项目分为传智健康管理后台和传智健康前台（微 信端）

#### 2.2.1 health\_parent ####

创建health\_parent，父工程，打包方式为pom，用于统一管理依赖版本

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>com.itterence</groupId>
        <artifactId>health_parent</artifactId>
        <version>1.0-SNAPSHOT</version>
        <modules>
            <module>health_common</module>
            <module>health_interface</module>
            <module>health_service_provider</module>
            <module>health_backend</module>
        </modules>
        <packaging>pom</packaging>
        
        <properties>
            <junit.version>4.12</junit.version>
            <spring.version>5.0.5.RELEASE</spring.version>
            <pagehelper.version>4.1.4</pagehelper.version>
            <servlet-api.version>2.5</servlet-api.version>
            <dubbo.version>2.6.0</dubbo.version>
            <zookeeper.version>3.4.7</zookeeper.version>
            <zkclient.version>0.1</zkclient.version>
            <mybatis.version>3.4.5</mybatis.version>
            <mybatis.spring.version>1.3.1</mybatis.spring.version>
            <mybatis.paginator.version>1.2.15</mybatis.paginator.version>
            <mysql.version>5.1.32</mysql.version>
            <druid.version>1.0.9</druid.version>
            <commons-fileupload.version>1.3.1</commons-fileupload.version>
            <spring.security.version>5.0.5.RELEASE</spring.security.version>
            <poi.version>3.14</poi.version>
            <jedis.version>2.9.0</jedis.version>
            <quartz.version>2.2.1</quartz.version>
        </properties>
        
        <dependencyManagement>
            <dependencies>
                
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-context</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-beans</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-web</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-webmvc</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-jdbc</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-aspects</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-jms</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-context-support</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-test</artifactId>
                    <version>${spring.version}</version>
                </dependency>
                
                <dependency>
                    <groupId>com.alibaba</groupId>
                    <artifactId>dubbo</artifactId>
                    <version>${dubbo.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.apache.zookeeper</groupId>
                    <artifactId>zookeeper</artifactId>
                    <version>${zookeeper.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.github.sgroschupf</groupId>
                    <artifactId>zkclient</artifactId>
                    <version>${zkclient.version}</version>
                </dependency>
                <dependency>
                    <groupId>junit</groupId>
                    <artifactId>junit</artifactId>
                    <version>4.12</version>
                </dependency>
                <dependency>
                    <groupId>com.alibaba</groupId>
                    <artifactId>fastjson</artifactId>
                    <version>1.2.47</version>
                </dependency>
                <dependency>
                    <groupId>javassist</groupId>
                    <artifactId>javassist</artifactId>
                    <version>3.12.1.GA</version>
                </dependency>
                <dependency>
                    <groupId>commons-codec</groupId>
                    <artifactId>commons-codec</artifactId>
                    <version>1.10</version>
                </dependency>
                <dependency>
                    <groupId>com.github.pagehelper</groupId>
                    <artifactId>pagehelper</artifactId>
                    <version>${pagehelper.version}</version>
                </dependency>
                
                <dependency>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis</artifactId>
                    <version>${mybatis.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis-spring</artifactId>
                    <version>${mybatis.spring.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.github.miemiedev</groupId>
                    <artifactId>mybatis-paginator</artifactId>
                    <version>${mybatis.paginator.version}</version>
                </dependency>
                
                <dependency>
                    <groupId>mysql</groupId>
                    <artifactId>mysql-connector-java</artifactId>
                    <version>${mysql.version}</version>
                </dependency>
                
                <dependency>
                    <groupId>com.alibaba</groupId>
                    <artifactId>druid</artifactId>
                    <version>${druid.version}</version>
                </dependency>
                
                <dependency>
                    <groupId>commons-fileupload</groupId>
                    <artifactId>commons-fileupload</artifactId>
                    <version>${commons-fileupload.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.quartz-scheduler</groupId>
                    <artifactId>quartz</artifactId>
                    <version>${quartz.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.quartz-scheduler</groupId>
                    <artifactId>quartz-jobs</artifactId>
                    <version>${quartz.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.sun.jersey</groupId>
                    <artifactId>jersey-client</artifactId>
                    <version>1.18.1</version>
                </dependency>
                <dependency>
                    <groupId>com.qiniu</groupId>
                    <artifactId>qiniu-java-sdk</artifactId>
                    <version>7.2.0</version>
                </dependency>
                
                <dependency>
                    <groupId>org.apache.poi</groupId>
                    <artifactId>poi</artifactId>
                    <version>${poi.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.apache.poi</groupId>
                    <artifactId>poi-ooxml</artifactId>
                    <version>${poi.version}</version>
                </dependency>
                <dependency>
                    <groupId>redis.clients</groupId>
                    <artifactId>jedis</artifactId>
                    <version>${jedis.version}</version>
                </dependency>
                
                <dependency>
                    <groupId>org.springframework.security</groupId>
                    <artifactId>spring-security-web</artifactId>
                    <version>${spring.security.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework.security</groupId>
                    <artifactId>spring-security-config</artifactId>
                    <version>${spring.security.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework.security</groupId>
                    <artifactId>spring-security-taglibs</artifactId>
                    <version>${spring.security.version}</version>
                </dependency>
                <dependency>
                    <groupId>com.github.penggle</groupId>
                    <artifactId>kaptcha</artifactId>
                    <version>2.3.2</version>
                    <exclusions>
                        <exclusion>
                            <groupId>javax.servlet</groupId>
                            <artifactId>javax.servlet-api</artifactId>
                        </exclusion>
                    </exclusions>
                </dependency>
                <dependency>
                    <groupId>dom4j</groupId>
                    <artifactId>dom4j</artifactId>
                    <version>1.6.1</version>
                </dependency>
                <dependency>
                    <groupId>xml-apis</groupId>
                    <artifactId>xml-apis</artifactId>
                    <version>1.4.01</version>
                </dependency>
            </dependencies>
        </dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>servlet-api</artifactId>
                <version>${servlet-api.version}</version>
                <scope>provided</scope>
            </dependency>
        </dependencies>
        <build>
            <plugins>
                
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.2</version>
                    <configuration>
                        <source>1.8</source>
                        <target>1.8</target>
                        <encoding>UTF-8</encoding>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    </project>

#### 2.2.2 health\_common ####

创建health\_common，子工程，打包方式为jar，存放通用组件，例如工具类、实体类等

pom.xml

#### 2.2.5 health\_interface ####

创建health\_interface，子工程，打包方式为jar，存放服务接口

pom.xml

#### 2.2.6 health\_service\_provider ####

创建health\_service\_provider，子工程，打包方式为war，作为服务单独部署，存放服务 类、Dao接口和Mapper映射文件等

pom.xml

创建数据库

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_13_color_FFFFFF_t_70_g_se_x_16][]

#### 2.2.7 health\_backend ####

创建health\_backend，子工程，打包方式为war，单独部署，存放Controller、页面等

pom.xml

log4j.properties

### direct log messages to stdout ###
    log4j.appender.stdout=org.apache.log4j.ConsoleAppender
    log4j.appender.stdout.Target=System.err
    log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
    log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
    
    ### direct messages to file mylog.log ###
    log4j.appender.file=org.apache.log4j.FileAppender
    log4j.appender.file.File=c:\\mylog.log
    log4j.appender.file.layout=org.apache.log4j.PatternLayout
    log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
    
    ### set log levels - for more verbose logging change 'info' to 'debug' ###
    
    log4j.rootLogger=debug, stdout

springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:context="http://www.springframework.org/schema/context"
           xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
           xmlns:mvc="http://www.springframework.org/schema/mvc"
           xsi:schemaLocation="http://www.springframework.org/schema/beans
    						http://www.springframework.org/schema/beans/spring-beans.xsd
    						http://www.springframework.org/schema/mvc
    						http://www.springframework.org/schema/mvc/spring-mvc.xsd
    						http://code.alibabatech.com/schema/dubbo
    						http://code.alibabatech.com/schema/dubbo/dubbo.xsd
    						http://www.springframework.org/schema/context
    						http://www.springframework.org/schema/context/spring-context.xsd">
        <mvc:annotation-driven>
            <mvc:message-converters register-defaults="true">
                <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                    <property name="supportedMediaTypes" value="application/json"/>
                    <property name="features">
                        <list>
                            <value>WriteMapNullValue</value>
                            <value>WriteDateUseDateFormat</value>
                        </list>
                    </property>
                </bean>
            </mvc:message-converters>
        </mvc:annotation-driven>
        
        <dubbo:application name="health_backend" />
        
        <dubbo:registry address="zookeeper://127.0.0.1:2181"/>
        
        <dubbo:annotation package="com.itterence.controller" />
        
        <dubbo:consumer timeout="600000" check="false"/>
        
        <bean id="multipartResolver"
              class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="maxUploadSize" value="104857600" />
            <property name="maxInMemorySize" value="4096" />
            <property name="defaultEncoding" value="UTF-8"/>
        </bean>
    </beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
             version="4.0">
        <display-name>Archetype Created Web Application</display-name>
        
        <filter>
            <filter-name>CharacterEncodingFilter</filter-name>
            <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
            <init-param>
                <param-name>encoding</param-name>
                <param-value>utf-8</param-value>
            </init-param>
            <init-param>
                <param-name>forceEncoding</param-name>
                <param-value>true</param-value>
            </init-param>
        </filter>
        <filter-mapping>
            <filter-name>CharacterEncodingFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
        <servlet>
            <servlet-name>springmvc</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:springmvc.xml</param-value>
            </init-param>
            <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet-mapping>
            <servlet-name>springmvc</servlet-name>
            <url-pattern>*.do</url-pattern>
        </servlet-mapping>
    </web-app>

## 3. Power Designer ##

### 3.1 Power Designer ###

介绍 PowerDesigner是Sybase公司的一款软件，使用它可以方便地对系统进行分析设计，他 几乎包括了数据库模型设计的全过程。利用PowerDesigner可以制作数据流程图、概念 数据模型、物理数据模型、面向对象模型。 在项目设计阶段通常会使用PowerDesigner进行数据库设计。使用PowerDesigner可以 更加直观的表现出数据库中表之间的关系，并且可以直接导出相应的建表语句。

### 3.2 Power Designer使用 ###

#### 3.2.1 创建物理数据模型 操作步骤： ####

（1）创建数据模型PDM

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

（2）选择数据库类型

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

（3）创建表和字段

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

**指定表名**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16][]

**创建字段**

## ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16 1][] ##

**设置某个字段属性，在字段上右键**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_15_color_FFFFFF_t_70_g_se_x_16][]

**添加外键约束**

点击工具类图标

![1be89a4e41104e5da4c64e0004e31c4d.png][]

然后点击订单表，拖动鼠标到用户表后松开

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

会自动生成一条带箭头的线指向用户表，双击这条线

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16][]

在弹出窗口中选择正确的外键

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16 3][]

外键字段修改成功，如图所示

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16 1][]

#### 3.2.2 从PDM导出SQL脚本 ####

可以通过PowerDesigner设计的PDM模型导出为SQL脚本，如下：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_17_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 1][]

#### 3.2.3 逆向工程 ####

上面我们是首先创建PDM模型，然后通过PowerDesigner提供的功能导出SQL脚本。实 际上这个过程也可以反过来，也就是我们可以通过SQL脚本逆向生成PDM模型，这称为 逆向工程，操作如下：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_15_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_15_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_11_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_15_color_FFFFFF_t_70_g_se_x_16 3][]

#### 3.2.4 生成数据库报表文件 ####

通过PowerDesigner提供的功能，可以将PDM模型生成报表文件，具体操作如下：

（1）打开报表向导窗

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 2][]

（2）指定报表名称和语言

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 3][]

（3）选择报表格式和样式

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 4][]![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 5][]

（4）选择对象类型

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 6][]

（5）执行生成操作

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 7][]

点击完成，选择保存位置

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 8][]

## 4. ElementUI ##

### 4.1 ElementUI ###

介绍 ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发 人员快速构建功能强大、风格统一的页面。

官网地址：[Element - 网站快速成型工具][Element -]

传智健康项目后台系统就是使用ElementUI来构建页面，在页面上引入 js 和 css 文件即 可开始使用，如下：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

### 4.2 常用组件 ###

#### 4.2.1 Container 布局容器 ####

用于布局的容器组件，方便快速搭建页面的基本结构：

`<el-container>`：外层容器。当子元素中包含 `<el-header>` 或 `<el-footer>` 时，全部子元素会垂直上下排列，否则会水平左右排列。

`<el-header>`：顶栏容器。

`<el-aside>`：侧边栏容器。

`<el-main>`：主要区域容器。

`<el-footer>`：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，`<el-container>` 的子元素只能是后四者，后四者的父元素也只能是 `<el-container>`。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

<div id="app">
        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-container>
                    <el-main>Main</el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
    
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }
    
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
    </style>
    <script>
        new Vue().$mount('#app')
    </script>

####  ####

#### 4.2.2 Dropdown 下拉菜单 ####

将动作或菜单折叠到下拉菜单中。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

<div id="app">
        <el-dropdown split-button type="primary" trigger="click">>
            默认尺寸
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item divided>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <script>
        new Vue().$mount('#app')
    </script>

#### 4.2.3 NavMenu 导航菜单 ####

为网站提供导航功能的菜单。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

<div id="app">
        <el-menu>
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">导航一</span>
                </template>
                <el-menu-item>选项1</el-menu-item>
                <el-menu-item>选项2</el-menu-item>
                <el-menu-item>选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                </template>
                <el-menu-item>选项1</el-menu-item>
                <el-menu-item>选项2</el-menu-item>
                <el-menu-item>选项3</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
    
    <script>
        new Vue().$mount('#app')
    </script>

#### 4.2.4 Table 表格 ####

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

<div id="app">
        <el-table :data="tableData" stripe>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" align="center">
                
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                //定义VUE对象的模型数据，用于table展示
                tableData:[
                    {date:'2019.10.10',name:'小明',address:'北京'},//每个json对象对应表格中一条数据
                    {date:'2019.10.10',name:'小李',address:'南京'}
                ]
            },
            methods:{
                //定义VUE对象的方法
                handleUpdate(row){
                    alert(row.name);
                },
                handleDelete(row){
                    alert(row.date);
                }
            }
        });
    </script>

#### 4.2.5 Pagination 分页 ####

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16 4][]

<div id="app">
        
        <el-pagination
                @current-change="handleCurrentChange"
                current-page="5"
                page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="305">
        </el-pagination>
    </div>
    <script>
        new Vue({
            el:'#app',
            methods:{
                handleCurrentChange(page){
                    alert(page);
                }
            }
        });
    </script>

#### 4.2.6 Message 消息提示 ####

常用于主动操作后的反馈提示。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

<div id="app">
        <el-button :plain="true" @click="open1">消息</el-button>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open3">警告</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>
    </div>
    <script>
        new Vue({
            el:'#app',
            methods:{
                open1() {
                    this.$message('这是一条消息提示');
                },
                open2() {
                    this.$message({
                        message: '恭喜你，这是一条成功消息',
                        type: 'success'
                    });
                },
                open3() {
                    this.$message({
                        message: '警告哦，这是一条警告消息',
                        type: 'warning'
                    });
                },
                open4() {
                    this.$message.error('错了哦，这是一条错误消息');
                }
            }
        });
    </script>

#### 4.2.7 Tabs 标签页 ####

分隔内容上有关联但属于不同类别的数据集合。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

<div id="app">
        <h3>基础的、简洁的标签页</h3>
        
        <el-tabs value="second">
            <el-tab-pane label="用户管理" name="first">用户管理...</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <h3>选项卡样式的标签页</h3>
        <el-tabs value="first" type="card">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <h3>卡片化的标签页</h3>
        <el-tabs value="first" type="border-card">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
    </div>
    <script>
        new Vue({
            el:'#app',
            methods:{
    
            }
        });
    </script>

#### 4.2.8 Form 表单 ####

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单 控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

<div id="app">
        
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <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 type="fixed-time" 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-form-item>
        </el-form>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                //定义校验规则
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ]
                }
            },
            methods:{
                onSubmit(){
                    //进行输入校验
                    this.$refs['form'].validate((valid)=>{
                        alert(valid);
                    });
                }
            }
        });
    </script>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ba56f60f22fe4199a467ce2b3325ea5e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/867b96e7e76e42239d7dbcb6d9d6b4a4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/26e82904276a44ee9e7feaa10338fdf0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/5bcac1ad3cb64bcc98cbc85ef4ce16eb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2c437d188e534e74abfa7d445deef596.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/d9bd8872ec0a4b379a0ddbfe40b8173c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/6423bdbce78846dcbf7ffcf47edc53cc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/30cda416133d4664bae48f5285e4c46f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1680c4a2e073407e8fc410963320ca88.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/cc6a45366c86481c95e9167d83b5dde2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/d083494defe64918af2d849aa3d2ffd6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1fef2aeb00d244f6b5ebb9fd481c73f7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_15,color_FFFFFF,t_70,g_se,x_16
[1be89a4e41104e5da4c64e0004e31c4d.png]: https://img-blog.csdnimg.cn/1be89a4e41104e5da4c64e0004e31c4d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/170de5a8340c4fbda3eb0bdfdbb8de31.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2a7ad9143ec84d42b85f3103b2f55250.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/f062e10aa20640b6b3deed5a40f45fe3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_12_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/4109e1b9873f46c7abd8d06a8e942cfe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2c214969b9e84126939714d3cd1a695a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2a8529a30970475a9d9fad0311877350.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0c2d1b64c0304d3eb12dd5695a7dd2ec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_15_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/fb6d82f0b2bd4c8382b81598e68eadbe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_15_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/9fe54dccb60b48699ddf8fe766ab6483.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b789043d8ad74e23ac754df7e78692b5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_15_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/ee780eba30db44d4a6f0a2b0a3398d5e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/d29f2b3ca86b4c23b26e5990b8674598.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/0d1fdd0a8d904cbcb25ef1a10ba9a3b0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/5e3fea79b7be42b6899547262d5c27d4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/00b84e70a99a42b99dbc80301778c20a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/2b8b6a2bb1b74758bcefe1174b7746a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/4b36d540ea224b729c43f162b9d010f5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_16_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/59779d7068f94c3e88b19849dd5035c7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_16,color_FFFFFF,t_70,g_se,x_16
[Element -]: https://element.eleme.cn/#/zh-CN
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/e2ea81aa605f4185a7481d25f914bc85.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/cbc672ca1e10426faf0b11745c5895c5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/e3d4cfdd0b2246d8b83d70e91c73c6a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/a92292c301e9477dbe9121a376b96bc1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_18_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/055799b9a3a64bdeb2ca02d736d69a1f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/8989d8f18f9a4f9db8a93aea7f72b465.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/020547d172cb48458d21f666a2ffef2f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAVGVyZW5jZUtpbmc_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/de6f02c367664a52af12d69dda6f357c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGVyZW5jZUtpbmc=,size_20,color_FFFFFF,t_70,g_se,x_16