項目七網(wǎng)站應(yīng)用發(fā)布及部署

項目要

求本項目以某公司企業(yè)網(wǎng)站系統(tǒng)為例，介紹SpringBoot的單元測試、Vue項目的打包和部署等。要完成項目任務(wù)，需要掌握Springboot的單元測試、Springboot應(yīng)用打包、Springboot的部署，Vue應(yīng)用打包和部署等知識。

項目分

析要完成項目任務(wù)，需要掌握Node.js的下載、安裝以及環(huán)境配置、使用腳手架VueCLI創(chuàng)建項目、使用Vite構(gòu)建項目、Vue播放音頻文件實現(xiàn)播放、暫停、停止播放、利用第三方庫Howler.js實現(xiàn)音樂播放等知識。要完成項目任務(wù)，需要驗證碼的產(chǎn)生方法、路由的嵌套、路由的守衛(wèi)、百度編輯器的配置和使用等知識。

項目目

標【知識目標】1.了解如果通過phpStudy將項目部署到服務(wù)器上去；2.了解SpringBoot進行單元測試時使用的注解；3.掌握Vue實例的創(chuàng)建方法；4.掌握Vue應(yīng)用打包的方法；5.掌握使用Vue開發(fā)的網(wǎng)站的部署方法。

項目目

標【技能目標】1.能熟練使用SpringBoot進行單元測試；2.能夠熟練使用Maven將項目打包為JAR包；3.能夠熟練使用Vue構(gòu)建工具進行打包；4.能夠?qū)㈨椖坎渴鸬椒?wù)器上。

項目目

標【素養(yǎng)目標】1.培養(yǎng)學(xué)生按標準做事的習(xí)慣；2.培養(yǎng)學(xué)生獨立完成任務(wù)的品格素質(zhì)、技能素質(zhì)以及綜合素質(zhì)；3.培養(yǎng)學(xué)生能夠找到適合自己的學(xué)習(xí)方法并正確運用；4.培養(yǎng)學(xué)生的團隊合作精神。

項目目

標【思政目標】1.引導(dǎo)學(xué)生發(fā)掘美的動力、欣賞美的眼光、體悟中華大美的情懷；2.培養(yǎng)學(xué)生的愛國情懷、文化自信、社會責(zé)任感和國際視野。任務(wù)一系統(tǒng)單元測試及打包--任務(wù)演示本任務(wù)使用SpringBoot對企業(yè)網(wǎng)站系統(tǒng)多個API應(yīng)用接口進行單元測試，測試是否能正常通過驗證。這里指定文章id等于3的文章給取出來，測試是否能夠正常取出。任務(wù)一

系統(tǒng)單元測試及打包–知識準備SpringBoot單元測試概述SpringBoot單元測試概述測試是系統(tǒng)開發(fā)中非常重要的工作，單元測試在幫助開發(fā)人員編寫高品質(zhì)的程序，提升代碼質(zhì)量方面發(fā)揮了極大的作用，本任務(wù)將介紹SpringBoot的單元測試。SpringBoot項目創(chuàng)建時會默認單元測試框架spring-boot-test，而這個單元測試框架主要是依靠另?個著名的測試框架JUnit實現(xiàn)的，打開pom.xml就可以看到，以下信息是SpringBoot項目創(chuàng)建是自動添加的：SpringBoot單元測試概述下面介紹生成單元測試類的方法。（1）在需要進行單元測試的類里面右鍵，如圖所示。SpringBoot單元測試概述（2）選擇Test，如圖所示。SpringBoot單元測試概述（3）配置測試文件的參數(shù)，如圖所示。SpringBoot單元測試概述（4）生成的文件所在的目錄，如圖所示。SpringBoot單元測試概述（5）生成的測試文件的默認內(nèi)容，如圖所示。SpringBoot單元測試概述接下來，添加單元測試業(yè)務(wù)邏輯代碼。SpringBoot單元測試概述運行此測試代碼，可以按照如圖所示的方法。SpringBoot單元測試概述此方法運行的結(jié)果如圖所示。SpringBoot單元測試概述此方法運行的結(jié)果如圖所示。任務(wù)一

系統(tǒng)單元測試及打包–任務(wù)示范（1）在pom.xml文件中引入spring-boot-starter-test依賴，如下代碼所示。任務(wù)一

系統(tǒng)單元測試及打包–任務(wù)示范（2）編寫測試類，代碼如下。任務(wù)一

