阿里云服務(wù)器搭建web項(xiàng)目小結(jié)

前言

最近恰好有時(shí)間，自己搞了個(gè)云服務(wù)器試著搭建了個(gè)網(wǎng)站，遇到了一些問(wèn)題，通過(guò)踩坑也漲了一些經(jīng)驗(yàn)，遂記錄一二，與后來(lái)者分享。

正文

1、博主用的阿里云服務(wù)器，為什么用它呢？一個(gè)是恰逢雙十一，有優(yōu)惠；另一個(gè)原因，它畢竟是國(guó)內(nèi)市場(chǎng)占有率最高的廠家，各種學(xué)習(xí)資料應(yīng)該也是最多的。各位園友自建網(wǎng)站時(shí)按自身情況酌情選擇即可。

如果用阿里云服務(wù)器的話，按照官網(wǎng)上的教程來(lái)操作是最好的選擇，現(xiàn)在各類形形色色的博客里的安裝操作教程均會(huì)有不同程度的不詳盡，指不定那里就會(huì)埋坑。阿里云服務(wù)器手動(dòng)搭建javaweb環(huán)境的官網(wǎng)教程的網(wǎng)址【https://help.aliyun.com/document_detail/51376.html?spm=5176.12901015.0.i12901015.af8f525cCPi8QI】，在此教程頁(yè)的左邊菜單欄，還有包括數(shù)據(jù)庫(kù)搭建、鏡像操作等各種教程，而且很詳細(xì)，直接照著做即可，快捷高效。

2、打tomcat用的war包

博主用的idea，直接打開(kāi)maven的右側(cè)操作欄，找到根module，先clean再package

這時(shí)在你的項(xiàng)目目錄下就有最新的war包了

包名稱可以直接在所打包的項(xiàng)目的pom.xml中自定義，如下所示：

3、tomcat啟動(dòng)報(bào)錯(cuò)

org.apache.catalina.LifecycleException:Failed to start component[StandardEngine[Catalina].StandardHost[localhost].StandardContext[/points]]

錯(cuò)誤信息截圖如下：

這時(shí)由于tomcat的版本與jdk版本沖突導(dǎo)致的，一般來(lái)說(shuō)jdk1.7對(duì)應(yīng)tomcat7，jdk1.8對(duì)應(yīng)tomcat8，我最開(kāi)始是用的jdk1.8搭配tomcat7，所以出現(xiàn)了上述問(wèn)題。將tomcat換成8后問(wèn)題解決。

4、H5入門

最近也順便研究了一下h5開(kāi)發(fā)，這樣一些簡(jiǎn)單的頁(yè)面自己就能搞定了。

首先說(shuō)一下h5的開(kāi)發(fā)環(huán)境搭建。我用的是Visual Studio Code（簡(jiǎn)稱VSC）+Node.js+Vue。為方便大家對(duì)照后端技術(shù)理解H5前端用的技術(shù)，可以先這樣理解：VSC是前端常用的開(kāi)發(fā)工具，類比后端用的Idea和Eclipse，它們作用是一樣的；Node.js是vue的開(kāi)發(fā)環(huán)境，類比我們后端的JDK；而vue可以類比成我們的Spring框架，簡(jiǎn)化開(kāi)發(fā)，功能強(qiáng)大；npm是用于包管理的，類似我們的maven。這樣一類比，相信大家都有一個(gè)更直觀的感受了。下面大體說(shuō)一下我的搭建過(guò)程。

1)、下載node.js https://nodejs.org/en/

具體操作參見(jiàn)博客【https://www.cnblogs.com/lunlunshiwo/p/7476031.html】

2)、正常的npm服務(wù)在國(guó)外，安裝較慢，此處我們使用國(guó)內(nèi)的，安裝指令

npm install-g cnpm--registry=http://registry.npm.taobao.org

安裝完之后用cnpm-v指令查看

3)、安裝vue-cli一種全局腳手架，用于搭建所需的模板框架，但注意此處直接運(yùn)行上述指令可能會(huì)卡主，執(zhí)行下面的就好了：

npm config set registry https://registry.npm.taobao.org--global

然后npm install-g vue/cli

注意安裝過(guò)程要運(yùn)行管理員權(quán)限的cmd指令操作頁(yè)面，如果還有報(bào)錯(cuò)，用指令npm install-g npm latest將版本升到最新。

4)、初始化環(huán)境

npm install-g vue/cli-init

vue init webpack myproject

一頓yes往下走就行了，初始化完項(xiàng)目之后的目錄是這樣的

5)、集成VScode

參見(jiàn)博文【https://blog.csdn.net/mao834099514/article/details/79138484】

6)、增加智能提示

點(diǎn)擊extension按鈕，如下圖，點(diǎn)擊后搜索intelliSense，選擇node.js的和css，就會(huì)有智能提示了

7)、增加標(biāo)簽自動(dòng)補(bǔ)全功能

同樣在extension處安裝三個(gè)插件即可：Auto Close Tag/Auto Rename Tag/Auto Complete Tag

8)、npm run dev

去訪問(wèn)項(xiàng)目吧！

好了，這次就到這里，如果有問(wèn)題或者疑問(wèn)，歡迎大家留言區(qū)交流，謝謝閱讀！