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)
]
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参数规定连同请求发送的数据
982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
