Spring Cloud + Vue前后端分离-第13章网站开发

源代码在GitHub - 629y/course: Spring Cloud + Vue前后端分离-在线课程

Spring Cloud + Vue前后端分离-第13章网站开发

13-1 网站模块的搭建

新建web模板

1.网站开发，增加web模块，使用命令：vue create web

vue版本4.2.3

大家拿到一个vue项目后，要先执行npm install，才能运行项目。这一步会去下载node module，类似于maven项目要先下载jar包。

1.创建vue create web

2.cd web

npm run serve

多环境配置

1.网站开发，web模块增加多环境配置，启动命令中，增加--port 8081来修改端口

env.dev

env.prod

package.json

增加路由配置

1.网站开发，web模块增加路由配置，web路由版本是4.2.5，而admin路由版本是3.6.5

使用命令：npm install --save vue-router

注意：要先跳到web模块下，再安装router模块

以下这两个文件都是自动改的

package.json，package-lock.json

这里只是增加了router依赖，后续开发页面时，会增加router的配置

13-2 集成bootstrap官方模板

我们的控台admin,用的是免费的ace admin模版，ace也是基于bootstrap做的封装，有很多组织和个人以卖各种前端模板为生。

本章开发的前端网站，是基于bootstrap官方提供的原生模板

bootstrap4.4.1文档介绍

1.网站开发，增加bootstrap-4.4.1的js,css

jquery.slim是jquery的简化版，也可以引入原版jquery。popper.js是一个js提示插件。

网站首页选用album模板，相册主题

集成album模板

1.网站首页开发，集成album模板

做前端的同学，会经常看到bundle这个词，就是像几个依赖的js或css，打包成一个bundle.js

App.vue

将album模板中的body标签里的内容，复制到template标签中

删除HelloWorld.vue

album.css

