菜鸟学习nodejs--express(二)路由

什么是路由

路由这个次不是nodejs专属,在web应用程序中就有路由,路由描述应用程序是否以及如何对调http(超文本传输协议)请求进行应答,当用户在与应用程序或者网站交互的时候,浏览器就会生成这些请求。

路由只是个用来定义应用程序中http请求的最终点的术语,所以如果希望应用程序能够做点什么,那么就必须使用路由了。

Express中的路由

在Express使用HTTP动词来定义路由,HTTP动词描述对服务的请求类型,最为可能用到的动词Get,Post。

1. GET–从服务器获取数据

2. POST–将数据发送给服务器

其他的也有一些如:PUT,Delete,HEAD,OPTION,TRACE。

node.js路由的从无到有

没有路由

我们先创建一个没有使用路由的应用程序吧。如我们上一片博客Express的安装和使用,我们新建express_routing文件夹,在文件夹内Shift+鼠标右键,选择在此处打开命令窗口,然后输入:

express express_routing

cd express_routing && npm install

上边的命令就是创建Express项目,并引入一些相应的模块。

打开app.js,在倒数第二行假如app.listen(3000);加入端口号。

在命令窗口继续输入:

node app.js

然后再浏览器输入http://127.0.0.1:3000,然后观察页面

可是如果我们输入的地址是http://127.0.0.1:3000/about的话,会出现404的错误,这就是about没有路由可以使用,那么我们改如何使用呢。

有路由

其实我们平时在做web项目的时候一直再用路由,只是可能我们不知道那就叫路由,如我们常用的从服务器获取数据的GET请求,给服务器数据POST。接下来我们分别介绍一下

添加GET路由

为了使用GET路由,我们需要Get HTTP请求,在上边的没有路由的例子中,打开app.js在var app = express()下边加上下边的代码

app.get(‘/about‘,function(req,res){
    res.send(‘孟海滨是个大帅哥‘);
});

运行改js,node app.js,在浏览器输入http://127.0.0.1:3000/about,这样我们的这个程序就写完了。看看效果如何。

添加POST路由

我们说完了添加GET路由,那么接下来我们说一下POST路由,添加POST路由和添加GET路由是一样的,只是把动词换做了post,如下:

app.post(‘/‘,function(req,res){
    res.send(req.body);
});

在这个示例中,应用程序接收post请求,送到index页面,并将数据输送到浏览器中。

新建一个文件夹express_post,在该文件夹下打开控制命令窗口。输入:

express express_post
cd epxress_post && npm install

在app.js中添加app.listen(3000);

在生成的程序中,打开view–>index.jade,添加如下代码

h2 Form example
form(mehtod=‘post‘,action=‘/‘)
    fieldset
        legend Add a user
        p
            label First name
            input(name=‘user[first_name]‘)
        p
            label Last name
            input(name=‘user[last_name]‘)
        p
            input(type=‘submit‘,value=‘Save‘)

在浏览器输入http://127.0.0.1:3000,我们会看到浏览器出现了这个界面

然后我们输入一些信息,就会在地址栏出现我们输入的信息了。

使用路由传送参数

在web项目中,我们通常使用路由来传递参数,并且根据参数做相应的回应。例如下边的url

user/123
department/456

第一个url是用户ID位123的信息显示,第二个是部门id是456的信息显示。而且nodejs同样也支持这种方式。

1.创建Express站点

express express_param
cd epxress_param && npm install

2.在app.js中添加如下代码

app.get(‘/users/:id‘, function(req, res){
  res.send(‘用户ID是‘ + req.params.id);
});

app.listen(3000);

3.启动项目

node app.js

4.在浏览器输入:http://127.0.0.1:3000/users/123,查看结果。

注意:你可能发现了,我每次都是把路由放入到了app.js,如果我们的页面需要大量的数据传输,可能使我们的程序特别复杂,难以维护,所以我们需要用一个类似于web项目的js文件来专门写这些东西,而这个Nodejs已经为我们考虑好,那就是我们的route文件夹下的index.js文件,我们可以直接写在这里边,在我们的app.js中写上app.get(‘/‘,routes.index);就可以了

使用本地变量

在res.render函数中,本地变量的使用要掌握关键所在,设置要在视图层展示的数据。

将数据传递到视图层。

我们可能对数据要进行一些处理。例如拼接字符串,计算等。无论做什么,都需要在展示之前处理好。

app.js中添加如下代码

app.get(‘/‘, function(req, res){
  var user = { 

      first_name: ‘Keyser‘,
      surname: ‘Soze‘,
      address: ‘Next door‘,
      facebook_friends: ‘4‘

  };
  res.render(‘index.jade‘, { title: ‘User‘, user: user });
});

index.jade中添加如下代码:

h3 First Name
p= user.first_name

h3 Surname
p= user.surname

h3 Address
p= user.address

h3 Facebook Friends
p= user.facebook_friends

