在线教育项目
文章平均质量分 57
在线教育项目
DKPT
I CAN DO IT.
展开
-
在线教育项目总结
1、项目描述(1)在线教育系统,分为前台网站系统和后台运营平台,B2C模式。前台用户系统包括课程、讲师、问答、文章几大大部分,使用了微服务技术架构,前后端分离开发。后端的主要技术架构是:SpringBoot + SpringCloud + MyBatis-Plus + HttpClient + MySQL + Maven+EasyExcel+ nginx前端的架构是:Node.js + Vue.js +element-ui+NUXT+ECharts其他涉及到的中间件包括Redis、阿里云OSS、原创 2020-11-14 19:25:05 · 2973 阅读 · 0 评论 -
day18---(07)Nacos配置中心(加载多个配置文件)
1、在dev命名空间创建配置文件2、修改项目配置文件,加载Nacos多个配置文件原创 2020-11-14 19:07:05 · 957 阅读 · 1 评论 -
day18---(06)Nacos配置中心(命名空间切换)
1、命名空间2、在Nacos默认命名空间public,创建三个命名空间3、在不同命名空间创建配置文件4、最终读取(1)修改配置文件、添加命名空间原创 2020-11-14 19:05:30 · 1013 阅读 · 0 评论 -
day18---(05)Nacos配置中心介绍(读取配置中心配置文件)
1、启动Nacos服务2、进入Nacos管理界面,默认用户名密码nacos3、在Nacos配置中心创建配置文件(1)点击配置列表,点击右边+号,创建新的配置文件(2)创建配置文件填写配置信息确认发布4、在项目中读取Nacos配置中心文件(1)springboot配置文件加载顺序(2)项目中创建配置文件bootstrap.properties#配置中心地址spring.cloud.nacos.config.server-addr=127.0.0.1:8848#sprin原创 2020-11-14 19:02:02 · 262 阅读 · 0 评论 -
day18---(04)项目Nacos配置中心(介绍)
原创 2020-11-14 18:57:56 · 119 阅读 · 0 评论 -
day18---(03)Springcloud组件gateway网关
1、网关简介2、GateWay介绍(1)gateway是SptingCloud组件,用于网关操作(2)基本概念路由、断言、过滤器(3)网关基于filter实现,很多过滤器,组成了过滤链3、gateway网关使用(1)创建网关服务(2)在网关模块引入依赖<dependencies> <dependency> <groupId>com.atguigu</groupId> <artifactId&原创 2020-11-14 18:56:36 · 140 阅读 · 0 评论 -
day18---(02)图表前端整合显示
1、在api/sta.js中创建接口方法//查询图表显示数据showData(searchObj){ return request({ url: `/staservice/stadaily/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`, method: 'get' })}2 、改造daily/show.vue页面js方法<script>import echarts from "原创 2020-11-14 18:52:30 · 138 阅读 · 0 评论 -
day18---(01)统计数据图表显示(接口)
1、在service_statistics模块中的StatisticsDailyController里实现查询图表显示数据方法@ApiOperation(value = "查询图表显示数据")@GetMapping("showData/{type}/{begin}/{end}")public R showData(@PathVariable String type, @PathVariable String begin, @Pat原创 2020-11-14 18:51:19 · 286 阅读 · 0 评论 -
day17---(10)统计数据图表显示(需求分析)
1、根据时间范围、查询不同统计指标,查出数据用图表展示(折线图)2、整合图表静态效果(1)安装ECharts依赖npm install --save echarts@4.1.0(2)添加页面元素<template> <div class="app-container"> <!--表单--> <el-form :inline="true" class="demo-form-inline"> <el-form-.原创 2020-11-08 10:03:17 · 378 阅读 · 1 评论 -
day17---(09)使用ECharts图表工具制作图表
1、是什么?ECharts是百度的一个项目,后来百度把Echart捐给apache,用于图表展示2、ECharts入门(1)工程中引入ECharts的js类库(2)创建柱状图页面,01.html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2020-11-08 10:01:08 · 200 阅读 · 0 评论 -
day17---(08)生成统计数据添加定时任务
1、开启定时任务2、制定定时任务在com/atguigu/staservice/scheduled目录下创建ScheduledTask文件。@Componentpublic class ScheduledTask { @Autowired private StatisticsDailyService staService; //test每5秒钟执行一次// @Scheduled(cron = "0/5 * * * * ?")// public void t原创 2020-11-08 09:58:16 · 160 阅读 · 0 评论 -
day17---(07)生成统计数据与前端整合
1、 添加路由、添加页面1)在guli_admin/src/router/index.vue页面中添加统计数据的路由。{ path: '/sta', component: Layout, redirect: '/sta/table', name: '统计分析', meta: { title: '统计分析', icon: 'example' }, children: [ { path: 'create', name原创 2020-11-08 09:56:17 · 163 阅读 · 0 评论 -
day17---(06)在统计分析模块调用用户模块获取数据
1、启动类添加注解2、创建远程调用接口在service_statistics模块中client/UcenterClient里添加远程调用方法。@Component@FeignClient("service-ucenter")public interface UcenterClient { //统计某一天注册人数,统计分析远程调用 @GetMapping("/ucenterservice/ucenter/countRegister/{day}") public R coun原创 2020-11-08 09:54:13 · 246 阅读 · 0 评论 -
day17---(05)查询一天注册人数(service-ucenter模块)
1、 实现controller在service_ucenter模块中的UcenterMemberController添加方法。@ApiOperation(value = "统计某一天注册人数,统计分析远程调用")@GetMapping("countRegister/{day}")public R countRegister(@PathVariable String day){ Integer count = ucenterService.countRegister(day); re原创 2020-11-08 09:51:51 · 200 阅读 · 0 评论 -
day17---(04)统计分析-生成统计数据(准备)
1、service模块下创建service_statistics2、创建数据库表3、代码生成器生成代码package com.atguigu.staservice;import com.baomidou.mybatisplus.annotation.DbType;import com.baomidou.mybatisplus.annotation.IdType;import com.baomidou.mybatisplus.generator.AutoGenerator;import co原创 2020-11-08 09:49:54 · 167 阅读 · 0 评论 -
day17---(03)项目后台-统计分析功能(需求分析图)
原创 2020-11-08 09:47:57 · 410 阅读 · 0 评论 -
day17---(02)微信支付相关功能完善
1、扫码支付成功后,跳转课程详情页面在pay/_pid.vue页面添加成功后清除定时器的方法。2、课程的状态免费课程或是已支付课程的状态,在详情页显示“立即观看”。如果课程是收费的,并且没有支付,应该显示“立即购买”。(1)修改根据课程id查询课程详情接口,查询课程是否被购买SELECT * FROM t_order o WHERE o.`course_id`=? AND o.`member_id`=? AND o.`status`=1;(2)在service-order模块TOrderC原创 2020-11-08 09:46:16 · 423 阅读 · 0 评论 -
day17---(01)支付之后的操作与前端整合
1、 扫码支付后接口实现(上小节已完成)2、整合前端(1)实现api接口方法在api/order.js中添加查询支付状态的接口方法。import request from '@/utils/request'export default { // 生成课程支付订单 createOrder(courseId) { return request({ url: `/orderservice/order/createOrder/${courseId}`, metho原创 2020-11-08 09:41:40 · 168 阅读 · 0 评论 -
day16---(07)支付之后实现操作(接口)
1、查询支付状态接口(1)在TPayLogController 中添加查询支付状态方法。@ApiOperation(value = "查询支付状态")@GetMapping("queryOrderStatus/{orderNo}")public R queryOrderStatus(@PathVariable String orderNo){ //1调用接口,查询订单状态 Map<String,String> map = payLogService.queryPaySta原创 2020-11-07 16:10:00 · 118 阅读 · 0 评论 -
day16---(06)生成微信支付二维码(前端)
1、在api下创建接口方法(order.js)//根据订单号生成支付二维码 createNative(orderNo) { return request({ url: `/orderservice/paylog/createNative/${orderNo}`, method: 'get' }) }2、点击“去支付”(/order/_oid.vue),跳转支付页面,显示二维码asyncData({ params, error }) { //调原创 2020-11-07 16:07:53 · 934 阅读 · 0 评论 -
day16---(05)课程支付(生成微信支付二维码接口)
1、在service_order模块编写controller,返回一个map集合@Api(description="支付管理")@RestController@RequestMapping("/orderservice/paylog")@CrossOriginpublic class TPayLogController { @Autowired private TPayLogService payLogService; @ApiOperation(value = "根据原创 2020-11-07 16:05:41 · 280 阅读 · 0 评论 -
day16---(04)课程支付(微信支付简介)
1、申请开发者资质,公司类型2、微信支付账号(1)微信支付id(2)商户号(3)商户key3、查看微信支付官方文档参考文档:https://pay.weixin.qq.com/wiki/doc/api/index.html4、生成支付二维码流程(1)使用httpClient请求微信支付固定地址(2)向地址里拼接参数,通过xml进行传递(3)请求之后,返回结果,result_code的值SUCCESS,表示生成成功(4)通过返回的数据,获取二维码...原创 2020-11-07 16:02:46 · 234 阅读 · 0 评论 -
day16---(03)生成课程订单前端整合
1、复制样式文件到项目中assets2、在default.vue 引入css样式import '~/assets/css/reset.css'import '~/assets/css/theme.css'import '~/assets/css/global.css'import '~/assets/css/web.css'import '~/assets/css/base.css'import '~/assets/css/activity_tab.css'import '~/assets原创 2020-11-07 16:01:30 · 242 阅读 · 0 评论 -
day16---(02)课程支付接口开发(获取订单信息)
package com.atguigu.orderservice.controller;import com.atguigu.commonutils.R;import com.atguigu.commonutils.utils.JwtUtils;import com.atguigu.orderservice.entity.TOrder;import com.atguigu.orderservice.service.TOrderService;import com.baomidou.mybatisp原创 2020-11-07 15:58:53 · 171 阅读 · 0 评论 -
day16---(01)课程支付接口开发(生成订单接口)
1、在课程详情页面,点击“立即购买”生成订单,向订单表添加一条记录2、订单表添加需要很多数据(1)订单号:手动生成订单号(2)课程相关数据根据课程id查询信息方法,在service_edu模块创建在service_order模块远程调用课程信息(3)在用户相关信息内容根据用户id查询用户信息,在service_ucenter模块创建在service_order模块远程调用用户信息3、在TOrderController 创建生成课程支付订单的方法package com.atguigu.or原创 2020-11-07 15:57:54 · 541 阅读 · 0 评论 -
day15---(07)课程支付接口开发(准备)
1、在service模块下创建子模块service_order2、在service_order引入相关依赖<dependencies> <dependency> <groupId>com.github.wxpay</groupId> <artifactId>wxpay-sdk</artifactId> <version>0.0.3</version>原创 2020-11-06 20:46:44 · 146 阅读 · 1 评论 -
day15---(06)课程支付需求分析
1、在课程列表页面,点击某一个课程时,进入课程详情页面(1)如果课程是免费的,直接观看,在详情页显示“立即观看”。(2)如果课程是付费课程,需要支付,在详情页显示“立即购买”。2、如果是付费课程,点击“立即购买”,生成课程订单,跳转课程订单页面3、在订单页面,点击“去支付”,跳转支付页面,生成微信二维码4、支付完成后,跳回课程详情页面,同时显示立即观看...原创 2020-11-06 20:41:16 · 164 阅读 · 0 评论 -
day15---(05)在线教育项目整合阿里云播放器
1、在小节vo类添加视频id属性(注意:字段名必须和EduVideo字段一样)@Datapublic class VideoVo { private String id; private String title; //视频id private String videoSourceId;}2、点击小节打开视频播放页面(1)视频播放入口位置(2)改造pages/course/_id.vue页面的视频播放入口<a :href="'/player/'原创 2020-11-06 20:39:16 · 372 阅读 · 0 评论 -
day15---(04)阿里云视频播放器整合与学习
1、根据视频地址播放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <原创 2020-11-06 20:35:38 · 470 阅读 · 0 评论 -
day15---(03)课程详情前端整合
1、修改超链接地址修改pages/course/index.vue页面中课程列表进入课程详情页面_id.vue页面的超链接地址。2、js实现pages/course/_id.vue页面添加js方法实现数据加载。<script>import course from "@/api/course";export default {//异步请求操作 //params:this.$route.params asyncData({ params, error }) { //调原创 2020-11-06 20:31:20 · 365 阅读 · 1 评论 -
day15---(02)课程列表前端整合
1、api定义课程接口在api目录下创建course.js文件。import request from '@/utils/request'export default { //带条件分页查询课程列表 getTeacherPageVo(current,limit,courseQueryVo){ return request({ url: `/eduservice/courseapi/getFrontCourseList/${current}/${limit}`,原创 2020-11-06 20:28:46 · 353 阅读 · 0 评论 -
day15---(01)获取阿里云视频播放凭证接口
1、 在service_vod模块创建接口在service_vod的com/ atguigu/vodservice/controller/VideoController里添加根据视频id获取视频播放凭证。package com.atguigu.vodservice.controller;import com.aliyuncs.DefaultAcsClient;import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthRequest;impor原创 2020-11-06 20:24:37 · 733 阅读 · 1 评论 -
day14---(09)实现课程详情接口
1、通过编写sql语句,查询课程信息SELECT * FROM edu_course ec LEFT JOIN edu_course_description ecd ON ec.id = ecd.id LEFT JOIN edu_teacher et ON ec.teacher_id = et.idWHERE ec.id =18;2、编写接口信息(1)创建展示vo类在com/atguigu/eduservice/entity/vo中添加CourseWebVo类。@Datapublic c原创 2020-10-25 10:46:29 · 181 阅读 · 0 评论 -
day14---(08)实现课程列表接口
1、带条件查询带分页的课程列表(1)创建条件查询的vo在service_edu模块中com/atguigu/eduservice/entity/vo编写CourseQueryVo类。@Datapublic class CourseQueryVo { @ApiModelProperty(value = "课程名称") private String title; @ApiModelProperty(value = "讲师id") private String teac原创 2020-10-25 10:44:23 · 185 阅读 · 0 评论 -
day14---(07)名师详情前端
1、调用讲师详情接口整合前端(1)修改页面修改pages/teacher/index.vue讲师列表页面跳转详情的链接(动态路由)。(2)pages/teacher/_id.vue中实现js<script>import teacher from "@/api/teacher";export default { //异步请求操作 //params:this.$route.params asyncData({ params, error }) { //调用接口原创 2020-10-25 10:42:44 · 162 阅读 · 0 评论 -
day14---(06)名师列表前端
1、在api目录下创建teacher.js文件,定义讲师接口import request from '@/utils/request'export default { //查询讲师列表带分页 getFrontTeacherList(current,limit){ return request({ url: `/eduservice/teacherapi/getFrontTeacherList/${current}/${limit}`, method: 'get'原创 2020-10-25 10:41:07 · 134 阅读 · 0 评论 -
day14---(05)名师列表和详情接口
1、 名师的列表接口(分页的列表查询)在service_edu模块com/atguigu/eduservice/api目录下创建TeacherApiController实现前台讲师展示功能。package com.atguigu.eduservice.api;import com.atguigu.commonutils.R;import com.atguigu.eduservice.entity.EduCourse;import com.atguigu.eduservice.entity.EduT原创 2020-10-25 10:38:39 · 207 阅读 · 0 评论 -
day14---(04)整合课程与课程列表页面
1、 课程列表页面(1) 在pages/course目录下创建index.vue页面(2)index.vue页面<template> <div id="aCoursesList" class="bg-fa of"> <!-- /课程列表 开始 --> <section class="container"> <header class="comm-title"> <h2 class="fl原创 2020-10-25 10:36:56 · 513 阅读 · 0 评论 -
day14---(03)整合显示教师页面
1、nuxt路由(1)固定路由(静态路由)路由地址是固定的不会变化。(2)动态路由路由地址每次不同。2、整合名师列表页面(1)点击首页“名师”进入名师列表页面,修改default.vue页面,使用固定路由(2)在pages/teacher目录下创建index.vue文件(3)index.vue文件<template> <div id="aCoursesList" class="bg-fa of"> <!-- 讲师列表 开始 -->原创 2020-10-25 10:32:09 · 190 阅读 · 0 评论 -
day14---(02)扫描后首页面显示数据
1、扫码后,通过token传递数据,地址栏有token值2、前端实现过程(1)跳转default.vue页面后,获取地址栏token值。(2)调用接口,根据token值获取用户信息。3、layouts/default.vue页面js代码实现(1)default.vue页面引入login的api。import loginApi from '@/api/login'(2)default.vue页面js方法实现获取地址栏参数,获取后调用方法。<script>import '~/a原创 2020-10-25 10:29:32 · 113 阅读 · 0 评论