完整mes代码(含客户端和server端_前后端通信的两种方案

最新推荐文章于 2024-04-28 14:56:54 发布

weixin_39618173

最新推荐文章于 2024-04-28 14:56:54 发布

阅读量556

点赞数

文章标签：完整mes代码(含客户端和server端

写在前面

这里主要记录了两种使用过的轻量级前后端通信方案，前后端通信的语言是JavaScript和Python。对于一些想要为自己的写的代码套一层壳或者说提供一个简单的展示平台的时候，轻量级是一个比较优的选择。这里第一种方案中使用websocket，第二种方案中使用了Ajax和flask。在实际开发中，目前普遍采用“前后端分离”的模式。在前后端分离的模式下，后端只负责提供服务接口（如REST）,前端通过接口发送/获取数据，数据类型普遍采用轻量的json模式。

1 通过websocket通信

浏览器端

<!DOCTYPE html>

服务器端

# coding=utf-8
from websocket_server import WebsocketServer
from urllib.parse import unquote


def new_client(client, server):
    print("Client(%d) has joined." % client['id'])


def client_left(client, server):
    print("Client(%d) disconnected" % client['id'])


def message_back(client, server, message):
    # 这里的message参数就是客户端传进来的内容
    print("Client(%d) said: %s" % (client['id'], unquote(message)))
    results = "data from server"
    # 将处理后的数据再返回给客户端
    server.send_message(client, results)


# 新建一个WebsocketServer对象，第一个参数是端口号，第二个参数是host
# 如果host为空，则默认为本机IP
server = WebsocketServer(8000, host='')
# 设置当有新客户端接入时的动作
server.set_fn_new_client(new_client)
# 设置当有客户端断开时的动作
server.set_fn_client_left(client_left)
# 设置当接收到某个客户端发送的消息后的操作
server.set_fn_message_received(message_back)
# 设置服务一直运行
server.run_forever()

2 Ajax和flask通信方案

首先考虑服务器端API的设计：

#!flask/bin/python

以上就写好了服务器端的RESTful API。运行上述代码，有：

Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

@app.rount('/path')控制路由，后面的函数控制内容。

通过服务器端或命令行工具访问上述接口，如果失败，考虑当前是不是正确运行了该文件，可关闭Pycharm打开的其他文件夹或者重启电脑。

使用接口可以成功访问到该API的信息，然而如果使用JavaScript访问该接口时有可能出现跨域的错误导致访问失败。这是由于html文件和python文件运行的端口不一致造成的。目前主流的解决方案是跨域资源共享（CORS，Cross-origin resource sharing），实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。其设置Access-Control-开头的方案实现跨域。

下面列出JavaScript的Ajax代码：

<!DOCTYPE html>

修改get_tasks()代码如下：

from

点击按钮，测试结果如下：

最后，对于POST请求，其数据保留在request.form中，需要使用from flask import request 来引入request模块。这里request.form是一个ImmutableMultiDict对象。我的项目应用到了多选框，故而会有下面这种情况，一个key，多个value。可以使用getlist(key)获取相同key的value列表。下面给出一个测试getlist()的代码段。

测试样例：

from werkzeug.datastructures import ImmutableMultiDict
imd = ImmutableMultiDict([('address', u'US'), ('address', 'US'), ('address', 'UK')])
print imd.getlist('address')

服务器端接受数据：

@app.route('/todo/api/v1.0/tasks', methods=['GET'，'POST'])
def get_tasks():
    message = {}
    for key in request.form:
        message[key] = request.form.getlist(key)
    print(message)

weixin_39618173

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完整mes代码(含客户端和server端_前后端通信的两种方案

写在前面这里主要记录了两种使用过的轻量级前后端通信方案，前后端通信的语言是JavaScript和Python。对于一些想要为自己的写的代码套一层壳或者说提供一个简单的展示平台的时候，轻量级是一个比较优的选择。这里第一种方案中使用websocket，第二种方案中使用了Ajax和flask。在实际开发中，目前普遍采用“前后端分离”的模式。在前后端分离的模式下，后端只负责提供服务...
复制链接

扫一扫