修改为前后端分离模式

view/src/page/index.vue

@@ -11,7 +11,14 @@
             <div style="display: flex;">
                 <el-input v-model="form.start" />
                 <el-button style="flex-shrink: 0;margin: 0 10px;" @click="setlist" type="primary">设置</el-button>
+            </div>
+
+        </el-form-item>
+        <el-form-item label="下载保存地址">
+            <div style="display: flex;">
+                <el-input v-model="form.save" />
                 <el-button style="flex-shrink: 0;margin: 0 10px;" @click="dow" type="primary">下载</el-button>
+                <el-button style="flex-shrink: 0;margin: 0 10px;" @click="showmsg" type="primary">查看进度</el-button>
             </div>
 
         </el-form-item>
@@ -21,7 +28,7 @@
             </el-table-column>
             <el-table-column label="url" prop="url" />
         </el-table>
-        <el-dialog :fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false" v-model="dialogVisible" :show-close="false" title="Tips" width="30%" >
+        <el-dialog :fullscreen="true"  v-model="dialogVisible" title="Tips" width="30%" >
             <div style="width: 100%;height: 100%;overflow-y: auto;">
                 <div v-for="i in msg">{{ i }}</div>
             </div>
@@ -33,19 +40,26 @@
 <script setup>
 import { ref } from 'vue';
 import { ElLoading,ElMessage } from 'element-plus'
+import axios from 'axios';
 const dialogVisible = ref(false)
 const form = ref({
     name: "https://v.qq.com/x/cover/mzc002007vp35qj.html",
-    start: 1
+    start: 1,
+    save:"D:/dl"
 })
 const tableData = ref([])
 const table = ref()
 function getlist() {
-    let load = ElLoading.service()
-    window.getlist(form.value.name).then((res) => {
-        console.log(res)
-        tableData.value = res
-        load.close()
+    // let load = ElLoading.service()
+    // window.getlist(form.value.name).then((res) => {
+    //     console.log(res)
+    //     tableData.value = res
+    //     load.close()
+    // })
+    axios.get("http://127.0.0.1:3050/getQqList",{
+        params: {url:form.value.name}
+    }).then((r)=>{
+        tableData.value = r.data
     })
 }
 function setlist() {
@@ -55,39 +69,32 @@ function setlist() {
         table.value.toggleRowSelection(tableData.value[i], undefined)
     }
 }
-function handleSelectionChange(i) {
-    console.log(i)
-}
 const msg = ref([])
-function log(res,i,end) {
-    console.log(end)
-    if(end){
-        res()
-    }else{
-        msg.value.unshift(i)
-    }
-}
 
-function down(info) {
-    return new Promise((res) => {
-        const callback = log.bind(this,res)
-        window.dowload(info,callback)
-    })
-}
 async function dow() {
     dialogVisible.value = true
     let list = table.value.getSelectionRows()
     for(let i of list){
-        await down(i)
+        await axios.get("http://127.0.0.1:3050/startDown",{
+            params:i
+        })
     }
-    dialogVisible.value = false
+    // dialogVisible.value = false
     ElMessage({
         showClose: true,
-        message: '下载完成',
+        message: '添加完成',
         type: 'success',
         duration:0
     })
 }
+const source = new EventSource(`http://127.0.0.1:3050/msg`);
+source.onmessage = event => {
+  // 挂到载体上面
+  msg.value.unshift(event.data)
+}
+function showmsg(){
+    dialogVisible.value = true
+}
 </script>
 
 <style lang="scss" scoped>