系統(tǒng)單元測試及打包–進階提高這里實現(xiàn)將Springboot項目打包為JAR包并部署到服務(wù)器上，這里以使用Maven打包為例，將一個SpringBoot項目打包為JAR包并部署到服務(wù)器上。（1）確定將項目打包為JAR包，入圖所示。任務(wù)一

系統(tǒng)單元測試及打包–進階提高（2）在pom.xml文件中引入Maven，如圖所示。任務(wù)一

系統(tǒng)單元測試及打包–進階提高（3）選擇將IDEA右側(cè)欄“Maven”，單擊項目springsecurity中的Lifecycle下的“pageage”運行打包，如圖所示。任務(wù)一

系統(tǒng)單元測試及打包–進階提高（4）打包后的JAR包會出現(xiàn)在項目結(jié)構(gòu)的target目錄中，結(jié)果如圖所示。任務(wù)一

系統(tǒng)單元測試及打包–進階提高（5）將此JAR包復(fù)制到D盤api目錄下，切換到CMD命令行，輸入如圖所示命令。任務(wù)一

系統(tǒng)單元測試及打包–進階提高（6）服務(wù)器啟動成功，如圖7-14所示。任務(wù)一

系統(tǒng)單元測試及打包–進階提高（6）服務(wù)器啟動成功，如圖7-14所示。任務(wù)一

系統(tǒng)單元測試及打包–進階提高根據(jù)任務(wù)示范，請完成本任務(wù)。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范將一個Vue網(wǎng)站應(yīng)用使用命令或構(gòu)建工具進行打包，然后部署到Nginx服務(wù)器上，效果演示如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–知識準備Vue項目需要打包的主要原因有以下幾個方面：代碼壓縮和混淆：在開發(fā)階段，我們通常會將代碼拆分成不同的模塊和組件，這樣有助于我們更好地進行維護和開發(fā)。但在部署到生產(chǎn)環(huán)境時，我們需要將這些模塊和組件合并，并對代碼進行壓縮和混淆，以減少文件體積，提高加載速度，增加網(wǎng)頁的性能和用戶體驗。資源文件管理：在項目開發(fā)過程中，我們可能會用到許多靜態(tài)資源文件，如圖片、字體等。這些文件可能散落在項目各個角落，不便于管理和維護。打包工具可以將這些資源文件統(tǒng)一打包到指定目錄，并生成對應(yīng)的路徑，方便使用和引用。任務(wù)二

Vue應(yīng)用打包及部署–知識準備兼容性處理：不同的瀏覽器對某些新的JavaScript特性的支持可能存在差異，而打包工具可以將這些新特性轉(zhuǎn)換為更早版本的JavaScript，以保證項目在不同瀏覽器上的兼容性。編譯處理：Vue項目中通常會使用ES6或TypeScript等高級語言進行開發(fā)，而這些高級語言的代碼并不能直接在瀏覽器中運行。打包工具可以將這些高級語言的代碼編譯成瀏覽器可識別的JavaScript代碼，以便項目能夠正常運行。代碼分割和按需加載：在大型項目中，為了提高加載速度和減少首屏渲染時間，我們可以將代碼按照功能進行分割，并使用按需加載的技術(shù)，即在需要時才加載相應(yīng)的代碼。打包工具可以實現(xiàn)這些功能，將項目按需加載，提高用戶體驗。任務(wù)二

Vue應(yīng)用打包及部署–知識準備在Vue項目中，你可以使用VueCLI的工具來進行項目的打包。以下是基本的步驟：（1）確保你的項目依賴都已經(jīng)安裝完畢。在項目的根目錄下運行以下命令：（2）運行構(gòu)建命令。VueCLI生成的項目通常會使用npmrunbuild命令來進行項目的打包。如果你的項目是用VueCLI3+創(chuàng)建的，你可以直接運行。任務(wù)二

Vue應(yīng)用打包及部署–知識準備這個命令會生成一個dist目錄，里面包含了打包后的項目文件。如果你的項目配置了不同的打包腳本，請根據(jù)package.json中的scripts部分來確定正確的打包命令。這是一個簡單的例子，展示了如何在package.json中配置一個打包腳本：任務(wù)二

