开始nodejs+express的学习+实践（2）

时间 2019-11-13

标签开始 nodejs+express nodejs express 学习实践繁體版

原文原文链接

1.路由处理php

咱们经过访问 http://localhost:1234/已经显示了默认首页内容。css

咱们打开app.js文件，看路由处理部分代码：html

咱们知道请求方式有get和post，咱们当前的方式是get请求，而且请求项目路径是 “/”node

在程序中咱们能够看到，当地址是“/”时，会调用routers.index的处理，这是文件模块的定义express

咱们打开routes目录下的文件模块，查看代码程序：npm

咱们此时会比较疑惑，经过require加载的模块代码是这样的：json

var routes = require('./routes');

其实这个方法会自动去找下面的index.js文件，咱们改写成这样一样能够，为了理解方便api

var routes = require('./routes/index');

后缀名可缺省，大部分的模块都是js文件，会自动识别。数组

修改后，咱们能够ctrl+c结束，而后npm start从新启动，地址刷新发现是没有问题的。浏览器

这里咱们知道，咱们写的文件模块会挂在 exports或者module.exports对象下，就能够经过require()获取到。

如今咱们已经知道，访问根目录“/”,会调用index.js的index方法，咱们看到方法里面的处理程序是：

res.render('index', { title: 'Express' });

req和res对象很少说，利用http模块建立服务器已经很是熟悉，在这里express对两个对象作了更多的包装，

打开express的api手册，咱们查看说明：http://www.expressjs.com.cn/4x/api.html#res.render

在手册咱们能够看到，res的render方法有三个参数，

arg1：使用的模板引擎名称（就是调用那个引擎页面，咱们的ejs）

arg2：就是传入引擎的内容（{}类型），

arg3：错误时执行的回调

看到这里咱们几乎就明白了，咱们访问“/”会使用index的模板页面，而且穿入模板的内容：键是title值是express，咱们把

 res.render('index', { title: 'Express' });

修改成：

 res.render('index', { title: 'Express',hello:'hello world!' });

既然这里会模板index传入数据，那么模板index确定要接收和处理数据，咱们打开index模板页面：

如今是title的显示，咱们修改index.ejs代码，加入hello的显示，与路由处理同步

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

重启运行，刷新浏览器，会看到传入的新数据：

咱们一个网站确定会有多个网页，之间进行跳转操做，固然这就是路由的功能了，咱们如今访问的根路径是“/”，此时咱们须要多一些页面来了解路由的工做处理。

咱们修改index.ejs页面，加入一些a标签作跳转演示

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

此时咱们点击“hello world”会跳转到“/hello”页面，好了咱们此时要加入对“/hello”的路由处理了

app.js加入理由处理：

index.js加入处理程序：

/* GET home page. */
exports.index = function(req, res){
    res.render('index', { title: 'Express',hello: 'hello world!' });
};
/* GET hello page. */
exports.hello = function(req, res){
    res.render('hello', { text: '么么哒' });
};

咱们会往hello.ejs模板页面传入“么么哒”，咱们建立hello.ejs，写入代码：

经过index.ejs复制修改便可，从路由，处处理，到模板所有书写完毕，咱们重启后，刷新页面，点击测试！

彷佛没有问题了，不过咱们页面会有大量的路由处理，若是咱们所有放在app.js，会发现如入口文件愈来愈大，愈来愈混杂，咱们最好是把路由的处理分离处理，单独在一个模块去处理，

其实路由的处理，就是调用app对象，咱们只要把app对象做为参数传入到外面，彷佛就实现分离了，咱们对index.js作修改，把app对象传入到index.js页面

修改后咱们的全部路由处理就所有在index.js进行了，index.js代码：

function rout(app){
    app.get('/',function(req, res){
        res.render('index', { title: 'Express',hello: 'hello world!' });
    });
    app.get('/hello',  function(req, res){
        res.render('hello', { text: '么么哒' });
    });
};
exports.rout=rout;

咱们要在app.js调用index的程序和传入app对象，app.js修改以下：

重启，运行，若是报错要本身查看是否书写错误。

2.ejs模板引擎的了解和处理

咱们上面其实已经使用和简单了解的ejs的使用，咱们为何可使用ejs，不要深究，咱们知道在哪里引入就能够了，

咱们在app.js能够看到下面的代码：

__dirname是node的全局变量，会获取到当前文件的目录，不要深刻理解了，知道就好！

咱们对比路由页面和模板页面程序：

这很是清晰了吧，res.render发出的数据会被模板介绍和显示，中间的桥就是那个键名，而且ejs是在<% %>放程序代码的，

里面的“=”其实就等同于php的echo。

其实如今咱们发送的都是单一数据，能够说是1，其实不少时候是n，当时就是数组的形式了，咱们修改index.js的根路由控制

咱们要利用ejs来显示数组形式的数据了，修改index.ejs的代码：http://www.embeddedjs.com/

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <p><a href="/hello"><%= hello %></a></p>
    <ul>
        <% for(var i=0; i<arr.length; i++) {%>
        <li><%= arr[i] %></li>
        <% } %>
    </ul>
  </body>
</html>

其实语法和js没太大区别，咱们看看就知道了，

重启运行，刷新页面查看：

固然还有if的处理等，咱们遇到在查看手册就能够！

3.get/post参数获取和路径跳转

=====首先是get的参数获取，咱们看手册地址：

