美文网首页
Node中的express框架

Node中的express框架

作者: 乔乔_老师 | 来源:发表于2018-07-18 17:52 被阅读0次
    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。

    首先想要使用expess框架,需要安装,方法如下

    npm install express
    

    安装完成后就会发现在你的文件夹中多了一个node_module文件夹

    使用express搭建一个简单的服务器
       const express=require('express'); //引入express
       var server=express();//创建一个服务器
       server.listen(8080);//创建一个监听
    

    使用express搭建一个服务器只需要这三步

    接下来我们使用express搭建的服务器做一些简单的操作

    const express=require('express');
    
    var server=express();
    server.use('./a.html',function(req,res){
        // res.send();   res.end()   都是express中的方法,这块也可以用res.write();但是res.write只能发送字符串,不能发送json对象
        // res.send('aaaaaaaa');
         // res.write({a:12,b:5});不能发送
    
        res.send({a:12,b:5});//可以发送
        res.end();
    })
    
    server.use('./b.html',function(req,res){
        res.send('bbbbb');
        res.end();
    });
    
    server.listen(8080);
    

    在express中有三种方式可以接受到用户的请求

                 .get('/',function(req,res){};
                 .post('/',function(req,res){};
                 .use('/',function(req,res){};
    
    
                 post只能接受post发来的请求 
                 get只能接受get发来的请求
                 use既可以几首get发来的请求,又可以接受post发来的请求
    
    js代码
    const express=require('express');
    var server=express();
    server.get('/',function(req,res){
        console.log('这时get发来的请求');
    })
    server.post('/',function(req,res){
        console.log('这是post发来的请求');
    });
    server.use('/',function(req,res){
        console.log('这时use数据');
    });
    server.listen(8080);
    

    html代码

    get
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form method='get' action='http://localhost:8080'>
            用户名: <input type="text" name="uname">
            <input type="submit" value='提交'>
        </form>
    </body>
    </html>
    
    post
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form method='get' action='http://localhost:8080'>
            用户名: <input type="text" name="uname">
            <input type="submit" value='提交'>
        </form>
    </body>
    </html>
    
    使用express做一个简单的注册登录

    首先我们访问惊天文件的时候会用到 express-static,所以我们需要下载express-static

    npm install express-static
    
    js代码
    const express=require('express');
    const expressStatic=require('express-static');
    
    var server=express();
    server.listen(8080);
    
    //用户数据
    var users={
      'blue': '123456',
      'zhangsan': '654321',
      'lisi': '987987'
    };
    
    server.get('/login', function (req, res){
      var user=req.query['user'];
      var pass=req.query['pass'];
    
      if(users[user]==null){
        res.send({ok: false, msg: '此用户不存在'});
      }else{
        if(users[user]!=pass){
          res.send({ok: false, msg: '密码错了'});
        }else{
          res.send({ok: true, msg: '成功'});
        }
      }
    });
    
    server.use(expressStatic('./www'));
    
    html代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        用户名: <input type="text" id='user'> <br>
        密码:   <input type="password" id='pass'> <br>
        <input type="button" value='登录' id='btn1'>
    <script src='ajax.js'></script>
    <script type="text/javascript">
         var user=document.getElementById('user');
         var pass=document.getElementById('pass');
         var btn1=document.getElementById('btn1');
         btn1.onclick=function(){
            ajax({
                url:'/login',
                data:{user:user.value,pass:pass.value},
                success:function(str){
                    console.log(str);
                    var json=eval('('+str+')');
                    if(json.ok){
                        alert('登陆成功');
                    }else{
                        alert('失败'+json.msg);
                    }
                },
                error:function(){
                    alert('通信失败');
                }
            })
         }
    </script>
    </body>
    </html>
    

    这样一个简单的前后端交互的注册登录就做完了

    相关文章

      网友评论

          本文标题:Node中的express框架

          本文链接:https://www.haomeiwen.com/subject/zhhapftx.html