微信扫描登录
OAuth2
什么是OAuth2？
OAuth 不是一个API或者服务，而是一个验证授权(Authorization)的开放标准，所有人都有基于这个标准实现自己的OAuth。
为什么要有OAuth?
OAuth2的出现是为了解决安全性问题，OAuth使得第三方应用对资源的访问更加安全
微信扫码登录的具体流程
httpclient就是不用在浏览器中输入url访问资源也能实现浏览器的过程
微信扫码登录流程
来自于微信开放平台官网
1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据 code 参数； 2. 通过 code 参数加上 AppID 和AppSecret等，通过 API 换取access_token； 3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。
开发流程
微信扫码登录需要有商户微信信息
这里采用的是视频提供的
建模块，改pom，yml，启动类
有了access_token我们就可以通过接口来获取用户信息了，从而把用户保存到数据库中
存数据库
由官网可知，请求成功后返回的结果是一个json字符串
如下实例：
{"access_token":"56_jgDYj0kFSTarb6dLk3S8v32kVFmACL7MSBlAeBllfWMtfCqmFnvaAk2jfQTnjmVJ0tt7mAwaqHQ6NUt3DNJIYq8LH7utQA6QXIwfIdC46lE", "expires_in":7200, "refresh_token":"56_vQaXS1y1Fnp6zf4lZkFBDA7FNRdrkgDBPSytNMFmwdvey5oufKUIB2-7mjdIK7hjNzdD0pCAe3V7Heerszs1xiRm0jjqRufX_ddaDBviuIc", "openid":"o3_SC501zRkVcwqQ_sbnIMcp4awU", "scope":"snsapi_login", "unionid":"oWgGz1FS61brgcCChgq5yO4mQuZM"}
数据库表的结构如下：
代码如下：
前端页面不多说了，了解即可（CV）
整合首页课程和名师
名师页面静态效果整合
<template> <div id="aCoursesList" class="bg-fa of"> <!-- 讲师列表 开始 --> <section class="container"> <header class="comm-title all-teacher-title"> <h2 class="fl tac"> <span class="c-333">全部讲师</span> </h2> <section class="c-tab-title"> <a id="subjectAll" title="全部" href="#">全部</a> <!-- <c:forEach var="subject" items="${subjectList }"> <a id="${subject.subjectId}" title="${subject.subjectName }" href="javascript:void(0)" οnclick="submitForm(${subject.subjectId})">${subject.subjectName }</a> </c:forEach>--> </section> </header> <section class="c-sort-box unBr"> <div> <!-- /无数据提示 开始--> <section class="no-data-wrap"> <em class="icon30 no-data-ico"> </em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span> </section> <!-- /无数据提示 结束--> <article class="i-teacher-list"> <ul class="of"> <li> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" title="姚晨" target="_blank"> <img src="~/assets/photo/teacher/1442297885942.jpg" alt> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" title="姚晨" target="_blank" class="fsize18 c-666">姚晨</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999">。。。。。。。。。。。。。</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA">北京师范大学法学院副教授</p> </div> </section> </li> <li> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" title="谢娜" target="_blank"> <img src="~/assets/photo/teacher/1442297919077.jpg" alt> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" title="谢娜" target="_blank" class="fsize18 c-666">谢娜</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999">。。。。。。。。。。。</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA">资深课程设计专家，专注10年AACTP美国培训协会认证导师</p> </div> </section> </li> <li> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" title="刘德华" target="_blank"> <img src="~/assets/photo/teacher/1442297927029.jpg" alt> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" title="刘德华" target="_blank" class="fsize18 c-666">刘德华</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999">。。。。。。。。。。。。。。</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA">上海师范大学法学院副教授</p> </div> </section> </li> <li> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" title="周润发" target="_blank"> <img src="~/assets/photo/teacher/1442297935589.jpg" alt> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" title="周润发" target="_blank" class="fsize18 c-666">周润发</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999">。。。。。。。。。。。</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA">命题人</p> </div> </section> </li> <li> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" title="钟汉良" target="_blank"> <img src="~/assets/photo/teacher/1442298121626.jpg" alt> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" title="钟汉良" target="_blank" class="fsize18 c-666">钟汉良</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999">具备深厚的数学思维功底、丰富的小学教育经验，授课风格生动活泼，擅长用形象生动的比喻帮助理解、简单易懂的语言讲解难题，深受学生喜欢</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA">毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余</p> </div> </section> </li> <li> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" title="唐嫣" target="_blank"> <img src="~/assets/photo/teacher/1442297957332.jpg" alt> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" title="唐嫣" target="_blank" class="fsize18 c-666">唐嫣</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999">。。。。。。。。</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA">中国人民大学附属中学数学一级教师</p> </div> </section> </li> <li> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" title="周杰伦" target="_blank"> <img src="~/assets/photo/teacher/1442297969808.jpg" alt> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" title="周杰伦" target="_blank" class="fsize18 c-666">周杰伦</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999">中教一级职称。讲课极具亲和力。</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA">毕业于北京大学数学系</p> </div> </section> </li> <li> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" title="陈伟霆" target="_blank"> <img src="~/assets/photo/teacher/1442297977255.jpg" alt> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" title="陈伟霆" target="_blank" class="fsize18 c-666">陈伟霆</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999" >心理学博士、管理学博士后，北京师范大学马克思主义学院副教授。多年来总结出了一套行之有效的应试技巧与答题方法，针对性和实用性极强，能帮助考生在轻松中应考，在激励的竞争中取得高分，脱颖而出。</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA">考研课程讲授和考研命题趋势与应试对策研究。考研辅导新锐派的代表。</p> </div> </section> </li> </ul> <div class="clear"></div> </article> </div> <!-- 公共分页 开始 --> <div> <div class="paging"> <!-- undisable这个class是否存在，取决于数据属性hasPrevious --> <a href="#" title="首页">首</a> <a href="#" title="前一页"><</a> <a href="#" title="第1页" class="current undisable">1</a> <a href="#" title="第2页">2</a> <a href="#" title="后一页">></a> <a href="#" title="末页">末</a> <div class="clear"></div> </div> </div> <!-- 公共分页 结束 --> </section> </section> <!-- /讲师列表 结束 --> </div> </template> <script> export default {}; </script>
讲师列表页
后端开发
前端开发
测试
https://ucc.alicdn.com/images/user-upload-01/img_convert/ea16de671624cda34ba54dec083b1885.png
讲师详情页
动态路由实现
在详情页我们要查看讲师信息，课程信息
所以后端就两个接口，一个根据路径中的参数查询讲师信息
一个来查询讲师所讲的课程信息
效果如下：
https://ucc.alicdn.com/images/user-upload-01/img_convert/6af60e106c5f6ccc75d524c80405f3e0.png
根据讲师id查询讲师所讲课程列表
/** * 根据讲师id查询当前讲师的课程列表 * @param teacherId * @return */ @Override public List<Course> selectByTeacherId(String teacherId) { QueryWrapper<Course> queryWrapper = new QueryWrapper<Course>(); queryWrapper.eq("teacher_id", teacherId); //按照最后更新时间倒序排列 queryWrapper.orderByDesc("gmt_modified"); List<Course> courses = baseMapper.selectList(queryWrapper); return courses; }
根据ID查询讲师
@ApiOperation(value = "根据ID查询讲师") @GetMapping(value = "{id}") public R getById( @ApiParam(name = "id", value = "讲师ID", required = true) @PathVariable String id){ //查询讲师信息 Teacher teacher = teacherService.getById(id); //根据讲师id查询这个讲师的课程列表 List<Course> courseList = courseService.selectByTeacherId(id); return R.ok().data("teacher", teacher).data("courseList", courseList); }
前端开发
<template> <div id="aCoursesList" class="bg-fa of"> <!-- 讲师介绍 开始 --> <section class="container"> <header class="comm-title"> <h2 class="fl tac"> <span class="c-333">讲师介绍</span> </h2> </header> <div class="t-infor-wrap"> <!-- 讲师基本信息 --> <section class="fl t-infor-box c-desc-content"> <div class="mt20 ml20"> <section class="t-infor-pic"> <img :src="teacher.avatar"> </section> <h3 class="hLh30"> <span class="fsize24 c-333">{{teacher.name}} {{ teacher.level===1?'高级讲师':'首席讲师' }} </span> </h3> <section class="mt10"> <span class="t-tag-bg">{{teacher.intro}}</span> </section> <section class="t-infor-txt"> <p class="mt20">{{teacher.career}}</p> </section> <div class="clear"></div> </div> </section> <div class="clear"></div> </div> <section class="mt30"> <div> <header class="comm-title all-teacher-title c-course-content"> <h2 class="fl tac"> <span class="c-333">主讲课程</span> </h2> <section class="c-tab-title"> <a href="javascript: void(0)"> </a> </section> </header> <!-- /无数据提示 开始--> <section class="no-data-wrap" v-if="courseList.length==0"> <em class="icon30 no-data-ico"> </em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span> </section> <!-- /无数据提示 结束--> <article class="comm-course-list"> <ul class="of"> <li v-for="course in courseList" :key="course.id"> <div class="cc-l-wrap"> <section class="course-img"> <img :src="course.cover" class="img-responsive" > <div class="cc-mask"> <a href="#" title="开始学习" target="_blank" class="comm-btn c-btn-1">开始学习</a> </div> </section> <h3 class="hLh30 txtOf mt10"> <a href="#" :title="course.title" target="_blank" class="course-title fsize18 c-333">{{course.title}}</a> </h3> </div> </li> </ul> <div class="clear"></div> </article> </div> </section> </section> <!-- /讲师介绍 结束 --> </div> </template> <script> import teacherApi from '@/api/teacher' export default { //params.id获取路径id值 asyncData({ params, error }) { return teacherApi.getTeacherInfo(params.id) .then(response => { return { teacher: response.data.data.teacher, courseList: response.data.data.courseList } }) } }; </script>
