中药API的应用

吃不胖的朱

已于 2023-07-26 20:55:28 修改

阅读量246

点赞数

文章标签： python html5 mysql

于 2023-07-26 14:55:51 首次发布

本文链接：https://blog.csdn.net/PXXPY/article/details/131939061

版权

文章介绍了如何使用Flask作为后端与MySQL交互，Nginx作为前端展示，构建一个中药查询网页。实现了分页查询和搜索功能，用户可通过输入关键词搜索中草药信息，并在前端展示结果。前端使用jQuery处理交互逻辑。

摘要由CSDN通过智能技术生成

中药API的应用

简要介绍

在网络上获取的中药描述及图片，用这些数据搭建一个中药查询网页

技术栈：flask+nginx+mysql

flask作为后端与数据库交互，nginx作为前端进行交互
前端可以实现查询数据并查看中草药图片
后端返回数据有大小限制，25条为一页

数据表结构

后端代码

#查询语句
#SELECT * FROM `tcmdata` ORDER BY `mid` LIMIT 25 OFFSET 25;
#第一波代码
@app.route('/tcmapi')
def tcmapi():
    page=request.args.get('page')
    try:
        page=int(page)
    except:
        return "数据异常"
        
    if page:
        conn = pymysql.connect(
            host='kl.clouded.top',
            port=3306,
            user='root',
            password='anxunqixun',
            db='api'
        )
        cursor = conn.cursor()
        sql = f"SELECT * FROM `tcmdata` ORDER BY `mid` LIMIT 10 OFFSET {10*page};"
        print(sql)
        cursor.execute(sql)
        results = cursor.fetchall()
        cursor.close()
        conn.close()
        return jsonify(results)
    else:
        return "数据异常"

测试之后确实符合基本要求，但为了结合搜索的功能，优化了代码

@app.route('/tcmapi')
def tcmapi():
    page=request.args.get('page')
    key=request.args.get('key')
    try:
        page=int(page)
    except:
        return "数据异常"
        
    try:
        results=tcmsql(f"SELECT * FROM `tcmdata` WHERE `name` LIKE '{key}' ORDER BY `mid` ASC LIMIT 10 OFFSET {10*page};")
        page=int(tcmsql(f"SELECT COUNT(`mid`) FROM `tcmdata` WHERE `name` LIKE '{key}' ;")[0][0]/10)
        result_text = {"s":"200","data":results,"allPage":page}
        response = jsonify(result_text)
        return response
    except:
        return "数据异常"
def tcmsql(sql):
    conn = pymysql.connect(
        host='kl.clouded.top',
        port=3306,
        user='root',
        password='anxunqixun',
        db='api'
    )
    cursor = conn.cursor()
    #sql = f"SELECT * FROM `tcmdata` WHERE `name` LIKE '{key}' ORDER BY `mid` ASC LIMIT 10 OFFSET {10*page};"
    cursor.execute(sql)
    results = cursor.fetchall()
    cursor.close()
    conn.close()
    return results

后端代码就算完成，开始写前端，这里用了jquery

前端代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中草药数据</title>
<style>
    table{
        text-align: center;
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
    #moreDIV{
        background: rgb(231 195 195 / 98%);
        display: none;
        top: 0%;
        position: fixed;
        height: 100%;
        width:100%;
        overflow:auto;
    }
</style>
</head>
<body>

<div id="control">
    <input  id="searchenter"><button onclick="search();" id="btnsearch">搜索</button>
    <button onclick="nextpage()">下一页 </button>
    <button onclick="formpage()">上一页 </button>
    <button onclick="p=maxp;getRes(p,key);">尾页 </button>
    <p id="allpage"></p>
    <p>跳转到第<input type="number" id="setPage" name="enterpage" value="1">页<button onclick="turnpage()">跳转</button></p>

</div>
<div>
    <table id="work_table">
        <tr>
            <td>标号</td>
            <td>草药名</td>
            <td>图片</td>
            <td>详情</td>
        </tr>
    </table>
</div>

<div id="moreDIV" >
    <a href="javascript:void(0)" onclick="hideWindow();" style="top: 0;position: fixed;">关闭标签</a>
    <p id="med_id"></p>
    <p id="med_name_pinyin"></p>
    <p id="med_name_zh"></p>
    <p id="med_name_en"></p>
    <p id="med_name_latin"></p>
    <p id="med_name_alias"></p>
    <p id="med_origin"></p>
    <p id="med_appearance"></p>
    <p id="med_function"></p>
    <p id="med_property"></p>
    <p id="med_tropisw"></p>
    <p id="med_pharmacology"></p>
    <p id="med_chemistry"></p>
    <p id="med_chem_identify"></p>
    <p id="med_app_identify"></p>
    <p id="med_attached_prescription"></p>
    <p id="med_usage"></p>
    <p id="med_processing"></p>
    <p id="med_preparation"></p>
    <p id="med_adverse_reaction"></p>
    <p id="med_toxcity"></p>
    <p id="med_attention"></p>
    <p id="med_store"></p>
    <p id="med_remark"></p>
    <p id="med_enviroment"></p>
    <p id="med_info_genuine"></p>
    <p id="med_info_location"></p>
