谷粒学院在线教育项目

最新推荐文章于 2024-02-03 13:19:48 发布

学习至死qaq

最新推荐文章于 2024-02-03 13:19:48 发布

阅读量696

点赞数

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/weixin_44348734/article/details/117307795

版权

Day01

内容

mybatisPlus

项目技术点介绍

在这里插入图片描述

mybatisPlus

Day02

内容

前后端分离概念
讲师管理模块

在这里插入图片描述

创建父模块：管理依赖版本和放公共依赖

findAll返回的json时间格式
在这里插入图片描述
需要在yml文件设置json格式和时区

整合swagger

在common-base模块中配置swagger，在edu启动类上配置@ComponentScan(basePackages = {“com.jl”})//扫描swagger的@Configuration注解
定义在类上：@Api
定义在方法上：@ApiOperation
定义在参数上：@ApiParam

统一异常处理

自定义异常不是由系统自带的异常，所以要手动抛出

依赖传递

在这里插入图片描述

Day03

在这里插入图片描述

统一日志管理

在这里插入图片描述

日志信息更详细地输出到文件

在这里插入图片描述

package com.guli.common.util;

public class ExceptionUtil {

	public static String getMessage(Exception e) {
		StringWriter sw = null;
		PrintWriter pw = null;
		try {
			sw = new StringWriter();
			pw = new PrintWriter(sw);
			// 将出错的栈信息输出到printWriter中
			e.printStackTrace(pw);
			pw.flush();
			sw.flush();
		} finally {
			if (sw != null) {
				try {
					sw.close();
				} catch (IOException e1) {
					e1.printStackTrace();
				}
			}
			if (pw != null) {
				pw.close();
			}
		}
		return sw.toString();
	}
}

在这里插入图片描述

日志等级

TRACE < DEBUG < INFO < WARN < ERROR < FATAL。
springboot默认是INFO，因此低于INFO的TRACE和DEBUG都不会输出

ES6

它是一套规范，javaScript很好地遵循了这个规范
1、安装vscode
日志记录器（Logger）的行为是分等级的。如下表所示：
分为：ERROR、WARN、INFO、DEBUG

VUE

创建代码片段：文件->首选项->用户片段->粘贴模板代码
目的：提高开发速度，作代码抽取
再新建html文件时，输入关键字，比如:vuehtml就可以引入模板文件

created：数据渲染之前执行
mounted：数据渲染之后执行
在这里插入图片描述

Day04

npm相当于maven
node.js相当于jdk（js的运行环境，不需要浏览器只需要使用nodejs就可以运行js代码）
babel是把es6代码转成es5
模块化
webpack:打包工具

axios

在这里插入图片描述

nodejs

npm

作用：管理前端js依赖，相当于前端的maven
可以设置淘宝镜像，下载更快

在这里插入图片描述

babel

在这里插入图片描述

模块化

在这里插入图片描述

webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求

搭建项目前端页面环境

在这里插入图片描述

Day05

讲师前端crud

课程介绍

在这里插入图片描述

跨域问题

在这里插入图片描述

前端框架开发流程

在这里插入图片描述

路由切换问题

在这里插入图片描述

Day06

在这里插入图片描述

阿里云OSS：

使用
对象存储->管理控制台->创建bucket(相当于包或文件夹)->
java代码上传文件到阿里云OSS

准备工作：创建操作阿里云oss许可证（阿里云颁发id和秘钥）
Access key->创建Access key
开发文档->快速入门

项目启动需要配置数据库

oss环境搭建

在这里插入图片描述

nginx

在这里插入图片描述

头像上传

在这里插入图片描述

easyExcel课程分类

day 07

在这里插入图片描述
添加课程

课程管理

数据库表

在这里插入图片描述

课程发布流程

在这里插入图片描述

添加课程基本信息流程

在这里插入图片描述

day 08

在这里插入图片描述

整合富文本编辑器

在这里插入图片描述
富文本存图片：将图片内容进行base64编码，让图片更易于存储，将编码后的内容存储到数据库

mysql

内连接

查两张表有关联数据

左外连接

左边所有数据，右表关联数据

sql执行异常的问题

在这里插入图片描述

day 09

内容

在这里插入图片描述

阿里云视频点播服务

在这里插入图片描述

依赖不可用，需手动下载到本地后再通过maven命令安装到本地仓库

在这里插入图片描述
上传视频示例代码

上传视频及nginx配置

在这里插入图片描述

day10

内容

在这里插入图片描述

删除阿里云视频

springCloudAlibaba&微服务

在这里插入图片描述

nacos安装

在这里插入图片描述

服务注册

在这里插入图片描述

服务发现实现删除视频

在这里插入图片描述

springCloud的远程调用流程

微服务架构，分布式方式进行项目部署
在这里插入图片描述

分布式部署，springCloud熔断器

微服务架构，分布式方式进行项目部署
在这里插入图片描述
vod服务宕机进行测试

day 11

在这里插入图片描述

服务端渲染技术NUXT

在这里插入图片描述

1、在工作区新建一个目录，将NUXT复制进去
2、将package.json文件中的{{name}}换掉，不然npm install不会下载，且运行报错
3、npm run dev

目录结构

在这里插入图片描述

default.vue只有页面的头和尾，中间部分是index.vue
之前的模块是基于vue+element-ui，现在的只基于vue

