Node.js的express框架

2018-06-24 02:02:12来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

话不多说,我是一个从事前端工作一年的小白,对于前端的知识认识还是比较少的。听大牛说写博客分享可以提升自己的技能。所以就来各位大牛面前献丑一波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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:pc端页面打包成安卓apk

下一篇:关于洗牌算法的错误认识