當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

硅谷课堂笔记（上）

發布時間：2023/12/31 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了硅谷课堂笔记（上）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

概述
- 功能架構圖
- 技術架構圖
- MybatisPlus復習
后臺開發
- 搭建工程
- - 數據庫設計
  - 數據庫設計規則
- 搭建工程
- - 實體類子模塊model
  - 服務子模塊service
  - 總結
- 引入Swagger
- - 遇到的坑
后臺開發-講師管理接口
- 概述
- 基礎代碼自動生成
- 配置文件和啟動類
- - 小改造
  - 測試
- 引入統一返回結果
- 引入全局異常處理
- - 示例
  - 自定義異常處理
  - 引入全局異常
  - 測試
- 教師接口
- - 邏輯刪除教師
  - 分頁條件查詢講師
  - - 分頁查詢Bug
  - 添加教師
  - 修改教師
  - 批量刪除講師
前臺開發
騰訊云存儲相關內容
- 快速起步
- - 開通“對象存儲COS”服務
  - 創建存儲桶以及測試
  - 創建API秘鑰
- 騰訊云存儲后端接口開發
- - 基礎環境
  - 上傳接口編寫
  - 前端上傳頭像
后臺開發-課程分類管理接口
- 需求分析
- - - 1、課程分類管理模塊需求
    - 2、課程分類數據庫設計
    - 3、功能實現-課程分類列表
- 后端開發
- - 課程分類前端頁面
EasyExcel
- 概述
- - EasyExcel特點
- 讀寫操作
- - EasyExcel寫操作
  - EasyExcel讀操作
功能實現-課程分類導入導出
- 實體類創建
- 導出接口編寫
- 整合導出前端
- 導入接口編寫
- 整合導入前端
后臺開發-點播管理模塊
- 涉及數據表
- - 根據相關表生成數據
- 后端接口編寫
- - 課程列表帶條件的分頁
  - - 整合課程列表前端
  - 課程列表接口
  - - 整合課程添加前端
  - 課程列表修改課程基本信息
  - - 獲取課程Form
    - 更新課程
  - 編輯大綱Bug
  - - 整合修改課程基本信息前端
- 課程大綱列表功能
- - 后端接口編寫
  - - 整合課程大綱前端
  - 小節視頻后端接口編寫
  - - 整合視頻小節前端
- 發布課程-課程最終發布
- - 課程最終發布接口
  - 小Bug
  - - 整合課程發布前端
- 刪除課程
- - - 課程刪除接口
    - 整合前端
后臺開發-點播模塊
- 播放統計模塊
- - 整合播放統計模塊前端
- 整合騰訊云點播
- - 云點播服務
  - - - 上傳視頻
      - 前端集成播放頁面
- 云點播服務端接口
- - 后端上傳視頻
  - 后端刪除視頻
  - 點播服務整合前端
- 騰訊云上傳視頻其他方式
- - 之前的缺點
  - 客戶端上傳視頻
  - - 整合客戶端前端頁面
  - 完善刪除視頻功能

概述

資料下載提取碼：8op3

功能架構圖

技術架構圖

MybatisPlus復習

篇幅有限，我另起了一個筆記進行復習
MybatisPlus快速學習

后臺開發

搭建工程

數據庫設計

這里的數據庫用的是MySQL8.0版本
如果有小伙伴跟著做了，最少也要5.7以上的版本
數據庫和表

數據庫設計規則

以下規則只針對本模塊，更全面的文檔參考《阿里巴巴Java開發手冊》：

1、庫名與應用名稱盡量一致2、表名、字段名必須使用小寫字母或數字，禁止出現數字開頭，3、表名不使用復數名詞4、表的命名最好是加上“業務名稱_表的作用”。如，edu_teacher5、表必備三字段：id, gmt_create, gmt_modified說明：其中 id 必為主鍵，類型為 bigint unsigned、單表時自增、步長為 1。（如果使用分庫分表集群部署，則id類型為verchar，非自增，業務中使用分布式id生成器）gmt_create, gmt_modified 的類型均為 datetime 類型，前者現在時表示主動創建，后者過去分詞表示被動更新。6、單表行數超過 500 萬行或者單表容量超過 2GB，才推薦進行分庫分表。說明：如果預計三年后的數據量根本達不到這個級別，請不要在創建表時就分庫分表。 7、表達是與否概念的字段，必須使用 is_xxx 的方式命名，數據類型是 unsigned tinyint （1 表示是，0 表示否）。說明：任何字段如果為非負數，必須是 unsigned。注意：POJO 類中的任何布爾類型的變量，都不要加 is 前綴。數據庫表示是與否的值，使用 tinyint 類型，堅持 is_xxx 的命名方式是為了明確其取值含義與取值范圍。正例：表達邏輯刪除的字段名 is_deleted，1 表示刪除，0 表示未刪除。 8、小數類型為 decimal，禁止使用 float 和 double。說明：float 和 double 在存儲的時候，存在精度損失的問題，很可能在值的比較時，得到不正確的結果。如果存儲的數據范圍超過 decimal 的范圍，建議將數據拆成整數和小數分開存儲。9、如果存儲的字符串長度幾乎相等，使用 char 定長字符串類型。 10、varchar 是可變長字符串，不預先分配存儲空間，長度不要超過 5000，如果存儲長度大于此值，定義字段類型為 text，獨立出來一張表，用主鍵來對應，避免影響其它字段索引效率。11、唯一索引名為 uk_字段名；普通索引名則為 idx_字段名。說明：uk_ 即 unique key；idx_ 即 index 的簡稱12、不得使用外鍵與級聯，一切外鍵概念必須在應用層解決。外鍵與級聯更新適用于單機低并發，不適合分布式、高并發集群；級聯更新是強阻塞，存在數據庫更新風暴的風險；外鍵影響數據庫的插入速度。

