java实操项目：悦读FM总结
悅讀FM——項目總結
- 一、小前言
- 二、立項——項目背景
- 三、 項目的邊界——可行性評估
- 四、 音頻管理功能預研
- 1 .瀏覽器中錄制和播放音頻
- 2.服務器接受音頻
- 1.Ajax介紹
- 2.同源策略
- 五、 數據建模——建庫建表
- 1.建庫建表
- 2.注意事項
- 1.auto_increment是什么
- 2.主鍵約束和唯一性約束
- 3.為什么要在音頻再加一個uuid
- 4.Mysql中bolb類型數據
- 六、 正式開發——后端接口實現
- 1.準備階段
- 2.功能實現
- 1.用戶管理
- 2.首頁
- 3.書籍管理
- 4.章節管理
- 5.音頻管理
- 七、總結和后續展望
- 八、開源代碼
一、小前言
悅讀FM這個項目最主要的目的還是練習自己的技術，因為突然看到了別人的畢業論文是一個本地播放音頻的題目，于是想了想，似乎在數據庫存儲音頻視頻這類東西時，自己沒有關注過。同時也為了彌補在上個易班項目中沒有練習過前端代碼，于是自己動手也寫了寫網頁，和易班項目不同的時這個總結時按照項目產生到完成的順序來寫，至于原因，還是那句話一切按照實際開發來。
二、立項——項目背景
不論那個項目從設計到落地肯定有一定的現實意義，而悅讀FM的主要功能就是為用戶提供可以聽的圖書資源，通過作者上傳書籍，設置書籍章節再通過網頁錄制和章節綁定的聲音。服務器對這些數據進行儲存，所有用戶都能通過網頁來聽書。次要功能就是登錄，注冊。對于沒有注冊的賬號密碼跳轉到注冊頁面，對于已經登錄的非作者用戶只展示書籍章節音頻列表，對已登錄的作者用戶展示，上傳書籍，章節，音頻功能。一個項目的出發點對于一個企業來說大多數考慮的是市場需求，對我來說更多的還是學習和練習。(其實也有現實意義，因為有人指導哈哈)悅讀FM和易班對比來說，其實二者并沒有很多差別，唯一在于易班可能是在已經搭建好的前后端框架下去實現后端的具體代碼，而悅讀FM項目中的音頻采集和前端js的開發需要從頭學起。
三、 項目的邊界——可行性評估
所謂 項目的邊界就是我要做什么？什么是核心功能，什么是輔助功能？
對于悅讀FM這個項目來說本項目的核心是：書/章節的管理和對應章節音頻數據的管理，登錄功能也是要實現的一個功能但是不算是核心功能。
于是怎么確定項目邊界呢？通常是我們站在用戶的視角去思考用戶的需求，根據這些需求去啟發我們如何設計業務。
比如說：
1.匿名用戶，可以查看所有的書的列表，為了選擇出想聽的書
2.作為已登陸的用戶，可以上傳一本書，為了讓書被其他用戶看到
3.作為一本書的上傳者，可以錄入新的章節，為了讓被其他用戶看到
4.作為一本書的上傳者，可以為某個章節錄入音頻，為了讓書背其他用戶者
5.作為匿名用戶，可以選擇一本想聽書，為了看到該書下有哪些章節
6.作為匿名用戶，可以選擇某個章節點擊，聽書
7.用戶管理
這些實際應用到的場景都是可能會發生的，于是乎我們程序猿和產品經理就協商，那些功能可以實現？那些需要一些特定技術才能實現？那些功能可能目前實現不了等等？在悅讀FM這個項目中除了書籍管理、章節管理、用戶管理還有就是音頻管理。前四個可能都很熟悉，但是音頻管理是我需要預研的部分。
四、 音頻管理功能預研
音頻管理功能的核心就是：
怎么樣在瀏覽器中錄制和播放音頻？
html5標準中支持 audio 標簽，提供音頻的URL鏈接即可
如何在瀏覽器進行音頻的存儲？
JavaScript中的mediarecorder進行聲音的錄制+保存（ES6）
1 .瀏覽器中錄制和播放音頻
到這就轉頭學學js：（也是用到學多少，所以我就直接在瀏覽器的開發者工具上搞了）JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的高級編程語言，多用于web網頁開發。
1.變量的定義：js 沒有變量類型，let 關鍵字可以指向任何類型的引用類型。
舉例：2.方法的定義：關鍵字 function
舉例：
3.js執行特點——事件驅動邏輯
簡單來說所謂的事件驅動邏輯是把一件事件分成若干個小事件，通過執行這些小事件來完成。這些小事件有有序的。如果一個事件開始執行那么一定是執行完該事件再去執行別的事件。
但是js不是三言兩語能介紹清楚的，在這過程中我也主要看了看官網上的教程，而且用的都是比較基本。（😓）
附上教程鏈接：https://www.runoob.com/js/js-tutorial.html.
前端網頁設計部分：
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 中的靜態變量、屬性 let captureStream; // 用來 保存采集的 stream let mediaRecorder; // 用來 保存錄制器 let data = []; // 用來 保存錄好的數據 let audioBlob; // 用來 保存轉成 Blob 類型的錄好的數據// 從 html 中獲取標簽 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");// 為開始采集按鈕綁定 點擊（click）事件的動作 startButton.addEventListener("click", function () {log("點擊了開始采集按鈕 -> 會彈出授權請求");let promise = navigator.mediaDevices.getUserMedia({audio: true // 只有 audio，沒有 video});promise.then(function (stream) {log("用戶同意了授權 -> 記錄了采集數據");captureStream = stream; // 保存 stream 到全局變量 captureStream 中}); });// 為開始錄制按鈕綁定 點擊（click）事件的動作 recordButton.addEventListener("click", function () {log("點擊了開始錄制按鈕 -> 開始錄制，每 3 秒收集一次數據");if (!captureStream) {log("錯誤：必須先點擊開始采集按鈕");return;} // mediaRecorder 也是全局變量mediaRecorder = new MediaRecorder(captureStream);mediaRecorder.ondataavailable = function (event) {log("錄制數據可用事件 -> 保存數據");data.push(event.data);};mediaRecorder.start(3000); });// 為停止錄制按鈕綁定 點擊（click）事件的動作 stopButton.addEventListener("click", function () {log("點擊了停止錄制按鈕 -> 停止錄制");if (!mediaRecorder) {log("錯誤：必須先點擊開始錄制按鈕");return;}mediaRecorder.onstop = function () {log("錄制停止事件 -> 準備預覽功能的數據流");audioBlob = new Blob(data, {type: "audio/webm" // 類型是 audio/webm});preview.src = URL.createObjectURL(audioBlob);};mediaRecorder.stop(); });// 為上傳按鈕綁定 點擊（click）事件的動作 submitButton.addEventListener("click", function () {log("點擊了上傳按鈕 -> 通過 form 表單，向服務器提交錄制下來的數據");if (!audioBlob) {log("錯誤：必須先點擊停止錄制按鈕");return;}let formData = new FormData();formData.set("audio", audioBlob);let xhr = new XMLHttpRequest();xhr.open("post", "/upload/audio");xhr.onload = function () {log("服務器應答事件 -> 打印應答信息");log(xhr.status);log(xhr.responseText);};xhr.send(formData); });實際效果：
1.整體網頁
2.授權允許：
3.錄制
錄制部分如果沒有按照順序點擊按鈕，會報錯。需要注意的是上傳時報錯時因為時本地打開的html文件并不算是http請求。所以會報錯，也就是上傳功能還沒有真正使用到。
2.服務器接受音頻
實際上悅讀FM項目需要具備的是：1.在網頁上錄制音頻2.錄制的音頻上傳到服務器。第一個問題通過研究教程已經解決了，現在關心的就是如何把錄制的音頻上傳到服務器。我是通過java中自帶原生類的ajax請求完成的，實際上大部分時候都采用jQuery實現ajax。第一因為jQuery是第三方庫，第二其實用到也不復雜所以原生類方便。
1.Ajax介紹
Ajax的全稱是AsynchronousJavascript+XML。Ajax是多種技術的組合，包括我們的JavaScript 異步數據獲取技術，就是XMLHttpRequest以及xml以及Dom還有表現技術XHTML 和CSS，Ajax的核心是XMLHttpRequest 是支持異步請求的技術，可以發送請求給服務器，并且不阻塞用戶在瀏覽器中首次引用，使我們的網絡應用更加強大。其實XMLHttpRequest是JavaScript的一種語法子集，是它的一套API，支持發送GET和POST請求直白說沒有ajax之前，瀏覽器發送http請求需要整頁請求，但是有了ajax之后可以進行局部的請求，其實也可以認為是動態的、隨時的進行各種http請求。
翻譯翻譯就是：異步+js+xml（一種數據格式）
1.為什么是異步？
異步就是請求和結果分開，我們在請求的時候不必等待結果。可以去做別的事情，等結果出來再去看。
2.什么是js？
JavaScript 是 Web 的編程語言。基本上所有現代的 HTML 頁面都使用 JavaScript。（有個一個老生常談的問題js和java有什么關系？答：一個是甲魚一個是烏龜，長的像然而并沒有半毛錢關系）
3.什么是xml?
xml只是一種數據格式，在這件事里并不重要，我們在更新一行字的時候理論上說不需要這個格式，但如果我們更新很多內容，那么格式化的數據可以使我們有條理地去實現更新。不過現在更多的人選擇json格式，因為json目前解析更快而且更加簡潔明了。
2.同源策略
為什么不允許訪問？那么就提到了一個同源策略。ajax默認是不能訪問不同域名的，也就是說baidu.com不能發起tengxun.com的ajax請求，因為在ajax看來他們是不同公司的網站，涉及安全問題，保證了不同域名的數據不能夠相互抓取。而file://就是本地訪問專用協議，不是http協議，也沒有域，所以無法跨域。解決辦法是讓瀏覽器通過http協議訪問網頁即可，對我們來說就是放在tomcat上。
通過tomcat訪問：
對應的代碼說明：
到這基本上所有前端的工作都已經完成了。除了服務器如何保存上傳后的音頻，這都是我們后端要做的事情。
五、 數據建模——建庫建表
1.建庫建表
確定了這些后就開始尋找數據之間的關系（er圖）和建庫建表。
悅讀FM數據對應關系
建庫建表：
2.注意事項
1.auto_increment是什么
auto_increment是用于主鍵自動增長的，從1開始增長，當你把第一條記錄刪除時，再插入第二跳數據時，主鍵值是2，不是1。
在使用AUTO_INCREMENT時，應注意以下幾點：
1、AUTO_INCREMENT是數據列的一種屬性，只適用于整數類型數據列。
2、設置AUTO_INCREMENT屬性的數據列應該是一個正數序列，所以應該把該數據列聲明為UNSIGNED，這樣序列的編號個可增加一倍。
3、AUTO_INCREMENT數據列必須有唯一索引，以避免序號重復(即是主鍵或者主鍵的一部分)。AUTO_INCREMENT數據列必須具備NOT NULL屬性。
4、AUTO_INCREMENT數據列序號的最大值受該列的數據類型約束，如TINYINT數據列的最大編號是127,如加上UNSIGNED，則最大為255。一旦達到上限，AUTO_INCREMENT就會失效。
5、當進行全表刪除時，MySQL AUTO_INCREMENT會從1重新開始編號。
這是因為進行全表操作時，MySQL(和PHP搭配之最佳組合)實際是做了這樣的優化操作：先把數據表里的所有數據和索引刪除，然后重建數據表。
如果想刪除所有的數據行又想保留序列編號信息，可這樣用一個帶where的delete命令以抑制MySQL(和PHP搭配之最佳組合)的優化：delete from table_name where 1;
ps：可用last_insert_id（）獲取剛剛自增過的值。
2.主鍵約束和唯一性約束
1.主鍵約束（PRIMARY KEY）
2.唯一性約束（UNIQUE）
3.為什么要在音頻再加一個uuid
使用aid雖然存儲數據的量上來說會比少但是會造成《二戰德國坦克的故事》（感興趣可以了解哈 挺有意思的），所以使用uuid這種機制雖然不適合存儲，但是基本上大多數語言都支持。
36可以說是進制，常用的有10（0-9），36（0-9+a-z），62（0-9+a-z+A-Z）
4.Mysql中bolb類型數據
Mysql中bolb是一個二進制對象，可以儲存大量數據的容器，例如：圖片，音樂等等，并且根據類型的不同可以存儲數據容量也不同。
①TinyBlob類型 最大能容納255B的數據
②Blob類型 最大能容納65KB的
③MediumBlob類型 最大能容納16MB的數據
④LongBlob類型 最大能容納4GB的數據
讀取和插入：
1、插入Blob類型的數據
插入Blob類型的數據時，需要注意必須要用PreparedStatement，因為Blob類型的數據是不能夠用字符串來拼的，在傳入了SQL語句后，就需要去調用PreparedStatement對象中的setBlob(int index , InputStream in)方法來設置傳入的的參數，其中index表示Blob類型的數據所對應的占位符(?)的位置，而InputStream類型的in表示被插入文件的節點流。
2、讀取Blob類型的數據
讀取Blob類型相對來說比較容易，當獲取了查詢的結果集之后，使用getBlob()方法讀取到Blob對象，然后調用Blob的getBinaryStream()方法得到輸入流，再使用IO操作進行文件的寫入操作即可。
六、 正式開發——后端接口實現
1.準備階段
因為本項目核心來說還是數據庫的增刪查改。所以sql語句是非常非常非常重要的。最核心的我們應該設想用戶有什么需求？把對應的需求轉化成sql語句。這就是講用戶故事就是開發者站在用戶的角度上去思考問題。先想好可能有那些需求，找到對應的sql，自然而然的就可以接著進行后端資源接口的設計。
場景：
想到了一些場景之后，把這些場景進行分類，羅列出需求，根據這些需求就可以大概想到需要設計那些資源接口。悅讀FM項目的資源接口都是最基礎的。我沒有加太多高端的東西，旨在掌握，求精不求多。
資源接口：
有了上述這些東西后，還應該考慮的一個就是頁面之間的跳轉，比如說如果用戶不存在則跳轉到注冊頁面，如果用戶存在跳轉到首頁…這些實際上可能不是我們程序員考慮的事情，既然是自己寫項目肯定是開發是自己，產品經理也是自己。哈哈，所以這個也是我們要考慮的事情。
頁面跳轉示意：
實際開發中我們不把所有的類文件都放在一個包下，那樣太傻了，根據代碼完成的功能不同對class文件進行分類，這個思想不僅僅用在易班項目中，實際上不管開發什么項目，這種分門別類的思想一定要掌握。
分層邏輯：
本來流程應該是tomcat把請求轉給servlet然后再進行sql的查詢等等。添加的DAO層其實是專門處理數據庫查詢的一些邏輯，servlet處理的是接入邏輯。service層的功能是數據加工。model層就是在這個傳輸過程中的一些數據有時候也叫object層。還有一個就是util層，就是工具箱因為數據庫連接常用所以把它封裝成一個類。
實際分層：
2.功能實現
1.用戶管理
實現用戶管理實際上只需要完成這四個接口
1.準備model
因為我們后續需要判斷用戶不能重復和存在性判斷所以覆寫了equals方法hashcode方法，實際上只要是model類基本上所有的常見方法都要覆寫，Tostring，構造方法，get，set看情況，equals方法等。也可以用Lombok中的快捷方法，因為都比較簡單所以直接手打了。
2.準備util層
實際上本應該是準備dao層，但是在這之前需要連接數據庫，這個只需要寫一次后邊直接調用即可。單例的數據庫連接。
3.dao層（執行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);}}}}// 這個做法實際上也不適合生產環境真正使用// 但至少比明文的情況要安全一點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層實際上就是專門處理sql語句，而且可以看到dao層只是執行了查詢就完成了它的工作，并沒有對結果集進行處理，而是返回一個對象，交給下一步去處理。
dao層中userDao有一個特殊的方法，encrypt方法。（加密方法）一般來說都是采用hash，這里采用的是SHA256的加密算法。這比直接保存明文密碼安全的多，但是正如注釋所說的實際開發也不采用這種方式，雖然這種方式是單向加密，不能根據加密后的解密。而且這也是數據庫密碼設置64位長度的原因，因為加密后的數據長度固定是64位。hash是不能逆向解密的。
4.service層：
service層在悅讀FM項目中可能有點浪費可以看到其實沒有什么作用，但是如果在大型系統中service層的必不可少。主要用來做一些偏向業務的方法。比如說 登錄業務和注冊業務。
5.servlet層
servlet層的主要作用就是對結果集進行處理，由于我們進行了代碼分層，分離了執行sql和結果處理這兩者的關系。所以代碼很簡便，servlet在實現的時候很重要的一點就是前后端接口的一致。必須遵頊我們剛才的接口約定。
登錄的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");// 沒有做參數正確性檢查try {User user = userService.login(username, password);if (user == null) {// 沒有注冊成功// 沒有做太多易用性考慮：沒有告訴用戶錯誤原因resp.sendRedirect("/login.html");return;}// 把當前用戶種入 session 中，下次資源訪問時攜帶的登陸用戶信息HttpSession session = req.getSession();session.setAttribute("user", user);// 跳轉回首頁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 生命周期的內容userService = new UserService();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 每次都帶上 utf-8 的設置，字符集不會出問題req.setCharacterEncoding("utf-8");String username = req.getParameter("username");String password = req.getParameter("password");// 沒有做參數正確性檢查try {User user = userService.register(username, password);if (user == null) {// 沒有注冊成功// 沒有做太多易用性考慮：沒有告訴用戶錯誤原因resp.sendRedirect("/register.html");return;}// 把當前用戶種入 session 中，下次資源訪問時攜帶的登陸用戶信息HttpSession session = req.getSession();session.setAttribute("user", user);// 跳轉回首頁resp.sendRedirect("/");} catch (SQLException e) {throw new ServletException(e);}} }6.對應的前端頁面設計：
前端頁面在設計的時候，處理必要的功能設計外，名字一定要對應后端的接口。
后端接口：
前端的頁面：
注冊表單設計：
<!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>登錄表單設計：
<!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>前端頁面我沒有實現的很復雜，只是具備了必要的功能，沒有圖片啊樣式啊等等。還是弱雞，自己這方面不擅長。
7.實際效果
登錄界面：
整個順序實際就是：
實際上就是職責分工，每層干每層的事情，傳遞的始終都是user這個對象。經過這幾個過程，就基本實現了用戶管理功能，其他功能的實現過程都相同。
2.首頁
首頁要展示的是書籍和章節，所以傳遞的對象是章節和書籍。
1.model層
章節model：
public class Section {public int sid;public String name;// 如果關聯聲音，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);} }章節類不需要比較只要構造方法即可，但是書籍還是要比較的所以需要覆寫。
2.dao層
書籍dao層：
章節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層主要就是針對業務，主要是展示全部書籍和對應的章節。需要一個list，list包含的是book類型的對象。
4.首頁jsp
如果直接寫servlet去請求對應的html太過于麻煩，所以使用了jsp，jsp本質上還是一個servlet，tomcat會幫我們把jsp翻譯成servlet。
代碼對應實際結果圖解：
ps：jsp基本語法：
<%!
%>定義基本屬性和方法
<%
%> 執行java代碼
<%=
%>獲取某個變量的值
轉化后的.java文件：
通過jsp轉化的java代碼其實很明白，jsp只是把我們的工作減輕了相當于已經寫好了模板我們只需要在對應的空去填就行了。
3.書籍管理
書籍管理也需要使用jsp技術，因為需要動態的判斷用戶是否登錄，沒有登錄則需要跳轉到登錄頁面。
1.添加書籍servlet：
這實際上是要跳轉到bid對應的章節目錄。
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">書籍標題：<input type="text" id="title" name="title"></label></div><div><button type="submit">上傳</button></div></form> </body> </html>動態判斷邏輯：
3.書籍jsp
這部分重點邏輯在于如果是普通用戶則展示章節和對應音頻，但是如果用戶是作者，那么還有添加章節和添加音頻功能。
4.章節管理
1.上傳章節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);} }對應書籍添加章節。章節的插入dao層前面已經寫過了。也就是說servlet部分執行的邏輯還是調用service層然后再去調用dao層中間傳遞的對象都是model包下章節類的對象。
用戶是作者實際頁面：
用戶不是作者實際頁面：
這只是章節，音頻也是一個道理，如果是非作者用戶只顯示播放連接，如果是作者還顯示錄制音頻點擊可以跳到錄制頁面。
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語句查詢章節和對應得uuid。一定要使用左聯查詢因為章節是一定存在得但是對應得音頻可能不存在所以要使用左聯。
2.jsp判斷是否是作者
如果用章節存在則顯示章節名稱，如果用戶還是作者則跳轉到錄制聲音界面，否則什么都不顯示。
3.錄制聲音jsp
這部分就是我們提前做的預研，如何在瀏覽器上錄制聲音。
<%@ 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 中的靜態變量、屬性 let captureStream; // 用來 保存采集的 stream let mediaRecorder; // 用來 保存錄制器 let data = []; // 用來 保存錄好的數據 let audioBlob; // 用來 保存轉成 Blob 類型的錄好的數據// 從 html 中獲取標簽 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");// 為開始采集按鈕綁定 點擊（click）事件的動作 startButton.addEventListener("click", function () {log("點擊了開始采集按鈕 -> 會彈出授權請求");let promise = navigator.mediaDevices.getUserMedia({audio: true // 只有 audio，沒有 video});promise.then(function (stream) {log("用戶同意了授權 -> 記錄了采集數據");captureStream = stream; // 保存 stream 到全局變量 captureStream 中}); });// 為開始錄制按鈕綁定 點擊（click）事件的動作 recordButton.addEventListener("click", function () {log("點擊了開始錄制按鈕 -> 開始錄制，每 3 秒收集一次數據");if (!captureStream) {log("錯誤：必須先點擊開始采集按鈕");return;}// mediaRecorder 也是全局變量mediaRecorder = new MediaRecorder(captureStream);mediaRecorder.ondataavailable = function (event) {log("錄制數據可用事件 -> 保存數據");data.push(event.data);};mediaRecorder.start(3000); });// 為停止錄制按鈕綁定 點擊（click）事件的動作 stopButton.addEventListener("click", function () {log("點擊了停止錄制按鈕 -> 停止錄制");if (!mediaRecorder) {log("錯誤：必須先點擊開始錄制按鈕");return;}mediaRecorder.onstop = function () {log("錄制停止事件 -> 準備預覽功能的數據流");audioBlob = new Blob(data, {type: "audio/webm" // 類型是 audio/webm});preview.src = URL.createObjectURL(audioBlob);};mediaRecorder.stop(); });// 為上傳按鈕綁定 點擊（click）事件的動作 submitButton.addEventListener("click", function () {log("點擊了上傳按鈕 -> 通過 form 表單，向服務器提交錄制下來的數據");if (!audioBlob) {log("錯誤：必須先點擊停止錄制按鈕");return;}let xhr = new XMLHttpRequest();xhr.open("post", "/upload/audio?sid=" + sid);xhr.onload = function () {log("服務器應答事件 -> 打印應答信息");log(xhr.status);log(xhr.responseText);};let formData = new FormData();formData.set("audio", audioBlob);xhr.send(formData); });5.css部分：
css樣式代碼：
6.實際頁面:
作者點擊錄制聲音后跳轉到錄制頁面——>
7.保存音頻數據到服務器
是通過ajax發起form表單（http post請求），然后把對應得章節和音頻綁定起來。和章節綁定對應得書籍類似，還是通過sid來綁定。例如：
8.服務端的資源也就是servlet部分
只有加了這個注解才能拿到請求頭里邊的內容。
對應代碼：
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的作用就是插入音頻數據并返回它的uuid。也就是為servlet提供基礎。
10.dao層執行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格式的數據，基本上保存音頻的過程已經完成，播放就是拿到對應的uuid，通過uuid拿到聲音即可。
11.播放servlet
12.實際效果：
七、總結和后續展望
基本上悅讀FM項目實現了用戶登錄，書籍管理，章節管理，音頻管理等功能，還有一些零零碎碎的jsp，ajax，js知識，現在回過頭來看前期的音頻如何錄制保存仍是這個項目的核心，還有就是所有前端和后端都是自己來實現，有一說一前端頁面做的還是非常粗糙，代碼在很多方面只是實現了功能，并沒有做深入的探究，這也是后期完善的地方，而且前端也是需要完善的地方，可以加一下書籍圖片和背景等等。
這個項目如果問哪方面收獲更多點，我想還是關于開發邏輯和預研階段的自我學習過程。不可能所有項目所需要的技術你都掌握了，那么就要求你在實際過程中，現學現用這對我目前來說是必要的，因為知識還很淺薄，所以希望大家在看完之后能夠多多指教。
八、開源代碼
github鏈接: https://github.com/XiaoYao-code/yueduFM.git.
總結
以上是生活随笔為你收集整理的java实操项目：悦读FM总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 精密电阻丝印
- 下一篇： 使用ffmpeg随意剪辑、合并视频片段