获取get参数有2中方法，其实利用req.query获取的感受更加常见，咱们知道参数的地址通常以下：

localhost:80/peo?a="123"&b="999"

而后咱们获取a和b的参数值就能够了，不过express还提供了后面作路径的处理方法，也就是req.params，

localhost:80/peo/123 把123做为参数值，这个其实针对只有一个参数的是很方便的，多个参数咱们仍是要利用req.query

其实用什么仍是看你的设计和处理，适合就行。

针对get请求，？的形式就不用过多解释，咱们分析把路径作参数的处理方式

把路径做为参数内容，在路由处理时，要用:xx的形式，xx可使用req.params.xx获取到参数值。

咱们修改index.ejs代码，测试路径作参数的处理操做：

咱们鼠标hover在列表连接上会看到地址以下：

localhost:1234/list/0

localhost:1234/list/1

localhost:1234/list/2 ......

咱们既然把路径作参数，那么0-x就是参数值了，我么要在路由进行获取和处理：

咱们加入处理，修改index.js：

咱们建立list.ejs，显示内容：

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

重启，运行，咱们点击列表，会发现点击进入的页面会把路径作参数获取和显示在页面内部：

其实这样处理的方式比较少见，参数大部分都是以？key1=val1&key2=val2的形式

咱们修改index.ejs代码，改成常见形式：

咱们的路由处理，进行修改：

咱们发现和使用上面的方法结果是同样的，这样看起来更常见。

=====下面咱们处理post请求参数

其实post和get区别不是很大，不过通常使用post处理的数据都是隐性的，咱们就用登陆作处理演示：

1.有一个登陆界面，

1.咱们建立login.ejs

2.路由加入 get的/login处理，指向login.ejs

3.登陆时作post处理，咱们加入post的logincheck路由处理

4.logincheck路由会获取参数，成功会跳到根目录，失败跳到login目录

开始书写程序：

<!DOCTYPE html>
<html>
  <head>
    <title>login</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <form  method="post" action="/logincheck">
      <input type="text" placeholder="用户名" name="user">
      <input type="password" placeholder="密码"  name="pass">
      <input id="ok" type="submit" value="登陆">
  </form>
  </body>
</html>

路由文件index.js加入处理：

重启，运行，地址敲入：http://localhost:1234/login

咱们就会看到登陆界面了：

咱们点击登陆，看看有何变化，会提示404，咱们没有对/logincheck作路由处理，咱们在index.js加入处理，post操做

此时问题出现了，怎么获取参数，这个比较简单，而后怎么跳转？

先获取参数，

req.body.user和req.body.pass就获取到了用户名和密码。

咱们能够写一个死判断就是用户名等于“tom”和密码等于"tom"算登陆成功，成功跳转，其余失败！

路由修改：

    app.post('/logincheck',  function(req, res){
       var user= req.body.user;
       var pass= req.body.pass;
        if(user=="tom" && pass=="tom"){
        }else{
        };
    });

里面在写跳转就能够了，就和php的header方法同样，

咱们在手册查看跳转方法：

咱们修改路由处理以下：

    app.post('/logincheck',  function(req, res){
       var user= req.body.user;
       var pass= req.body.pass;
        if(user=="tom" && pass=="tom"){
            res.redirect('/');
        }else{
            res.redirect('/login');
        };
    });

重启，运行，若是用户名和密码都是tom就会跳转到首页面了。

4.总结

到这里，咱们的基本处理都结束了，添加和修改了不少文件，我在下面把源码粘贴出来！

app.js：修改比较少，主要是把app对象传出

var express = require('express');
var http = require('http');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/user');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
routes.rout(app);
app.get('/users', users.list);
/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.render('error', {
        message: err.message,
        error: {}
    });
});

module.exports = app;

index.js：修改较多，多个路由分析

function rout(app){
    app.get('/',function(req, res){
        res.render('index', { title: 'Express',hello: 'hello world!',arr:[111111,2222,33333,44444] });
    });
    app.get('/hello',  function(req, res){
        res.render('hello', { text: '么么哒' });
    });
    app.get('/list',  function(req, res){
        res.render('list', { text: req.query.id });
    });
    app.get('/login',  function(req, res){
        res.render('login');
    });
    app.post('/logincheck',  function(req, res){
       var user= req.body.user;
       var pass= req.body.pass;
        if(user=="tom" && pass=="tom"){
            res.redirect('/');
        }else{
            res.redirect('/login');
        };
    });
};
exports.rout=rout;

index.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>
    <p><a href="/hello"><%= hello %></a></p>
    <ul>
        <% for(var i=0; i<arr.length; i++) {%>
        <li><a href="/list?id=<%= i %>"><%= arr[i] %></a></li>
        <% } %>
    </ul>
  </body>
</html>

list.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>
    <p><a href="/hello"><%= hello %></a></p>
    <ul>
        <% for(var i=0; i<arr.length; i++) {%>
        <li><a href="/list?id=<%= i %>"><%= arr[i] %></a></li>
        <% } %>
    </ul>
  </body>
</html>

hello.ejs

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

<!DOCTYPE html>
<html>
  <head>
    <title>login</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <form  method="post" action="/logincheck">
      <input type="text" placeholder="用户名" name="user">
      <input type="password" placeholder="密码"  name="pass">
      <input id="ok" type="submit" value="登陆">
  </form>
  </body>
</html>

www目录下端口为1234