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 = None
def connect_db():
global __mongo
if __mongo is None:
__mongo = pymongo.MongoClient()
db = __mongo['dbname']
collection = db['collection_name']
return collection
def 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' οnclick='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 response
settings = {
"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参数规定连同请求发送的数据