从hello server开始，到hello client结束

大家看标题，《从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

从hello server开始，到hello client结束相关推荐

Linux tcp同时多个连接,Linux下网络编程（2）——TCP多连接，1个server，多个client...
1. 前言本次使用TCP连接,1个server,多个client. server和多个client之间,可以互相发送消息. 2. 代码 tcp_sever_fork.cpp 如下: #includ ...
java server模式设置_JVM client模式和Server模式的区别
这里向大家描述一下JVM client模式和Server模式两者的区别和联系,JVM如果不显式指定是-Server模式还是-client模式,JVM能够根据下列原则进行自动判断(适用于Java5版本或 ...
pythonjava app切出后无网络连接_写了一个java的Server 用python的client访问却访问不通问题。...
首先给出这个java的Server代码 try{//1.创建一个服务器端Socket,即ServerSocket,指定绑定的端口,并监听此端口 ServerSocket serverSocket=ne ...
select 实现类似多线程_linux进程通信--socket套接字(四)--多路IO转实现一个server对应多个client...
先给自己打个广告,本人的微信公众号正式上线了,搜索:张笑生的地盘,主要关注嵌入式软件开发,股票基金定投,足球等等,希望大家多多关注,有问题可以直接留言给我,一定尽心尽力回答大家的问题一 why 在前 ...
Clinet dose not support authentication protocol request by server ;consider upgrading MySQL client
最近在将mysql安装好之后,用navicate连接,发现一直都报错,系统重启了之后就这样,如下: Clinet dose not support authentication protocol re ...
关于Installshield中Ie8\Ie9\SQL Server 2008 R2 Native Client等Prq文件在线下载地址
InstallShield中安装包的几篇文章: Installshield2010实现web部署和数据库安装示例 InstallShield 2010集成.net Framework 4的安装包制作 ...
linux sql server客户端,Linux的MS SQL Server客户端SQuirrel SQL Client
因为工作需要,要在ubuntu下连接mssql数据库,找了很久终于找到了SQuirreL SQL Client. SQuirreL SQL Client最大的魅力在于: 基于Java,具备良好的夸平台 ...
adb server无法启动方法，结束占用端口的进程
adb server is out of date. killing... ADB server didn't ACK * failed to start daemon * error: unkno ...
Identity Server 4 原理和实战（完结）_建立Identity Server 4项目，Client Credentials 授权实例...
创建项目 dotnet new -i IdentityServer4.Templates 多出来的这些模板 adminUI用来测试,想要用再生产环境,需要交钱结合core的 Identity来使用 ...

从hello server开始，到hello client结束

从hello server开始，到hello client结束相关推荐

最新文章

热门文章