学生管理 + 用户管理（Element版）

Myth丶恋晨 2023-09-30 09:37 8阅读 0赞

### **1.1 搭建环境** ###

*  创建vue项目：vue create day16\_element\_student
 *  安装第三方组件：axios、element

> **npm install axios  
> vue add element**

### 1.2 查询所有前端 ###

#### 1.2.1. 显示页面 ####

*  创建页面

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_8_color_FFFFFF_t_70_g_se_x_16][]

*  配置路由

const routes = [
      {
        path: '/studentList',
        name: '学生列表',
        component: () => import('../views/StudentList.vue')
      }
    ]

*  访问路径

[ http://localhost:8080/studentList][http_localhost_8080_studentList]

#### 1.2.2 ajax操作 ####

<template>
      <div>
        {
       {studentPage}}
      </div>
    </template>
    
    <script>
    // 导入axios
    import axios from 'axios'
    export default {
      data() {
        return {
          studentVo: {    //条件查询
    
          },
          studentPage: {    //分页数据
            pageNum: 1,
            pageSize: 3
          }
        }
      },
      methods: {
        async condition() {
          // ajax查询
          var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
          let {data:baseResult} = await axios.post(url, this.studentVo)
          // 保存结果
          this.studentPage = baseResult.data
        }
      },
      mounted() {
        // 查询
        this.condition()
      },
    }
    </script>
    
    <style>
    
    </style>

#### 1.2.3 整合element ui ####

<template>
      <div>
        
        <el-form :inline="true" :model="studentVo" size="mini" >
          <el-form-item label="班级">
            <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>
              <el-option label="Java12班" value="c001"></el-option>
              <el-option label="Java56班" value="c003"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-col :span="11">
              <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="condition(1)">查询</el-button>
          </el-form-item>
        </el-form>
        
        
        <el-table
          :data="studentPage.list"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="sid"
            label="编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sname"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cid"
            label="班级"
            width="180">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="180">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="生日"
            width="180">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="180">
            <template slot-scope="scope">
              {
       {scope.row.gender == 1 ? "男" : "女"}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="studentPage.pageNum"
          :page-sizes="[1, 2, 3, 5, 10]"
          :page-size="studentPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="studentPage.total">
        </el-pagination>
        
      </div>
    </template>
    
    <script>
    // 导入axios
    import axios from 'axios'
    export default {
      data() {
        return {
          studentVo: {    //条件查询
    
          },
          studentPage: {    //分页数据
            pageNum: 1,
            pageSize: 3
          }
        }
      },
      methods: {
        async condition(num) {
          if(num) {
            this.studentPage.pageNum = num
          }
          // ajax查询
          var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
          let {data:baseResult} = await axios.post(url, this.studentVo)
          // 保存结果
          this.studentPage = baseResult.data
        },
        handleSelectionChange(val) {
          console.info('批量删除')
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.studentPage.pageSize = val
          this.studentPage.pageNum = 1
          // 重新开始
          this.condition()
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.studentPage.pageNum = val
          // 重新开始
          this.condition()
        }
      },
      mounted() {
        // 查询
        this.condition()
      },
    }
    </script>
    
    <style>
    
    </style>

### 1.3 导航（嵌套路由） ###

*  步骤1：创建页面
    
     *  创建登录页面（模板页面）
     *  编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）
     *  创建页面：ClassesList.vue
 *  步骤2：配置路由
 *  步骤3：编写布局容器和导航

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16][]

步骤1：创建页面

*  创建登录页面（模板页面）
 *  编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）
 *  创建页面：ClassesList.vue

![ab60328684254bd6809c6210a53389c7.png][]

步骤2：配置路由

const routes = [
      {
        path: '/',
        redirect: '/home'    //重定向
      },
      {
        path: '/login',
        name: '登录',
        component: () => import('../views/Login.vue')
      },
      {
        path: '/home',
        name: '首页',
        component: () => import('../views/Home.vue'),
        children: [
          {
            path: '/studentList',
            name: '学生列表',
            component: () => import('../views/StudentList.vue')
          },
          {
            path: '/classesList',
            name: '班级列表',
            component: () => import('../views/ClassesList.vue')
          }
        ]
      },
      
    ]

步骤3：编写布局容器和导航

*  **修改main.js，配置css加载顺序（配置重置样式）**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_15_color_FFFFFF_t_70_g_se_x_16][]

