编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

express开发(一)简介与搭建(express创建项目)

wxchong 2024-10-22 17:55:31 开源技术 13 ℃ 0 评论

上周末去了趟上海书城,不愧是上海数得上号的书城,流行的科技书应有尽有,话不多说直接上图。

最经典的C语言O(∩_∩)O

最流行的java(づ ̄ 3 ̄)づ

超酷的R语言/(ㄒoㄒ)/~~

然而,身为一个坚定的前端JSer,我还是选择了Node与javascript

上图!

Node赛高!Express赛高!

下面让题主来以一个长者的身份讲讲对express的简单理解,看完后你们还会知道怎样搭建一个属于自己的简单的express服务端。(此中有膜意,欲辩已忘言。)

Express简介

Express网站(http://expressjs.com/)上是这样介绍Express的:"Fast, unopinionated, minimalist web framework for Node.js"。翻译过来就是:“精简的、灵活的Node.js Web程序框架,为构建单页、多页及混合的Web程序提供了一系列健壮的功能特性。”(没错,翻译过来就是这么长)

Express的缔造者TJ·Holowaychuk说Express是在Sinatra的启发下创建的,后者是一个基于Ruby的框架。Express借鉴一个Ruby上的框架并不奇怪:Ruby致力于让Web开发变得更快、更高效、更可维护,并衍生了大量的Web开发方式。

Express还与Node的一个插件--connect有紧密的联系,然而在Express4.0中,connect插件被去掉了,只剩下了static中间件。

搭建一个简单的项目

下面我们要建一个简单的基于express4.0的小项目,会实现一些基础的功能:

  • 定制404、500页面

  • 使用express中的res.send、res.set、res.status替换Node中自带的res.end、res.writeHead

  • 了解express中的路由

首先用npm安装express,在你的文件夹下,如test中运行

npm init

初始化之后,运行

npm install -S express

这样npm会将express下载道node_modules中,并更新你的package.json文件,将express写入你的依赖中。

接下来创建一个mydemo.js文件,作为我们项目的入口。

(Node与Express开发的作者Ethan Brown任务,项目的入口文件命名不应该是千篇一律的index.js或者app.js,应该基于你的项目名来命名。npm init默认的使用index.js,如果你使用了别的文件来做主文件,记得修改package.json中的main属性。)

在其中输入如下代码:

var express = require('express');

var app = express();

app.set('port', process.env.PORT || 3000);

//定制404页面

app.use(function(req, res){

res.type('text/plain');

res.status('404');

res.send('404 - Not Found');

});

app.use(function(req,res){

console.err(err.stack);

res.type('text/plain');

res.status('500');

res.send('500 - Server Error');

});

app.listen(app.get('port'), function(){

console.log('Express is started on http://localhost:' + app.get('port') + ';press Ctrl + C to terminate.');

});

然后在命令行输入

node mydemo.js

访问http://localhost:3000/你会看到它返回了一个404页面,因为你还没设置“/”路径。

现在我们的项目结构如下。

现在,我们给首页和关于页面加上路由。在404处理器之前加上两个新路由。

'use strict';

app.get('/', function(req, res){

res.type('text/plain');

res.send('mydemo home page');

});

app.get('/about', function(req, res){

res.type('text/plain');

res.send('about page');

})

//定制404页面

app.use(function(req, res){

res.type('text/plain');

res.status('404');

res.send('404 - Not Found');

});

Express官方文档中有这样一个命令——app.VERB。这里的app.VERB并不是一个具体的方法,而是自带HTTP的动词(最常见的是get和post)。这种方法有两个参数:一个路径和一个函数。

之后再次运行程序,就可以看到我们的首页和about页面了。

现在我们对程序做一些小小的改动,是的路由跟项目入口文件分离开来,这在大型项目中是必要的过程,因为路由一旦过多再跟启动文件混合在一起就不易维护,所以要将他们分离开来。

创建一个新的文件夹routes,在其中创建文件main.js

输入如下代码:

'use strict';

var router = require('express').Router();

router.get('/', function(req, res){

res.type('text/plain');

res.send('mydemo home page');

});

router.get('/about', function(req, res){

res.type('text/plain');

res.send('about page');

})

module.exports = router;

这里使用了express的router方法,是express推荐的router中间件,使用也很简单,跟之前用app实例直接操作路由没太大的区别。之后我们将mydemo.js修改如下:

'use strict';

var express = require('express');

var app = express();

var main = require('./routes/main');

app.set('port', process.env.PORT || 3000);

app.use('/', main);

//定制404页面

app.use(function(req, res){

res.type('text/plain');

res.status('404');

res.send('404 - Not Found');

});

app.use(function(req,res){

console.err(err.stack);

res.type('text/plain');

res.status('500');

res.send('500 - Server Error');

});

app.listen(app.get('port'), function(){

console.log('Express is started on http://localhost:' + app.get('port') + ';press Ctrl + C to terminate.');

});

我们用var main = require('./routes/main');引入创建的route文件,再用app.use('/',main)使用。运行后会发现,效果跟之前是一样的。当然你也可以设置app.use('/tset', main)。这样你要访问localhost:3000/test和localhost:3000/test/about才能看到你设置的两个路由。

现在我们的项目结构如下:

小结

我们用express搭建了一个简单的项目,使用了router中间件,app.get,app.set方法。

之后我们会讲exprss中的视图和布局,并使用handlebars来作为我们的前端模板。

大家可以访问我的github。

https://github.com/ZZR-china/node_express

做了些微小的工作,谢谢大家。

欢迎订阅和点赞收藏哦O(∩_∩)O。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表