在實(shí)現(xiàn)ajax的一些案例效果時(shí)，配置本地寫(xiě)的案例，使用服務(wù)器地址訪問(wèn)，讓學(xué)習(xí)更加的有趣。

一：下載安裝nodejs和安裝express框架

進(jìn)入這個(gè)nodejs中文網(wǎng)鏈接 下載nodejs

截圖

選擇對(duì)應(yīng)的版本然后下載安裝就好了，完了驗(yàn)證下nodejs安裝是否成功。輸入node -v命令查看版本，再輸入npm -v命令查看npm版本

版本號(hào)

安裝好接下來(lái)就可以愉快地使用啦~?

二：搭建原生的nodejs本地服務(wù)器

簡(jiǎn)單測(cè)試下：在安裝目錄下新建一個(gè)Server文件夾，用來(lái)存放代碼文件，進(jìn)入新建一個(gè)server.js文件，寫(xiě)入代碼

按住shift再右鍵Server文件夾，選擇“在此處打開(kāi)命令窗口”，然后就輸入node server.js，回車就開(kāi)啟了本地服務(wù)器了。（PS: Node.js是運(yùn)行在服務(wù)器端的，alert（）方法不能使用，如果要打印輸出信息，推薦使用console.log()方法）。執(zhí)行效果圖如下：

原生搭建

三：使用express框架搭建本地服務(wù)器

安裝框架之前先把NPM鏡像改成淘寶鏡像，在文件夾打開(kāi)命令行窗口執(zhí)行命令：npm config set registry https://registry.npm.taobao.org?

然后全局安裝express命令安裝工具? 輸入命令： npm install -g express-generator

再安裝express框架? 輸入命令： npm install -g express?

安裝成功后就可以使用express框架構(gòu)建項(xiàng)目了

如輸入命令： express myStudy -e 創(chuàng)建項(xiàng)目， 再cd 進(jìn)入該目錄，輸入命令：npm install 安裝組件 ，最后執(zhí)行命令：npm start 啟動(dòng)項(xiàng)目

express框架項(xiàng)目

需要注意的是：如果修改了nodejs服務(wù)器端的代碼（除了views文件夾下的模板文件），都需要重啟服務(wù)器才會(huì)生效，比如直接關(guān)掉命令行窗口就關(guān)掉了服務(wù)器了，或者在命令行窗口中輸入Ctrl+C，再選擇Y關(guān)閉，然后再重新執(zhí)行 npm start 命令啟動(dòng)服務(wù)器

修改app.js文件，讓其可以識(shí)別views文件夾下的html文件

簡(jiǎn)單介紹下什么是路由？通俗的講路由就是訪問(wèn)路徑，不同的訪問(wèn)路徑會(huì)執(zhí)行執(zhí)行不同的處理邏輯。每一個(gè)路由都可以有一個(gè)或者多個(gè)處理器函數(shù)，當(dāng)匹配到路由時(shí)，這些函數(shù)將被執(zhí)行。

路由分離：把某一類相關(guān)的路由放到同一個(gè)文件夾中，而項(xiàng)目的入口文件app.js需要把這些路由文件包含進(jìn)來(lái)，在訪問(wèn)不同路由的時(shí)候，把用戶的請(qǐng)求轉(zhuǎn)發(fā)給相關(guān)的路由文件來(lái)進(jìn)行處理。

四、結(jié)合ajax實(shí)現(xiàn)一個(gè)小Demo（古詩(shī)默寫(xiě)）

html的一些代碼如下：

JavaScript的一些代碼如下：

app.js框架代碼修改如下：

注：由于我把在ajax文件放到服務(wù)器上去執(zhí)行 ，所以不會(huì)產(chǎn)生跨域問(wèn)題，所以下面的跨域問(wèn)題那行代碼不用理，關(guān)于跨域問(wèn)題以后我再總結(jié)。注意看我看框起來(lái)的地方，表示路由

最后啟動(dòng)服務(wù)器，然后就可以在瀏覽器輸入路由地址訪問(wèn)啦~??? 最后的效果如下圖：

效果圖

總結(jié)：到此本文就結(jié)束了，這陣子學(xué)習(xí)了點(diǎn)前端ajax搭配nodejs服務(wù)器，跟著書(shū)本來(lái)學(xué)的，如有錯(cuò)誤請(qǐng)指正，不勝感激