*  修改App.vue，配置样式，上下自动填充

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_13_color_FFFFFF_t_70_g_se_x_16][]

*  编写Home页面，完成导航和二级路由显示

<template>
      <el-container>
        <el-header class="home-header">
          
          <el-menu
            :default-active="$route.path"
            router
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="/home">首页</el-menu-item>
            <el-submenu index="/classes">
              <template slot="title">班级管理</template>
              <el-menu-item index="/classesList">班级列表</el-menu-item>
            </el-submenu>
            <el-submenu index="/student">
              <template slot="title">学生管理</template>
              <el-menu-item index="/studentList">学生列表</el-menu-item>
            </el-submenu>
          </el-menu>
          
        </el-header>
        <el-main>
          
          <router-view></router-view>
        </el-main>
        <el-footer>学生管理系统Element UI 版</el-footer>
      </el-container>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
      .el-container {
        height: 100%;
      }
      .home-header {
        padding: 0;
      }
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }
    </style>

### 1.4 编辑学生（弹出框） ###

#### 1.4.1 分析 ####

*  页面布局：
    
     *  添加一个“添加”按钮，点击可以显示弹出层
     *  拷贝添加的弹出框Dialog，且要求表单（班级列表、id、名称、年龄、生日、性别）
 *  提供student变量，用于表单数据的绑定
 *  ajax操作
    
     *  查询班级列表
     *  添加按钮绑定事件，进行ajax提交（成功：刷新列表关闭弹出框，失败：错误提示，但不关闭弹出框）

#### 1.4.2 页面布局 ####

*  页面布局：
    
     *  添加一个“添加”按钮，点击可以显示弹出层

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

*  拷贝添加的弹出框Dialog，且要求表单（班级列表、id、名称、年龄、生日、性别）

<el-dialog title="添加学生" :visible.sync="addStudentDialogVisible">
          <el-form :model="student" label-width="80px">
            <el-form-item label="班级列表" >
              <el-select v-model="student.cid" placeholder="请选择班级">
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="id" >
              <el-input v-model="student.sid"></el-input>
            </el-form-item>
            <el-form-item label="名称" >
              <el-input v-model="student.sname"></el-input>
            </el-form-item>
            <el-form-item label="生日" >
              <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="年龄" >
              <el-input v-model="student.age"></el-input>
            </el-form-item>
            <el-form-item label="性别" >
              <el-radio-group v-model="student.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addStudentDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStudentDialogVisible = false">确 定</el-button>
          </div>
        </el-dialog>

*  提供student变量，用于表单数据的绑定

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

#### 1.4.3 添加：ajax操作 ####

*  查询班级列表

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

*  添加按钮绑定事件，进行ajax提交（成功：刷新列表关闭弹出框，失败：错误提示，但不关闭弹出框）

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