.jumbotron {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 0;
    background-color: #fff;
}
@media (min-width: 768px) {
    .jumbotron {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.jumbotron p:last-child {
    margin-bottom: 0;
}

.jumbotron h1 {
    font-weight: 300;
}

.jumbotron .container {
    max-width: 40rem;
}

footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

footer p {
    margin-bottom: .25rem;
}

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>bootstrap-4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%= BASE_URL %>static/css/album.css">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="<%= BASE_URL %>bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
    <title>甲蛙在线视频课程系统</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

互联网早期，js脚本容易被黑客利用，所以很多浏览器都有禁用js的选项，现在都不会禁用了。

main.js

因为之前的vue版本太高，所以这里我做了一些调整，将vue的版本调到了4.2.3

vue会将我们写的vue文件做编译压缩，导致我们写的html的换行没有了，所以按钮之间的空隙没有了

顶部组件和底部组件提取

1.网站首页开发，将顶部提取成the-header组件

将app.vue中的header复制过来

the-header.vue

app.vue

小提示：在父组件中打入子组件的标签名，会自动引入子组件。

测试

然后再改过来就可以了

1.网站首页开发，将底部提取成the-footer组件

the-footer.vue

app.vue

13-3 首页开发

路由配置与文案修改

1.网站首页开发，增加路由配置router.js，增加网站首页index.vue

index.vue

router.js

main.js

没有使用route-view的话，就没有路由效果

app.vue

测试

再恢复回去

回车

导航条改为bootstrap 导航条组件

1.网站首页开发，导航条改为bootstrap 导航条组件

文档：https://v4.bootcss.com/docs/components/navbar/

the-header.vue

<template>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </header>
</template>
<script>
export default {
  name: 'theHeader',
}
</script>

导航条改为bootstrap 导航条组件

1.网站首页开发，导航条美化：菜单名称修改；增加container布局；样式改为dark;

2.集成fontawesome图标

index.html

fontawesome是一个图标库，可以到官网注册后，获取自己的cdn链接

the-header.vue

<template>
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">
          <i class="ace-icon fa fa-video-camera"></i>&nbsp;甲蛙课程
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">全部课程</a>
            </li>
            <li class="nav-item dropdown active">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                更多
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">关于我们</a>
                <a class="dropdown-item" href="#">渠道合作</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">更多信息</a>
              </div>
            </li>
          </ul>
          <span class="text-white">欢迎：</span>
          <button class="btn btn-outline-light my-2 my-sm-0" type="submit">登录/注册</button>
        </div>
      </div>
    </nav>
  </header>
</template>
<script>
export default {
  name: 'theHeader',
}
</script>

测试

底部文案修改

1.网站首页开发，底部文案修改

the-footer.vue

大屏文案修改

1.网站首页开发，大屏文案修改

index.vue

bootstrap4提供了很多便捷的css样式，p-3就是padding:1rem。大家可以使用p-1，p-2来不断调整自己的样式。类似的还有m-x表示margin。

课程信息组件提取

增加课程card组件the-course

1.网站首页开发，增加课程card组件the-course

the-course.vue

<template>
  <div class="card mb-4 shadow-sm course">
    <img class="img-fluid" v-bind:src="course.image">
    <div class="card-body">
      <h4 class="">{{course.name}}</h4>
      <p class="card-text">{{course.summary}}</p>
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-outline-secondary">课程详情</button>
        </div>
        <div class="text-muted">
                    <span class="badge badge-info">
                      <i class="fa fa-yen" aria-hidden="true"></i>&nbsp;{{course.price}}
                    </span>&nbsp;
          <span class="badge badge-info">
                      <i class="fa fa-user" aria-hidden="true"></i>&nbsp;123
                    </span>&nbsp;
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'the-course',
  props:{
    course:{}
  },
  data:function (){
    return{}
  },
}
</script>
<style>
  .course h4{
    font-size: 1.25rem;
    margin:15px 0;
  }
  .course .text-muted .badge{
    font-size: 1rem;
  }
</style>

index.vue

课程card组件增加登记显示

1.网站首页开发，课程card组件增加登记显示

2.增加过滤器filter.js

EnumGenerator.java

Enum生成器里没有自动创建js目录，所以我们要先手动创建js目录，再执行Enum生成器

index.html

filter.js

将admin中的filter文件拷贝过来

main.js

the-course.vue

13-4 课程列表页面开发

课程列表数据显示

1.网站首页开发，增加课程列表页【全部课程】，并增加路由

list.vue

router.js

index.vue

the-header.vue

router-link + to，相当于a + href

测试

课程列表页调用后端接口显示真实数据

1.网站首页开发，课程列表页调用后端接口显示真实数据

CourseController.java

list.vue

后端接口只能查询已发布的课程

1.课程列表页面开发，后端接口只能查询已发布的课程

如果列表查询接口的请求参数，只有分页相关的参数，可以使用PageDto做为传参的类。

如果请求参数包含其它参数，则需要新建一个类CoursePageDto，继承PageDto，来传递更多的参数

CoursePageDto.java

CourseController.java

这里只是修改了接收参数的类，控台端课程列表查询传递的分页参数并没有变化，功能不影响。

CourseController.java(admin)

CourseService.java

status查询条件不是必需的，控台接口进来的就不需要这个条件，网站接口进来的有这个条件，所以增加一个status条件判断。

这段写法比较常见，参数有值就做为条件查询，没值就不加条件，相当于写动态sql

前端分页，增加分页组件，比admin简单，使用rem

1.课程列表页面开发，前端分页

2.增加分页组件，比admin简单，使用rem

pagination.vue

list.vue

分类筛选功能开发

1.课程列表页面开发，加载所有分类

2.增加axios接口访问日志拦截器

main.js

tool.js

把admin中的tool.js复制过来

index.html

list.vue

CategoryController.java

两级分类访问幕课网显示

1.课程列表页面开发，两级分类访问幕课网显示

list.vue

<template>
  <main role="main">
    <div class="header-nav">
      <div class="clearfix">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <a v-on:click="onClickLevel1('00000000')" id="category-00000000" href="javascript:;" class="cur">全部</a>
              <a v-for="o in level1" v-on:click="onClickLevel1(o.id)" v-bind:id="'category-' + o.id" href="javascript:;">{{o.name}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="skill clearfix">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <a v-on:click="onClickLevel2('11111111')" id="category-11111111" href="javascript:;" class="on">不限</a>
            <a v-for="o in level2" v-on:click="onClickLevel2(o.id)" v-bind:id="'category-' + o.id" href="javascript:;">{{o.name}}</a>
            <div style="clear:both"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <pagination ref="pagination" v-bind:list="listCourse"></pagination>
          </div>
        </div>
        <br>
        <div class="row">
          <div v-for="o in courses" class="col-md-4">
            <the-course v-bind:course="o"></the-course>
          </div>
          <h3 v-show="courses.length === 0">课程还未上架</h3>
          <!--这是一个比较常见的写法：如果列表有值，就显示列表，没有值就显示某段文字-->
        </div>
      </div>
    </div>
  </main>
</template>
<script>
import TheCourse from "@/components/the-course.vue";
import Pagination from "@/components/pagination.vue";

export default {
  name: 'list',
  components: {Pagination, TheCourse},
  data:function (){
    return{
      courses:[],
      level1:[],
      level2:[],
    }
  },
  mounted() {
    let _this = this;
    _this.$refs.pagination.size = 1;
    _this.listCourse(1);
    _this.allCategory();
  },
  methods:{
    /**
     * 查询课程列表
     */
    listCourse(page){
      let _this = this;
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/course/list',{
        page:page,
        size:_this.$refs.pagination.size,
      }).then((response)=>{
        let resp = response.data;
        if (resp.success){
          _this.courses = resp.content.list;
          _this.$refs.pagination.render(page,resp.content.total);
        }
      }).catch((response)=>{
        console.log("error:",response);
      })
    },
    /**
     * 所有分类查询
     */
    allCategory() {
      let _this = this;
      _this.$ajax.post(process.env.VUE_APP_SERVER +"/business/web/category/all").then((response) => {
        let resp = response.data;
        _this.categorys = resp.content;

        //将所有记录格式化成树形结构
        _this.level1 = [];
        for (let i = 0; i < _this.categorys.length; i++) {
          let c = _this.categorys[i];
          //如果分类的父id是00000000，表示它是一级分类，否则是二级分类
          if (c.parent === '00000000'){
            _this.level1.push(c);
            for (let j = 0; j < _this.categorys.length; j++) {
              let child = _this.categorys[j];
              if (child.parent === c.id){
                if(Tool.isEmpty(c.children)){
                  c.children = [];
                }
                c.children.push(child);
              }
            }
          }else{
            _this.level2.push(c);
          }
        }
      })
    },
    /**
     * 点击一级分类时
     * @param level1Id
     */
    onClickLevel1(level1Id) {
      let _this = this;
    },
    /**
     * 点击一级分类时
     * @param level2Id
     */
    onClickLevel2(level2Id) {
      let _this = this;
    },
  }
}
</script>
<style>
/* 头部 一级分类 */
.header-nav {
  height: auto;
  background: #fff;
  box-shadow: 0 8px 16px 0 rgba(28,31,33,.1);
  padding: 16px 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  /*background-color: #d6e9c6;*/
}
.header-nav>div {
  width: 100%;
  padding-left: 12px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  /*background-color: #B4D5AC;*/
}
.header-nav a {
  float: left;
  font-size: 16px;
  color: #07111b;
  line-height: 50px;
  height: 45px;
  position: relative;
  margin-right: 46px;
  font-weight: 700;
}
.header-nav a:hover {
  color: #c80;
}
.header-nav a.cur {
  color: #c80;
}
.header-nav a.cur:before {
  display: block;
}
.header-nav a:before {
  display: none;
  content: ' ';
  position: absolute;
  bottom: 0;
  background: #c80;
  width: 16px;
  height: 3px;
  left: 50%;
  margin-left: -8px;
}
/* 二级分类 */
.skill {
  width: 100%;
  padding: 24px 0 0;
  position: relative;
  margin: 0 auto;
}
.skill a.on {
  color: #c80;
  background: rgba(204,136,0,.1);
}
.skill a {
  float: left;
  margin-right: 20px;
  padding: 0 12px;
  font-size: 14px;
  color: #4d555d;
  line-height: 32px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.skill a:hover {
  background: #d9dde1;
}
</style>

测试

点击一级分类时显示激活状态，并显示对应的二级分类，如果点击的是【全部】，则显示所有的二级分类

1.课程列表页面开发，点击一级分类时显示激活状态，并显示对应的二级分类，如果点击的是【全部】，则显示所有的二级分类

list.vue

测试

点击二级分类时显示激活状态

1.课程列表页面开发，点击二级分类时显示激活状态

list.vue

测试

根据点击的分类进行课程筛选，动态sql不只可以进行动态列查询，也可以进行动态表关联

1.课程列表页面开发，根据点击的分类进行课程筛选，动态sql不只可以进行动态列查询，也可以进行动态表关联

完成功能：当点分类时，筛选出这个分类下所有的视频

list.vue

一级分类的“全部”激活时，level1Id清空；二级分类的“不限”激活时，level2Id清空，这样categoryId这个参数就是空，即查询全部课程。

【课程表】+ 【课程分类关联表】两张表关联。多表关联的查询，需要写自定义sql.

MyCourseMapper.java

CoursePageDto.java

MyCourseMapper.xml

我们正常写的动态sql,一般是动态的where条件，但其实可以写成动态关联表。其实就是动态的拼接sql字符串。

CourseService.java

不加分类做为查询条件时，生成的sql就是course表的单表查询，性能快一些。

测试

13-5 课程详情页面开发

新增详情页面并配置路由

1.课程详情页面开发，增加课程详情页面和路由

2.课程报名数显示真实数据

detail.vue

router.js

the-course.vue

测试

增加后端课程详情接口

1.课程详情页面开发，增加课程后端接口，只能查询已发布的课程，包含内容、讲师、大章、小节信息，测试地址：http://127.0.0.1:9002/business/web/course/find/00000001

CourseDto.java

一次性返回页面上需要有的所有数据，可以减少前后端交易次数，提升用户体验。

TeacherService.java

ChapterService.java

SectionService.java

CourseService.java

CourseController.java

测试

前端界面显示课程信息

1.课程详情页面开发，增加课程信息显示，可以使用@media(max-width:700px)来精细控制不同分辨率的显示样式

detail.vue

如果地址是xxx?id=a。那在vue代码里要获取id的值的话，可以使用this.$router.query.id

测试

增加课程内容显示

1.课程详情页面开发，增加课程内容显示

detail.vue

使用v-html,可以直接绑定显示html字符串

测试

增加讲师信息显示

1.课程详情页面开发，增加讲师信息显示

detail.vue

13-6 章节显示与视频播放

大章小节分组显示

1.课程详情页面开发，增加大章小节显示，

使用d-none d-sm-inline组合：超小屏隐藏，其它显示，

v-for的第二变量是索引号

detail.vue

第一个变量是遍历的每一个实体，第二变量是数组索引，从0开始

d-none d-sm-inline 组合，让小图标在小屏时不显示。屏幕小时，节约空间，只显示核心信息。

增加大章小节收缩和展开，注意：在v-for里写v-show，只修改属性不起作用，需要$set

1.课程详情页面开发，增加大章小节收缩和展开，注意：在v-for里写v-show，只修改属性不起作用，需要$set

detail.vue

从后端加载出来的大章数据，是没有folded属性的，相当于chapter.folded=false.

folded表示收缩，初始是false,表示不收缩，即初始的时候，所有章节都是展开的。

注意：v-for里面，如果用到了v-show，且v-show里面的控制属性值是随着界面操作而变化的，此时只修改属性值是不生效的，vue监听不到数组里的某个元素的值的变化。需要用到$set.

测试

可自行扩展，增加全部收缩，全部展开的功能，提示：全部收缩即所有大章的folded=true;全部展开即所有大章的folded=false.

视频播放

1.课程详情页面开发，增加视频播放功能

video-image.png

index.html

代码从admin复制过来

modal-player.vue

player.vue

再次提示：控台和网站的接口分开，控台使用admin前缀，网站使用web前缀，方便接口权限控制。

VodController.java

detail.vue

只需要引入modal-player组件，不需要引入play组件

测试

对每个大章里的小节进行排序显示

1.课程详情页面开发，对每个大章里的小节进行排序显示

tool.js

detail.vue

只有免费的视频才可直接播放，收费视频需要登录后才能播放

1.课程详情页面开发，只有免费的视频才可直接播放，收费视频需要登录后才能播放

代码从admin复制过来

toast.js

tool.js

index.html

detail.vue

测试

点击收费的，就不能直接可以播放，而是弹出请先登录

13-7 增加会员注册功能

控台增加会员管理功能

1.增加会员管理功能，新增member表，在之前代码生成器的步骤后面，加上以下步骤：

1) 在resource.json中增加新资源

