Node.js之服务器配置（三）

其他 2018-09-28 23:35:42 阅读次数: 0

牢记：服务器端改变，就要重启

以后呢，打开页面得在服务端打开。在vscode下，ctrl+shift+n，启动3000端口（启动端口号你可以自己修改，但端口唯一）。在浏览器url中输入127.0.0.1:3000就会跳转到 index.html 。

 在服务端app.js中我们添加

//服务端的内容.get方式发起的请求，我们就执行下面的函数
app.get('/a',function(req,res){
    res.send('这是get回来的数据 ');
})

在客户端index.html中添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=in, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    index
    <button class="btn btn-danger" id="sendGet">发送get请求</button>
    <script src="components/jquery/dist/jquery.min.js"></script>
    <script>
        //下面是客户端的内容
        sendGet.onclick = function(){
            $.ajax({
                url:'/a',
                type:'get',
                success:function(data){
                    alert(data);
                }
            })
        }


    </script>
</body>
</html>

上面这个是把返回的信息显示在弹出框里面，下面我们把返回的信息显示在div中。

var express = require('express');
var path = require('path');

//创建服务
var app = express();//实例化对象

app.post('/a',function(req,res){
    res.status(200).send("这是post的数据");
});

//服务端的内容.get方式发起的请求，我们就执行下面的函数
app.get('/a',function(req,res){
    // res.send('这是get回来的数据 ');

    //返回一个json数据
    var stu = {name:'www',age:20};
    // res.status(200).json(stu);
    res.status(200).json({success:true,obj:stu});

})

app.use('/list',function(req,res){
    //'/detail'可以随便写，只要和浏览器url中的输入符合起来就行了
    //给客户端写东西应该调用响应的对象.. status()可以修改状态码
    res.sendFile(path.join(__dirname,'www','list.html'));
});
//use(路径，函数) 如果路径存在，就执行函数。不存在，就顺序执行。执行了其中一个use，后面就不会在执行了。   

//index.html默认的访问页面.static()路径给到文件夹就会自动读取index.html文件
app.use(express.static(path.join(__dirname,'www')));

app.use('*',function(req,res){
    res.status(200).sendFile(path.join(__dirname,'www','err','404.html'));
});


//后面的操作都会通过这个对象进行操作
app.listen(3000,function(err){
    if(err){
        console.log("监听失败");
        throw err;
    }
    console.log("服务器已开启，端口号为：3000");
});









<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=in, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    index
    <div id="msg"></div>
    <button class="btn btn-danger" id="sendGet">发送get请求</button>
    <button class="btn btn-danger" id="sendPost">发送post请求</button>
    <script src="components/jquery/dist/jquery.min.js"></script>
    <script>
        //下面是客户端的内容
        sendPost.onclick = function(){
            $.ajax({
                url:'/a',
                type:'post',
                success:function(data){
                    $("#msg").append(data);
                }
            })
        }

        sendGet.onclick = function(){
            $.ajax({
                url:'/a',//服务器端的a接口
                type:'get',
                success:function(data){
                    // alert(data);
                    if(data.success)
                    {
                        $("#msg").append("姓名:="+data.obj.name+"年龄:="+data.obj.age);
                    }


                    
                }
            })
        }


    </script>
</body>
</html>

虽然接口都是/a接口，但是接口不同，所以不会冲突。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

通过请求对象里面的params可以得到发送的100

-------------------------------------------     body 传参   --------------------------------------------------------------------

就单纯的这样的话，会报错500。因为缺少了响应的模块或者说是包。我们需要进行拉包操作。

主要对body传参的数据进行处理的。

npm install body-parser --save

这个包主要是针对 参数 进行处理的。下载结束后进行引入包操作。

var bodyparser = require('body-parser');

下面是完整的源代码

app.js         index.html

var express = require('express');
var path = require('path');
var bodyparser = require('body-parser');

//创建服务
var app = express();//实例化对象

app.use(bodyparser.json());//对json参数的处理
app.use(bodyparser.urlencoded({extended:false}));