</div>
    <button onclick="nextpage()">下一页 </button>
    <button onclick="formpage()">上一页 </button>
<script type="text/javascript">


function add(id,name,pho,i){
    let table = document.getElementById("work_table");
    let newRow = table.insertRow();
    let cellID = newRow.insertCell();
    let cellName = newRow.insertCell();
    let cellPho = newRow.insertCell();
    let cellMore = newRow.insertCell();
    cellID.innerHTML =id ;
    cellName.innerHTML =name ;
    cellPho.innerHTML ='<img src="'+pho+'" width="150" height="114">'+'<img src="http://kl.clouded.top:81/TCMPhoto/TCM/'+name+'.jpg" width="150" height="114">' ;
    cellMore.innerHTML ='<a href="javascript:void(0);" onclick="showMore(this)"  value= "'+i+'">更多</a>';//more ;
}
function showMore(e){
    var index=$(e).attr("value");
    console.log(res.data[index][2]);
    moreTCM(eval("(" + res.data[index][2] + ")"));
    
}
function getRes(page,key){
    //var page=1;  
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', 'http://kl.clouded.top:5555/tcmapi?page='+(page-1)+'&key='+key, true);
    httpRequest.send();
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            res = eval("(" + httpRequest.responseText + ")");//获取到json
            console.log(res.data);
            maxp=res.allPage;
            document.getElementById("allpage").innerText=p+'/'+maxp;
            $("#work_table  tr:not(:first)").remove();//清楚已有数据表
            for(var i = 0; i < res.data.length; i++) {
                //console.log(res.data[i]);
                add(res.data[i][0],res.data[i][1],res.data[i][3],i);
            }
        }
    };
}
p=1;
maxp=1;
key='%'
getRes(p,key);
function nextpage(){
    p=p+1;
    if(p<=maxp){getRes(p,key);}else{p=p-1;alert("最后一页了");}
}
function formpage(){
    p=p-1;
    if (p>=1) {getRes(p,key);}else{p=p+1;alert("已经是第一页了");}
}
function turnpage(){
    p=document.getElementById("setPage").value;
    p!='' ? (p=p) : (p=1);
    console.log(p);
    getRes(p,key)
}
function search(){
    key=document.getElementById("searchenter").value;
    document.getElementById("searchenter").value='';
    p=1
    getRes(p,key)
}
function moreTCM(d) {
    //console.log(d);
    var table={"med_name_pinyin":"拼音","med_id":"药品ID","med_name_zh": "中文名", "med_name_en": "英文名", "med_name_latin": "拉丁名", "med_name_alias": "别名", "med_origin": "基源", "med_appearance": "原形态", "med_function": "功效", "med_property": "性味", "med_tropisw": "归经", "med_pharmacology": "药理作用", "med_chemistry": "化学成分", "med_chem_identify": "理化鉴别", "med_app_identify": "性状鉴别", "med_attached_prescription": "附方", "med_usage": "用法用量", "med_processing": "炮制", "med_preparation": "制剂", "med_adverse_reaction": "不良反应", "med_toxcity": "毒性", "med_attention": "注意", "med_store": "贮藏", "med_remark": "备注", "med_enviroment": "生境分布", "med_info_genuine": "道地", "med_info_location": "产地"};
    for(let key in table){
        if(d[key]){
            document.getElementById(key).innerText= table[key]+':'+d[key];
        }else{
            document.getElementById(key).innerText='';
        }
    }
    displayWindow();
    
}
function displayWindow() {
    document.getElementById("moreDIV").style.display= "block";
}
function hideWindow() {
    document.getElementById("moreDIV").style.display= " none";
}
</script>
<script src="./cn/assets/js/jquery-1.8.2.min.js"></script>


</body>
</html>

效果演示

代码还是挺多的，下面看看效果吧

吃不胖的朱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
中药API的应用

在网络上获取的中药描述及图片，用这些数据搭建一个中药查询网页技术栈：flask+nginx+mysqlflask作为后端与数据库交互，nginx作为前端进行交互前端可以实现查询数据并查看中草药图片后端返回数据有大小限制，25条为一页数据表结构。
复制链接

扫一扫