2) 在【资源管理】页面，配置最新的resource.json

3) 在【角色管理】页面，为相应的角色配置新的资源

4) 重新登录控台

自从为控台加入了权限管理功能后，新做的页面，需要增加这四步，配置相应的权限，才能使用新表的管理功能。

all.sql

会员头像的上传和显示，类似于讲师头像的上传和显示，所以我们就不再重复做了。

generatorConfig.xml

ServerGenerator.java

VueGenerator.java

admin.vue

router.js

到目前为止，跟我们前面介绍的制作单表管理功能的流程一样，但由于加入权限功能，所以需要配置权限后才能看到页面。

1) 在resource.json中增加新资源

2) 在【资源管理】页面，配置最新的resource.json

3) 在【角色管理】页面，为相应的角色配置新的资源

4) 重新登录控台

但是一般不会在这里有新增

控台的会员管理，不能新增，修改，删除。可以查看会员信息，重置密码，报表统计等操作

1.增加会员管理功能，控台的会员管理，不能新增，修改，删除。可以查看会员信息，重置密码，报表统计等操作

MemberController.java

member.vue

只剩下这一个查询功能

测试

网站增加会员注册功能

1.会员登录注册功能开发，增加登录注册模态框，增加注册功能

登录表单、注册表单、忘记密码表单放在同一个模态框中

