码迷,mamicode.com
首页 > Web开发 > 详细

看得懂的 Node.js(三)—— Express 启航

时间:2017-09-05 19:08:24      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:wls   brk   udp   ssm   jdis   mbr   tpm   lex   lca   

如果看过上一篇《看得懂的 Node.js》,就会发现手动搭建一个 web 服务器还是比较繁琐

而 express 就是一个可以极大地提高开发效率的 web 开发框架

 

一、创建项目

在 express 4.0 之前,我们使用 npm install -g express 来全局安装 express

但是 4.0 之后,express 的命令行工具被单独分离出来,叫做 express-generator

npm install -g express-generator

如果了解过 vue,express-generator 和 express 的关系就像 vue-cli 和 vue 的关系

然后可以通过 express --version 命令来验证是否安装成功

技术分享

 

然后在需要创建项目的目录下,直接使用 express 命令创建项目

express Node-Project

上面的 Node-Project 是自定义的项目名称

命令执行完成后,会在当前目录生成一个 Node-Project 项目文件夹

进入项目目录(cd Node-Project),安装依赖

npm install

然后通过 npm start 命令启动项目

npm start

开发过程中建议在 debug 环境中运行,所以通常使用这个命令启动项目:

set DEBUG=Node-Project & npm start

然后在浏览器中打开 http://localhost:3000/ 就能打开项目

如果 3000 端口被占用,可以在 bin / www 文件中修改端口

技术分享

 

 

二、认识路由

在生成的项目文件中,有一个 routes 文件夹,存放着 express 框架预置的基本路由

技术分享

路由一般由一个 URI、HTTP 请求(GET、POST)和若干个句柄组成

每个句柄的结构通常都是 app.METHOD(path, callback)

比如 users.js 就是一个最基本的路由

技术分享

 

然后在 app.js 中引入模块

技术分享

并配置路由结点

技术分享

然后在浏览器中打开 http://localhost:3456/users 就能查看到响应内容

技术分享

 

如果希望路由发送一个 html 页面,只需要使用 res.sendfile(url)

express 的结构中,通常在 views 中存放静态文件

假如已经在 views 文件夹下准备了一个 test.html文件,然后在 users.js 中追加一个句柄

router.get(/test, function(req, res) {
  res.sendfile("./views/test.html")
});

然后打开 http://localhost:3456/users/test 就能查看到 test.html

 

 

三、加载静态文件

如果刚才的 test.html 文件中,关联了外部 css 或者 js 文件,会发现这些文件都没有被加载

 

看得懂的 Node.js(三)—— Express 启航

标签:wls   brk   udp   ssm   jdis   mbr   tpm   lex   lca   

原文地址:http://www.cnblogs.com/wisewrong/p/7366359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!