var stu = [
    {name:'www',age:20},
    {name:'rr',age:3},
    {name:'ttt',age:40}
]

app.post('/d',function(req,res){
    var name = req.body.name;
    var age  = req.body.age;

    var info = {
        name:name,
        age:age
    } 

    if(name && age)
    {
        stu.unshift(info);
        res.status(200).json({success:true,msg:'添加成功'});
    }else{
        res.status(200).json({success:false,msg:'添加失败'});
    }


})

app.get('/c/:id',function(req,res){
    var id = req.params.id;
    if(id>=0 && id<stu.length)
    {
        var info = stu[id];
        res.status(200).json({success:true,msg:'',obj:info})
    }else{
        res.status(200).json({success:false,msg:'查无此人',obj:{}})
    }
});

//用all(),无论用get/post都能请求，得到回应
app.all('/b',function(req,res){
    res.send('这是数据');
});

app.post('/a',function(req,res){
    res.status(200).send("这是post的数据");
});

//服务端的内容.get方式发起的请求，我们就执行下面的函数
app.get('/a',function(req,res){
    // res.send('这是get回来的数据 ');

    //返回一个json数据
    var stu = {name:'www',age:20};
    // res.status(200).json(stu);
    res.status(200).json({success:true,obj:stu});

})

app.use('/list',function(req,res){
    //'/detail'可以随便写，只要和浏览器url中的输入符合起来就行了
    //给客户端写东西应该调用响应的对象.. status()可以修改状态码
    res.sendFile(path.join(__dirname,'www','list.html'));
});
//use(路径，函数) 如果路径存在，就执行函数。不存在，就顺序执行。执行了其中一个use，后面就不会在执行了。   

//index.html默认的访问页面.static()路径给到文件夹就会自动读取index.html文件
app.use(express.static(path.join(__dirname,'www')));

app.use('*',function(req,res){
    res.status(200).sendFile(path.join(__dirname,'www','err','404.html'));
});


//后面的操作都会通过这个对象进行操作
app.listen(3000,function(err){
    if(err){
        console.log("监听失败");
        throw err;
    }
    console.log("服务器已开启，端口号为：3000");
});









<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=in, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    index
    <div id="msg"></div>
    <button class="btn btn-danger" id="sendGet">发送get请求</button>
    <button class="btn btn-danger" id="sendPost">发送post请求</button>

    <button class="btn btn-danger" id="sendPostGet">发送post/get请求</button>

    <!-- 下面这个进行路由传参,一般来说是post请求 -->
    <button class="btn btn-danger" id="sendD">发送get，路由传参</button>

    <button class="btn btn-danger" id="sendE">发送post，body传参</button>

    <script src="components/jquery/dist/jquery.min.js"></script>
    <script>
        //下面是客户端的内容
        sendE.onclick = function(){
            $.ajax({
                url:'/d',
                type:'post',
                data:{name:'tom',age:100},
                success:function(data){
                    if(data.success){
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                }
            })
        }


        sendD.onclick = function(){
            $.ajax({
                url:'/c/10',
                type:'get',
                success:function(data){
                    if(data.success)
                    {
                        $("#msg").append(data.obj.name+' '+data.obj.age);
                    }else{
                        $("#msg").append(data.msg);
                    }

                   
                }
            })
        }

        sendPostGet.onclick = function(){
            $.ajax({
                url:'/b',
                type:'post',
                success:function(data){
                    $("#msg").append(data);
                }
            })
        }
        sendPost.onclick = function(){
            $.ajax({
                url:'/a',
                type:'post',
                success:function(data){
                    $("#msg").append(data);
                }
            })
        }

        sendGet.onclick = function(){
            $.ajax({
                url:'/a',//服务器端的a接口
                type:'get',
                success:function(data){
                    // alert(data);
                    if(data.success)
                    {
                        $("#msg").append("姓名:="+data.obj.name+"年龄:="+data.obj.age);
                    }


                    
                }
            })
        }


    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/ferrysoul/article/details/82820830
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022