MemberController.java

MemberService.java

md5.js

index.html

把登录注册框做成单独的组件，方便维护

和播放器组件类似，引入组件后，初始是看不到组件内的元素的

登录注册框可以做的大气一点，所以把输入框的高度调高，字体调大

the-header.vue

测试

13-8 增加登录与退出登录功能

登录、注册、忘记密码之间的切换

1.会员登录注册功能开发，增加登录框和忘记密码框，并实现登录框、注册框、忘记密码框切换，默认显示登录框

<template>
  <div id="login-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-login" role="document">
      <div  class="modal-content">
        <div class="modal-body">
          <div class="login-div" v-show="MODAL_STATUS === STATUS_LOGIN">
            <h3>登&nbsp;&nbsp;录</h3>
            <div class="form-group">
              <input v-model="member.mobile" class="form-control" placeholder="手机号">
            </div>
            <div class="form-group">
              <input class="form-control" type="password" placeholder="密码" v-model="member.passwordOriginal">
            </div>
            <div class="form-group">
              <div class="input-group">
                <input id="image-code-input" class="form-control" type="text" placeholder="验证码"
                       v-model="member.imageCode">
                <div class="input-group-addon" id="image-code-addon">
                  <img id="image-code" alt="验证码" v-on:click="loadImageCode()"/>
                </div>
              </div>
            </div>
            <div class="form-group">
              <button class="btn btn-primary btn-block submit-button">
                登  录
              </button>
            </div>
            <div class="form-group">
              <div class="checkbox">
                <label>
                  <input type="checkbox" class="rememberMe" v-model="rememberMe">记住密码
                </label>
                <div class="pull-right">
                  <a href="javascript:;" v-on:click="toForgeDiv">忘记密码</a>&nbsp;&nbsp;
                  <a href="javascript:;" v-on:click="toRegisterDiv">我要注册</a>
                </div>
              </div>
            </div>
            <div class="form-group to-register-div">
            </div>
          </div>
          <div class="register-div" v-show="MODAL_STATUS === STATUS_REGISTER">
            <h3>注  册</h3>
            <div class="form-group">
              <input id="register-mobile" v-model="memberRegister.mobile"
                     class="form-control" placeholder="手机号">
            </div>
            <div class="form-group">
              <div class="input-group">
                <input id="register-mobile-code" class="form-control"
                       placeholder="手机验证码" v-model="memberRegister.code">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary" id="register-send-code-btn"
                          v-on:click="sendSmsForRegister()">发送验证码
                  </button>
                </div>
              </div>
            </div>
            <div class="form-group">
              <input id="register-name" v-model="memberRegister.name"
                     class="form-control" placeholder="昵称">
            </div>
            <div class="form-group">
              <input id="register-password" v-model="memberRegister.passwordOriginal"
                     class="form-control" placeholder="密码" type="password">
            </div>
            <div class="form-group">
              <input id="register-confirm-password" v-model="memberRegister.confirm"
                     class="form-control" placeholder="确认密码"
                     name="memberRegisterConfirm" type="password">
            </div>
            <div class="form-group">
              <button class="btn btn-primary btn-block submit-button" v-on:click="register()">
                注  册
              </button>
            </div>
            <div class="form-group to-login-div">
              <a href="javascript:;" v-on:click="toLoginDiv">我要登录</a>
            </div>
          </div>
          <div class="forget-div" v-show="MODAL_STATUS === STATUS_FORGET">
            <h3>忘记密码</h3>
            <div class="form-group">
              <input id="forget-mobile" v-model="memberForget.mobile" class="form-control" placeholder="手机号">
            </div>
            <div class="form-group">
              <div class="input-group">
                <input id="forget-mobile-code" class="form-control"
                       placeholder="手机验证码" v-model="memberForget.code">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary" id="forget-send-code-btn">发送验证码
                  </button>
                </div>
              </div>
            </div>
            <div class="form-group">
              <input id="forget-password" v-model="memberForget.passwordOriginal"
                     class="form-control" placeholder="密码" type="password">
            </div>
            <div class="form-group">
              <input id="forget-confirm-password" v-model="memberForget.confirm"
                     class="form-control" placeholder="确认密码" type="password">
            </div>
            <div class="form-group">
              <button class="btn btn-primary btn-block submit-button">
                重  置
              </button>
            </div>
            <div class="form-group to-login-div">
              <a href="javascript:;" v-on:click="toLoginDiv">我要登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'the-login',
    data:function (){
      return{
        //模态框内容切换：登录、注册、忘记密码
        STATUS_LOGIN:"STATUS_LOGIN",
        STATUS_REGISTER:"STATUS_REGISTER",
        STATUS_FORGET:"STATUS_FORGET",
        MODAL_STATUS:"",
        member:{},
        memberForget:{},
        memberRegister:{},

        rememberMe:true,//记住密码
        imageCodeToken:""
      }
    },
    mounted() {
      let _this = this;
      _this.toLoginDiv();
    },
    methods:{
      /**
       * 打开登录注册窗口
       */
      openLoginModal(){
        let _this = this;
        $("#login-modal").modal("show");
      },
      //------------------登录框、注册框、忘记密码框切换---------------------------------
      toLoginDiv(){
        let _this = this;
        _this.MODAL_STATUS = _this.STATUS_LOGIN
      },
      toRegisterDiv(){
        let _this = this;
        _this.MODAL_STATUS = _this.STATUS_REGISTER
      },
      toForgeDiv(){
        let _this = this;
        _this.MODAL_STATUS = _this.STATUS_FORGET
      },
      register(){
        let _this = this;
        _this.memberRegister.password = hex_md5(_this.memberRegister.passwordOriginal + KEY);

        //调服务端注册接口
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/member/register',
            _this.memberRegister).then((response)=>{
              let resp = response.data;
              if (resp.success){
                Toast.success("注册成功");
              }else {
                Toast.warning(resp.message);
              }
        })
      },
    }
  }