<template>
      <div>
        
        <el-form :inline="true" :model="studentVo" size="mini" >
          <el-form-item label="班级">
            <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>
              <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-col :span="11">
              <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="condition(1)">查询</el-button>
          </el-form-item>
        </el-form>
        
        <el-button type="primary" @click="openAddDialog" >添加</el-button>
        
        <el-dialog title="添加学生" :visible.sync="addStudentDialogVisible">
          <el-form :model="student" label-width="80px">
            <el-form-item label="班级列表" >
              <el-select v-model="student.cid" placeholder="请选择班级">
                <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="id" >
              <el-input v-model="student.sid"></el-input>
            </el-form-item>
            <el-form-item label="名称" >
              <el-input v-model="student.sname"></el-input>
            </el-form-item>
            <el-form-item label="生日" >
              <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="年龄" >
              <el-input v-model="student.age"></el-input>
            </el-form-item>
            <el-form-item label="性别" >
              <el-radio-group v-model="student.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addStudentDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStudent">确 定</el-button>
          </div>
        </el-dialog>
        
        
        <el-table
          :data="studentPage.list"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="sid"
            label="编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sname"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cid"
            label="班级"
            width="180">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="180">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="生日"
            width="180">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="180">
            <template slot-scope="scope">
              {
       {scope.row.gender == 1 ? "男" : "女"}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="studentPage.pageNum"
          :page-sizes="[1, 2, 3, 5, 10]"
          :page-size="studentPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="studentPage.total">
        </el-pagination>
        
      </div>
    </template>
    
    <script>
    // 导入axios
    import axios from 'axios'
    export default {
      data() {
        return {
          studentVo: {    //条件查询
    
          },
          studentPage: {    //分页数据
            pageNum: 1,
            pageSize: 3
          },
          addStudentDialogVisible: false,     //添加弹出框的控制变量
          student: {        //添加表单对象
    
          },
          classesList: [],  // 所有班级
        }
      },
      methods: {
        async condition(num) {
          if(num) {
            this.studentPage.pageNum = num
          }
          // ajax查询
          var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
          let {data:baseResult} = await axios.post(url, this.studentVo)
          // 保存结果
          this.studentPage = baseResult.data
        },
        handleSelectionChange(val) {
          console.info('批量删除')
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.studentPage.pageSize = val
          this.studentPage.pageNum = 1
          // 重新开始
          this.condition()
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.studentPage.pageNum = val
          // 重新开始
          this.condition()
        },
        async selectAllClasses() {
          // ajax 查询所有的班级
          var url = `http://localhost:8888/classes`
          let { data: baseResult } = await axios.get(url)
          // 保存结果
          this.classesList = baseResult.data
        },
        openAddDialog() {
          // 打开弹出框
          this.addStudentDialogVisible = true
          // 清空表单数据
          this.student = {}
          // 查询班级列表
          this.selectAllClasses()
        },
        async addStudent() {
          // 添加学生ajax
          var url = `http://localhost:8888/student/saveOrUpdate`
          let { data: baseResult } = await axios.post(url, this.student)
          // 处理结果
          if(baseResult.code == 20000) {
            // 成功：刷新页面，成功提示，关闭弹出框
            this.condition()
            this.$message.success(baseResult.message)
            this.addStudentDialogVisible = false
          } else {
            // 失败：失败提示
            this.$message.error(baseResult.message)
          }
        }
      },
      mounted() {
        // 查询班级
        this.selectAllClasses()
        // 查询学生
        this.condition()
      },
    }
    </script>
    
    <style>
    
    </style>

#### 1.4.4 修改：ajax操作 ####

*  点击修改按钮，通过id查询详情，显示弹出框，并自动填充表单。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

<template>
      <div>
        
        <el-form :inline="true" :model="studentVo" size="mini" >
          <el-form-item label="班级">
            <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>
              <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-col :span="11">
              <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="condition(1)">查询</el-button>
          </el-form-item>
        </el-form>
        
        <el-button type="primary" @click="openAddDialog" >添加</el-button>
        
        <el-dialog :title="dialogTitle" :visible.sync="addStudentDialogVisible">
          <el-form :model="student" label-width="80px">
            <el-form-item label="班级列表" >
              <el-select v-model="student.cid" placeholder="请选择班级">
                <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="id" >
              <el-input v-model="student.sid"></el-input>
            </el-form-item>
            <el-form-item label="名称" >
              <el-input v-model="student.sname"></el-input>
            </el-form-item>
            <el-form-item label="生日" >
              <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="年龄" >
              <el-input v-model="student.age"></el-input>
            </el-form-item>
            <el-form-item label="性别" >
              <el-radio-group v-model="student.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addStudentDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStudent">确 定</el-button>
          </div>
        </el-dialog>
        
        
        <el-table
          :data="studentPage.list"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="sid"
            label="编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sname"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cid"
            label="班级"
            width="180">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="180">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="生日"
            width="180">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="180">
            <template slot-scope="scope">
              {
       {scope.row.gender == 1 ? "男" : "女"}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="openUpdateDialog(scope.row.sid)">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="studentPage.pageNum"
          :page-sizes="[1, 2, 3, 5, 10]"
          :page-size="studentPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="studentPage.total">
        </el-pagination>
        
      </div>
    </template>
    
    <script>
    // 导入axios
    import axios from 'axios'
    export default {
      data() {
        return {
          studentVo: {    //条件查询
    
          },
          studentPage: {    //分页数据
            pageNum: 1,
            pageSize: 3
          },
          addStudentDialogVisible: false,     //添加弹出框的控制变量
          student: {        //添加表单对象
    
          },
          classesList: [],  // 所有班级
          dialogTitle: '',  // 弹出框的标题
        }
      },
      methods: {
        async condition(num) {
          if(num) {
            this.studentPage.pageNum = num
          }
          // ajax查询
          var url = `http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`
          let {data:baseResult} = await axios.post(url, this.studentVo)
          // 保存结果
          this.studentPage = baseResult.data
        },
        handleSelectionChange(val) {
          console.info('批量删除')
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.studentPage.pageSize = val
          this.studentPage.pageNum = 1
          // 重新开始
          this.condition()
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.studentPage.pageNum = val
          // 重新开始
          this.condition()
        },
        async selectAllClasses() {
          // ajax 查询所有的班级
          var url = `http://localhost:8888/classes`
          let { data: baseResult } = await axios.get(url)
          // 保存结果
          this.classesList = baseResult.data
        },
        openAddDialog() {
          // 设置标题
          this.dialogTitle = '添加学生'
          // 打开弹出框
          this.addStudentDialogVisible = true
          // 清空表单数据
          this.student = {}
          // 查询班级列表
          this.selectAllClasses()
        },
        async openUpdateDialog(sid) {
          // 设置标题
          this.dialogTitle = '修改学生'
          // 通过id查询详情
          var url = `http://localhost:8888/student/${sid}`
          let { data: baseResult } = await axios.get(url)
          this.student = baseResult.data
          // 查询班级列表
          this.selectAllClasses()
          // 打开弹出框
          this.addStudentDialogVisible = true
        },
        async addStudent() {
          // 添加学生ajax
          var url = `http://localhost:8888/student/saveOrUpdate`
          let { data: baseResult } = await axios.post(url, this.student)
          // 处理结果
          if(baseResult.code == 20000) {
            // 成功：刷新页面，成功提示，关闭弹出框
            this.condition()
            this.$message.success(baseResult.message)
            this.addStudentDialogVisible = false
          } else {
            // 失败：失败提示
            this.$message.error(baseResult.message)
          }
        }
      },
      mounted() {
        // 查询班级
        this.selectAllClasses()
        // 查询学生
        this.condition()
      },
    }
    </script>
    
    <style>
    
    </style>

## 2. 用户管理 ##

### 2.1 用户名登录 ###

#### 2.1.1 显示登录页面 ####

#### 2.1.2 表单校验 ####

*  普通字段校验

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

<template>
      <div class="login">
        <el-card class="login-card">
          <div slot="header" class="clearfix">
            <el-button type="text" icon="el-icon-home">传智专修学院</el-button>
          </div>
          
          <el-form ref="form" :model="user" :rules="loginRules" label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
          
        </el-card>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          user: {},
          loginRules: {   //校验规则
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        login() {
          this.$message.success('ajax发送')
        }
      },
    }
    </script>
    
    <style>
      .login {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .login-card {
        width: 500px;
      }
    </style>

*  程序校验

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

<template>
      <div class="login">
        <el-card class="login-card">
          <div slot="header" class="clearfix">
            <el-button type="text" icon="el-icon-home">传智专修学院</el-button>
          </div>
          
          <el-form ref="loginForm" :model="user" :rules="loginRules" label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" show-password prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
          
        </el-card>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          user: {},
          loginRules: {   //校验规则
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        login() {
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              // 校验通过
              this.$message.success('ajax发送')
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          
        }
      },
    }
    </script>
    
    <style>
      .login {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .login-card {
        width: 500px;
      }
    </style>

#### 2.1.3 ajax提交 ####

*  表单校验通过后，发送ajax，如果登录成功跳转到首页，如果失败提示“用户名或密码不匹配”

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

methods: {
        login() {
          this.$refs.loginForm.validate(async (valid) => {
            if (valid) {
              // 校验通过 发送ajax start
              var url = `http://localhost:8888/user/login`
              let { data: baseResult } = await axios.post(url, this.user)
              if( baseResult.code == 20000) {
                // 登录成功，跳转到首页
                this.$router.push('/home')
              } else {
                // 登录失败
                this.$message.error(baseResult.message)
              }
              // 校验通过 发送ajax end
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          
        }
      },

#### 2.1.4 后端实现 ####

*  步骤：
    
     *  步骤1：拷贝表
     *  步骤2：编写JavaBean
     *  步骤3：编写mapper
     *  步骤4：编写service，提供login，使用**用户名和密码**进行查询，null或user
     *  步骤5：编写controller，根据返回值提出，登录成功/账号或密码不匹配

步骤1：拷贝表

CREATE TABLE `tb_user` (
      `u_id` varchar(32) NOT NULL COMMENT '用户编号',
      `user_name` varchar(50) DEFAULT NULL COMMENT '用户名',
      `password` varchar(32) DEFAULT NULL COMMENT '密码',
      `gender` bit(1) DEFAULT NULL COMMENT '性别,1表示男，0表示女',
      PRIMARY KEY (`u_id`),
      UNIQUE KEY `user_name` (`user_name`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
    
    /*Data for the table `tb_user` */
    
    insert  into `tb_user`(`u_id`,`user_name`,`password`,`gender`) values ('1','jack','1234',''),('10','jack5','1234',''),('2','rose','1234','\0'),('3','张三','1234',''),('4','tom','1234',''),('5','jack2','1234',''),('6','jack1','1234',''),('7','jack3','1234',''),('8','jack4','1234',''),('cd0d2523b5024589af142787de8a7b2a','jack6','1234','');

步骤2：编写JavaBean

package com.czxy.domain;
    
    import lombok.Data;
    
    import javax.persistence.Column;
    import javax.persistence.Id;
    import javax.persistence.Table;
    
    @Data
    @Table(name = "tb_user")
    public class User {
        @Id
        @Column(name = "u_id")
        private String uid;
    
        @Column(name = "user_name")
        private String username;
    
        @Column(name = "password")
        private String password;
    
        @Column(name = "gender")
        private Integer gender;     // 0 或 1
    
    }

步骤3：编写mapper

package com.czxy.mapper;
    
    import com.czxy.domain.User;
    import tk.mybatis.mapper.common.Mapper;
    
    @org.apache.ibatis.annotations.Mapper
    public interface UserMapper extends Mapper<User> {
    }

步骤4：编写service，提供login，使用用户名和密码进行查询，**null或user**

*  接口

package com.czxy.service;
    
    import com.czxy.domain.User;
    
    public interface UserService {
        /**
         *
         * @param userLogin 用户名和密码（表单提交）
         * @return 查询结果（数据库查询）
         */
        public User login(User userLogin);
    }

*  实现类

package com.czxy.service.impl;
    
    import com.czxy.domain.User;
    import com.czxy.mapper.UserMapper;
    import com.czxy.service.UserService;
    import org.springframework.stereotype.Service;
    import org.springframework.transaction.annotation.Transactional;
    import tk.mybatis.mapper.entity.Example;
    
    import javax.annotation.Resource;
    import java.util.List;
    
    
    @Service
    @Transactional
    public class UserServiceImpl implements UserService {
        @Resource
        private UserMapper userMapper;
        @Override
        public User login(User userLogin) {
            // 用户名和密码查询，如果有结果返回，如果没有返回null
    
            Example example = new Example(User.class);
            Example.Criteria criteria = example.createCriteria();
            criteria.andEqualTo("username", userLogin.getUsername());
            criteria.andEqualTo("password", userLogin.getPassword());
    
            // 查询
            List<User> list = userMapper.selectByExample(example);
            // 返回第一个数据
            if(list != null && list.size() > 0) {
                return list.get(0);
            }
            return null;
        }
    }

*  步骤5：编写controller，根据返回值提出，登录成功/账号或密码不匹配

package com.czxy.controller;
    
    import com.czxy.domain.User;
    import com.czxy.service.UserService;
    import com.czxy.vo.BaseResult;
    import org.springframework.web.bind.annotation.*;
    
    import javax.annotation.Resource;
    
    @RestController
    @CrossOrigin        //跨域
    @RequestMapping("/user")
    public class UserController {
    
        @Resource
        private UserService userService;
    
        @PostMapping("/login")
        public BaseResult login(@RequestBody User user) {
    
            // 登录
            User loginUser = userService.login(user);
    
            // 判断
            if(loginUser != null) {
                // 登录成功
                return BaseResult.ok("登录成功", loginUser);
            } else {
                // 登录失败
                return BaseResult.error("用户名或密码不匹配");
            }
        }
    }

### 2.2 注册：用户名校验（ajax校验） ###

#### 2.2.1 需求 ####

*  用户名存在，表单不能注册。用户名不存在，可以注册。

#### 2.2.2 后端 ####

*  通过用户名查询，根据查询结果提示
    
     *  查询到，提示“用户名已存在”
     *  没有查询到，提示“用户名可用”
 *  步骤：
    
     *  步骤1：service，通过用户名查询
     *  步骤2：controller，post，json数据，判断
 *  步骤1：service，通过用户名查询
    
     *  接口

/**
         * 通过用户名查询
         * @param username
         * @return
         */
        public User findByUsername(String username);

*  实现类

@Override
        public User findByUsername(String username) {
            // 用户名和密码查询，如果有结果返回，如果没有返回null
            Example example = new Example(User.class);
            Example.Criteria criteria = example.createCriteria();
            criteria.andEqualTo("username", username);
    
            // 查询
            List<User> list = userMapper.selectByExample(example);
            // 返回第一个数据
            if(list != null && list.size() > 0) {
                return list.get(0);
            }
            return null;
        }

步骤2：controller，post，json数据，判断

@PostMapping("/check")
        public BaseResult check(@RequestBody User user) {
    
            // 登录
            User findUser = userService.findByUsername(user.getUsername());
    
            // 判断
            if(findUser == null) {
                // 没有结果，可用
                return BaseResult.ok("用户名可用");
            } else {
                // 有结果，不可用，已存在
                return BaseResult.error("用户名已存在");
            }
        }

#### 2.2.3 前端：页面 ####

*  步骤：
    
     *  步骤1：注册编写路由
     *  步骤2：创建注册页面
     *  步骤3：拷贝注册表单

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

步骤1：注册编写路由

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

{
        path: '/register',
        name: '注册',
        component: () => import('../views/Register.vue')
      },

步骤2：创建注册页面

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_7_color_FFFFFF_t_70_g_se_x_16][]

步骤3：拷贝注册表单

<template>
      <el-card class="register-card">
        <el-form ref="form" :model="user" label-width="80px" size="mini">
          <el-form-item label="用户名">
            <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="user.edu" placeholder="请选择学历">
              <el-option label="大班" value="db"></el-option>
              <el-option label="中班" value="zb"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="user.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="爱好">
            <el-checkbox-group v-model="user.hobbies">
              <el-checkbox label="cy" name="type">抽烟</el-checkbox>
              <el-checkbox label="hj" name="type">喝酒</el-checkbox>
              <el-checkbox label="tt" name="type">烫头</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="婚否">
            <el-switch v-model="user.marry"></el-switch>
          </el-form-item>
          <el-form-item label="省市县">
            <el-cascader
              v-model="user.citys"
              :options="cityList"
              :props="{ expandTrigger: 'hover' }"
              ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">注册</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </el-form>
        {
       { user }}
      </el-card>
    </template>
    
    <script>
    export default {
      data() {
        return {
          user: {
            hobbies: [] ,     //必须是数组
          },
          cityList: [
            {
              value: 'js',
              label: '江苏省',
              children: [
                {
                  value: 'nj',
                  label: '南京市',
                },
                {
                  value: 'sq',
                  label: '宿迁市',
                  children: [
                    {
                      value: 'sy',
                      label: '沭阳县',
                      children: [
                        {
                          value: 'nh',
                          label: '南湖街道',
                        },
                        {
                          value: 'mx',
                          label: '梦溪街道',
                        }
                      ]
                    },
                    {
                      value: 'sh',
                      label: '泗洪县',
                    }
                  ]
                }
              ]
            },
            {
              value: 'hb',
              label: '河北省',
            }
          ]
        }
      },
    }
    </script>
    
    <style>
      .register-card {
        width: 500px;
      }
    </style>

#### 2.2.4 前端：**自定义校验** ####

*  步骤
    
     *  步骤1：完成用户名普通校验（必填、长度3-6）
     *  步骤2：自定义ajax用户名校验
 *  步骤1：完成用户名普通校验（必填、长度3-6）

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

<template>
      <el-card class="register-card">
        <el-form ref="registerForm" :rules="registerRules" :model="user" label-width="80px" size="mini">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="user.edu" placeholder="请选择学历">
              <el-option label="大班" value="db"></el-option>
              <el-option label="中班" value="zb"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="user.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="爱好">
            <el-checkbox-group v-model="user.hobbies">
              <el-checkbox label="cy" name="type">抽烟</el-checkbox>
              <el-checkbox label="hj" name="type">喝酒</el-checkbox>
              <el-checkbox label="tt" name="type">烫头</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="婚否">
            <el-switch v-model="user.marry"></el-switch>
          </el-form-item>
          <el-form-item label="省市县">
            <el-cascader
              v-model="user.citys"
              :options="cityList"
              :props="{ expandTrigger: 'hover' }"
              ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </el-form>
        {
       { user }}
      </el-card>
    </template>
    
    <script>
    export default {
      data() {
        return {
          user: {
            hobbies: [] ,     //必须是数组
          },
          cityList: [
            {
              value: 'js',
              label: '江苏省',
              children: [
                {
                  value: 'nj',
                  label: '南京市',
                },
                {
                  value: 'sq',
                  label: '宿迁市',
                  children: [
                    {
                      value: 'sy',
                      label: '沭阳县',
                      children: [
                        {
                          value: 'nh',
                          label: '南湖街道',
                        },
                        {
                          value: 'mx',
                          label: '梦溪街道',
                        }
                      ]
                    },
                    {
                      value: 'sh',
                      label: '泗洪县',
                    }
                  ]
                }
              ]
            },
            {
              value: 'hb',
              label: '河北省',
            }
          ],
          registerRules: {
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
            ],
          },
        }
      },
      methods: {
        register() {
          this.$refs.registerForm.validate((valid) => {
            if (valid) {
              // 校验通过
            } else {
              // 没通过
              console.log('error submit!!');
              return false;
            }
          });
        }
      },
    }
    </script>
    
    <style>
      .register-card {
        width: 500px;
      }
    </style>

步骤2：**自定义ajax用户名校验**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

<template>
      <el-card class="register-card">
        <el-form ref="registerForm" :rules="registerRules" :model="user" label-width="80px" size="mini">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="user.repassword" prefix-icon="el-icon-lock" show-password placeholder="请输入确认密码"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker type="date" placeholder="选择生日" v-model="user.birthday"></el-date-picker>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="user.edu" placeholder="请选择学历">
              <el-option label="大班" value="db"></el-option>
              <el-option label="中班" value="zb"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="user.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="爱好">
            <el-checkbox-group v-model="user.hobbies">
              <el-checkbox label="cy" name="type">抽烟</el-checkbox>
              <el-checkbox label="hj" name="type">喝酒</el-checkbox>
              <el-checkbox label="tt" name="type">烫头</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="婚否">
            <el-switch v-model="user.marry"></el-switch>
          </el-form-item>
          <el-form-item label="省市县">
            <el-cascader
              v-model="user.citys"
              :options="cityList"
              :props="{ expandTrigger: 'hover' }"
              ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </el-form>
        {
       { user }}
      </el-card>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
      data() {
        // 自定义校验器   var 函数名 = 箭头函数(规则,数据,回调函数)
        // 校验通过：callback();
        // 校验失败：callback(new Error('失败原因'));
        var validateUsername = async (rule, value, callback) => {
          // 1 发送ajax根据用户查询
          var url = `http://localhost:8888/user/check`
          let { data: baseResult } = await axios.post(url,{username: value})
          // 2 根据结果处理：20000通过，否则失败
          if(baseResult.code == 20000) {
            // 2.1 成功
            callback();
          } else {
            // 2.2 失败
            callback(new Error(baseResult.message));
          }
        };
        return {
          user: {
            hobbies: [] ,     //必须是数组
          },
          cityList: [
            {
              value: 'js',
              label: '江苏省',
              children: [
                {
                  value: 'nj',
                  label: '南京市',
                },
                {
                  value: 'sq',
                  label: '宿迁市',
                  children: [
                    {
                      value: 'sy',
                      label: '沭阳县',
                      children: [
                        {
                          value: 'nh',
                          label: '南湖街道',
                        },
                        {
                          value: 'mx',
                          label: '梦溪街道',
                        }
                      ]
                    },
                    {
                      value: 'sh',
                      label: '泗洪县',
                    }
                  ]
                }
              ]
            },
            {
              value: 'hb',
              label: '河北省',
            }
          ],
          registerRules: {
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },         //内置校验：必填
              { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }, //内置校验：长度
              { validator: validateUsername, trigger: 'blur' }                          //自定义校验：用户名校验 validateUsername
            ],
          },
        }
      },
      methods: {
        register() {
          this.$refs.registerForm.validate((valid) => {
            if (valid) {
              // 校验通过
            } else {
              // 没通过
              console.log('error submit!!');
              return false;
            }
          });
        }
      },
    }
    </script>
    
    <style>
      .register-card {
        width: 500px;
      }
    </style>

## 页面展示 ##

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 13][]![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_19_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_8_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0bbb483dc83c402eabb0cad9c49a4816.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_8,color_FFFFFF,t_70,g_se,x_16
[http_localhost_8080_studentList]: http://localhost:8080/studentList
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b0daf4c401614e888bfdcef8bbd4e1f5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[ab60328684254bd6809c6210a53389c7.png]: https://img-blog.csdnimg.cn/ab60328684254bd6809c6210a53389c7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f1984b56e24d4ae79881038422027ee7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9afb462a58e740bdba832358ee832dd3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/fb797c542b6e44edba5a3496c9115a08.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/456fa941ef624d5585925f60a5491043.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/2eff8ac38f134768b78281bd6eae7b56.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/5104554d78484e5288bc9e5626df5934.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/905f5bedd71d463da6cf7217c4a3ef38.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/63c35e93ac2e412fa3436c200930f8d0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/50f7899ed64e46be9878487380a0cc33.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/7e78a6cbb44e4581bc814d32a01b2ef7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/0f30166569514962ae42f085d578fc41.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/35c25a2c6d0042d5b10975324b447ad2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_7_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ddafd51a1d08485e8626f9110f4aac50.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_7,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/ce73bac313994201ac67cea68169c327.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/b9aa42dcb3fb49f49b79d803ed744803.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/41cfb8f57e9f4a4280698c6d7f463f42.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/96a862b10b7b49e1bd6907b275835952.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/2712bb5081b546ec9781adc8692c202d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/e416e5c8cad24315af1d9c4209bd1171.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/f32367ce80934834ac89395e263eed11.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16