初探node express 框架

@(云客技术)[node|express|最新版]
最近想写个个人博客,发现网上的express教程都有跟不上时代了,
我目前用到的express框架是4.13版本的,然而网上的基本都是4.0版本以下的,所以通过自己最近的踩坑总结了一些express框架的运用了,来给大家演示一下,

安装node

node官网下载稳定版安装

1474204513426.png

一路点下去就好

测试node是否安装成功

  $ node -v

测试结果如下图


1474204974578.png

安装express框架
在网上多数教程介绍全局安装express框架的命令

  $ npm install -g express

看到目录树啦 ok我们安装成功了!但是在接下来我们初始化一个express框架项目的时候出问题了
我们输入指令

  $ express ejs ourdome

然而出问题了 问题的提示 express on found,说明我们并没有全局安装成功express
然后我就在网上绕了一个世纪回来,原来在epxress4.0以后全局安装的命令变量改变了并不是这个!!!好吧 心里略微有点不平。
输入指令

  $ npm install -g express-generator

然后等待安装
初始化ejs模板项目

  $ express ejs ourdome
  $ cd ourdome
  $ npm install
![1474207007429.png](http://upload-images.jianshu.io/upload_images/2905209-31032ff9b9bc9875.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

好现在我们就可以来运行项目了

  $ node ./bin/www

访问网址 http://127.0.0.1:3000

1474206779569.png

现在我们初始化项目已经完成了
现在我们可以查看项目目录


1474207051351.png

bin目录是整个项目的启动文件在的位置

node_modules是整个项目运行的依赖文件

public是项目运行的时候外部可以访问到的地方通常放js,css,images

routes是外部访问项目的路由配置文件

view就是我们的ejs文件存放的地址

查看ejs文件


1474207221237.png

再看路由文件

1474207282461.png

路由文件
第一行 导入express包
第二行 导入路由
中间配置路由
router.get说明这是一个get访问的路由,get里面的连个参数,第一个是表示访问的相对路劲,也就是我们通常说的路由,第二个参数是个回调函数,这个回掉函数包含三个参数 req,代表的请求体(所有的请求信息都会在这里) res代表的是返回体(所有的返回信息,以及返回方法都在这)next是不处理交由下个路由拦截处理
res.router里面的两个参数 第一个是表示ejs文件 相对views目录下的相对位置后面不需要跟后缀名第二个参数是在ejs里面渲染的json对象数据
如上图 json里面的{title:“Express"}在ejs里面渲染为 <%= title%>

在一个路由文件里可以写多个路由如图

1474208107984.png

访问下面的那个路由 为http://127.0.0.1:3000/next

最后面导出路由文件

在ejs文件中引用public文件

如上面ejs文件图片所示在head位置引入css样式文件 /stylesheets/style.css 代表绝对路径访问文件

在app.js文件汇总配置路由

有一天我发现我想提出一个大的分类路由,在index.js路由中一级路由和其二级路由并没有什么关系,
这时候我们就可以在app.js里面修改路由 首先看原来的app.js文件的代码

var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);

这两段代码是官方的配置路由 我们来解读一下
第一段代码 是初始化路由文件所在地
第二段代码 是初始化路由的分配方式('/'是当前路径也就是域名下直接路由,'/users'是域名下再加/user才能访问到)
我们可以这样添加代码

var pack = require('./routes/pack');
app.use('/pack', pack);

这时候我们就可以访问域名下/pack
然后添加路由文件 ,在router下新建pack.js文件,在pack.js文件中添加

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('pack', { title: 'Pack' });
});
module.exports = router;

然后在views 下 新建pack.ejs文件造pack.ejs文件中添加

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

我们需要重新启动
Ctrl+C停止服务

 $ npm start

这样路由就已经配置好了 现在可以访问了http://127.0.0.1:3000/pack

1474210983551.png

路由的配置就到这了,还有一个更改端口

到/bin/www文件中找到这一行代码

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

自行更改端口号

到这就算ok了,但是我想说学习还真是一件很累的事情!!!

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

推荐阅读更多精彩内容