java实操项目：悦读FM总结
悅讀FM——項(xiàng)目總結(jié)
- 一、小前言
- 二、立項(xiàng)——項(xiàng)目背景
- 三、 項(xiàng)目的邊界——可行性評估
- 四、 音頻管理功能預(yù)研
- 1 .瀏覽器中錄制和播放音頻
- 2.服務(wù)器接受音頻
- 1.Ajax介紹
- 2.同源策略
- 五、 數(shù)據(jù)建模——建庫建表
- 1.建庫建表
- 2.注意事項(xiàng)
- 1.auto_increment是什么
- 2.主鍵約束和唯一性約束
- 3.為什么要在音頻再加一個(gè)uuid
- 4.Mysql中bolb類型數(shù)據(jù)
- 六、 正式開發(fā)——后端接口實(shí)現(xiàn)
- 1.準(zhǔn)備階段
- 2.功能實(shí)現(xiàn)
- 1.用戶管理
- 2.首頁
- 3.書籍管理
- 4.章節(jié)管理
- 5.音頻管理
- 七、總結(jié)和后續(xù)展望
- 八、開源代碼
一、小前言
悅讀FM這個(gè)項(xiàng)目最主要的目的還是練習(xí)自己的技術(shù)，因?yàn)橥蝗豢吹搅藙e人的畢業(yè)論文是一個(gè)本地播放音頻的題目，于是想了想，似乎在數(shù)據(jù)庫存儲(chǔ)音頻視頻這類東西時(shí)，自己沒有關(guān)注過。同時(shí)也為了彌補(bǔ)在上個(gè)易班項(xiàng)目中沒有練習(xí)過前端代碼，于是自己動(dòng)手也寫了寫網(wǎng)頁，和易班項(xiàng)目不同的時(shí)這個(gè)總結(jié)時(shí)按照項(xiàng)目產(chǎn)生到完成的順序來寫，至于原因，還是那句話一切按照實(shí)際開發(fā)來。
二、立項(xiàng)——項(xiàng)目背景
不論那個(gè)項(xiàng)目從設(shè)計(jì)到落地肯定有一定的現(xiàn)實(shí)意義，而悅讀FM的主要功能就是為用戶提供可以聽的圖書資源，通過作者上傳書籍，設(shè)置書籍章節(jié)再通過網(wǎng)頁錄制和章節(jié)綁定的聲音。服務(wù)器對這些數(shù)據(jù)進(jìn)行儲(chǔ)存，所有用戶都能通過網(wǎng)頁來聽書。次要功能就是登錄，注冊。對于沒有注冊的賬號密碼跳轉(zhuǎn)到注冊頁面，對于已經(jīng)登錄的非作者用戶只展示書籍章節(jié)音頻列表，對已登錄的作者用戶展示，上傳書籍，章節(jié)，音頻功能。一個(gè)項(xiàng)目的出發(fā)點(diǎn)對于一個(gè)企業(yè)來說大多數(shù)考慮的是市場需求，對我來說更多的還是學(xué)習(xí)和練習(xí)。(其實(shí)也有現(xiàn)實(shí)意義，因?yàn)橛腥酥笇?dǎo)哈哈)悅讀FM和易班對比來說，其實(shí)二者并沒有很多差別，唯一在于易班可能是在已經(jīng)搭建好的前后端框架下去實(shí)現(xiàn)后端的具體代碼，而悅讀FM項(xiàng)目中的音頻采集和前端js的開發(fā)需要從頭學(xué)起。
三、 項(xiàng)目的邊界——可行性評估
所謂 項(xiàng)目的邊界就是我要做什么？什么是核心功能，什么是輔助功能？
對于悅讀FM這個(gè)項(xiàng)目來說本項(xiàng)目的核心是：書/章節(jié)的管理和對應(yīng)章節(jié)音頻數(shù)據(jù)的管理，登錄功能也是要實(shí)現(xiàn)的一個(gè)功能但是不算是核心功能。
于是怎么確定項(xiàng)目邊界呢？通常是我們站在用戶的視角去思考用戶的需求，根據(jù)這些需求去啟發(fā)我們?nèi)绾卧O(shè)計(jì)業(yè)務(wù)。
比如說：
1.匿名用戶，可以查看所有的書的列表，為了選擇出想聽的書
2.作為已登陸的用戶，可以上傳一本書，為了讓書被其他用戶看到
3.作為一本書的上傳者，可以錄入新的章節(jié)，為了讓被其他用戶看到
4.作為一本書的上傳者，可以為某個(gè)章節(jié)錄入音頻，為了讓書背其他用戶者
5.作為匿名用戶，可以選擇一本想聽書，為了看到該書下有哪些章節(jié)
6.作為匿名用戶，可以選擇某個(gè)章節(jié)點(diǎn)擊，聽書
7.用戶管理
這些實(shí)際應(yīng)用到的場景都是可能會(huì)發(fā)生的，于是乎我們程序猿和產(chǎn)品經(jīng)理就協(xié)商，那些功能可以實(shí)現(xiàn)？那些需要一些特定技術(shù)才能實(shí)現(xiàn)？那些功能可能目前實(shí)現(xiàn)不了等等？在悅讀FM這個(gè)項(xiàng)目中除了書籍管理、章節(jié)管理、用戶管理還有就是音頻管理。前四個(gè)可能都很熟悉，但是音頻管理是我需要預(yù)研的部分。
四、 音頻管理功能預(yù)研
音頻管理功能的核心就是：
怎么樣在瀏覽器中錄制和播放音頻？
html5標(biāo)準(zhǔn)中支持 audio 標(biāo)簽，提供音頻的URL鏈接即可
如何在瀏覽器進(jìn)行音頻的存儲(chǔ)？
JavaScript中的mediarecorder進(jìn)行聲音的錄制+保存（ES6）
1 .瀏覽器中錄制和播放音頻
到這就轉(zhuǎn)頭學(xué)學(xué)js：（也是用到學(xué)多少，所以我就直接在瀏覽器的開發(fā)者工具上搞了）JavaScript（簡稱“JS”） 是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時(shí)編譯型的高級編程語言，多用于web網(wǎng)頁開發(fā)。
1.變量的定義：js 沒有變量類型，let 關(guān)鍵字可以指向任何類型的引用類型。
舉例：2.方法的定義：關(guān)鍵字 function
舉例：
3.js執(zhí)行特點(diǎn)——事件驅(qū)動(dòng)邏輯
簡單來說所謂的事件驅(qū)動(dòng)邏輯是把一件事件分成若干個(gè)小事件，通過執(zhí)行這些小事件來完成。這些小事件有有序的。如果一個(gè)事件開始執(zhí)行那么一定是執(zhí)行完該事件再去執(zhí)行別的事件。
但是js不是三言兩語能介紹清楚的，在這過程中我也主要看了看官網(wǎng)上的教程，而且用的都是比較基本。（😓）
附上教程鏈接：https://www.runoob.com/js/js-tutorial.html.
前端網(wǎng)頁設(shè)計(jì)部分：
HTML代碼：
css代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>音頻錄制并上傳</title><link rel="stylesheet" href="test.css"></head><body><div><div id="startButton" class="button">開始采集</div><div id="recordButton" class="button">開始錄制</div><div id="stopButton" class="button">停止錄制</div><div id="submitButton" class="button">上傳</div><h2>試聽</h2><audio id="preview" controls></audio></div><div><pre id="log"></pre></div><script charset="utf-8" src="test.js"></script></body> </html>js代碼：
// 日志顯示功能 let logElement = document.getElementById("log"); function log(message) {logElement.innerHTML += (message + "\n"); }// 定義全局變量（java 中就沒有全局變量，js 中有全局變量），功能類似于 java 中的靜態(tài)變量、屬性 let captureStream; // 用來 保存采集的 stream let mediaRecorder; // 用來 保存錄制器 let data = []; // 用來 保存錄好的數(shù)據(jù) let audioBlob; // 用來 保存轉(zhuǎn)成 Blob 類型的錄好的數(shù)據(jù)// 從 html 中獲取標(biāo)簽 let startButton = document.getElementById("startButton"); let recordButton = document.getElementById("recordButton"); let stopButton = document.getElementById("stopButton"); let submitButton = document.getElementById("submitButton"); let preview = document.getElementById("preview");// 為開始采集按鈕綁定 點(diǎn)擊（click）事件的動(dòng)作 startButton.addEventListener("click", function () {log("點(diǎn)擊了開始采集按鈕 -> 會(huì)彈出授權(quán)請求");let promise = navigator.mediaDevices.getUserMedia({audio: true // 只有 audio，沒有 video});promise.then(function (stream) {log("用戶同意了授權(quán) -> 記錄了采集數(shù)據(jù)");captureStream = stream; // 保存 stream 到全局變量 captureStream 中}); });// 為開始錄制按鈕綁定 點(diǎn)擊（click）事件的動(dòng)作 recordButton.addEventListener("click", function () {log("點(diǎn)擊了開始錄制按鈕 -> 開始錄制，每 3 秒收集一次數(shù)據(jù)");if (!captureStream) {log("錯(cuò)誤：必須先點(diǎn)擊開始采集按鈕");return;} // mediaRecorder 也是全局變量mediaRecorder = new MediaRecorder(captureStream);mediaRecorder.ondataavailable = function (event) {log("錄制數(shù)據(jù)可用事件 -> 保存數(shù)據(jù)");data.push(event.data);};mediaRecorder.start(3000); });// 為停止錄制按鈕綁定 點(diǎn)擊（click）事件的動(dòng)作 stopButton.addEventListener("click", function () {log("點(diǎn)擊了停止錄制按鈕 -> 停止錄制");if (!mediaRecorder) {log("錯(cuò)誤：必須先點(diǎn)擊開始錄制按鈕");return;}mediaRecorder.onstop = function () {log("錄制停止事件 -> 準(zhǔn)備預(yù)覽功能的數(shù)據(jù)流");audioBlob = new Blob(data, {type: "audio/webm" // 類型是 audio/webm});preview.src = URL.createObjectURL(audioBlob);};mediaRecorder.stop(); });// 為上傳按鈕綁定 點(diǎn)擊（click）事件的動(dòng)作 submitButton.addEventListener("click", function () {log("點(diǎn)擊了上傳按鈕 -> 通過 form 表單，向服務(wù)器提交錄制下來的數(shù)據(jù)");if (!audioBlob) {log("錯(cuò)誤：必須先點(diǎn)擊停止錄制按鈕");return;}let formData = new FormData();formData.set("audio", audioBlob);let xhr = new XMLHttpRequest();xhr.open("post", "/upload/audio");xhr.onload = function () {log("服務(wù)器應(yīng)答事件 -> 打印應(yīng)答信息");log(xhr.status);log(xhr.responseText);};xhr.send(formData); });實(shí)際效果：
1.整體網(wǎng)頁
2.授權(quán)允許：
3.錄制
錄制部分如果沒有按照順序點(diǎn)擊按鈕，會(huì)報(bào)錯(cuò)。需要注意的是上傳時(shí)報(bào)錯(cuò)時(shí)因?yàn)闀r(shí)本地打開的html文件并不算是http請求。所以會(huì)報(bào)錯(cuò)，也就是上傳功能還沒有真正使用到。
2.服務(wù)器接受音頻
實(shí)際上悅讀FM項(xiàng)目需要具備的是：1.在網(wǎng)頁上錄制音頻2.錄制的音頻上傳到服務(wù)器。第一個(gè)問題通過研究教程已經(jīng)解決了，現(xiàn)在關(guān)心的就是如何把錄制的音頻上傳到服務(wù)器。我是通過java中自帶原生類的ajax請求完成的，實(shí)際上大部分時(shí)候都采用jQuery實(shí)現(xiàn)ajax。第一因?yàn)閖Query是第三方庫，第二其實(shí)用到也不復(fù)雜所以原生類方便。
1.Ajax介紹
Ajax的全稱是AsynchronousJavascript+XML。Ajax是多種技術(shù)的組合，包括我們的JavaScript 異步數(shù)據(jù)獲取技術(shù)，就是XMLHttpRequest以及xml以及Dom還有表現(xiàn)技術(shù)XHTML 和CSS，Ajax的核心是XMLHttpRequest 是支持異步請求的技術(shù)，可以發(fā)送請求給服務(wù)器，并且不阻塞用戶在瀏覽器中首次引用，使我們的網(wǎng)絡(luò)應(yīng)用更加強(qiáng)大。其實(shí)XMLHttpRequest是JavaScript的一種語法子集，是它的一套API，支持發(fā)送GET和POST請求直白說沒有ajax之前，瀏覽器發(fā)送http請求需要整頁請求，但是有了ajax之后可以進(jìn)行局部的請求，其實(shí)也可以認(rèn)為是動(dòng)態(tài)的、隨時(shí)的進(jìn)行各種http請求。
翻譯翻譯就是：異步+js+xml（一種數(shù)據(jù)格式）
1.為什么是異步？
異步就是請求和結(jié)果分開，我們在請求的時(shí)候不必等待結(jié)果。可以去做別的事情，等結(jié)果出來再去看。
2.什么是js？
JavaScript 是 Web 的編程語言。基本上所有現(xiàn)代的 HTML 頁面都使用 JavaScript。（有個(gè)一個(gè)老生常談的問題js和java有什么關(guān)系？答：一個(gè)是甲魚一個(gè)是烏龜，長的像然而并沒有半毛錢關(guān)系）
3.什么是xml?
xml只是一種數(shù)據(jù)格式，在這件事里并不重要，我們在更新一行字的時(shí)候理論上說不需要這個(gè)格式，但如果我們更新很多內(nèi)容，那么格式化的數(shù)據(jù)可以使我們有條理地去實(shí)現(xiàn)更新。不過現(xiàn)在更多的人選擇json格式，因?yàn)閖son目前解析更快而且更加簡潔明了。
2.同源策略
為什么不允許訪問？那么就提到了一個(gè)同源策略。ajax默認(rèn)是不能訪問不同域名的，也就是說baidu.com不能發(fā)起tengxun.com的ajax請求，因?yàn)樵赼jax看來他們是不同公司的網(wǎng)站，涉及安全問題，保證了不同域名的數(shù)據(jù)不能夠相互抓取。而file://就是本地訪問專用協(xié)議，不是http協(xié)議，也沒有域，所以無法跨域。解決辦法是讓瀏覽器通過http協(xié)議訪問網(wǎng)頁即可，對我們來說就是放在tomcat上。
通過tomcat訪問：
對應(yīng)的代碼說明：
到這基本上所有前端的工作都已經(jīng)完成了。除了服務(wù)器如何保存上傳后的音頻，這都是我們后端要做的事情。
五、 數(shù)據(jù)建模——建庫建表
1.建庫建表
確定了這些后就開始尋找數(shù)據(jù)之間的關(guān)系（er圖）和建庫建表。
悅讀FM數(shù)據(jù)對應(yīng)關(guān)系
建庫建表：
2.注意事項(xiàng)
1.auto_increment是什么
auto_increment是用于主鍵自動(dòng)增長的，從1開始增長，當(dāng)你把第一條記錄刪除時(shí)，再插入第二跳數(shù)據(jù)時(shí)，主鍵值是2，不是1。
在使用AUTO_INCREMENT時(shí)，應(yīng)注意以下幾點(diǎn)：
1、AUTO_INCREMENT是數(shù)據(jù)列的一種屬性，只適用于整數(shù)類型數(shù)據(jù)列。
2、設(shè)置AUTO_INCREMENT屬性的數(shù)據(jù)列應(yīng)該是一個(gè)正數(shù)序列，所以應(yīng)該把該數(shù)據(jù)列聲明為UNSIGNED，這樣序列的編號個(gè)可增加一倍。
3、AUTO_INCREMENT數(shù)據(jù)列必須有唯一索引，以避免序號重復(fù)(即是主鍵或者主鍵的一部分)。AUTO_INCREMENT數(shù)據(jù)列必須具備NOT NULL屬性。
4、AUTO_INCREMENT數(shù)據(jù)列序號的最大值受該列的數(shù)據(jù)類型約束，如TINYINT數(shù)據(jù)列的最大編號是127,如加上UNSIGNED，則最大為255。一旦達(dá)到上限，AUTO_INCREMENT就會(huì)失效。
5、當(dāng)進(jìn)行全表刪除時(shí)，MySQL AUTO_INCREMENT會(huì)從1重新開始編號。
這是因?yàn)檫M(jìn)行全表操作時(shí)，MySQL(和PHP搭配之最佳組合)實(shí)際是做了這樣的優(yōu)化操作：先把數(shù)據(jù)表里的所有數(shù)據(jù)和索引刪除，然后重建數(shù)據(jù)表。
如果想刪除所有的數(shù)據(jù)行又想保留序列編號信息，可這樣用一個(gè)帶where的delete命令以抑制MySQL(和PHP搭配之最佳組合)的優(yōu)化：delete from table_name where 1;
ps：可用last_insert_id（）獲取剛剛自增過的值。
2.主鍵約束和唯一性約束
1.主鍵約束（PRIMARY KEY）
2.唯一性約束（UNIQUE）
3.為什么要在音頻再加一個(gè)uuid
使用aid雖然存儲(chǔ)數(shù)據(jù)的量上來說會(huì)比少但是會(huì)造成《二戰(zhàn)德國坦克的故事》（感興趣可以了解哈 挺有意思的），所以使用uuid這種機(jī)制雖然不適合存儲(chǔ)，但是基本上大多數(shù)語言都支持。
36可以說是進(jìn)制，常用的有10（0-9），36（0-9+a-z），62（0-9+a-z+A-Z）
4.Mysql中bolb類型數(shù)據(jù)
Mysql中bolb是一個(gè)二進(jìn)制對象，可以儲(chǔ)存大量數(shù)據(jù)的容器，例如：圖片，音樂等等，并且根據(jù)類型的不同可以存儲(chǔ)數(shù)據(jù)容量也不同。
①TinyBlob類型 最大能容納255B的數(shù)據(jù)
②Blob類型 最大能容納65KB的
③MediumBlob類型 最大能容納16MB的數(shù)據(jù)
④LongBlob類型 最大能容納4GB的數(shù)據(jù)
讀取和插入：
1、插入Blob類型的數(shù)據(jù)
插入Blob類型的數(shù)據(jù)時(shí)，需要注意必須要用PreparedStatement，因?yàn)锽lob類型的數(shù)據(jù)是不能夠用字符串來拼的，在傳入了SQL語句后，就需要去調(diào)用PreparedStatement對象中的setBlob(int index , InputStream in)方法來設(shè)置傳入的的參數(shù)，其中index表示Blob類型的數(shù)據(jù)所對應(yīng)的占位符(?)的位置，而InputStream類型的in表示被插入文件的節(jié)點(diǎn)流。
2、讀取Blob類型的數(shù)據(jù)
讀取Blob類型相對來說比較容易，當(dāng)獲取了查詢的結(jié)果集之后，使用getBlob()方法讀取到Blob對象，然后調(diào)用Blob的getBinaryStream()方法得到輸入流，再使用IO操作進(jìn)行文件的寫入操作即可。
六、 正式開發(fā)——后端接口實(shí)現(xiàn)
1.準(zhǔn)備階段
因?yàn)楸卷?xiàng)目核心來說還是數(shù)據(jù)庫的增刪查改。所以sql語句是非常非常非常重要的。最核心的我們應(yīng)該設(shè)想用戶有什么需求？把對應(yīng)的需求轉(zhuǎn)化成sql語句。這就是講用戶故事就是開發(fā)者站在用戶的角度上去思考問題。先想好可能有那些需求，找到對應(yīng)的sql，自然而然的就可以接著進(jìn)行后端資源接口的設(shè)計(jì)。
場景：
想到了一些場景之后，把這些場景進(jìn)行分類，羅列出需求，根據(jù)這些需求就可以大概想到需要設(shè)計(jì)那些資源接口。悅讀FM項(xiàng)目的資源接口都是最基礎(chǔ)的。我沒有加太多高端的東西，旨在掌握，求精不求多。
資源接口：
有了上述這些東西后，還應(yīng)該考慮的一個(gè)就是頁面之間的跳轉(zhuǎn)，比如說如果用戶不存在則跳轉(zhuǎn)到注冊頁面，如果用戶存在跳轉(zhuǎn)到首頁…這些實(shí)際上可能不是我們程序員考慮的事情，既然是自己寫項(xiàng)目肯定是開發(fā)是自己，產(chǎn)品經(jīng)理也是自己。哈哈，所以這個(gè)也是我們要考慮的事情。
頁面跳轉(zhuǎn)示意：
實(shí)際開發(fā)中我們不把所有的類文件都放在一個(gè)包下，那樣太傻了，根據(jù)代碼完成的功能不同對class文件進(jìn)行分類，這個(gè)思想不僅僅用在易班項(xiàng)目中，實(shí)際上不管開發(fā)什么項(xiàng)目，這種分門別類的思想一定要掌握。
分層邏輯：
本來流程應(yīng)該是tomcat把請求轉(zhuǎn)給servlet然后再進(jìn)行sql的查詢等等。添加的DAO層其實(shí)是專門處理數(shù)據(jù)庫查詢的一些邏輯，servlet處理的是接入邏輯。service層的功能是數(shù)據(jù)加工。model層就是在這個(gè)傳輸過程中的一些數(shù)據(jù)有時(shí)候也叫object層。還有一個(gè)就是util層，就是工具箱因?yàn)閿?shù)據(jù)庫連接常用所以把它封裝成一個(gè)類。
實(shí)際分層：
2.功能實(shí)現(xiàn)
1.用戶管理
實(shí)現(xiàn)用戶管理實(shí)際上只需要完成這四個(gè)接口
1.準(zhǔn)備model
因?yàn)槲覀兒罄m(xù)需要判斷用戶不能重復(fù)和存在性判斷所以覆寫了equals方法hashcode方法，實(shí)際上只要是model類基本上所有的常見方法都要覆寫，Tostring，構(gòu)造方法，get，set看情況，equals方法等。也可以用Lombok中的快捷方法，因?yàn)槎急容^簡單所以直接手打了。
2.準(zhǔn)備util層
實(shí)際上本應(yīng)該是準(zhǔn)備dao層，但是在這之前需要連接數(shù)據(jù)庫，這個(gè)只需要寫一次后邊直接調(diào)用即可。單例的數(shù)據(jù)庫連接。
3.dao層（執(zhí)行sql語句）
public class UserDao {public User insert(String username, String plainPassword) throws SQLException {String password = encrypt(plainPassword);String sql = "insert into users (username, password) values (?, ?)";try (Connection c = DB.getConnection()) {try (PreparedStatement s = c.prepareStatement(sql, Statement.RETURN_GENERATED_KEYS)) {//可以獲取到插入的ids.setString(1, username);s.setString(2, password);s.executeUpdate();try (ResultSet r = s.getGeneratedKeys()) {if (!r.next()) {return null;}return new User(r.getInt(1), username);}}}}public User select(String username, String plainPassword) throws SQLException {String password = encrypt(plainPassword);String sql = "select uid from users where username = ? and password = ?";try (Connection c = DB.getConnection()) {try (PreparedStatement s = c.prepareStatement(sql)) {s.setString(1, username);s.setString(2, password);try (ResultSet r = s.executeQuery()) {if (!r.next()) {return null;}return new User(r.getInt(1), username);}}}}// 這個(gè)做法實(shí)際上也不適合生產(chǎn)環(huán)境真正使用// 但至少比明文的情況要安全一點(diǎn)private String encrypt(String plain) {try {MessageDigest messageDigest = MessageDigest.getInstance("SHA-256");byte[] bytes = plain.getBytes();byte[] digest = messageDigest.digest(bytes);StringBuilder sb = new StringBuilder();for (byte b : digest) {sb.append(String.format("%02x", b));}return sb.toString();} catch (NoSuchAlgorithmException e) {throw new RuntimeException(e);}}}dao層實(shí)際上就是專門處理sql語句，而且可以看到dao層只是執(zhí)行了查詢就完成了它的工作，并沒有對結(jié)果集進(jìn)行處理，而是返回一個(gè)對象，交給下一步去處理。
dao層中userDao有一個(gè)特殊的方法，encrypt方法。（加密方法）一般來說都是采用hash，這里采用的是SHA256的加密算法。這比直接保存明文密碼安全的多，但是正如注釋所說的實(shí)際開發(fā)也不采用這種方式，雖然這種方式是單向加密，不能根據(jù)加密后的解密。而且這也是數(shù)據(jù)庫密碼設(shè)置64位長度的原因，因?yàn)榧用芎蟮臄?shù)據(jù)長度固定是64位。hash是不能逆向解密的。
4.service層：
service層在悅讀FM項(xiàng)目中可能有點(diǎn)浪費(fèi)可以看到其實(shí)沒有什么作用，但是如果在大型系統(tǒng)中service層的必不可少。主要用來做一些偏向業(yè)務(wù)的方法。比如說 登錄業(yè)務(wù)和注冊業(yè)務(wù)。
5.servlet層
servlet層的主要作用就是對結(jié)果集進(jìn)行處理，由于我們進(jìn)行了代碼分層，分離了執(zhí)行sql和結(jié)果處理這兩者的關(guān)系。所以代碼很簡便，servlet在實(shí)現(xiàn)的時(shí)候很重要的一點(diǎn)就是前后端接口的一致。必須遵頊我們剛才的接口約定。
登錄的servlet：
@WebServlet("/login") public class UserLoginServlet extends HttpServlet {private UserService userService;@Overridepublic void init() throws ServletException {userService = new UserService();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");String username = req.getParameter("username");String password = req.getParameter("password");// 沒有做參數(shù)正確性檢查try {User user = userService.login(username, password);if (user == null) {// 沒有注冊成功// 沒有做太多易用性考慮：沒有告訴用戶錯(cuò)誤原因resp.sendRedirect("/login.html");return;}// 把當(dāng)前用戶種入 session 中，下次資源訪問時(shí)攜帶的登陸用戶信息HttpSession session = req.getSession();session.setAttribute("user", user);// 跳轉(zhuǎn)回首頁resp.sendRedirect("/");} catch (SQLException e) {throw new ServletException(e);}} }注冊的servlet：
@WebServlet("/register") public class UserRegisterServlet extends HttpServlet {private UserService userService;@Overridepublic void init() throws ServletException {// Servlet 生命周期的內(nèi)容userService = new UserService();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 每次都帶上 utf-8 的設(shè)置，字符集不會(huì)出問題req.setCharacterEncoding("utf-8");String username = req.getParameter("username");String password = req.getParameter("password");// 沒有做參數(shù)正確性檢查try {User user = userService.register(username, password);if (user == null) {// 沒有注冊成功// 沒有做太多易用性考慮：沒有告訴用戶錯(cuò)誤原因resp.sendRedirect("/register.html");return;}// 把當(dāng)前用戶種入 session 中，下次資源訪問時(shí)攜帶的登陸用戶信息HttpSession session = req.getSession();session.setAttribute("user", user);// 跳轉(zhuǎn)回首頁resp.sendRedirect("/");} catch (SQLException e) {throw new ServletException(e);}} }6.對應(yīng)的前端頁面設(shè)計(jì)：
前端頁面在設(shè)計(jì)的時(shí)候，處理必要的功能設(shè)計(jì)外，名字一定要對應(yīng)后端的接口。
后端接口：
前端的頁面：
注冊表單設(shè)計(jì)：
<!DOCTYPE html> <html lang="zh-hans"> <head><meta charset="UTF-8"><title>聽書FM | 用戶注冊</title> </head> <body><form method="post" action="register"><div><label for="username">用戶名:<input type="text" id="username" name="username" /></label></div><div><label for="password">密碼:<input type="password" id="password" name="password" /></label></div><div><button type="submit">注冊</button></div></form> </body> </html>登錄表單設(shè)計(jì)：
<!DOCTYPE html> <html lang="zh-hans"> <head><meta charset="UTF-8"><title>聽書FM | 用戶登陸</title> </head> <body><form method="post" action="login"><div><label for="username">用戶名:<input type="text" id="username" name="username" /></label></div><div><label for="password">密碼:<input type="password" id="password" name="password" /></label></div><div><button type="submit">登陸</button></div></form> </body> </html>前端頁面我沒有實(shí)現(xiàn)的很復(fù)雜，只是具備了必要的功能，沒有圖片啊樣式啊等等。還是弱雞，自己這方面不擅長。
7.實(shí)際效果
登錄界面：
整個(gè)順序?qū)嶋H就是：
實(shí)際上就是職責(zé)分工，每層干每層的事情，傳遞的始終都是user這個(gè)對象。經(jīng)過這幾個(gè)過程，就基本實(shí)現(xiàn)了用戶管理功能，其他功能的實(shí)現(xiàn)過程都相同。
2.首頁
首頁要展示的是書籍和章節(jié)，所以傳遞的對象是章節(jié)和書籍。
1.model層
章節(jié)model：
public class Section {public int sid;public String name;// 如果關(guān)聯(lián)聲音，uuid 就是保存聲音的 uuid// 否則，uuid == nullpublic String uuid;public Section() {}public Section(int sid, String uuid, String name) {this.sid = sid;this.uuid = uuid;this.name = name;}@Overridepublic String toString() {return "Section{" +"uuid='" + uuid + '\'' +"name='" + name + '\'' +'}';} }書籍model：
public class Book {public int bid;public User user;public String title;public List<Section> sections;public Book() {this.sections = new ArrayList<>();}public Book(int bid, User user, String title) {this.bid = bid;this.user = user;this.title = title;this.sections = new ArrayList<>();}@Overridepublic String toString() {return "Book{" +"bid=" + bid +", user=" + user +", title='" + title + '\'' +", sections=" + sections +'}';}@Overridepublic boolean equals(Object o) {if (this == o) return true;if (!(o instanceof Book)) return false;Book book = (Book) o;return bid == book.bid &&Objects.equals(user, book.user) &&Objects.equals(title, book.title) &&Objects.equals(sections, book.sections);}@Overridepublic int hashCode() {return Objects.hash(bid, user, title, sections);} }章節(jié)類不需要比較只要構(gòu)造方法即可，但是書籍還是要比較的所以需要覆寫。
2.dao層
書籍dao層：
章節(jié)dao層：
public class SectionDao {public void insert(int bid, String name) throws SQLException {String sql = "insert into sections (bid, name) values (?, ?)";try (Connection c = DB.getConnection()) {try (PreparedStatement s = c.prepareStatement(sql)) {s.setInt(1, bid);s.setString(2, name);s.executeUpdate();}}}public List<Section> selectByBid(int bid) throws SQLException {String sql = "select sections.sid, uuid, name " +"from sections left join audios on sections.sid = audios.sid " +"where bid = ? order by sections.sid";List<Section> sections = new ArrayList<>();try (Connection c = DB.getConnection()) {try (PreparedStatement s = c.prepareStatement(sql)) {s.setInt(1, bid);try (ResultSet r = s.executeQuery()) {while (r.next()) {Section section = new Section(r.getInt("sid"),r.getString("uuid"),r.getString("name"));sections.add(section);}}}}return sections;} }3.service層
service層主要就是針對業(yè)務(wù)，主要是展示全部書籍和對應(yīng)的章節(jié)。需要一個(gè)list，list包含的是book類型的對象。
4.首頁jsp
如果直接寫servlet去請求對應(yīng)的html太過于麻煩，所以使用了jsp，jsp本質(zhì)上還是一個(gè)servlet，tomcat會(huì)幫我們把jsp翻譯成servlet。
代碼對應(yīng)實(shí)際結(jié)果圖解：
ps：jsp基本語法：
<%!
%>定義基本屬性和方法
<%
%> 執(zhí)行java代碼
<%=
%>獲取某個(gè)變量的值
轉(zhuǎn)化后的.java文件：
通過jsp轉(zhuǎn)化的java代碼其實(shí)很明白，jsp只是把我們的工作減輕了相當(dāng)于已經(jīng)寫好了模板我們只需要在對應(yīng)的空去填就行了。
3.書籍管理
書籍管理也需要使用jsp技術(shù)，因?yàn)樾枰獎(jiǎng)討B(tài)的判斷用戶是否登錄，沒有登錄則需要跳轉(zhuǎn)到登錄頁面。
1.添加書籍servlet：
這實(shí)際上是要跳轉(zhuǎn)到bid對應(yīng)的章節(jié)目錄。
2.添加書籍jsp：
<%@ page import="com.yaoxinyuan.model.User" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%User user = (User) session.getAttribute("user");if (user == null) {response.sendRedirect("/login.html");return;} %> <html> <head><title>悅讀FM | 上傳書籍</title> </head> <body><form method="post" action="/post-book"><div><label for="title">書籍標(biāo)題：<input type="text" id="title" name="title"></label></div><div><button type="submit">上傳</button></div></form> </body> </html>動(dòng)態(tài)判斷邏輯：
3.書籍jsp
這部分重點(diǎn)邏輯在于如果是普通用戶則展示章節(jié)和對應(yīng)音頻，但是如果用戶是作者，那么還有添加章節(jié)和添加音頻功能。
4.章節(jié)管理
1.上傳章節(jié)servlet
@WebServlet("/post-section") public class SectionPostServlet extends HttpServlet {private BookService bookService;@Overridepublic void init() throws ServletException {bookService = new BookService();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");int bid = Integer.parseInt(req.getParameter("bid"));String name = req.getParameter("name");try {bookService.addSection(bid, name);} catch (SQLException e) {throw new ServletException(e);}resp.sendRedirect("/book.jsp?bid=" + bid);} }對應(yīng)書籍添加章節(jié)。章節(jié)的插入dao層前面已經(jīng)寫過了。也就是說servlet部分執(zhí)行的邏輯還是調(diào)用service層然后再去調(diào)用dao層中間傳遞的對象都是model包下章節(jié)類的對象。
用戶是作者實(shí)際頁面：
用戶不是作者實(shí)際頁面：
這只是章節(jié)，音頻也是一個(gè)道理，如果是非作者用戶只顯示播放連接，如果是作者還顯示錄制音頻點(diǎn)擊可以跳到錄制頁面。
5.音頻管理
1.dao層
public class AudioDao {public void insert(int sid, String uuid, String contentType, InputStream inputStream) throws SQLException {String sql = "insert into audios (sid, uuid, type, content) values (?, ?, ?, ?)";try (Connection c = DB.getConnection()) {try (PreparedStatement s = c.prepareStatement(sql)) {s.setInt(1, sid);s.setString(2, uuid);s.setString(3, contentType);s.setBlob(4, inputStream);s.executeUpdate();}}}public Audio select(String uuid) throws SQLException {String sql = "select type, content from audios where uuid = ?";try (Connection c = DB.getConnection()) {try (PreparedStatement s = c.prepareStatement(sql)) {s.setString(1, uuid);try (ResultSet r = s.executeQuery()) {if (!r.next()) {return null;}return new Audio(r.getString("type"), r.getBinaryStream("content"));}}}} }在section中的這條sql語句查詢章節(jié)和對應(yīng)得uuid。一定要使用左聯(lián)查詢因?yàn)檎鹿?jié)是一定存在得但是對應(yīng)得音頻可能不存在所以要使用左聯(lián)。
2.jsp判斷是否是作者
如果用章節(jié)存在則顯示章節(jié)名稱，如果用戶還是作者則跳轉(zhuǎn)到錄制聲音界面，否則什么都不顯示。
3.錄制聲音jsp
這部分就是我們提前做的預(yù)研，如何在瀏覽器上錄制聲音。
<%@ page import="com.yaoxinyuan.model.Section" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><meta charset="utf-8"><title>悅讀FM | 錄制聲音</title><link rel="stylesheet" href="/css/record.css"> </head> <body><div><div id="startButton" class="button">開始采集</div><div id="recordButton" class="button">開始錄制</div><div id="stopButton" class="button">停止錄制</div><div id="submitButton" class="button">上傳</div><h2>試聽</h2><audio id="preview" controls></audio></div><div><pre id="log"></pre></div><script charset="utf-8">let sid = <%= request.getParameter("sid") %>;</script><script charset="utf-8" src="/js/record.js"></script> </body> </html>4.js部分：
"use strict";// 日志顯示功能 let logElement = document.getElementById("log"); function log(message) {logElement.innerHTML += (message + "\n"); }// 定義全局變量（java 中就沒有全局變量，js 中有全局變量），功能類似于 java 中的靜態(tài)變量、屬性 let captureStream; // 用來 保存采集的 stream let mediaRecorder; // 用來 保存錄制器 let data = []; // 用來 保存錄好的數(shù)據(jù) let audioBlob; // 用來 保存轉(zhuǎn)成 Blob 類型的錄好的數(shù)據(jù)// 從 html 中獲取標(biāo)簽 let startButton = document.getElementById("startButton"); let recordButton = document.getElementById("recordButton"); let stopButton = document.getElementById("stopButton"); let submitButton = document.getElementById("submitButton"); let preview = document.getElementById("preview");// 為開始采集按鈕綁定 點(diǎn)擊（click）事件的動(dòng)作 startButton.addEventListener("click", function () {log("點(diǎn)擊了開始采集按鈕 -> 會(huì)彈出授權(quán)請求");let promise = navigator.mediaDevices.getUserMedia({audio: true // 只有 audio，沒有 video});promise.then(function (stream) {log("用戶同意了授權(quán) -> 記錄了采集數(shù)據(jù)");captureStream = stream; // 保存 stream 到全局變量 captureStream 中}); });// 為開始錄制按鈕綁定 點(diǎn)擊（click）事件的動(dòng)作 recordButton.addEventListener("click", function () {log("點(diǎn)擊了開始錄制按鈕 -> 開始錄制，每 3 秒收集一次數(shù)據(jù)");if (!captureStream) {log("錯(cuò)誤：必須先點(diǎn)擊開始采集按鈕");return;}// mediaRecorder 也是全局變量mediaRecorder = new MediaRecorder(captureStream);mediaRecorder.ondataavailable = function (event) {log("錄制數(shù)據(jù)可用事件 -> 保存數(shù)據(jù)");data.push(event.data);};mediaRecorder.start(3000); });// 為停止錄制按鈕綁定 點(diǎn)擊（click）事件的動(dòng)作 stopButton.addEventListener("click", function () {log("點(diǎn)擊了停止錄制按鈕 -> 停止錄制");if (!mediaRecorder) {log("錯(cuò)誤：必須先點(diǎn)擊開始錄制按鈕");return;}mediaRecorder.onstop = function () {log("錄制停止事件 -> 準(zhǔn)備預(yù)覽功能的數(shù)據(jù)流");audioBlob = new Blob(data, {type: "audio/webm" // 類型是 audio/webm});preview.src = URL.createObjectURL(audioBlob);};mediaRecorder.stop(); });// 為上傳按鈕綁定 點(diǎn)擊（click）事件的動(dòng)作 submitButton.addEventListener("click", function () {log("點(diǎn)擊了上傳按鈕 -> 通過 form 表單，向服務(wù)器提交錄制下來的數(shù)據(jù)");if (!audioBlob) {log("錯(cuò)誤：必須先點(diǎn)擊停止錄制按鈕");return;}let xhr = new XMLHttpRequest();xhr.open("post", "/upload/audio?sid=" + sid);xhr.onload = function () {log("服務(wù)器應(yīng)答事件 -> 打印應(yīng)答信息");log(xhr.status);log(xhr.responseText);};let formData = new FormData();formData.set("audio", audioBlob);xhr.send(formData); });5.css部分：
css樣式代碼：
6.實(shí)際頁面:
作者點(diǎn)擊錄制聲音后跳轉(zhuǎn)到錄制頁面——>
7.保存音頻數(shù)據(jù)到服務(wù)器
是通過ajax發(fā)起form表單（http post請求），然后把對應(yīng)得章節(jié)和音頻綁定起來。和章節(jié)綁定對應(yīng)得書籍類似，還是通過sid來綁定。例如：
8.服務(wù)端的資源也就是servlet部分
只有加了這個(gè)注解才能拿到請求頭里邊的內(nèi)容。
對應(yīng)代碼：
9.service層
public class AudioService {private AudioDao audioDao;public AudioService() {audioDao = new AudioDao();}public String save(int sid, Part audio) throws IOException, SQLException {String uuid = UUID.randomUUID().toString();audioDao.insert(sid, uuid, audio.getContentType(), audio.getInputStream());return uuid;}public Audio get(String uuid) throws SQLException {return audioDao.select(uuid);} }利用庫生成的uuid。
service的作用就是插入音頻數(shù)據(jù)并返回它的uuid。也就是為servlet提供基礎(chǔ)。
10.dao層執(zhí)行sql——插入音頻和查找音頻
public class AudioDao {public void insert(int sid, String uuid, String contentType, InputStream inputStream) throws SQLException {String sql = "insert into audios (sid, uuid, type, content) values (?, ?, ?, ?)";try (Connection c = DB.getConnection()) {try (PreparedStatement s = c.prepareStatement(sql)) {s.setInt(1, sid);s.setString(2, uuid);s.setString(3, contentType);s.setBlob(4, inputStream);s.executeUpdate();}}}public Audio select(String uuid) throws SQLException {String sql = "select type, content from audios where uuid = ?";try (Connection c = DB.getConnection()) {try (PreparedStatement s = c.prepareStatement(sql)) {s.setString(1, uuid);try (ResultSet r = s.executeQuery()) {if (!r.next()) {return null;}return new Audio(r.getString("type"), r.getBinaryStream("content"));}}}} }json格式的數(shù)據(jù)，基本上保存音頻的過程已經(jīng)完成，播放就是拿到對應(yīng)的uuid，通過uuid拿到聲音即可。
11.播放servlet
12.實(shí)際效果：
七、總結(jié)和后續(xù)展望
基本上悅讀FM項(xiàng)目實(shí)現(xiàn)了用戶登錄，書籍管理，章節(jié)管理，音頻管理等功能，還有一些零零碎碎的jsp，ajax，js知識(shí)，現(xiàn)在回過頭來看前期的音頻如何錄制保存仍是這個(gè)項(xiàng)目的核心，還有就是所有前端和后端都是自己來實(shí)現(xiàn)，有一說一前端頁面做的還是非常粗糙，代碼在很多方面只是實(shí)現(xiàn)了功能，并沒有做深入的探究，這也是后期完善的地方，而且前端也是需要完善的地方，可以加一下書籍圖片和背景等等。
這個(gè)項(xiàng)目如果問哪方面收獲更多點(diǎn)，我想還是關(guān)于開發(fā)邏輯和預(yù)研階段的自我學(xué)習(xí)過程。不可能所有項(xiàng)目所需要的技術(shù)你都掌握了，那么就要求你在實(shí)際過程中，現(xiàn)學(xué)現(xiàn)用這對我目前來說是必要的，因?yàn)橹R(shí)還很淺薄，所以希望大家在看完之后能夠多多指教。
八、開源代碼
github鏈接: https://github.com/XiaoYao-code/yueduFM.git.
總結(jié)
以上是生活随笔為你收集整理的java实操项目：悦读FM总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 精密电阻丝印
- 下一篇： 使用ffmpeg随意剪辑、合并视频片段