</script>
<style>
  /*登录框*/
  .login-div .input-group-addon{
    padding: 0;
    border: 0;
  }
  #login-modal h3{
    text-align: center;
    margin-bottom: 20px;
  }
  #login-modal .modal-login{
    max-width: 400px;
  }
  #login-modal input:not(.rememberMe){
    height: 45px;
    font-size: 16px;
  }
  #login-modal .submit-button{
    height: 50px;
    font-size: 20px;
  }
  #login-modal .to-login-div{
    text-align: center;
  }
</style>

通过修改MODAL_STATUS变量值，来达到三块div的切换显示

css3 not : 排除选择器

测试

增加登录验证码功能

1.会员登录注册功能开发，登录框显示验证码

KaptchaController.java

测试

增加登录功能，包含图片验证码

1.会员登录注册功能开发，增加登录功能，包含图片验证码

将控台用户登录功能相关代码拷贝到会员登录，并将user替换成member

可以从user相关的功能拷过来改一改

local-storage.js（admin）

session-storage.js

local-storage.js

index.html

前端网站叫会员；运营控台叫用户。

tool.js

如果有些代码是需要后面再加的，为了防止忘记，可以加TODO，IDEA会帮我们记录所有带TODO的地方。可以在底部TODO窗口查看

ControllerExceptionHandler.java

