从hello server开始，到hello client结束

最新推荐文章于 2021-09-09 12:02:49 发布

weixin_34087301

最新推荐文章于 2021-09-09 12:02:49 发布

阅读量340

点赞数

文章标签：后端网络前端 ViewUI

原文链接：https://juejin.im/post/5cf68cb35188254a6c23d8e1

版权

大家看标题，《从hello server开始，到hello client结束》，其实也是受了学习C种语言的第一个例子”hello world！“的启发，这个例子的实现，当年让我们对程序充满了好奇，实现了之后还很有成就感，打开了我学习计算机语言的大门。

今天主要呢，也是想通过一个例子，给大家展现一个互联网最常见的前后端的demo，从hello server开始，到hello client结束，来满足大家对互联网技术的好奇和成就感，简单洞悉一下互联网的前端和后端技术，打开互联网技术的一扇门。大佬飘过即可，小白留步。

首先我们把这个demo当成一个项目，我们要有一个需求，这个需求呢一般都是产品经理或者项目经理输出需求文档，当然了这里的需求主要是客户的需求。我们这个例子的需求，就是尽可能简单的展现互联网的前后端技术，一个后端服务，一个带按钮和文本框的网页即可。前端发送一个”hello server“消息，后端给回复一个”hello client“消息即可。

需求明确了，我们该干什么了，制定技术方案，技术架构，哈哈，这个例子太简单了，技术架构有点夸张！前端技术有哪些呢？Vue，React，JQuery，原生js，还有html5、css3。我们这个需求就不用上框架了，这样对新手同学也比较友好。

后端技术有哪些呢？Java SSM和Springboot，Nodejs Express，Python Flask，Go Web，这些就是目前主流的Web开发吧，当然PHP是最好的语言！这里使用Nodejs去实现后端服务，是不是有种立马全栈的感觉。我个人是非常看好JavaScript的前景的，我觉得是程序员必须学习的一门语言。

然后该干什么了，撸起代码来！我这里推荐使用ubuntu系统，不会使用Linux系统的程序员不是好程序员。今天推荐使用的IDE工具是微软开发的Vscode。前端和后端都可以使用这个工具开发。下图就是Vscode的界面。

大家可以看到，我用Vscode创建了一个DEMO的WORKSPACE。我创建了两个文件夹，demoserver文件夹和democlient文件夹。我们先用Nodejs开发后端服务，我在demoserver文件夹中创建了一个server.js文件。代码如下：

const express =require('express');
const app = express();
app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
  });
app.get('/',(req , res) => {
    res.statusCode = 200;
    res.send('{"message":"hello client","status":"true"}');
})
app.listen(3000 , () =>{
    console.log('Express web app on localhost：3000');
})复制代码

这里我们使用了express，是Nodejs的一个流行Web框架。const app = express();实例化了一个express对象。app.listen，实现了侦听本地3000端口，app.get实现了路由和后端服务API，前端可以调用这个API，来获取message，app.all部分则是解决了网络的跨域问题。进入debug界面，点击调试按钮，即可运行这个服务，界面如下：

下面我们使用h5+js+jQuery去实现前端页面，我在democlient创建了index.html和client.js两个文件。index.html主要是页面实现，一个按键和一个段落，很简单，引入了两个js文件，一个是jQuery，一个是我们要实现的js文件，代码如下：

<html>
<head>
    <title>hello client</title>
</head>
<body>
    <button id="button">hello server</button>
    <p id="text"></p>
    <script src="client.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>复制代码

client.js中主要实现了侦听button按键，在按下button按键的同时，通过AJAX发送GET请求到后端，并接收后端的响应，将响应信息解析之后显示在页面上。代码如下：

document.getElementById("button").onclick=function(){
    //document.write("aaaaaa") ;
    $.ajax({        
        type:'GET',         
        contentType :'application/json',       
        dataType:'json',   
        url :'http://localhost:3000/',
        success :function(result){            
            if (result.status=="true"){
                document.getElementById("text").innerHTML=result.message;
            }else{
                document.getElementById("text").innerHTML = "error";
            }
        },
        error: function(xmlHttpRequest, textStatus, errorThrown){
            alert("请求对象XMLHttpRequest: "+XMLHttpRequest);
            alert("错误类型textStatus: "+textStatus);                        
            alert("异常对象errorThrown: "+errorThrown); 
        }   
    });
};复制代码

如何打开网页？选中index.html，右键点击，选择Open in Other Browers，可以选择

在Google Chrome中打开页面。

打开页面后，点击hello server按钮，就可以看到下方显示hello client，如下图所示。

这个demo，从hello server开始，到hello client结束，完全使用js开发前后端，是不是很简单，虽然很简单，但是完整的展现了后端服务的实现，前端页面的实现，前后端的交互。

当然我们还可以扩展这个例子，前端的实现，除了可以增加功能外，还可以使用框架去实现，vue和eact，甚至可以用小程序或者微信网页去做。后端服务的实现除了可以增加功能外，还可以用Java、pyhton和go去实现，还可以增加数据库的交互。这些都是在我们学习的过程中要去实现的。

希望这个例子可以让你了解前后端开发的一个影子，激发你学习前后端的兴趣，给你带来一点成就感。

转载于:https://juejin.im/post/5cf68cb35188254a6c23d8e1

weixin_34087301

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从hello server开始，到hello client结束

大家看标题，《从hello server开始，到hello client结束》，其实也是受了学习C种语言的第一个例子”hello world！“的启发，这个例子的实现，当年让我们对程序充满了好奇，实现了之后还很有成就感，打开了我学习计算机语言的大门。今天主要呢，也是想通过一个例子，给大家展现一个互联网最常见的前后端的demo，从hello server开始，到hello client结束，来满足大...
复制链接

扫一扫