node環境搭建及xhr交互 · 前端技術總結

## 一、下載NodeJS node可以說對前端同學幫助很大了，學習node不僅能知道服務端的知識，而且也可以放心使用es6的語法，把學前端和學后端一起，節省了我們很多的時間，也有很大的樂趣。。話不多說，下面我們來安裝一個node環境吧下載node，最好到node官 https://nodejs.org/en/ 下載一個LTS（Long Term Surport）長期支持版本。。 ![](https://box.kancloud.cn/107173cbaddfd74d46dcf6530bd52c0f_843x459.jpg) 下載完后雙擊按步驟安裝就行了善于發現的同學，會看到 ![](https://box.kancloud.cn/bfc9d69288227857283b5207102a0a15_814x459.jpg) node已經放到系統的環境變量里了，這時我們打開命令行工具 ![](https://box.kancloud.cn/3c108fced2e06fe7c04841f85d7e5960_413x237.jpg) 輸入命令node -v 就可以看到node的版本了 ![](https://box.kancloud.cn/3fc20c3e2299bc04250e9b3bdefe42bb_211x124.jpg) 如果node安裝包集成了npm(node package manage)，那我們輸入命令npm -v 也可以看到npm的版本 ![](https://box.kancloud.cn/7950e59c32f599698ab59a3f78fbba3d_177x50.jpg) node的官方使用手冊：https://nodejs.org/dist/latest-v6.x/docs/api/ npm的官方使用教程：https://docs.npmjs.com/ ## 二、Express下載使用下面我們來安裝下[express框架](http://www.expressjs.com.cn/starter/installing.html)，命名行輸入： > npm install express -g 接下來我們使用npm全局安裝個[express-generator](https://github.com/expressjs/generator)，有了這個我們的才能使用express命令 > npm install express-generator -g 下載完后，打開目錄（運行->輸入appdata）就可以看到express-generator已經安裝好了，圖截短了，要不也能看到express ![](https://box.kancloud.cn/be545eb5c46c1f93093c6fd276059162_521x146.jpg) 這之后，我們就可以使用express創建我們的項目啦命令行切換到指定盤符，先看下express的命令參數 ![](https://box.kancloud.cn/81c83595040e950c637475f1ecbe38bf_766x348.jpg) 創建項目，我們使用[ejs模板引擎](http://www.embeddedjs.com/) ![](https://box.kancloud.cn/f555f31fdd9ff63a45f143811e3afa0f_199x36.jpg) 默認目錄結構 ![](https://box.kancloud.cn/dcaeb7aadf9dadc70943a4ead4de923b_322x170.jpg) bin 啟動文件 public 公共靜態資源 routes 路由 views 視圖模板 app.js 入口文件進入目錄后，使用下面命令，安裝依賴模塊 >npm install 然后就可以輸入下面命令，就可以啟動項目了 > npm start 訪問 localhost:3000 （3000是node的默認端口號，如果需要開啟的node項目多了，可以修改端口號，對應訪問） ![](https://box.kancloud.cn/07acb9f2cd154c23eadabc97bba52e8e_254x194.jpg) 費話了那么久，重點來了 ## 三、GET方式請求接口先在app.js里添加這么一句，讓我們可以直接訪問目錄文件 ![](https://box.kancloud.cn/bd79c0ce6940447bc5f251cfa7771f1b_758x274.jpg) 然后我們在項目根目錄下創建html/test.html 下面我們就可以寫代碼了 test.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var xhr = new XMLHttpRequest(); xhr.open('get', '/users', true); xhr.responseType = 'json'; xhr.send(null); xhr.onreadystatechange = function() { if(xhr.status===200 && xhr.readyState===4) { console.log(xhr.response); } } </script> </body> </html> ~~~ routes/users.js ~~~ var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/users', function(req, res, next) { res.send({"name": "tom", "age": 24}); }); module.exports = router; ~~~ 訪問：http://localhost:3000/html/test.html 返回結果 ![](https://box.kancloud.cn/c8c0c7b0a57b758bbf7be8004a2b5acd_232x65.jpg) 如果不想每次修改靜態文件都重新npm start 可以下載 [supervisor ](https://github.com/petruisfan/node-supervisor)然后使用supervisor命令啟動項目 ![](https://box.kancloud.cn/a7bb1ca80ef1a5e7d8f03a7328f07466_265x57.jpg) ## 四、[node連接mysql](http://www.runoob.com/nodejs/nodejs-mysql.html) 下篇會講到 node連接socket 可以先了解下[socketio](https://socket.io/)