MemberController.java(web)

控台保存登录用户信息用的是LoginUserDto,网站保存会员信息用的是LoginMemberDto

LoginMemberDto.java

MemberDto.java

BusinessExceptionCode.java

MemberService.java

这里登录时，需要验证手机号是否存在，和控台登录类似，控台登录时，需要验证登录名是否存在

UserService.java

UserController.java

ControllerExceptionHandler.java

测试

完善【记住我】功能，会员登录名是mobile，不是loginName

1.会员登录注册功能开发，完善【记住我】功能

会员登录名是mobile，不是loginName

测试

之前“记住我”的逻辑里，登录名写的是loginName，而会员登录名是mobile，所以没记住。

登录成功后，头部导航显示会员昵称

1.会员登录注册功能开发，登录成功后，头部导航显示会员昵称

要在子组件(login组件)中调用父组件(the-header组件)的xx方法(setLoginMember方法)，可以使用this.$parent.xxx

the-header.vue

测试

增加退出登录功能

1.会员登录注册功能开发，增加退出登录功能

MemberController.java

the-header.vue

测试

13-9 增加发送短信验证码功能

增加短信验证码管理功能

1.会员登录注册功能开发，增加短信管理，生成代码后，需要配置资源权限

all.sql

初始生成的短信状态是未使用，验证过之后，状态改为已使用，防止同一个验证码被重复使用

