python3 apistar 创建web api 根据前端用户输入返回数据库查询结果

来源：互联网发布：淘宝评论在哪里看编辑：程序博客网时间：2024/06/06 19:13

apistar是一个针对python3的web api框架，详见https://github.com/encode/apistar

1. pip install apistar

2. 在cmd里切换到希望的文件路径下，启动一个项目 apistar new . 然后我们可以看到生成了两个python文件，app.py和test.py

3. 查看交互式API文档，在浏览器里输入 http://localhost:8080/docs/

这个文档可以显示我们在app.py里定义的函数，并且交互式地查看函数返回值

例如我定义了一个函数叫show_task, 输入是task_id，返回值是这个task的详细信息，那么我们在交互界面里可以通过输入一个valid task_id返回查询的结果

4. 在app.py里定义的show_task函数如下：

__mongo = Nonedef connect_db():    global __mongo    if __mongo is None:        __mongo = pymongo.MongoClient()    db = __mongo['dbname']    collection = db['collection_name']    return collectiondef show_task(task_id: int):    collection = connect_db()    record = collection.find_one({'task_id': task_id}, {"_id": 0})    return record

之前写过一篇文章讲爬yunniao app的货车订单数据，放到mongodb里，这个函数是通过用户在前端提交想要查询的task_id，我们到数据库去找相应的记录并返回。

{"_id":0}是指忽略这个key，因为_id 的值是ObjectId，可能影响结果显示

5. 添加函数的路径

routes = [    Route('/', 'GET', welcome),    Route('/task', 'GET', show_task),    Include('/docs', docs_urls),    Include('/static', static_urls)]

把我们刚刚写的函数show_task加入到routes的列表里，然后就可以通过/docs访问刚刚写的函数并进行交互

5. 我们可以开始编写给用户提供查询的网页

<html><head> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <link href="mycss.css" rel="stylesheet" media="screen" /></head><body><h1 style="text-align:left">Let's find a task</h1><hr /><input name='task_id' id='task_id'><input type='button' id='submit' onclick='search_id()' value='search_id'><h4>输入task_id查询运单信息</h4><table id='data'><tr><th>task_id</th><th>use_time</th><th>distance</th><th>customer_name</th></tr></table><script>function search_id(){var task_id = $('#task_id').val();var table = $('#data');$.get('http://127.0.0.1:8080/task?task_id=' + task_id, function(response,status){table.append("<tr><td>"+task_id+"</td><td>"+response['use_time']+"</td><td>"+response['distance_max']+"</td><td>"+response['customer']['customer_name']+"</td></tr>");});}</script></body></html>

最后的效果

有可能遇到禁止访问的问题，需要在app.py里进行设置

def AcceptOrigin(method: http.Method, response: types.ReturnValue):    response.headers.append("Access-Control-Allow-Origin", "*")    response.headers["Access-Control-Allow-Methods"] = "GET,POST,PUT,DELETE,OPTIONS,HEADERS"    response.headers["Access-Control-Allow-Headers"] = "Authorization"    response.headers["Access-Control-Expose-Headers"] = "*"    if method.lower() == "options":        response.status = 200    return responsesettings = {    "AFTER_REQUEST": [        hooks.render_response,        AcceptOrigin,    ]}app = App(routes=routes, settings=settings)

关于里面前端的一些要点：

为了使用jQuery，需要在head里加上

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

css是后期对网页美化时定义的样式

link链接css文件的方式是通过在html中引用外部css文件来控制样式，在html head中加上<link href="css文件路径" rel="stylesheet" media="screen" />

其中href为css文件的路径；rel="stylesheet"表示此链接文件是文档的外部样式表；media="screen"表示被链接文档应用在计算机屏幕上，这是默认值。

涉及到的jQuery的语法

1. 选取元素并执行操作 $(元素).操作()

- $定义jQuery， (元素)查找定位HTML元素，action()对元素操作

--元素选择器

jQuery使用CSS选择器选取HTML元素，下面是一些例子

（1）$(this) 当前元素

（2）$(table) 所有<table>元素

（3）$('#search') 所有id是search的元素

（4）$('.search')所有class是search的元素

（5）$('table#data')选择所有id是data的<table>元素

更多详见：http://www.w3school.com.cn/jquery/jquery_selectors.asp

-- 事件

$('button').click(function(){... ...}) 当button被点击时函数触发，执行函数定义的相应操作。

2. 获得内容和属性

（1）$(元素).text() 获取元素的文本内容

（2）$(元素).html() 获取元素内容

（3）$(元素).val() 返回表单的值

3. 添加

（1）append() - 在被选元素的结尾插入内容
（2）prepend() - 在被选元素的开头插入内容
（3）after() - 在被选元素之后插入内容
（4）before() - 在被选元素之前插入内容

4. AJAX 异步JavaScript和XML，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

ajax通过http从服务器上请求数据

$.get(URL, callback) callback是请求成功后执行的函数名

$.post(URL, data, callback) data参数规定连同请求发送的数据

阅读全文

0 0