初探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了,但是我想说学习还真是一件很累的事情!!!

推荐阅读更多精彩内容