最近想写个个人博客，发现网上的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
好现在我们就可以来运行项目了
$ 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了,但是我想说学习还真是一件很累的事情！！！
作者：好书生
链接：https://www.jianshu.com/p/b5169a6ff254
共同学习，写下你的评论
评论加载中...
作者其他优质文章
