网站首页 > 知识剖析 正文
上题目
接之前内容继续：
- 0. 总体架构设计：https://www.toutiao.com/article/7113727029614215719/
- 1. 后端架构设计和代码调试 https://www.toutiao.com/article/7115668110866137600/
- 2. https://www.toutiao.com/article/7116738277759386112/
- 3. https://www.toutiao.com/article/7117065496683741709/
- 4. https://www.toutiao.com/article/7120816663796236841/
- 5. https://www.toutiao.com/article/7121250227876594191/
之前遗留两个问题：“缺乏把返回的数组在前端界面做格式化，另外缺乏把数据导出的选项，明天研究下这块”
今天解决第一个挑战：前端展示的问题，这个主要通过JS脚本来实现，简单来说，
- 先通过python 把数据传递给前端 .
flask render_template('*.html'，info = info)方法。
2.在前端用js 收集数据。然后用js for 循环轮流把数据展示出来。
js 收集数据命令： var list2 = {{info|tojson}}
循环遍历，参考：https://www.runoob.com/js/js-loop-for.html
本节主要修改了display.html 的代码：
display.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display2</title>
</head>
<body>
<table border = "1">
<tr>
<th>Serial Number</th>
<th>name</th>
<th>value</th>
</tr>
<tr>
<th id="mysn"> </th>
<th id="myname"> </th>
<th id="myvalue"> </th>
</tr>
</table>
<button onclick="myFunction()">展示首行</button>
<button onclick="listAll()">展示所有</button>
<p id="demo"></p>
<script>
function myFunction(){
var carname="Volvo";
var list1 = {{info|tojson}};
document.getElementById("demo").innerHTML=carname;
document.getElementById("mysn").innerHTML=list1[0]["Serial number"];
document.getElementById("myname").innerHTML=list1[0]["name"];
document.getElementById("myvalue").innerHTML=list1[0]["value"];
}
function listAll(){
var list2={{info|tojson}}; //本行接收从python render_template()传递的info 数据，并转换为json模式后传递个List2对象
document.write("<table border = \"1\">")
document.write("<tr>")
document.write("<th>序列号</th>")
document.write("<th>名字</th>")
document.write("<th>金额</th>")
document.write("<th>下载所有</th>")
document.write("</tr>")
for (var i=0; i<list2.length;i++)
{
document.write("<tr>")
document.write("<th>" + list2[i]["Serial number"] + "</th>"); //遍历list2 对象并收集相关信息
document.write("<th>" + list2[i]["name"] + "</th>");
document.write("<th>" + list2[i]["value"] + "</th>");
document.write("<th>" + "下载本行" + "</th>");
document.write("</tr>")
}
document.write("</table>")
}
</script>
</body>
</html>前端
57-56clientside.py
from flask import Flask,render_template,request,url_for,redirect
from datetime import date
import requests
import json
import time
""" 接：
0. 总体架构设计：https://www.toutiao.com/article/7113727029614215719/
1. 后端架构设计和代码调试 https://www.toutiao.com/article/7115668110866137600/
2. https://www.toutiao.com/article/7116738277759386112/
3. https://www.toutiao.com/article/7117065496683741709/
"""
app = Flask(__name__)
"""
插入逻辑+展示逻辑
"""
@app.route('/',methods=['GET','POST'])
def index():
# 如果提交表单，则收集表单数据,转换为字典数据后，向后端传递
if request.method == "POST":
# 1.收集表单数据
name = request.form['name']
sn = request.form['sn']
value = request.form['value']
# 2.向后端提交post 请求，模拟postman
url = "http://127.0.0.1:8008/api/input"
r=requests.post(url,json={"name":name,"sn":sn,"value":value})
# 3. 把后端请求的返回，做相关展示
info= r.json()
print(info)
print(type(info))
#.4. 把内容做一个展示
return render_template('index.html',name=name,sn=sn,value=value,info=info)
# 如果是输入，则进入输入选项,这里可以输入Name,Serial Number,Value
if request.method == "GET":
return render_template('index.html')
"""
查询逻辑
"""
@app.route('/query',methods=['GET','POST'])
def info_query():
#如果是post请求，直接开始和后端对接并进行查询
if request.method == "POST":
#1. 收集表单请求
searchstring = request.form['searchstring']
#2. 向后端提交Post请求，模拟postman
url = "http://127.0.0.1:8008/api/query"
r = requests.post(url,json={"searchstring":searchstring})
#3. 把后端的结果做解析
info = r.json()
print(info[1])
print(type(info[1]))
#4. 把内容做展示
return render_template('query.html',info=info)
#如果是get请求，则做查询，则跳转到查询页面，输入query name的相关数值
if request.method == "GET":
return render_template('query.html')
"""
展示逻辑
"""
@app.route('/display',methods=['GET'])
def info_display():
#如果是post请求，直接开始和后端对接并进行查询
url = "http://127.0.0.1:8008/api/display"
r = requests.post(url)
#3. 把后端的结果做解析
info = r.json()
print(info[1])
print(type(info[1]))
#4. 把内容做展示
return render_template('display2.html',info=info[1])
if __name__ == '__main__':
app.run(host='0.0.0.0',port=80,debug = True)后端：57-56servernew2.py
from flask import Flask,render_template,request,url_for,redirect,jsonify
from datetime import date
import requests
from elasticsearch import Elasticsearch
from elasticsearch_dsl import Search
app = Flask(__name__)
def store_into_es(name,sn,value):
#连接ES
es = Elasticsearch(['http://localhost:9200'])
# 查看inventory 表中的信息
#print("the id is ".format(id))
try:
id = es.count(index='inventory')['count']
print("the id is {0}, we need +1".format(id))
except:
print("the id is not exist")
id = 0
print("The info to be stored is {0}".format({'name':name,'Serial number':sn,'value':value}))
res = es.index(index="inventory",id=int(id)+1,document={'name':name,'Serial number':sn,'value':value})
print(res)
return 1
def display_es():
# 连接ES
list1 =[]
es = Elasticsearch(['http://localhost:9200'])
# 查看inventory 表中的信息
id = es.count(index='inventory')['count']
for i in range(1, id + 1):
res = es.get(index="inventory", id=i)
print(res['_source'])
list1.append(res['_source'])
return list1
def search_es(searchstring):
#连接es
es = Elasticsearch(['http://localhost:9200'])
searchstring = searchstring
print("The string to be searched is {0}".format(searchstring))
# 查看inventory 表中的信息
s = Search(using=es,index="inventory").query("fuzzy",name=searchstring)
response = s.execute()
print(response.to_dict())
responsedic = response.to_dict()
infolist = responsedic['hits']['hits']
return_list = []
if infolist !=[]:
info = responsedic['hits']['hits'][0]['_source']
for i in infolist:
print(i['_source'])
return_list.append(i['_source'])
else:
info = []
print(return_list)
return return_list
"""
1.把数据json化， {'name':name,'Serial number':sn,'value':value}；
2.把json数据插入表格inventory，其中id 为之前的id+1；
3.
"""
@app.route('/api/input/',methods=['POST'])
def edit():
name = request.json['name']
sn = request.json['sn']
value = request.json['value']
result = store_into_es(name,sn,value)
if result == 1:
info = "The inventory info is successful stored"
else:
info = "Something goes wrong, can not store into storage"
return jsonify("info",info)
@app.route('/api/display/',methods=['POST'])
def display_info():
list1 = display_es()
return jsonify("enventory info",list1)
@app.route('/api/query/',methods=['POST'])
def query_info():
searchstring = request.json['searchstring']
info = search_es(searchstring)
return jsonify("enventory info",info)
if __name__ =='__main__':
app.run(host='0.0.0.0',port=8008,debug=True)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<form method = "post">
<label for = "text">输入相关信息 </label> <br>
商品名称: <input type="text" name = "name" required> <br>
商品序列号: <input type="text" name = "sn" required> <br>
商品价值: <input type="number" name = "value" required> <br>
<input type="submit" name ="submit" value="保存">
</form>
插入 商品 {{name}} 序列号 {{sn}} 金额 {{value}}
服务端反馈信息如下：
{{info}}
</body>
</html>query.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>query</title>
</head>
<body>
<form method = "post">
<label> 插入需要查询的信息 </label> <br>
商品名字：<input type="text" name="searchstring" required> <br>
<input type="submit" name ="submit" value="查询">
</form>
{{info}}
</body>
</html>前端效果图：
点击左边“展示首行”，激活第一个函数 myFunction()
点击右边“展示所有”，展示所有数据
明天继续完成第二个功能，把json 数据传递给前端程序,前端程序直接用panda函数把数据转化为excel 供下载。
猜你喜欢
- 2024-11-25 服务器弱口令漏洞上传木马攻击实验
- 2024-11-25 10、Django 新建ipa(通讯录)项目
- 2024-11-25 Vue组件传参:Vue父组件向子组件传参
- 2024-11-25 第5天 | 16天搞定前端，html布局，表格和大块头
- 2024-11-25 如何应用“XML+XSLT”技术分离Web表示层数据和样式
- 2024-11-25 web前端ajax笔记之一
- 2024-11-25 vue3 新特性 computed、watch、watchEffect 看完就会
- 2024-11-25 巧用SqlServer数据库实现邮件自动发送功能
- 2024-11-25 「案例演练」测试器与模板继承
- 2024-11-25 Vue的框架(了解)
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)