node入门3----路由

最新推荐文章于 2022-09-15 11:55:27 发布

你所有承诺

最新推荐文章于 2022-09-15 11:55:27 发布

阅读量847

点赞数 2

分类专栏： js 文章标签： node js node入门 nodejs路由 node框架

本文链接：https://blog.csdn.net/stronglyh/article/details/46743693

版权

js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

上篇文章说了nodejs项目创建，今天我们来说一下路由，index.js中的代码如下

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

访问主页的时候，调用ejs引擎，从而渲染index.ejs模板文件，生成静态页面显示到浏览器。（关于ejs，后面会写文章介绍）

----------------------------------------------------------------------------华丽的分割线------------------------------------------------------------------------------------

写的有点乱，还是先补充下相关知识

web方面的知识使用的都是express框架

先用框架创建一个简单的应用

var express = require('express');
var app = express();
app.get('/', function (request, response) {  
   response.send('Hello World!');
});
 
app.listen(80);

1：get方法 —— 根据请求路径来处理客户端发出的GET请求。
格式：app.get(path,function(request, response));
path为请求的路径，第二个参数为处理请求的回调函数，有两个参数分别是request和response，代表请求信息和响应信息。

var express = require('express');
var app = express();
 
app.get('/', function(request, response) {
   response.send('Welcome to the homepage!');
});
app.get('/about', function(request, response) {
   response.send('Welcome to the about page!');
});
app.get("*", function(request, response) {
    response.send("404 error!");
});
app.listen(80);

上面的是没有参数的，大家会问如果有参数的请求又会是什么样子呢

1.1 req的query

query是一个可获取客户端get请求路径参数的对象属性，包含着被解析过的请求参数对象，默认为{}。

例1 比如请求是 /go?m=to

req.query.m //to

例2 /shoes?order=desc&shoe[color]=blue&shoe[type]=converse

req.query.order // "desc"
req.query.shoe.color // "blue"
req.query.shoe.type // "converse"

1.2 通过param获取请求根路径的参数值

如/?n=admin，方法如下：

app.get("/", function(req, res) {
    console.log(req.param("n")); //admin
    res.send("使用req.param属性获取请求根路径的参数对象值!");
});

假设路由规则为 /user/:name/，请求路径/user/mike,如下：

app.get("/user/:name/", function(req, res) {
    console.log(req.param("name")); //admin
    res.send("使用req.param属性获取具有路由规则的参数对象值!");
});

1.3 params（和param相似，但params是一个可以解析包含着有复杂命名路由规则的请求对象的属性。）

比如 req.params.name（注意，这个地方用的是 . 参数）//admin

如果遇到复杂的路由，比如/user/:name/:id，假如请求地址是 /user/admin/123

req.params.id //123

到这大家估计也明白路由的含义了，所谓路由就是不同的访问路径，指定不同的处理方法

2：前面的例子中，大家看到了send()方法，这是web开发中不可或缺的一部分

send()方法负责向浏览器发送响应信息，同时处理不同类型的数据，格式为：res.send([body|status], [body]);

2.1 如果参数是String类型，那么Content-Type默认设置为"text/html"。

res.send("duang")//duang

2.2 如果参数是Array或者Object类型，那么返回的是一个json

res.send({user:"admin"});//{"user":"admin"}

res.send([a,b,c]}//[a,b,c]

2.3 如果参数是number类型，框架可能要帮你设置返回体

res.send(200); // OK
res.send(404); // Not Found
res.send(500); // Internal Server Error

3：既然有get，那么肯定也有post啦

post请求也没有那么神秘

app.post('/login',function(req,res){
 
});

霍霍，大家看了以后，是不是汗！！！

不废话了，上干货
首先要了解一下body属性-------------------body属性解析客户端的post请求参数，通过它可获取请求路径的参数值。

当然需要安装中间件

npm install body-parser
npm install multer

引用和调用

var bodyParser = require('body-parser');
var multer = require('multer');
......
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());

ps：app.use(***)表示使用中间件，在这就不阐述了

重点：post获取参数

先看js请求（页面ajax请求）