搭建工程

包結構

模塊說明
ggkt_parent：硅谷課堂根目錄（父工程），管理多個子模塊：

common：公共模塊父節點

common_util：工具類模塊，所有模塊都可以依賴于它

service_utils：service服務的base包，包含service服務的公共配置類，所有service模塊依賴于它

rabbit_utils：rabbitmq封裝工具類

model：實體類相關模塊

server-gateway：服務網關

service：api接口服務父節點

? service_acl：權限管理接口服務

? service_activity：優惠券api接口服務

? service_live：直播課程api接口服務

? service_order：訂單api接口服務

? service_user：用戶api接口服務

? service_vod：點播課程 api接口服務

? service_wechat：公眾號api接口服務

service-client：feign服務調用父節點

? service-activity-client：優惠券api接口

? service-live-client：直播課程api接口

? service-order-client：訂單api接口

? service-user-client：用戶api接口

? service-vod-client：點播課程api接口

介紹完畢，開始搭建

不用管官方的依賴，我們后面Pom文件自己加
SpringBoot版本統一為2.2.1RELEASE版本
而且作為父工程，是不需要src目錄的，因為主要的內容都在他子模塊下
所以留個Pom就行

依賴我就不粘貼了，太多
需要的小伙伴直接去Gitee找到父工程下的Pom就可以查看

實體類子模塊model

先在parent下新建子模塊model
以Maven模版生成就可以了

直接導入實體類子模塊model，當然，MP自動生成也不是不行~

同樣子模塊也需要引入各種jar包和依賴

<dependencies><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><scope>provided </scope></dependency><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><scope>provided </scope></dependency><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><scope>provided</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId><scope>provided </scope></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><scope>provided </scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId><scope>provided </scope></dependency></dependencies>

服務子模塊service

再建一個Service子模塊

同樣需要引入對應的依賴

<dependencies><dependency><groupId>com.cc</groupId><artifactId>model</artifactId><version>0.0.1-SNAPSHOT</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency></dependencies>

因為service包也是對服務進行管理，所以也不留src路徑，下面繼續還要創建多個服務包

再建service_vod（視頻點播）模塊

總結

引入Swagger

對接口信息進行管理，測試一條龍服務
非?？鞓?br /> 因為Swagger組件是公共的，所以單獨拿一個模塊做Common-serviceUtils模塊

依賴我就不多說了，具體路徑可以看這個onlineClass\common\pom.xml

注意，common包下及其子模塊作為一個單獨的子模塊，是無法被service模塊所看到的。
所以這里也要像之前引入實體類一樣，去service模塊把這個common模塊引入
引入之前一定一定要補全common子模塊service-utils的pom信息，缺少信息會找不到
這個是service-utils里的信息

這里是service包引入依賴

到這還不算完，要在在service_vod啟動類上加入對于Swagger的掃描

在想管理的方法上面加入對應注解就好啦

定義在類上：@Api
定義在方法上：@ApiOperation
定義在參數上：@ApiParam

