Express搭建一个简单后台服务器

Express框架

Web 应用程序

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。

API

使用您所选择的各种 HTTP 实用工具和中间件,快速方便地创建强大的 API。

性能

Express 提供精简的基本 Web 应用程序功能,而不会隐藏您了解和青睐的 Node.js 功能。

Express-路由基本使用

下载:npm install express --save

Hello world

新建一个server.js文件,然后输入:

const express = require('express');
const app= express();

app.get('/', (req, res)=>{
    req.send('Hello world');
});
app.listen(8083, ()=>{
    console.log('Server is running at http://localhost:8083')
})

然后运行:node server.js
打开:http://localhost:8083/
就出现:

11546413582_.pic.jpg

请求和响应

Express 应用使用回调函数的参数: request 和 response 对象来处理请求和响应的数据。

app.get('/', function (request, response) {
   // --
})

request 和 response 对象的具体介绍:

Request 对象

request 对象表示 HTTP 请求,包含了请求查询字符串,参数,内容,HTTP 头部等属性。常见属性有:

req.app:当callback为外部文件时,用req.app访问express的实例
req.baseUrl:获取路由当前安装的URL路径
req.body / req.cookies:获得「请求主体」/ Cookies
req.fresh / req.stale:判断请求是否还「新鲜」
req.hostname / req.ip:获取主机名和IP地址
req.originalUrl:获取原始请求URL
req.params:获取路由的parameters
req.path:获取请求路径
req.protocol:获取协议类型
req.query:获取URL的查询参数串
req.route:获取当前匹配的路由
req.subdomains:获取子域名
req.accepts():检查可接受的请求的文档类型
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages:返回指定字符集的第一个可接受字符编码
req.get():获取指定的HTTP请求头
req.is():判断请求头Content-Type的MIME类型

Response 对象

response 对象表示 HTTP 响应,即在接收到请求时向客户端发送的 HTTP 响应数据。常见属性有:

res.app:同req.app一样
res.append():追加指定HTTP头
res.set()在res.append()后将重置之前设置的头
res.cookie(name,value [,option]):设置Cookie
opition: domain / expires / httpOnly / maxAge / path / secure / signed
res.clearCookie():清除Cookie
res.download():传送指定路径的文件
res.get():返回指定的HTTP头
res.json():传送JSON响应
res.jsonp():传送JSONP响应
res.location():只设置响应的Location HTTP头,不设置状态码或者close response
res.redirect():设置响应的Location HTTP头,并且设置状态码302
res.render(view,[locals],callback):渲染一个view,同时向callback传递渲染后的字符串,如果在渲染过程中有错误发生next(err)将会被自动调用。callback将会被传入一个可能发生的错误以及渲染后的页面,这样就不会自动输出了。
res.send():传送HTTP响应
res.sendFile(path [,options] [,fn]):传送指定路径的文件 -会自动根据文件extension设定Content-Type
res.set():设置HTTP头,传入object可以一次设置多个头
res.status():设置HTTP状态码
res.type():设置Content-Type的MIME类型

Express-路由

我们已经了解了 HTTP 请求的基本应用,而路由决定了由谁(指定脚本)去响应客户端请求。
在HTTP请求中,我们可以通过路由提取出请求的URL以及GET/POST参数。

路由的基本形式:
app.METHOD(PATH, HANDLER)

  1. app 表示的是一个Express的实例
  2. METHOD 是http请求的方法(get, psot..)
  3. PATH 服务器上的路径
  4. HANDLER请求之后的执行函数

下面的示例说明了如何定义路由:

// 对/news 页面进行get请求
app.get('news', (req, res)=>{
    res.send('Hello news');
});
// 对/about 页面进行post请求
app.post('about', (req, res)=>{
    res.send('Hello about');
});
// 对/list* 可匹配 /list+任意字符
app.get('/list*', (req, res)=>{
    res.send('Hello list pages');
})