function login(){
    var username = $('#username').val();
    var password = $('#password').val();
    var data = { "username": username, "password":password};
    $.ajax({
             url:'login',
             type:'POST',
             data:data,
             success:function(data,status){
                  if(status == 'success'){
                      location.href='home';
                    }
             },
             error:function(data,status,e){
                  if(status == "error"){
                       location.href='login';
                     }
                   }
               });
       }

路由代码

app.post('/login',function(req,res){
   console.log(req.body.username);
});

这样就能获取到请求的参数值了。

----------------------------------------再次华丽的分割线----------------------------------------------------------

好，相关知识恶补结束，下面写一个登录

1：页面代码

index

div style="height:400px;width:550px;margin:50px auto;margin-left:auto;border:solid 1px;background: rgb(246, 246, 253);">
    <div style="margin-left: 35px;">
 
# 首页
 
        <form action="#" role="form" style="margin-top: 90px;margin-left: 60px;">
 
# 欢迎进入首页！
 
            <div style="margin-top: 145px;">
                <input type="button" value="登 录">
            </div>
        </form>
    </div>
</div>

<div style="height:400px;width:550px;margin:50px auto;margin-left:auto;border:solid 1px;background: rgb(246, 246, 253);">
    <div style="margin-left: 45px;">
 
# 主页
 
        <form action="#" role="form" style="margin-top: 90px;">
 
# 登录成功！
 
            <div style="margin-top: 145px;">
                <input type="button" value="退 出">
            </div>
        </form>
    </div>
</div>

</pre><p></p><p></p><div style="top: 0px;">2：login.js</div><div style="top: 0px;"><pre class="html" name="code">app.post('/login',function(req,res){
    var user={
        username:'admin',
        password:'admin'
    }
 if(req.body.username==user.username&&req.body.password==user.password){
        req.session.user = user;
        res.send(200);
    }else{
        req.session.error = "用户名或密码不正确";
        res.send( 404 );
    }
});

index.js

app.get('/home',function(req,res){
    if(req.session.user){
        res.render('home');
    }else{
        req.session.error = "请先登录"
        res.redirect('login');
    }
});

3：app.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
 
app.set('views', __dirname);
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express );
 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
 
app.get('/', function(req, res) {
    res.render('index');
});
app.get('/home',function(req,res){
    res.render('home');
});
app.get('/login',function(req,res){
    res.render('login');
});
app.post('/login',function(req,res){
    var user={
        username:'admin',
        password:'admin'
    }
 if(req.body.username==user.username&&req.body.password==user.password)      {
      res.send(200);
   }else{
      res.send( 404 );
   }
});
 
app.listen(80);

这样呢，登录就算完成了，

上面的代码我们可能看到了路由代码都放到app.js中，如果有成千上万个路由呢，那么app.js显然变的不好维护。

官方给出的写法是在app.js中实现简单的路由分配，然后再去对应的js中找到对应的路由函数。从而实现路由功能，所以我们的做法是把路由控制器和实现路由的功能都放到index.js中，把总的接口都放到了app.js中。

进行如下修改

module.exports = function ( app ) {
    app.get('/login',function(req,res){
        res.render('login');
    });
 
    app.post('/login',function(req,res){
        var user={
            username:'admin',
            password:'admin'
        }
        if(req.body.username==user.username&&req.body.password==user.password){
            req.session.user = user;
            res.send(200);
        }else{
            req.session.error = "用户名或密码不正确"
            res.send( 404 );
        }
    });
}

index.js

module.exports = function ( app ) {
    app.get('/home',function(req,res){
        if(req.session.user){
            res.render('home');
        }else{
            req.session.error = "请先登录"
            res.redirect('login');
        }
    });
}

app.js路由部分

require('./login')(app);
require('./index')(app);

这样代码是不是变得很简练了呢。

你所有承诺

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node入门3----路由

上篇文章说了nodejs的项目创建，今天我们说一下路由，index.js中的代码如下router.get('/', function(req, res, next) { res.render('index', { title: 'Express' });});访问主页的时候，调用ejs引擎，从而渲染index.ejs模板文件，生成静态页面显示到浏览器。（关于ejs，后面会写文章介绍）
复制链接

扫一扫

专栏目录