Node.js的express框架

初次写博客，有不足的地方，还请大家多多包涵！

话不多说，我是一个从事前端工作一年的小白，对于前端的知识认识还是比较少的。听大牛说写博客分享可以提升自己的技能。所以就来各位大牛面前献丑一波0.0

是因为看到node的介绍是想要创建自己的服务，新手比较适合node一些。今天我是来分享一下我使用node.js中的express框架的一些基本心得。

首先你是要有安装node的，，安装教程在这个里面，

http://www.runoob.com/nodejs/nodejs-install-setup.html

按照教程安装好以后，我们开始使用express框架，我用express写了一个简单的小Demo，只是获取到一条数据（我是一张图片）。

1：我们需要有是三个文件，一个是html文件，和一个js文件（在js文件里面写服务），第三个是json文件（服务来获取的数据）

ajax.html  和nono.js 以及ajaxaa.json  和 jquery的js文件，json数据比较简单，就一个对象

2：首先是我们的静态的页面，没有多大要求，能有一个装数据的地方就可以的。

1 <div class="all">
2 <div class="image">
3 
4 </div>
5 <p class="info"></p>
6 </div>

3：js文件里面，我们这样写

             因为要用的是express框架，所以我们先下载上这个框架，打开相应文件夹cmd进入小黑框（我是这样叫的）然后我们输入命令cnpm install express --save这个命令出现以下就是成功了，文件夹里面或多出package.json的文件

其次我么你在js的文件里面引入这个框架，这样写  var ex = require("express");就是引入了，定义一个变量调用他 var app = ex();然后我们可以用这个框架先开启一个服务，代码如下

1 var ex = require("express");
2 var app = ex();
3 
4 app.get("/", function(req, res) {
5 res.send("你好呀")
6 });
7 var r = app.listen(8124, function() {
8 console.log("开启成功")
9 })

用我们定义的这个变量写一个gte方法，里面有两个参数，一个是和前台页面相同的一个参数，后面是一个回调函数，函数里面有两个对象，来处理和相应数据 req，res

res.send（）是传送HTTP响应,我们来启动服务，打开相应的文件夹下，cmd进入黑窗口，输入node nono.js          是node+js文件名

服务开启成功，我们打开浏览器，输入我们的端口号  http://localhost:8124/  打开之后可以看到，我们在send()里面输入的话

到这里我们已经开启一个服务了，下面我们开始写获取到json里面的数据，我们用fs来进行读取和写入，file是对应的我们的json文件的位置

var ex = require("express");
var app = ex();
var fs = require("fs");
var file = "../info/ajaxaa.json"

下面我会粘贴进去一段话，这是用来防止跨域问题的，当然我们的res.send("你好呀")这段话就可以注释了，

1 res.writeHead(200, {
2 "content-type": "text/html;charset=utf-8",
3 "Access-Control-Allow-Origin": "*"
4 });

下面我们是要来读取json里面的数据 所以要用到  readFile这个方法，代码如下，其中 这个方法里面有两个参数，一个file是我们上面定义的json文件地址变量，后面跟一个函数，函数里面两个参数err是失败，data就是我们的数据，

如果失败，那就打印一下，只是为了方便看出来，不写也没事，成功之后我们也打印一下，之后在进我们小黑里面输入命令结果如下：其中显示服务开启成功，以及成功获取到数据，

1 fs.readFile(file,function(err,data){
2 if(err){
3 console.log("'失败");
4 }else{
5 console.log("成功")
6 }
7 })

下面就是比较复杂的一个问题，我也是搞了有一段时间，我们打印一下数据data会显示一堆的二进制的，解决方法是 data.toString()吧他转换成了不是二进制的，在然后我们需要用 var arr1 = JSON.parse(arr); 吧它转出那个对象形式

但是我们要传给前台的必须是字符串形式的，我们还需在转换一下 JSON.stringify(arr1)，这样我们就可以向前台传送数据了，这是真题的后js文件里面的代码

 1 var ex = require("express");
 2 var app = ex();
 3 var fs = require("fs");
 4 var file = "../info/ajaxaa.json"
 5 
 6 app.get("/", function(req, res) {
 7 //res.send("你好呀")
 8 res.writeHead(200, {
 9 "content-type": "text/html;charset=utf-8",
10 "Access-Control-Allow-Origin": "*"
11 });
12 fs.readFile(file,function(err,data){
13 if(err){
14 console.log("'失败");
15 }else{
16 var arr = data.toString();
17 console.log(arr);
18 var arr1 = JSON.parse(arr);
19 console.log(arr1);
20 res.end(JSON.stringify(arr1))
21 }
22 })
23 });
24 var r = app.listen(8124, function() {
25 console.log("开启成功")
26 })；

前台的获取 ：

 我是使用的jq的ajax获取的，info是p标签，url是我们后台自己启动的服务的接口，$ajax里面是有基本的四个属性，type是我们要用get还是post来操作，我们本次讲的是get,下次试一下post

url就是我们的后台接口，asyns:是否异步处理，默认的true，success是成功之后的操作，一个函数，里面是res成功，也是有一个判断，如果让成功，我们就获取到这个对象，获取到的是后台传来的字符串，我们是呀操作对象的，用json.parse来把字符串转换成对象形式，json.stringify是把对象转换成字符串形式。

获取到这个对象之后，用for   in 来循环这个兑现，我们的object[o],是我们的每一个对象数据，object[o].p就是获取到我们的数据，可以把它写进我么你的p标签里面。

 1 var info = $('.info');
 2 var url = "http://127.0.0.1:8124"
 3 $.ajax({
 4 type: "get",
 5 url: url,
 6 async: true,
 7 success: function(res) {
 8 if(res) {
 9 var obj = JSON.parse(res);
10 console.log(obj);
11 for(var o in obj) {
12 console.log(obj[o].p);
13 var str = `<span>` + obj[o].p + `</span>`
14 info.html(str)
15 };
16 } else {
17 console.log("失败");
18 }
19 }
20 });

今天这个json的express框架就这么一些了，第一次写博客内容，有不好的也希望大家多指出来，大家一起进步。我会持续更新的。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有