Vue應(yīng)用打包及部署–知識準備（3）將phpstudy軟件打開，開啟MySQL和Nginx服務(wù)；（4）將dist目錄下文件放到WWW目錄下，測試是否可以訪問。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范1.將Vue項目打包要將Vue項目打包，這里首先以一個旅游網(wǎng)站為例打包部署為例，可以按照如下步驟進行。（1）使用命令行窗口打開所在的目錄，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（2）命令行窗口輸入如下命令，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（3）在（2）步命令輸入完畢后按回車鍵，構(gòu)建結(jié)果會輸出到dist目錄，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（4）打開Phpstudy軟件，啟動MySQL和Nginx服務(wù)，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（5）打開Navicat數(shù)據(jù)庫，如圖所示，創(chuàng)建一個新連接。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（6）準備導(dǎo)入SQL文件，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（7）準備導(dǎo)入SQL文件，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（8）成功導(dǎo)入數(shù)據(jù)庫的情況，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（9）點擊“網(wǎng)站”，點擊“管理”，如圖所示任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（10）點擊“修改”，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（11）設(shè)置網(wǎng)站相關(guān)信息，如圖所示任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（12）將dist目錄下文件復(fù)制到“www”目錄下，如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–任務(wù)示范（13）使用“http://localhost/”進行訪問，測試其是否能正常訪問。祖國的大好河山，如詩如畫，山川壯麗，江河奔騰，每一寸土地都蘊含著無盡的故事與輝煌；長城蜿蜒，似巨龍橫臥山川之間，見證了華夏兒女的堅韌與智慧；長江黃河，滾滾東流，哺育了華夏文明，滋養(yǎng)了這片廣袤的土地；桂林山水甲天下，奇峰異石，碧水繞村，仿佛人間仙境，讓人流連忘返；黃山云海，松石奇峰，變幻莫測，盡顯大自然的鬼斧神工；春天，萬物復(fù)蘇，江南水鄉(xiāng)，煙雨蒙蒙，宛如一幅淡雅的水墨畫；夏日，草原遼闊，牛羊成群，藍天白云下，是自由與希望的田野；秋天的祖國，層林盡染，五彩斑斕，紅葉如火，金穗滿田，收獲的喜悅洋溢在每一個角落；冬日，銀裝素裹，北國風(fēng)光，千里冰封，萬里雪飄，展現(xiàn)出別樣的壯麗與靜謐；祖國的大好河山，不僅是一幅幅美麗的自然畫卷，更是中華民族精神的象征，激勵著一代又一代中華兒女勇往直前，不懈奮斗。每個中國人都要熱愛祖國的大好河山，保護好自然環(huán)境，實現(xiàn)人與自然和諧共生，給子孫后代留下藍天碧水是我們每個人所肩負的歷史責(zé)任。任務(wù)二

Vue應(yīng)用打包及部署–進階提高webpack也可實現(xiàn)打包，這里介紹下webpack的基礎(chǔ)知識。webpack是一個模塊打包工具。用vue項目來舉例：瀏覽器它是只認識js，不認識vue的。而我們寫的代碼后綴大多是.vue的，在每個.vue文件中都可能html、js、css甚至是圖片資源；并且由于組件化，這些.vue文件之間還有錯綜復(fù)雜的關(guān)系。所以項目要被瀏覽器識別，我們就要使用webpack將它們打包成js文件以及相應(yīng)的資源文件。Webpack有什么作用呢，可以簡述為如下幾點：*它可以把CSS，JS圖片當(dāng)做模塊來處理*它可以吧以上的這些文件進行打包壓縮成一個JS文件，減少了HTTP的請求*根據(jù)模塊之間的依賴關(guān)系進行分析，按需加載*可以安裝一些插件，對插件進行打包處理任務(wù)二

Vue應(yīng)用打包及部署–進階提高Vue-cli腳手架中webpack配置基礎(chǔ)一個webpack配置文件的基本結(jié)構(gòu)如下：任務(wù)二

Vue應(yīng)用打包及部署–進階提高要使用webpack，首先要進行安裝。Webpack的安裝可以使用如下命令：接下來介紹下基本的使用。（1）創(chuàng)建一名字為“webpack”的目錄，在該目錄下創(chuàng)建名字為“modules”的目錄，如圖所示：任務(wù)二

Vue應(yīng)用打包及部署–進階提高（2）在modules的目錄下創(chuàng)建名字為“function.js”的js文件，其內(nèi)容為如圖7-29所示。：任務(wù)二

Vue應(yīng)用打包及部署–進階提高（3）在modules的目錄下創(chuàng)建名字為“main.js”的js文件，其內(nèi)容如圖所示。任務(wù)二

Vue應(yīng)用打包及部署–進階提高（4）在modules目錄下創(chuàng)建一名字為“webpack.config.js”的文件，其內(nèi)容如圖所示。任務(wù)二

Vue應(yīng)