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/)