Node中的express框架

2018-07-18  本文已影响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>

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

上一篇下一篇

猜你喜欢

热点阅读