整合首页面内容

在package.json文件中修改插件依赖版本，否则Error:Could not compile…Could not compile template,用npm install vue-awesome-swiper,下载@3.1.3版本即可解决

路由

在layout的default.vue中配置路由，补充course.vue和teacher.vue包括详情页页面_id.vue
在这里插入图片描述

首页显示数据

1、创建service_acl和service_cms两个模块
2、编写banner相关接口，手动创建utils/request.js,在前端安装axios并封装axios
3、创建api/banner.js请求接口文件，和之前的管理后台保持一致

redis

在这里插入图片描述

查询缓存

在这里插入图片描述

新增、修改缓存

在这里插入图片描述

删除、修改缓存

在这里插入图片描述

day12

在这里插入图片描述

单点登录

分布式部署下，在一个模块中登录则可以再全局生效

session广播:早期方式，存储相同资源浪费内存

jwt

导入jwt工具类

阿里云短信服务

阿里云短信服务无法申请，我们这里使用邮箱验证码
在这里插入图片描述

创建ucenter模块

根据token获取用户信息,下载插件
整合登录、注册页面

day 13

在这里插入图片描述

整合登录

下载cookie插件

在这里插入图片描述

登录和登录成功后首页面显示数据实现过程分析

在这里插入图片描述

在request.js添加拦截器，用于传递token信息

// http request 拦截器
service.interceptors.request.use(
  config => {
  //debugger
  if (cookie.get('guli_token')) {
    config.headers['token'] = cookie.get('guli_token');
  }
    return config
  },
  err => {
  return Promise.reject(err);
})

微信扫码注册/登录

OAuth2

仅是一个解决方案

在这里插入图片描述

配置微信参数并初始化

注册资质地址:https://open.weixin.qq.com/
文档地址：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

尚硅谷免费提供:
app_id:wxed9954c01bb89b47
secret:a7482517235173ddb4083788de60b90e
在这里插入图片描述

在这里插入图片描述

生成二维码

端口号必须是:8160
在这里插入图片描述

第三方应用:

我使用微信登录系统，微信就是第三方应用

登陆后jwt字符串数据不能存在cookie中，因为cookie不能跨域，应该字符串拼接在地址后面

用this.$route.query.jwt获取jwt字符串

day 14

在这里插入图片描述

固定路由和动态路由：固定路由就是index.vue,动态路由就是_id.vue

在这里插入图片描述

day 15

在这里插入图片描述
1、创建数据库表t_order,t_pay_log

07 生成微信支付二维码接口

只支持企业用户，不支持个人用户

在这里插入图片描述
导入依赖

<dependencies>
    <dependency>
        <groupId>com.github.wxpay</groupId>
        <artifactId>wxpay-sdk</artifactId>
        <version>0.0.3</version>
    </dependency>

    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
    </dependency>
</dependencies>

尚硅谷提供,与微信登录的数据完全不一样
weixin:
pay:
#关联的公众号appid
appid: wx74862e0dfcf69954
#商户号
partner: 1558950191
#商户key
partnerkey: T6m9iK73b0kn9g5v426MKfHQH7X8rKwb
#回调地址
notifyurl: http://guli.shop/api/order/weixinPay/weixinNotify

day 16

在这里插入图片描述

优化立即购买或者立即观看

没有购买显示立即购买;免费或者已经购买完成显示立即观看

在这里插入图片描述

统计分析模块

创建表：statistics_daily

定时任务

在这里插入图片描述

echarts

在这里插入图片描述

day17

在这里插入图片描述

canal数据同步

改变远程库中表数据有变化，本地会自动变化

在这里插入图片描述

在本地和虚拟机创建guli数据库，members表

在这里插入图片描述

步骤

在这里插入图片描述

gateway

在这里插入图片描述

路由：
断言：就是路由的匹配规则
过滤器：

在这里插入图片描述

负载均衡

在这里插入图片描述

跨域

在网关中配置了跨域，在controller中就不需要加跨域注解

权限管理

递归操作

day18

在这里插入图片描述

springSecurity

springSecurity主要包含认证和授权，本质上就是一个filter过滤器

授权过程

在这里插入图片描述

整合springSecurity

1、创建spring_security模块
2、导入依赖
3、拷贝代码

在这里插入图片描述

nacos config

dataId规范:spring.application.name-spring.profiles.active.yaml
支持多个配置文件加载

git

day 19

在这里插入图片描述

手动打包

在这里插入图片描述

jenkins

1、安装

jdk、maven、git

在这里插入图片描述

docker

在这里插入图片描述

jenkins

war包放在tomcat服务器中可以直接运行，war包中就是一个web项目，可以直接通过浏览器访问，jenkins部署最简单方式就是把jenkins.war放在tomcat
在这里插入图片描述

学习至死qaq

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
谷粒学院在线教育项目

前后端分离概念讲师管理模块创建父模块管理依赖版本和放公共依赖findAll返回的json时间格式需要在yml文件设置json格式和时区使用对象存储->管理控制台->创建bucket(相当于包或文件夹)->java代码上传文件到阿里云OSS准备工作创建操作阿里云oss许可证（阿里云颁发id和秘钥）Accesskey->创建Accesskey开发文档->快速入门。...
复制链接

扫一扫