@(云客技术)[node|express|最新版]
最近想写个个人博客,发现网上的express教程都有跟不上时代了,
我目前用到的express框架是4.13版本的,然而网上的基本都是4.0版本以下的,所以通过自己最近的踩坑总结了一些express框架的运用了,来给大家演示一下,
安装node
到node官网下载稳定版安装
一路点下去就好
测试node是否安装成功
$ node -v
测试结果如下图
安装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
现在我们初始化项目已经完成了
现在我们可以查看项目目录
bin目录是整个项目的启动文件在的位置
node_modules是整个项目运行的依赖文件
public是项目运行的时候外部可以访问到的地方通常放js,css,images
routes是外部访问项目的路由配置文件
view就是我们的ejs文件存放的地址
查看ejs文件
再看路由文件
路由文件
第一行 导入express包
第二行 导入路由
中间配置路由
router.get说明这是一个get访问的路由,get里面的连个参数,第一个是表示访问的相对路劲,也就是我们通常说的路由,第二个参数是个回调函数,这个回掉函数包含三个参数 req,代表的请求体(所有的请求信息都会在这里) res代表的是返回体(所有的返回信息,以及返回方法都在这)next是不处理交由下个路由拦截处理
res.router里面的两个参数 第一个是表示ejs文件 相对views目录下的相对位置后面不需要跟后缀名第二个参数是在ejs里面渲染的json对象数据
如上图 json里面的{title:“Express"}在ejs里面渲染为 <%= title%>
在一个路由文件里可以写多个路由如图
访问下面的那个路由 为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
路由的配置就到这了,还有一个更改端口
到/bin/www文件中找到这一行代码
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
自行更改端口号
到这就算ok了,但是我想说学习还真是一件很累的事情!!!