在pycharm中建立一个layui框架的网页,网页显示两种药品信息的下拉框且来自mysql中的drug1和drug2 点击查询按钮跳转显示数据库中对应的相互作用信息结果
时间: 2024-05-02 11:17:17 浏览: 108
首先,需要安装 Flask 和 mysql-connector-python 库。
可以按照以下步骤操作:
1. 在 PyCharm 中创建一个新的 Flask 项目,命名为 drug_interaction。
2. 在项目的根目录下创建一个名为 templates 的文件夹,并在其中创建一个名为 index.html 的文件。在 index.html 中可以使用 layui 框架的下拉框组件和表格组件来实现页面布局。
index.html 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drug Interaction</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
</head>
<body>
<div class="layui-container">
<form class="layui-form" action="/query" method="post">
<div class="layui-form-item">
<label class="layui-form-label">Drug 1</label>
<div class="layui-input-block">
<select name="drug1" lay-verify="required">
<option value=""></option>
{% for drug in drug1_list %}
<option value="{{ drug }}">{{ drug }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Drug 2</label>
<div class="layui-input-block">
<select name="drug2" lay-verify="required">
<option value=""></option>
{% for drug in drug2_list %}
<option value="{{ drug }}">{{ drug }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="query">Query</button>
</div>
</div>
</form>
<table class="layui-hide" id="result" lay-filter="result"></table>
</div>
<script type="text/javascript">
layui.use(['form', 'table'], function () {
var form = layui.form;
var table = layui.table;
// 监听查询按钮的点击事件
form.on('submit(query)', function (data) {
// 发送 POST 请求获取查询结果
table.reload('result', {
url: '/result',
where: {
drug1: data.field.drug1,
drug2: data.field.drug2
}
});
return false;
});
// 渲染结果表格
table.render({
elem: '#result',
cols: [[
{field: 'drug1', title: 'Drug 1'},
{field: 'drug2', title: 'Drug 2'},
{field: 'interaction', title: 'Interaction'}
]],
page: false
});
});
</script>
</body>
</html>
```
3. 在项目的根目录下创建一个名为 app.py 的文件。在 app.py 中可以使用 Flask 和 mysql-connector-python 库来实现页面路由和数据库查询。
app.py 代码示例:
```python
from flask import Flask, render_template, request, jsonify
import mysql.connector
app = Flask(__name__)
# MySQL 数据库配置
mysql_config = {
'user': 'root',
'password': '123456',
'host': 'localhost',
'port': '3306',
'database': 'drug_interaction'
}
# 获取数据库连接
def get_connection():
return mysql.connector.connect(**mysql_config)
# 查询药品列表
def get_drug_list():
connection = get_connection()
cursor = connection.cursor()
cursor.execute('SELECT DISTINCT drug1 FROM interaction')
drug1_list = [row[0] for row in cursor.fetchall()]
cursor.execute('SELECT DISTINCT drug2 FROM interaction')
drug2_list = [row[0] for row in cursor.fetchall()]
cursor.close()
connection.close()
return drug1_list, drug2_list
# 查询药品相互作用信息
def get_interaction(drug1, drug2):
connection = get_connection()
cursor = connection.cursor()
cursor.execute('SELECT interaction FROM interaction WHERE drug1 = %s AND drug2 = %s', (drug1, drug2))
result = cursor.fetchone()
cursor.close()
connection.close()
return result[0] if result else None
# 首页路由
@app.route('/')
def index():
drug1_list, drug2_list = get_drug_list()
return render_template('index.html', drug1_list=drug1_list, drug2_list=drug2_list)
# 查询结果路由
@app.route('/result')
def result():
drug1 = request.args.get('drug1')
drug2 = request.args.get('drug2')
interaction = get_interaction(drug1, drug2)
return jsonify([{
'drug1': drug1,
'drug2': drug2,
'interaction': interaction
}])
if __name__ == '__main__':
app.run(debug=True)
```
4. 创建一个名为 interaction 的数据库,并在其中创建一个名为 interaction 的表,用于存储药品相互作用信息。可以使用以下 SQL 语句创建表:
```sql
CREATE TABLE `interaction` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`drug1` varchar(255) NOT NULL,
`drug2` varchar(255) NOT NULL,
`interaction` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
在表中可以插入一些示例数据,例如:
```sql
INSERT INTO `interaction` (`drug1`, `drug2`, `interaction`) VALUES ('drug1', 'drug2', 'interaction1');
INSERT INTO `interaction` (`drug1`, `drug2`, `interaction`) VALUES ('drug1', 'drug3', 'interaction2');
INSERT INTO `interaction` (`drug1`, `drug2`, `interaction`) VALUES ('drug2', 'drug3', 'interaction3');
```
5. 运行 app.py 文件,打开浏览器访问 http://localhost:5000 即可查看页面效果。在页面中选择两种药品并点击查询按钮,会显示它们的相互作用信息。
阅读全文