@Api(tags = "講師管理接口") @RestController @RequestMapping(value="/admin/vod/teacher") public class TeacherController {@Autowiredprivate TeacherService teacherService;//刪除講師@ApiOperation("邏輯刪除講師")@DeleteMapping("{id}")public boolean removeById(@ApiParam(name = "id", value = "ID", required = true) @PathVariable String id){return teacherService.removeById(id);}//查詢所有講師列表@ApiOperation("所有講師列表")@GetMapping("findAll")public List<Teacher> findAll(){List<Teacher> list = teacherService.list();return list;} }

Swagger后臺路徑：http://localhost:啟動端口號/swagger-ui.html

后續包括文檔的生成，參數注解生成等等都比較好辦了，這里不是重點就不過多贅述了

遇到的坑

左找右找，先后加了注解，也不知為什么找不到controller，全都是error

通過百度，發現這個問題一般來說都是Swagger配置類沒寫好。但是剛剛我還寫了配置類，顯然不太可能是配置類的鍋
推測應該是沒掃到配置類，之前說過要在啟動類上加入配置類掃描

仔細一看，好家伙包名沒對上！
改了包名就正常了，掃描到配置類自然就都合理起來了

Swagger后臺路徑：http://localhost:啟動端口號/swagger-ui.html

后臺開發-講師管理接口

概述

添加課程時候，需要選擇所屬講師，所以要對講師進行管理，就是基于講師的CRUD操作
引入代碼生成器，自動生成相關內容

基礎代碼自動生成

建議這些操作放到test測試包中，避免一起打包了，生成完畢也不需要再刪除
（1）引入代碼生成器依賴

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.3.1</version> </dependency><dependency><groupId>org.apache.velocity</groupId><artifactId>velocity-engine-core</artifactId><version>2.0</version> </dependency>

（2）復制生成代碼工具類

修改代碼中路徑、數據庫、包和表，復制到test目錄下

（3）實體類統一替換為model模塊的實體類

配置文件和啟動類

配置文件

# 服務端口 server.port=8301 # 服務名 spring.application.name=service-vod# 環境設置：dev、test、prod spring.profiles.active=dev# mysql數據庫連接 spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/glkt_vod?characterEncoding=utf-8&useSSL=false spring.datasource.username=root spring.datasource.password=root#返回json的全局時間格式 spring.jackson.date-format=yyyy-MM-dd HH:mm:ss spring.jackson.time-zone=GMT+8#mybatis日志 mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

代碼生成器

public class CodeGet {public static void main(String[] args) {// 1、創建代碼生成器AutoGenerator mpg = new AutoGenerator();// 2、全局配置// 全局配置GlobalConfig gc = new GlobalConfig();String projectPath = System.getProperty("user.dir");//gc.setOutputDir(projectPath + "/src/main/java");//這里是輸出生成代碼的目錄，這里要填電腦的絕對路徑（必改）+拼接出來的路徑gc.setOutputDir("D:\\JavaProject\\onlineClass\\service\\service_vod\\"+"/src/main/java");gc.setServiceName("%sService"); //去掉Service接口的首字母Igc.setAuthor("cc");gc.setOpen(false);mpg.setGlobalConfig(gc);// 3、數據源配置DataSourceConfig dsc = new DataSourceConfig();dsc.setUrl("jdbc:mysql://localhost:3307/glkt_vod");dsc.setDriverName("com.mysql.jdbc.Driver");dsc.setUsername("root");dsc.setPassword("123456");dsc.setDbType(DbType.MYSQL);mpg.setDataSource(dsc);// 4、包配置PackageConfig pc = new PackageConfig();pc.setModuleName("service_vod"); //模塊名pc.setParent("com");//包名，最后組合成 com.service_vodpc.setController("controller");pc.setEntity("entity");pc.setService("service");pc.setMapper("mapper");mpg.setPackageInfo(pc);// 5、策略配置StrategyConfig strategy = new StrategyConfig();//具體生成哪些表要具體指定//strategy.setInclude("想要生成的表名");strategy.setInclude("teacher");strategy.setNaming(NamingStrategy.underline_to_camel);//數據庫表映射到實體的命名策略strategy.setColumnNaming(NamingStrategy.underline_to_camel);//數據庫表字段映射到實體的命名策略strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter鏈式操作strategy.setRestControllerStyle(true); //restful api風格控制器strategy.setControllerMappingHyphenStyle(true); //url中駝峰轉連字符mpg.setStrategy(strategy);// 6、執行mpg.execute();} }

啟動類

@SpringBootApplication public class ServiceVodApplication {public static void main(String[] args) {SpringApplication.run(ServiceVodApplication.class, args);} }

小改造

修改一下引入的實體類，使用我們創建的實體類工程

加入MP配置類

測試

寫一個遍歷老師信息的測試

到這里就算搭建成功了，可以開始著手下一步接口的撰寫了。

引入統一返回結果

Result結果集，都是老朋友了

項目中我們會將響應封裝成json返回，一般我們會將所有接口的數據格式統一，使前端(iOS Android, Web)對數據的操作更一致、輕松。

一般情況下，統一返回數據格式沒有固定的格式，只要能描述清楚返回的數據狀態以及要返回的具體數據就可以。但是一般會包含狀態碼、返回消息、數據這幾部分內容

因為這個也算工具的一種，所以把這個結果集寫到Common模塊的子模塊service_utils中

一個結果集 Result
一個結果信息枚舉集 ResultCodeEnum

具體位置：com.cc.result.Result，com.cc.result.ResultCodeEnum
復習一下Json格式

使用的話，Result.success.(數據).message(“想填入的信息”)
Result.success.(數據)

引入全局異常處理

有特定異常就先處理特定異常，匹配不到特定異常就走全局異常處理

示例

先看看這種代碼的try catch
這種try catch來捕獲異常固然好，但是，代碼量一大起來，超級多的try catch就會很亂

所以我們要加入全局異常處理
由于這是工具類的屬性在Common包的service_utils下，和Result同級，這里只是示例，并不完整
如圖是某個特定異常處理

有了這些異常處理，就可以捕獲控制臺輸出的異常信息，從而對其進行處理

自定義異常處理

引入全局異常

把自定義異常引入全局異常處理

測試

先測自定義異常，找一個接口人為制造異常

測試一下

如果我們把try catch去掉，只留下int i=10/0，這個異常算是算數異常，也就是ArithmeticException，因此也會被捕獲，此時不出意外就會走特殊異常處理

最后，來試試全局異常，一個沒有設置對應有任何處理的異常

當然，如果想好幾種異常都走一種處理方式，也是完全可以的
只需要在異常類型注解上面加入對應類型就好
@ExceptionHandler({異常類型1.class,異常類型2.class})
以上就是全局異常處理類的相關內容

教師接口

邏輯刪除教師

Delete請求方式+ResultFul請求風格
還是非常簡單的，注意，這里是邏輯刪除，沒有做表的實際刪除。
也就是把邏輯字段更新了一下

分頁條件查詢講師

就是簡單的按條件分頁查詢
位置：service模塊下的service_vod子模塊com.cc.service_vod.controller.TeacherController （findQueryPage）

復習一下RequestBody注解

分頁查詢Bug

到了前端測試的時候，發現分頁不好使，怎么查都沒有Limit
還以為mp出問題了，結果一看，MP的分頁配置類沒寫

蚌埠住了，沒寫配置類

加上配置類就好了

添加教師

位置：service模塊下的service_vod子模塊com.cc.service_vod.controller.TeacherController （saveTeacher）

修改教師

注意，要是想修改的話，肯定是得先獲取講師的信息，才能在獲取的基礎上對教師信息進行改進
所以要先獲取，根據id獲取，這里不多贅述，歡迎去Gitee查看~
獲取教師位置：service模塊下的service_vod子模塊com.cc.service_vod.controller.TeacherController （getTeacherById）
更新教師位置：service模塊下的service_vod子模塊com.cc.service_vod.controller.TeacherController （updateById）

批量刪除講師

根據id集合刪講師位置：service模塊下的service_vod子模塊com.cc.service_vod.controller.TeacherController （batchRemove）

前臺開發

前端內容比較多，這里單獨再開一篇文章專門寫這個
只有教師接口部分是手寫的，剩下的內容都是復制粘貼
這部分是基礎內容
硅谷課堂前端內容

騰訊云存儲相關內容

快速起步

點擊就送

開通“對象存儲COS”服務

進入會送一定額度的免費存儲

（1）申請騰訊云賬號：https://cloud.tencent.com/

（2）實名認證

（3）開通“對象存儲COS”服務

（4）進入管理控制臺

創建存儲桶以及測試

進入管理控制臺，找到存儲桶列表，創建存儲桶
簡單填一下信息就可以了，注意不要選私有讀寫
后面的配置不用管，無腦跳過就行

創建完畢

點擊桶名稱，進入詳情頁，可測試上傳文件

創建API秘鑰

基本操作已經完畢，剩下的交給后端接口

騰訊云存儲后端接口開發

基礎環境

參考文檔：https://cloud.tencent.com/document/product/436/10199
Pom依賴

<dependency><dependency><groupId>com.qcloud</groupId><artifactId>cos_api</artifactId><version>5.6.54</version></dependency><dependency><groupId>joda-time</groupId><artifactId>joda-time</artifactId></dependency> </dependency>

為后端服務引入依賴

配置application.properties

spring.servlet.multipart.max-file-size=1024MB spring.servlet.multipart.max-request-size=1024MB#不同的服務器，地址不同 tencent.cos.file.region=ap-beijing tencent.cos.file.secretid=你的id tencent.cos.file.secretkey=你的key #bucket可以在控制臺創建，也可以使用java代碼創建 tencent.cos.file.bucketname=你的bucketName

在Service模塊里新建utils工具包，把配置文件引入

/*** 常量類，讀取配置文件application.properties中的配置*/ @Component public class ConstantPropertiesUtil implements InitializingBean {@Value("${tencent.cos.file.region}")private String region;@Value("${tencent.cos.file.secretid}")private String secretId;@Value("${tencent.cos.file.secretkey}")private String secretKey;@Value("${tencent.cos.file.bucketname}")private String bucketName;public static String END_POINT;public static String ACCESS_KEY_ID;public static String ACCESS_KEY_SECRET;public static String BUCKET_NAME;@Overridepublic void afterPropertiesSet() throws Exception {END_POINT = region;ACCESS_KEY_ID = secretId;ACCESS_KEY_SECRET = secretKey;BUCKET_NAME = bucketName;} }

上傳接口編寫

創建Interface：FileService.java

public interface FileService {//文件上傳String upload(MultipartFile file); }

實現：FileServiceImpl.java

存儲Service實現類
一些數據根據工具類就讀取了

@Service public class FileServiceImpl implements FileService {@Overridepublic String upload(MultipartFile file) {// Endpoint以杭州為例，其它Region請按實際情況填寫。String endpoint = ConstantPropertiesUtil.END_POINT;String bucketName = ConstantPropertiesUtil.BUCKET_NAME;// 1 初始化用戶身份信息（secretId, secretKey）。String secretId = ConstantPropertiesUtil.ACCESS_KEY_ID;String secretKey = ConstantPropertiesUtil.ACCESS_KEY_SECRET;COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);// 2 設置 bucket 的地域// clientConfig 中包含了設置 region, https(默認 http),超時, 代理等 set 方法Region region = new Region(ConstantPropertiesUtil.END_POINT);ClientConfig clientConfig = new ClientConfig(region);// 這里建議設置使用 https 協議// 從 5.6.54 版本開始，默認使用了 httpsclientConfig.setHttpProtocol(HttpProtocol.https);// 3 生成 cos 客戶端。COSClient cosClient = new COSClient(cred, clientConfig);try{// 指定要上傳的文件InputStream inputStream = file.getInputStream();// 指定文件將要存放的存儲桶// 指定文件上傳到 COS 上的路徑，即對象鍵。例如對象鍵為folder/picture.jpg，則表示將文件 picture.jpg 上傳到 folder 路徑下String key = UUID.randomUUID().toString().replaceAll("-","")+file.getOriginalFilename();String dateUrl = new DateTime().toString("yyyy/MM/dd");key = dateUrl+"/"+key;ObjectMetadata objectMetadata = new ObjectMetadata();PutObjectRequest putObjectRequest =new PutObjectRequest(bucketName, key, inputStream,objectMetadata);PutObjectResult putObjectResult = cosClient.putObject(putObjectRequest);System.out.println(JSON.toJSONString(putObjectResult));//https://ggkt-atguigu-1310644373.cos.ap-beijing.myqcloud.com/01.jpgString url = "https://"+bucketName+"."+"cos"+"."+endpoint+".myqcloud.com"+"/"+key;return url;} catch (Exception clientException) {clientException.printStackTrace();return null;}} }

編寫controller，注入相關接口service就好

記得加跨域

直接打開Swagger進行測試
上傳文件

回到騰訊云，文件已經上傳上來了

前端上傳頭像

復制粘貼樣式和JS，測一下，好用

測試一下

后臺開發-課程分類管理接口

需求分析

1、課程分類管理模塊需求

（1）課程分類列表功能
這個也叫懶加載，不點就不加載
點了就展現二級內容

（2）課程分類導入功能

（3）課程分類導出功能

2、課程分類數據庫設計

（1）創建課程分類表subject

3、功能實現-課程分類列表

接口實現分析

課程分類采用樹形展示，我們使用“樹形數據與懶加載”的方式展現數據列表，因此需要提供的接口如下：根據上級id獲取下級數據，參考element-ui文檔：https://element.eleme.cn/#/zh-CN/component/table，頁面搜索：樹形數據與懶加載

后端開發

因為沒有生成相關的實體類，所以要用代碼生成器生成一下，簡單修改一下就可以生成

生成完畢后就可以寫接口了
根據剛剛的分析，要對當前課程是否有parentId做出相關判斷

controller位置：com.cc.service_vod.controller.SubjectController
serviceImpl位置：com.cc.service_vod.service.impl.FileServiceImpl （selectList、isChild）

這里有個小問題，就是Service層去調用MP的擴展方法怎么辦
答案就是用BaseMapper去調用，因為已經擴展好了

課程分類前端頁面

引入JS 創建文件 src/api/vod/subject.js

復制粘貼樣式編寫subject/list.vue src\views\vod\subject\list.vue

測試一下，包括懶加載都沒有問題了

EasyExcel

概述

EasyExcel是阿里巴巴開源的一個excel處理框架，以使用簡單、節省內存著稱。EasyExcel能大大減少占用內存的主要原因是在解析Excel時沒有將文件數據一次性全部加載到內存中，而是從磁盤上一行行讀取數據，逐個解析。

EasyExcel特點

Java領域解析、生成Excel比較有名的框架有Apache poi、jxl等。但他們都存在一個嚴重的問題就是非常的耗內存。如果你的系統并發量不大的話可能還行，但是一旦并發上來后一定會OOM或者JVM頻繁的full gc。
EasyExcel采用一行一行的解析模式，并將一行的解析結果以觀察者的模式通知處理（AnalysisEventListener）
EasyExcel是一個基于Java的簡單、省內存的讀寫Excel的開源項目。在盡可能節約內存的情況下支持讀寫百M的Excel。
比較一下二者的區別

讀寫操作

EasyExcel寫操作

（1）pom中引入xml相關依賴

<dependencies><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.1</version></dependency> </dependencies>

（2）創建實體類
Excel作為一種表，和數據庫一樣，也應該有實體類與之對應

設置表頭和添加的數據字段

@Data public class Stu {//設置表頭名稱@ExcelProperty("學生編號")private int sno;//設置表頭名稱@ExcelProperty("學生姓名")private String sname; }

（3）實現寫操作

創建方法循環設置要添加到Excel的數據

//循環設置要添加的數據，最終封裝到list集合中 private static List<Stu> data() {List<Stu> list = new ArrayList<Stu>();for (int i = 0; i < 10; i++) {Stu data = new Stu();data.setSno(i);data.setSname("張三"+i);list.add(data);}return list; }

實現最終的添加操作

public static void main(String[] args) throws Exception {// 寫法1String fileName = "F:\\11.xlsx";// 這里需要指定寫用哪個class去寫，然后寫到第一個sheet，名字為模板然后文件流會自動關閉// 如果這里想使用03 則傳入excelType參數即可EasyExcel.write(fileName, 對應實體類.class).sheet("sheet表名").doWrite(data()); }

這個時候，在D盤中已經生成了一個對應的Excel文件

EasyExcel讀操作

（1）創建實體類

@Data public class Stu {//設置表頭名稱//設置列對應的屬性 index代表表頭下標，從0開始@ExcelProperty(value = "學生編號",index = 0)private int sno;//設置表頭名稱//設置列對應的屬性@ExcelProperty(value = "學生姓名",index = 1)private String sname; }

（2）創建讀取操作的監聽器

public class ExcelListener extends AnalysisEventListener<Stu> {//創建list集合封裝最終的數據List<Stu> list = new ArrayList<Stu>();//一行一行去讀取excle內容//默認從第二行開始讀，第一行默認表頭，表頭在下面的invokeHeadMap中讀@Overridepublic void invoke(Stu user, AnalysisContext analysisContext) {System.out.println("***"+user);list.add(user);}//讀取excel表頭信息（第一行）@Overridepublic void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {System.out.println("表頭信息："+headMap);}//讀取完成后執行@Overridepublic void doAfterAllAnalysed(AnalysisContext analysisContext) {} }

（3）調用實現最終的讀取

public static void main(String[] args) throws Exception {//指定讀取路徑String fileName = "D:\\11.xlsx";// 這里需要指定讀用哪個class去讀，然后讀取第一個sheet 文件流會自動關閉EasyExcel.read(fileName, 實體類.class, new ExcelListener()).sheet().doRead(); }

測試一下，已經讀取到內存了

功能實現-課程分類導入導出

思路

實體類創建

在model模塊下，創建課程表對應實體類，Excel版Subject專用
和普通的Subject分隔開

導出接口編寫

整合導出前端

加入這倆按鈕

JS邏輯

導入接口編寫

controller接口

因為讀操作要用監聽器，所以創建一個

@Component public class SubjectListener extends AnalysisEventListener<SubjectEeVo> {@Autowiredprivate SubjectMapper subjectMapper;//一行一行讀取@Overridepublic void invoke(SubjectEeVo subjectEeVo, AnalysisContext analysisContext) {//調用方法添加數據庫Subject subject = new Subject();BeanUtils.copyProperties(subjectEeVo,subject);subjectMapper.insert(subject);}@Overridepublic void doAfterAllAnalysed(AnalysisContext analysisContext) {} }

ServiceImpl層

整合導入前端

（1）在list.vue頁面添加導入按鈕

<el-button type="text" @click="importData"><i class="fa fa-plus"/> 導入</el-button>

（2）添加導入彈出層

<el-dialog title="導入" :visible.sync="dialogImportVisible" width="480px"><el-form label-position="right" label-width="170px"><el-form-item label="文件"><el-upload:multiple="false":on-success="onUploadSuccess":action="'http://localhost:8301/admin/vod/subject/importData'"class="upload-demo"><el-button size="small" type="primary">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳xls文件，且不超過500kb</div></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogImportVisible = false">取消</el-button></div> </el-dialog>

（3）添加導入彈出層屬性

data() {return {dialogImportVisible: false,list:[] //數據字典列表數組} },

（4）添加導入方法

importData() {this.dialogImportVisible = true }, onUploadSuccess(response, file) {this.$message.info('上傳成功')this.dialogImportVisible = falsethis.getSubList(0) },

測試一下，導入成功

后臺開發-點播管理模塊

涉及數據表

課程基本信息表course

課程描述表course_description

章節表chapter

小節和視頻表video

課程分類表subject

根據相關表生成數據

后端接口編寫

課程列表帶條件的分頁

controller代碼位置
service代碼位置

整合課程列表前端

先引入路由

這樣新的列表就出來了

創建對應的頁面

在api目錄創建course.js文件

在api目錄teacher.js文件定義接口

編寫list.vue頁面，直接CV了

課程列表接口

發布新課程

要操作兩個表

無非就是把前端傳來的CourseVo拆分成Course和CourseDescription這兩個對象，分別傳入對應的表
還是比較好做的
controller位置

service位置：

整合課程添加前端

課程列表list.vue添加方法

course.js定義接口

添加課程按鈕標簽在這里添加

點擊添加后課程具體信息列表

課程列表修改課程基本信息

一看就是個更新信息，按ID查詢回顯+update操作
按ID查詢的URL
注意，這個getById返回的是Vo，因為要帶著課程描述一起更改，所以返回的是CourseFormVo

獲取課程Form

Controller位置

ServiceImpl位置

更新課程

Controller位置

ServiceImpl位置

編輯大綱Bug

點擊修改之后編輯信息進入下一步

發出的RestFul請求的id是null，這個明顯是不對的

這里少了兩個id，一個是課程表單ID，另一個是課程的描述id

一個是課程表單ID
看看前端的方法，明顯是需要一個course的返回值的

在CourseController里的update方法
原來這里是沒有返回值的

課程描述ID

這個BUG折磨了我一晚上，淦
希望能幫到諸位小伙伴

整合修改課程基本信息前端

course.js定義方法

修改Info.vue頁面，引入樣式信息

創建Chapter-index.vue頁面
CV了樣式，就那樣了~

課程大綱列表功能

后端接口編寫

表關系

重點就放在章節和小節的接口上
看看大綱的數據JSON結構：
數組結構的JSON，明顯是返回List集合

Controller位置

業務比較復雜，在Service單獨分離出來的業務
在這個路徑下，歡迎去Gitee查看~

整合課程大綱前端

定義對應JS的API，都是CRUD的內容

畫前端的頁面，直接CV樣式了

小節視頻后端接口編寫

這個模塊都是單表的CRUD，在Controller層直接用MybatisPlus就可以實現
所以只有Controller層

整合視頻小節前端

發布課程-課程最終發布

課程最終發布接口

一共有兩個接口，一個是回顯的根據id查詢課程信息，另一個是根據ID發布課程（更新一下是否發布的字段）

根據id查詢課程信息
Controller位置：

service層

Mapper接口對應

這次是多表聯查，不用MP了，用Mybatis去編寫XML文件直接查多表

根據ID發布課程
發布課程，相當于把字段更新了
controller位置：和上面一樣，Service也一樣

小Bug

Mybatis的綁定問題
這種問題無外乎兩種

第一種：Mapper接口名稱和XML文件的id對不上，沒綁定上自然就報錯了。這個要仔細檢查
第二種：Maven沒有加載這個文件

修改POM文件（就在當前模塊下）：
在POM最末尾（也就是 </ project> 之前）

<build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins><resources><resource><directory>src/main/java</directory><includes><include>**/*.yml</include><include>**/*.properties</include><include>**/*.xml</include></includes><filtering>false</filtering></resource><resource><directory>src/main/resources</directory><includes> <include>**/*.yml</include><include>**/*.properties</include><include>**/*.xml</include></includes><filtering>false</filtering></resource></resources> </build>

修改properties文件

mybatis-plus.mapper-locations=classpath:com/atguigu/ggkt/vod/mapper/xml/*.xml

整合課程發布前端

先是引入相關JS，在API目錄下的course.js定義接口
再去復制樣式編寫Publish.vue

刪除課程

一個課程下包含多個內容

課程刪除接口

（1）編寫課程Controller

@ApiOperation(value = "刪除課程") @DeleteMapping("remove/{id}") public Result remove(@PathVariable Long id) {courseService.removeCourseById(id);return Result.ok(); }

（2）編寫課程Service

//刪除課程@Overridepublic void removeCourseById(Long id) {//根據課程id刪除小節videoService.removeVideoByCourseId(id);//根據課程id刪除章節chapterService.removeChapterByCourseId(id);//根據課程id刪除描述descriptionService.removeById(id);//根據課程id刪除課程baseMapper.deleteById(id);}

（3）編寫VideoService

@Service public class VideoServiceImpl extends ServiceImpl<VideoMapper, Video> implements VideoService {//根據課程id刪除小節@Overridepublic void removeVideoByCourseId(Long id) {QueryWrapper<Video> wrapper = new QueryWrapper<>();wrapper.eq("course_id",id);baseMapper.delete(wrapper);} }

（4）編寫ChapterService

//根據課程id刪除章節@Overridepublic void removeChapterByCourseId(Long id) {QueryWrapper<Chapter> wrapper = new QueryWrapper<>();wrapper.eq("course_id",id);baseMapper.delete(wrapper);}

整合前端

API下course.js定義接口
course -> list.vue添加方法
都是老生常談，歡迎到Gitee查看

后臺開發-點播模塊

播放統計模塊

課程統計需求

用折線圖來顯示觀看人數數據
還可以通過時間區間對數據進行約束

所以涉及的表就是video_visitor

折線圖對應的就是Echars
分析一下返回數據，一個要放x軸的日期，一個要放y軸的數量

所以，對應的就是兩個集合，來存放不同的數據
因為是K-V的形式拿到最后的數據，所以這里用Key-集合Value的形式
Controller位置：

這里放出Mapper和Service的內容

最終查出來的效果，對播放數量進行了統計

整合播放統計模塊前端

Echars肯定不用想，必用
安裝ECharts組件
ECharts是百度的一個項目，后來百度把Echart捐給apache，用于圖表展示，提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

官方網站：https://echarts.apache.org/zh/index.html

npm install --save echarts@4.1.0

編寫頁面

創建chart.vue頁面直接CV了~

整合騰訊云點播

上傳視頻
在發布課程時候，需要添加課時并且上傳課程視頻，這個時候需要使用到騰訊云點播服務進行上傳視頻管理

需求分析

云點播服務

這個功能要去騰訊云開一個點播服務的，大概幾塊錢的流量就可以了
騰訊云點播服務：https://console.cloud.tencent.com/vod/register

開通好了進來就自帶體驗流量

上傳視頻

上傳視頻可將視頻上傳到云點播的存儲中，以進行后續的處理和分發等。

單擊左側菜單欄【媒資管理 > 視頻管理】，默認展示【已上傳】標簽頁；
點擊【上傳視頻】按鈕；
單擊【選擇視頻】，選擇本地視頻文件；
單擊【開始上傳】；
頁面將自動跳轉至【正在上傳】標簽頁，本地文件所在行【狀態】欄為“上傳成功”時，單擊【已上傳】標簽頁，可見完成上傳的視頻；

到這里就上傳完畢了，單擊【管理】，可以查看視頻詳情；

前端集成播放頁面

前端集成有兩種方式，使用“超級播放器預覽”與“web播放器預覽”，或者代碼已經不更新，推薦使用前者，因此“web播放器預覽”僅做了解。

1、查看“web播放器預覽”；

說明：需要將視頻進行轉碼，才能支持超級播放器播放，轉碼為：自適應碼流

2、查看“任務流設置”

3、點擊查看詳情

當前任務流就是系統默認的“自適應碼流”任務流

4、在【音視頻管理】重新上傳視頻

5、查看詳情，下面有HTML代碼，復制粘貼到瀏覽器就可以使用

云點播服務端接口

因為是視頻點播接口，相關類需要創建Vod相關的播放接口
因為服務在騰訊云上，所以這里就不需要有Mapper相關接口了

引入點播相關POM依賴
< exclusion>是避免日志和SpringBoot的日志有沖突

<dependency><groupId>com.qcloud</groupId><artifactId>vod_api</artifactId><version>2.1.4</version><exclusions><exclusion><groupId>org.slf4j</groupId><artifactId>slf4j-log4j12</artifactId></exclusion></exclusions> </dependency>

騰訊云點播Java文檔：https://cloud.tencent.com/document/product/266/10276

后端上傳視頻

Controller位置：Service_Vod下的com.cc.service_vod.controller.VodController

ServiceImpl 這里要引入騰訊云官方的SDK

ConstantPropertiesUtil是讀取properties的工具類，通過這個工具類讀取出相關配置內容，都是靜態變量

//上傳視頻@Overridepublic String uploadVideo(InputStream inputStream, String originalFilename) {try {VodUploadClient client =new VodUploadClient(ConstantPropertiesUtil.ACCESS_KEY_ID,ConstantPropertiesUtil.ACCESS_KEY_SECRET);VodUploadRequest request = new VodUploadRequest();//視頻本地地址request.setMediaFilePath("D:\\測試視頻.mp4");//指定任務流，就是之前你上傳時設置的那個request.setProcedure("任務流");//調用上傳方法，傳入接入點地域及上傳請求。VodUploadResponse response = client.upload("對應的AP節點", request);//返回文件id保存到業務表，用于控制視頻播放String fileId = response.getFileId();System.out.println("Upload FileId = {}"+response.getFileId());return fileId;} catch (Exception e) {System.out.println(e.toString());}return null;}

后端刪除視頻

Controller和上面一樣，重點Service不太一樣
還是騰訊云SDK的內容可在線生成相關刪除代碼：
地址：https://console.cloud.tencent.com/api/explorer?Product=vod&Version=2018-07-17&Action=DescribeMediaInfos&SignVersion=

生成出來的Service代碼

//刪除視頻@Overridepublic void removeVideo(String videoSourceId) {try{// 實例化一個認證對象，入參需要傳入騰訊云賬戶secretId，secretKey,此處還需注意密鑰對的保密Credential cred = new Credential(ConstantPropertiesUtil.ACCESS_KEY_ID, ConstantPropertiesUtil.ACCESS_KEY_SECRET);// 實例化要請求產品的client對象,clientProfile是可選的VodClient client = new VodClient(cred, "");// 實例化一個請求對象,每個接口都會對應一個request對象DeleteMediaRequest req = new DeleteMediaRequest();//設置刪除視頻IDreq.setFileId(videoSourceId);// 返回的resp是一個DeleteMediaResponse的實例，與請求對象對應DeleteMediaResponse resp = client.DeleteMedia(req);// 輸出json格式的字符串回包System.out.println(DeleteMediaResponse.toJsonString(resp));} catch (TencentCloudSDKException e) {System.out.println(e.toString());}}

點播服務整合前端

定義vod.js

CV頁面樣式修改Video -> Form.vue頁面

騰訊云上傳視頻其他方式

之前的缺點

上傳代碼的部分有Bug，上傳路徑寫固化了，而且沒有官方解決辦法

所以這里有了新的辦法就是下面的客戶端上傳視頻
更改是服務端Server上傳

客戶端上傳視頻

https://cloud.tencent.com/document/product/266/9219

操作步驟一（申請上傳簽名）
找到Java簽名示例

復制一下，編寫簽名工具類
Signature類 在Util包下

在編寫Controller來獲取生成的簽名，還是在那個包的Controller

整合客戶端前端頁面

因為上傳也是一個頁面嘛，所以也要對應的有頁面進行處理
復制粘貼騰訊云給的示例代碼

https://tencentyun.github.io/vod-js-sdk-v6/

請單擊此處查看 script 方式引入的 Demo，請單擊此處查看 Demo 源碼。
創建之后把 Demo 源碼CV進去

在頁面上右鍵，跑起來，就可以對客戶端上傳進行測試

完善刪除視頻功能

將課程中對應的視頻全部刪除
VideoController 刪除小節時帶著這個小節下的視頻全刪掉

@ApiOperation(value = "刪除") @DeleteMapping("remove/{id}") public Result remove(@PathVariable Long id) {videoService.removeVideoById(id);return Result.ok(); }

提前注入，一會要調用服務刪視頻

一共兩個接口，一個是根據課程id刪除小節，另一個是根據小節id刪除小節刪除視頻

從這里開始就算是硅谷課堂的上半部分了，因為開始了分布式的內容
硅谷課堂中間部分筆記
具體鏈接可以看看博客主頁~

總結

以上是生活随笔為你收集整理的硅谷课堂笔记（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：网易云linux版本下载
下一篇：微信小程序（看文档写实例七）微信小程序课

编程问答

硅谷课堂笔记（上）

文章目錄

概述

功能架構圖

技術架構圖

MybatisPlus復習

后臺開發

搭建工程

數據庫設計

數據庫設計規則

搭建工程

實體類子模塊model

服務子模塊service

總結

引入Swagger

遇到的坑

后臺開發-講師管理接口

概述

基礎代碼自動生成

配置文件和啟動類

小改造

測試

引入統一返回結果

引入全局異常處理

示例

自定義異常處理

引入全局異常

測試

教師接口

邏輯刪除教師

分頁條件查詢講師

分頁查詢Bug

添加教師

修改教師

批量刪除講師

前臺開發

騰訊云存儲相關內容

快速起步

開通“對象存儲COS”服務

創建存儲桶以及測試

創建API秘鑰

騰訊云存儲后端接口開發

基礎環境

上傳接口編寫

前端上傳頭像

后臺開發-課程分類管理接口

需求分析

1、課程分類管理模塊需求

2、課程分類數據庫設計

3、功能實現-課程分類列表

后端開發

課程分類前端頁面

EasyExcel

概述

EasyExcel特點

讀寫操作

EasyExcel寫操作

EasyExcel讀操作

功能實現-課程分類導入導出

實體類創建

導出接口編寫

整合導出前端

導入接口編寫

整合導入前端

后臺開發-點播管理模塊

涉及數據表

根據相關表生成數據

后端接口編寫

課程列表帶條件的分頁

整合課程列表前端

課程列表接口

整合課程添加前端

課程列表修改課程基本信息

獲取課程Form

更新課程

編輯大綱Bug

整合修改課程基本信息前端

課程大綱列表功能

后端接口編寫

1、課程分類管理模塊需求

2、課程分類數據庫設計

3、功能實現-課程分類列表