SmsStatusEnum.java

SmsUseEnum.java

generatorController.xml

ServerGenerator.java

VueGenerator.java

EnumGenerator.java

admin.vue

router.js

resource.json

测试

短信管理只能查看

1.会员登录注册功能开发，短信管理只能查看

主要是删除多余内容

SmsController.java

sms.vue

只剩下list

测试

增加发送验证码功能

1.会员登录注册功能开发，增加发送注册短信功能，同手机号同操作1分钟内不能重复发送短信

一分钟内发了一次注册验证码和一次忘记密码验证码，是可以的。但是发两次注册验证码或两次忘记密码验证码，是不可以的。

EnumGenerator.java

BusinessExceptionCode.java

SmsService.java

短信验证码可以接阿里云短信服务，在阿里云控台配置短信模板，然后在代码里配置模板id，再调用阿里云jar包里的发送短信方法就可以了。收费是0.045元/条

SmsController.java(web)

这个接口是通用的发送短信验证码的接口

测试

增加发送短信后倒计时功能，可修改countdown参数进行调试

1.会员登录注册功能开发，增加发送短信后倒计时功能，可修改countdown参数进行调试

前端的校验都是不可靠的，容易被绕过

点击发送短信后，按钮变成不可点击，且显示倒计时

setTimeout，只执行一次的定时器。

