您的位置:首页 >> LNMPA >> 和屌丝一起学Node.js—web开发2
和屌丝一起学Node.js—web开发2
[ 孤狼 | 2017-08-14 17:22:05 | LNMPA ]
声  明

本教程仅用于初学Node.js同学使用,内容由本人(孤狼)学习过程中笔记编写,本教程使用Node.js版本为6.11.1。本教程内容可以自由转载,但必须同时附带本声明,或注明出处。PAEA.CN版权所有。

上节我们简单的了解了Node.js里的web创建方法.这节我们继续一起来看web.


首先我们先看一下generator工具生成的站点结构.

  • bin目录:用来放系统文件.

  • public目录:用来放资源文件,如js,css文件

  • routes目录:用来放控制器文件

  • views目录:用来放模板文件


我们来看看简单的使用.

//routes/index.js文件
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
module.exports = router;

这里我们看到实例化了一个router,然后用router去get调用.用法就是我们常见的get和post

app.METHOD(PATH, HANDLER)

METHOD:请求方式

PATH:服务器上的地址

HANDLER:回调函数


app.render(view, [locals], callback)

render方法使用来显示HTML的,同时还能传参和回调.其中参数为json格式

更多generatorAPI:http://expressjs.com/en/4x/api.html

例如我们修改下routes/index.js文件

//routes/index.js文件
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('one', {url:req.hostname,name:'孤狼',contents:'node.js学习中....'});
});
module.exports = router;

同时我们调用了一个one的模板,我么去增加一个one.ejs.

views/one.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= contents %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
<div style="color:#ff6638;"><%= name %></div>
<br>
<div style="color:red"><%= contents %></div>
<br>
<div style="color:blue">当前网址是:<%= url %></div>
  </body>
</html>


然后重启下服务器

TIP:node.js并不是向php那样可以实时刷新加载,所以必须重启.

1.jpg

我们看到,这样就可以正常使用网页来显示我们想用的东西了.很类似于是MVC的一种用法.


TIP:模板可以先用html格式制作好之后,在替换成ejs格式.


GET和POST.


我们常用来接收数据的get和post怎么用呢?

//routes/index.js文件
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
var name=req.param('name');
res.render('one', {url:req.hostname,name:name,contents:'node.js学习中....'});
});
module.exports = router;

这里我们用req来接收提取数据.

然后我们访问http://127.0.0.1:3000/?name=123

2.jpg

可以看到已经接收成功了.

param方法可以接收post,get都可以.


ejs模板规则:

<% code %>:JavaScript 代码。
<%= code %>:显示替换过 HTML 特殊字符的内容。
<%- code %>:显示原始 HTML 内容。


路由控制


我们刚才看到了如何用render来指定模板显示,那么我们怎么切换控制器呢?很简单

我们在routes目录下新建一个one.js文件

//routes/one.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
//注意这里用的的send发送方法.
res.send('通过one.js调用');
});
module.exports = router;


然后修改一下项目目录里的app.js引导文件,在里面增加one的调用

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

然后重启服务器,访问http://127.0.0.1:3000/one

3.jpg


本节代码下载:链接: https://pan.baidu.com/s/1slhVqtn 密码: 37vi

转载请注明出处:http://gl.paea.cn/lnmpa/content/2017/08/14/114.html