Python配合前端写简单接口(加前端vue代码)

Python09

Python配合前端写简单接口(加前端vue代码),第1张

服务器端:

# 开发人员: hanhan丶

# 开发时间: 2020/11/12 14:36

import flask, json                           #Flask 一个轻量级的web框架

from flask_corsimport *

server = flask.Flask(__name__)      # __name__代表当前的python文件。把当前的python文件当做一个服务启动

CORS(server, supports_credentials=True)     # 解决跨域

@server.route('/login', methods=['post'])

# 第一个参数就是路径,第二个参数支持的请求方式,不写的话默认是get,

# 加了@server.route才是一个接口,不然就是一个普通函数

def login():

user = flask.request.values.to_dict()

for itemin user:

items = json.loads(item)

loginName = items.get("loginName")

password = items.get("password")

if loginNameand password:

res = {"code":0, "msg":"请求成功", "data": {"loginName": loginName, "password": password}}

else:

res = {'msg':'调用失败'}

# json.dumps 序列化时对中文默认使用的ascii编码,输出中文需要设置ensure_ascii=False

        return json.dumps(res, ensure_ascii=False)

if __name__ =='__main__':

# port可以指定端口,默认端口是5000

    # host默认是服务器,默认是127.0.0.1

    # debug=True 修改时不关闭服务

    server.run(debug=True)

前端:

<template>

  <div>

    账号:<input type="text" v-model="loginName">

    <br>

     密码:<input type="text" v-model="password">

    <br>

    <br>

    <br>

    <button @click="btn">点击</button>

  </div>

</template>

<script>

import axios from "axios"

export default {

  data() {

    return {

      loginName: "",

      password: ""

    }

  },

  methods: {

    getDate() {

      axios({

        headers: {

          "X-Requested-With": "XMLHttpRequest",

          "Content-Type": "application/x-www-form-urlencodedcharset=UTF-8"

        },

        url: "http://127.0.0.1:5000/login",

        method: "post",

        data: {

          loginName: this.loginName,

          password: this.password

        }

      }).then(res =>{

        console.log(res)

      })

    },

    btn() {

      this.getDate()

    }

  }

}

</script>

<style>

</style>

基于http协议,最常用的是GET和POST两种方法。

接口文档需要包含哪些信息:

以典型的(一两个)参数做为判断是否请求通过(重点是看响应的信息判断)

post请求有两种常用的请求格式:

1、key-value的格式'Content-Type':'

application/x-www-form-urlencoded'

2、标准json的格式:'Content-Type':'application/json'

#key-value

#json

Web Service是一个[平台](https://baike.baidu.com/item/平台/1064049)独立的,低耦合的,自包含的、基于可[编程](https://baike.baidu.com/item/编程)的web的应用程序,可使用开放的[XML](https://baike.baidu.com/item/XML)([标准通用标记语言](https://baike.baidu.com/item/标准通用标记语言/6805073)下的一个子集)[标准](https://baike.baidu.com/item/标准/219665)来[描述](https://baike.baidu.com/item/描述/8928757)、发布、发现、协调和配置这些应用程序,用于开发分布式的交互操作的[应用程序](https://baike.baidu.com/item/应用程序/5985445)。 [1]

Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的、专门的第三方软件或硬件, 就可相互交换数据或集成。依据Web Service规范实施的应用之间, 无论它们所使用的语言、 平台或内部协议是什么, 都可以相互交换数据。Web Service是自描述、 自包含的可用网络模块, 可以执行具体的业务功能。Web Service也很容易部署, 因为它们基于一些常规的产业标准以及已有的一些技术,诸如[标准通用标记语言](https://baike.baidu.com/item/标准通用标记语言/6805073)下的子集[XML](https://baike.baidu.com/item/XML)、HTTP。Web Service减少了应用接口的花费。Web Service为整个企业甚至多个组织之间的业务流程的集成提供了一个通用机制。

**SOAP**

SOAP即[简单对象访问协议](https://baike.baidu.com/item/简单对象访问协议)(Simple Object Access Protocol),它是用于交换[XML](https://baike.baidu.com/item/XML)([标准通用标记语言](https://baike.baidu.com/item/标准通用标记语言)下的一个子集)编码信息的轻量级协议。它有三个主要方面:XML-envelope为描述信息内容和如何处理内容定义了框架,将程序对象编码成为XML对象的规则,执行[远程过程调用](https://baike.baidu.com/item/远程过程调用)(RPC)的约定。SOAP可以运行在任何其他[传输协议](https://baike.baidu.com/item/传输协议)上。例如,你可以使用 SMTP,即因特网[电子邮件协议](https://baike.baidu.com/item/电子邮件协议)来传递SOAP消息,这可是很有诱惑力的。在[传输层](https://baike.baidu.com/item/传输层)之间的头是不同的,但XML有效负载保持相同。

Web Service 希望实现不同的系统之间能够用“[软件](https://baike.baidu.com/item/软件)-软件对话”的方式相互调用,打破了软件应用、网站和各种设备之间的格格不入的状态,实现“基于Web无缝集成”的目标。

使用Python实现服务端

service.py 服务端启动文件

app.py webservice接口

使用Python实现客户端

client.py

上面调用的客户端接口,测试结果如下: