下午场，前端开始向python发送预测请求

src/components/love.vue

@@ -26,6 +26,7 @@
       </div>
     </div>
 
+
     <!-- 内容 -->
     <div class="love-container">
 
@@ -106,6 +107,41 @@
       </div>
 
       <div style="padding: 0 20px">
+
+
+        <div style="width: 350px ;padding: 15px;border-radius: 10px;margin-top: 30px;animation: hideToShow 1s ease-in-out" class="card-wrap card-content shadow-box-mini background-opacity wow" v-show="card !== 4">
+          <div style="display: flex; flex-wrap: wrap">
+            <div style="flex-basis: 100%; margin-bottom: 10px;">
+              <div style="color: var(--lightGreen);font-size: 20px;font-weight: bold;margin-bottom: 10px; white-space: nowrap;">
+                预测DDI
+              </div>
+            </div>
+            <div style="flex-basis: 100%; margin-bottom: 10px;">
+              <input class="ais-SearchBox-input" type="text"
+                     v-model="smiles1"
+                     placeholder="请输入SMILES" maxlength="32">
+            </div>
+            <div style="flex-basis: 100%; margin-bottom: 10px;">
+              <input class="ais-SearchBox-input" type="text"
+                     v-model="smiles2"
+                     placeholder="请输入SMILES" maxlength="32">
+            </div>
+            <div style="flex-basis: 100%; margin-bottom: 10px;">
+              <div class="ais-SearchBox-input" style="background-color: white; padding: 6px; border-radius: 4px;border: none; text-align: center;">
+                {{predictResult}}
+              </div>
+            </div>
+
+            <div class="ais-SearchBox-submit" @click="handleQuery();" style="flex-basis: 100%;display: flex; justify-content: right; align-items: center;" >
+              <svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
+                <path d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z" fill="#51C492"></path>
+                <path d="M772.8 718.4c48-58.4 76.8-132.8 76.8-213.6 0-186.4-151.2-337.6-337.6-337.6-186.4 0-337.6 151.2-337.6 337.6 0 186.4 151.2 337.6 337.6 337.6 81.6 0 156-28.8 213.6-76.8L856 896l47.2-47.2-130.4-130.4zM512 776c-149.6 0-270.4-121.6-270.4-271.2S363.2 233.6 512 233.6c149.6 0 271.2 121.6 271.2 271.2C782.4 654.4 660.8 776 512 776z" fill="#FFFFFF"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+
         <!-- 卡片 -->
         <div class="card-wrap" v-show="card !== 4">
 
@@ -387,6 +423,8 @@
 
 <script>
 
+import {listTable1, predictReaction} from "@/utils/table1";
+
   const treeHole = () => import( "./common/treeHole");
   const comment = () => import( "./comment/comment");
   const myFooter = () => import( "./common/myFooter");
@@ -408,6 +446,9 @@
 
     data() {
       return {
+        predictResult:'000',
+        smiles1 :'',
+        smiles2 :'',
         userLove: {
           bgCover: "",
           manCover: "",
@@ -496,6 +537,14 @@
     },
 
     methods: {
+      /** 预测按钮操作 */
+      handleQuery() {
+        this.predictResult='';
+        predictReaction(this.smiles1,this.smiles2).then(response => {
+          this.predictResult = response.data; // 将预测结果赋值给 predictResult
+        });
+        // this.predictResult = '666';
+      },
       selectSort(sort) {
         this.$emit("selectSort", sort);
       },
@@ -858,6 +907,19 @@
 
 <style scoped>
 
+.ais-SearchBox-input {
+  padding: 0 14px;
+  height: 30px;
+  width: calc(100% - 50px);
+  outline: 0;
+  border: 2px solid var(--lightGreen);
+  border-right: 0;
+  border-radius: 40px;
+  color: var(--maxGreyFont);
+  background: var(--white);
+  opacity: 0.5;
+}
+
   .love-container {
     background-image: linear-gradient(to right, rgba(37, 82, 110, 0.1) 1px, var(--background) 1px), linear-gradient(to bottom, rgba(37, 82, 110, 0.1) 1px, var(--background) 1px);
     background-size: 3rem 3rem;

src/utils/constant.js

@@ -18,8 +18,8 @@ export default {
   //前后端定义的密钥，AES使用16位
   cryptojs_key: "aoligeimeimaobin",
   qiniuUrl: "https://upload.qiniup.com",
-  qiniuDownload: "$$$$七牛云下载地址，仿照【https://file.poetize.cn/】",
-
+  // qiniuDownload: "$$$$七牛云下载地址，仿照【https://file.poetize.cn/】",
+  qiniuDownload: "http://s6ondx7d9.hd-bkt.clouddn.com/",
   favoriteVideo: "$$$$自己找一个视频链接作为百宝箱的封面",
 
   loveWeiYan: "https://s1.ax1x.com/2022/12/04/zsKgDs.jpg",

src/utils/table1.js

@@ -31,6 +31,19 @@ export function selectDetails(drugName) {
     .catch(error => console.error(error));
 }
 
+/**
+ *
+ * @param drugName
+ * @returns {Promise<AxiosResponse<any> | void>}
+ */
+export function predictReaction(mol1, mol2) {
+  const url = 'http://127.0.0.1:5000/predict';
+  return axios.get(url, { params: { mol1, mol2 } })
+    .then(response => response.data)
+    .catch(error => console.error(error));
+}
+
+
 
 // 查询药品作用管理详细
 // export function getTable1(id) {