执行node app.js,我们会看到如下结果

小结

我们接着在上一篇的Express的基础上来讲了在node.js中获取和传输数据,使用参数等的方法,其实无非就是一个GET,POST,参数的使用。那么Express到底是干什么的呢。

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 说白了,一个快速为我们创建web前段的框架。

时间: 2024-10-26 10:59:25

菜鸟学习nodejs--express(二)路由的相关文章

学习nodejs+express+angular+socket.io ,投票demo

最新对nodejs感兴趣,通过学习网上的nodejs例子,把别人的例子自己敲了一遍.虽然别人都有现成的代码.但自己敲出来之后还是会有一些小bug.然后通过慢慢的学习.终于把这个例子给跑起来了.记录一下. 环境: 安装nodejs ,下载地址 https://nodejs.org/en/ 安装mongodb,官网上下载地址被墙了(不能说mongodb官网被墙了,是官网上引用了google上的jquery库被墙了,导致网页上的js报错,下载按钮出不来). 这是官网地址:https://www.mon

android菜鸟学习笔记8----Activity(二)

关于Activity的生命周期: 下面是Activity整个生命周期中,状态发生变化时所回调的方法,它们对应着Activity完整的生命过程. void  onCreate(Bundle savedInstanceState):Activity被创建时回调 void  onStart()  :在onCreate()或者onRestart()之后被调用,即Activity第一次创建或者从不可见变为可见状态时调用. void  onResume()  :恢复到活动状态时回到,在onStart()之后

《r语言实战》菜鸟学习笔记(二)

这一部分将要说明R语言的数据类型以及数据输入方面的内容 因子 R语言中变量可以归结为名义型,有序型和连续变量. 名义型 :没有顺序之分的变量.如 天气 阴晴等 有序型:有顺序关系,但不是数量关系. 心情好 坏 适中等 连续型:就是同是有数量和顺序.当然这里的连续型并不是数学中的连续,也包括离散数据 名义型和有序型在R中称为因子. 下面介绍factor()函数 diabetes <- c("Type1", "Type2", "Type1",

android菜鸟学习笔记22----ContentProvider(二)ContentObserver的简单使用

现在有这样一个应用A通过ContentProvider提供自己的数据给其他应用,应用B通过ContentResolver获取应用A中提供的数据,并将其展示在ListView中,而应用C通过ContentResolver修改应用A中的数据,或者添加新的数据.现在的问题是应用C修改A中数据后,应用B的ListView中显示的还是历史数据…… 具体程序如下: ContentProvider和插入数据的应用分别复用上一篇中的两个应用,然后新建一个应用,用于获取ContentProvider中的数据,并在

vue.js菜鸟学习之(二)

这次利用闲余时间了解使用了v-model组件,v-model是一个双向绑定的组件,所谓双向绑定就是交互双方都可绑定.v-bind属性绑定是单向绑定 废话少说,上代码.以下实例主要是做了一个简易计算器.主要用意在于体验一下v-model双向绑定,其他的不重要. 要是小白拿来调试,其中有几个注意的点: @1 建议使用VScode @2 将vue.js引用文件的路径换为自己的,就是以下的路径,该路径为相对路径. <script src="vue.js"></script&g

用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢nodejs路由和Ajax之间的数据传输,也就是表单提交,然后在用nodejs把数据写入mysql数据库 用到的东西比较多,但是还是很有趣的 1.安装node.js 安装node.js,直接去官网下载然后根据需求点击下一步就好了 Node.js安装包及源码下载地址为:https://nodejs.org

菜鸟的jQuery源码学习笔记(二)

jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: 1 jQuery.fn = jQuery.prototype = { 2 //成员变量和方法 3 } 这里给原型对象起了一个别名叫做jQuery.fn.要注意的是这个jQuery.fn可不是jQuery对象的属性,而是jQuery构造方法本身的属性,它是不会传给它所创建的对象的.如果你在控制台敲$().fn的话输出的结果会是undefined.接下来看看原型对象里面有些

IOS开发---菜鸟学习之路--(二)-数据获取

http://www.cnblogs.com/PleaseInputEnglish/p/3432024.html IOS开发---菜鸟学习之路--(二)-数据获取,布布扣,bubuko.com

开始nodejs+express的学习+实践(1)

开始nodejs+express的学习+实践(1) 开始nodejs+express的学习+实践(2) 开始nodejs+express的学习+实践(3) 开始nodejs+express的学习+实践(4) 开始nodejs+express的学习+实践(5) 开始nodejs+express的学习+实践(6)

Nodejs学习-2 express ejs 片段视图

在Express框架下,使用ejs模板引擎: 支持默认的layout布局需要express-partials模块: 使用include代替partials: 片段视图显示方式也与3.x版不同,采用如下方式: routers/index.js 添加: router.get('/list', function(req, res) {   res.render('list',{     layout:false,     title: 'Express',     items: ['1', '2',