上题目

接之前内容继续：

• 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脚本来实现，简单来说，

1. 先通过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

        
  
      
Serial Number
      
name
      
value
  
  
      
 
      
 
      
 
  
展示首行展示所有

前端

57-56clientside.py

from flask import Flask,render_template,request,url_for,redirectfrom datetime import dateimport requestsimport jsonimport 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,jsonifyfrom datetime import dateimport requestsfrom elasticsearch import Elasticsearchfrom elasticsearch_dsl import Searchapp = 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 1def 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 list1def 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

输入相关信息  
商品名称:  
商品序列号:  
商品价值:  
插入 商品 {{name}} 序列号 {{sn}} 金额 {{value}}服务端反馈信息如下：{{info}}

query.html

 插入需要查询的信息  
商品名字： 
{{info}}

前端效果图：

点击左边“展示首行”，激活第一个函数 myFunction()

展示首行信息

点击右边“展示所有”，展示所有数据

明天继续完成第二个功能，把json 数据传递给前端程序,前端程序直接用panda函数把数据转化为excel 供下载。