setInterval，重复执行的定时器。

测试

为了测试

虽然倒计时是6s，但是6s过后也不能直接再次获取，因为后端有校验

因为刷新网站后，倒计时就没有了

13-10 完善登录注册校验功能

增加手机号后端校验

1.会员登录注册功能开发，注册时，发送短信前，先校验会员是否存在

MemberService.java

MemberController.java

测试

增加前端正则校验

1.会员登录注册功能开发，注册时发送验证码前，增加手机号校验；手机号输入框失去焦点时，校验手机号

2.增加正则表达式校验工具类

上一版本的校验是后端的校验，这个版本是前端的校验，校验手机号是否符合规则。

pattern.js

Pattern = {
  // 用户名正则，2到16位（字母，数字，下划线）
  loginNamePattern: /^[a-zA-Z0-9_]{6,16}$/,

  // 昵称正则，6到20位中文，字母，数字，下划线
  namePattern: /^[\w\u4e00-\u9fa5]{2,20}$/,

  // 强密码强度正则，最少8位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
  passwordStrongPattern: /^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,

  // 弱密码强度正则，最少6位，包括至少1字母，1个数字
  passwordWeakPattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Za-z]).*$/,

  // 手机号正则，11位数字，1开头
  mobilePattern: /^1\d{10}$/,

  // 图片验证码正则，4位字母，数字
  imageCodePattern: /^[a-zA-Z0-9]{4}$/,

  // 手机验证码正则，6位数字
  mobileCodePattern: /^[0-9]{6}$/,

  validateLoginName: function (str) {
    if (Tool.isEmpty(str)) {
      return false;
    }
    return this.loginNamePattern.test(str);
  },

  validateName: function (str) {
    if (Tool.isEmpty(str)) {
      return false;
    }
    return this.namePattern.test(str);
  },

  validatePasswordStrong: function (str) {
    if (Tool.isEmpty(str)) {
      return false;
    }
    return this.passwordStrongPattern.test(str);
  },

  validatePasswordWeak: function (str) {
    if (Tool.isEmpty(str)) {
      return false;
    }
    return this.passwordWeakPattern.test(str);
  },

  validateMobile: function (str) {
    if (Tool.isEmpty(str)) {
      return false;
    }
    return this.mobilePattern.test(str);
  },

  validateImageCode: function (str) {
    if (Tool.isEmpty(str)) {
      return false;
    }
    return this.imageCodePattern.test(str);
  },

  validateMobileCode: function (str) {
    if (Tool.isEmpty(str)) {
      return false;
    }
    return this.mobileCodePattern.test(str);
  }
};

Pattern 里面都是一些常用的正则表达式校验，关于正则表达式是程序员比较不喜欢的一块，学了不常用容易忘，主要是靠平常的积累。