然后运行:node server.js
打开:http://localhost:8083/

21546417068_.pic.jpg

31546417103_.pic.jpg

41546417120_.pic.jpg

Express-搭建静态资源库

Express 提供了内置的中间件 express.static 来设置静态文件如:图片, CSS, JavaScript 等。

你可以使用 express.static 中间件来设置静态文件路径。例如,如果你将图片, CSS, JavaScript 文件放在 public 目录下,你可以这么写:
app.use(express.static('public'));

现在,你就可以访问 public 目录中的所有文件了:

public/index.html
public/images
public/images/bg.jpeg
public/css
...

如果要使用多个静态资源目录,请多次调用 express.static 中间件函数:

app.use(express.static('public'))
app.use(express.static('files'))

Express 在静态目录查找文件,因此,存放静态文件的目录名不会出现在 URL 中。
但是您可以给静态目录添加一个路由:
app.use('/static', express.static(path.join(__dirname, 'public')))
设置/static/public目录的路由。
现在,你就可以通过带有 /static 前缀地址来访问 public 目录中的文件了。

http://localhost:8083/static/css
http://localhost:8083/static/css/index.css
http://localhost:8083/static/image
http://localhost:8083/static/images/bg.jpeg
http://localhost:8083/static/index.html

为了安全,最好使用绝对路由:
app.use('/static', express.static(path.join(__dirname, 'public')))
然后运行:node server.js
打开:http://localhost:8083/static
就可以访问public下的所有文件,如图:

61546420083_.pic_hd.jpg

Express-模板引擎之EJS

EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。

下载Ejs: npm install ejs --save
同目录下新建myejs.js:

const express= require('express');
const app = express();
//设置模板文件的目录,并且新建一个viwes的目录
app.set('views', './views');
//注册模板引擎
app.set('view engine', 'ejs');
//使用res.render()来渲染一个视图并将呈现的HTML字符串发送给客户端;
app.get('/', function(req, res,) {
    res.render('index', { title: '测试' });
});
//监听8083端口
app.listen(8083, ()=>{
    console.log('Server is running at http://localhost:8083')
})

在新建views目录中新建index.ejs:

 <h1><%= title %></h1>

然后运行:node myejs.js
打开:http://localhost:8083
即可看到:

当然,也可以返回一个json文件来渲染视图:
在同目录下新建一个data.json:

{
    "list": [
    { "name":"小明" , "age":"6", "sex": "男"},
    { "name":"小红" , "age":"4" ,"sex": "女"},
    { "name":"小亮" , "age":"5" ,"sex": "男"}
    ],
    "source":"神奇二班"
}

然后更改myejs.js:

const express= require('express');
const fs= require('fs');
const app = express();

//设置模板文件的目录,并且新建一个viwes的目录
app.set('views', './views');
//注册模板引擎
app.set('view engine', 'ejs');
//使用res.render()来渲染一个视图并将呈现的HTML字符串发送给客户端;
app.get('/', function(req, res,) {
    getDataJson((dataJson)=>{
        console.log(dataJson);
        res.render('index', dataJson);
    })
});
//访问data.json 拿到数据解析并返回
const getDataJson=(callBack)=>{
    fs.readFile('./data.json', (err, data)=>{
        if(!err){
            let jsonData= JSON.parse(data);
            callBack(jsonData);
        }else{
            throw err;
        }
    })
}
//监听8083端口
app.listen(8083, ()=>{
    console.log('Server is running at http://localhost:8083')
})

然后更改index.ejs:

<h4><%=source %></h4>
<ul>
    <% for(var i=0; i<list.length; i++){ %>
        <li><%= list[i].name %> | <%= list[i].age %> | <%= list[i].sex %></li>
    <% } %>    
</ul>

然后在运行:
然后运行:node myejs.js
打开:http://localhost:8083

参考:
GitHub源码
Express官方文档
EJS 模板引擎

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容