12

src/api/list.js

@@ -1,9 +1,9 @@
 import request from '../utils/request'
 
-export function getlist (data) {
+export function getlist (id) {
   return request({
-    url: '/tags/:id',
+    url: `/list/${id}`,
     method: 'get',
-    data: data
+    params: { id }
   })
 }

src/components/navigationBar.vue

@@ -78,7 +78,7 @@ export default {
       // 清除Vuex中的状态（如果有的话）
       this.$store.commit('logout')
       // 重定向到登录页面
-      this.$router.push({ path: '/login' })
+      this.$router.push({ path: '/' })
       this.$message({
         message: '退出成功',
         type: 'success'

src/router/index.js

@@ -136,7 +136,7 @@ const routes = [
   //   name: 'pythonContent',
   //   component: pythonContent
   // },
-  { path: '/note/:id', component: NoteDetail }
+  { path: '/list/:id', component: NoteDetail }
 ]
 
 const router = new VueRouter({

src/views/labelPage.vue

@@ -11,8 +11,8 @@
         </header>
         <div class="box-bd">
           <ul class="clearfix">
-            <li v-for="(item, index) in items" :key="index">
+            <li v-for="(item, index) in items" :key="index" >
-              <router-link :to="`/tags/${item.id}`">
+              <router-link :to="`/list/${index + 1}`"> <!-- 这里的index + 1对应着表的序号 -->
                 <img :src="item.url" :alt="item.title" />
                 <h4>{{ item.title }}</h4>
               </router-link>
@@ -26,38 +26,7 @@
       <button @click="openDialog">添加笔记</button>
     </div>
 
-    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
+    <!-- 其他代码 -->
-
-      <el-form ref="form" :model="form" :rules="rules" label-width="230px" :inline="true" >
-        <el-form-item label="标题" prop="addContent">
-          <el-input v-model="form.addContent"></el-input>
-        </el-form-item>
-
-        <el-upload
-        class="upload-demo"
-        drag
-        action="https://jsonplaceholder.typicode.com/posts/"
-        multiple
-        style="text-align: center"
-      >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip" slot="tip">
-          只能上传jpg/png文件，且不超过500kb
-        </div>
-      </el-upload>
-      </el-form>
-
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleAdd">确 定</el-button>
-      </span>
-    </el-dialog>
-
-    <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction">
-      <span>我来啦!</span>
-    </el-drawer>
-    <musIc />
   </div>
 </template>
 
@@ -82,17 +51,14 @@ export default {
     }
   },
   created () {
-    this.fetchNote()
+    this.fetchTags()
   },
   methods: {
-    fetchNote () {
+    fetchTags () {
       getTags().then(res => {
         this.items = res.data
       })
     },
-    open () {
-      // this.drawer = true
-    },
     openDialog () {
       this.dialogVisible = true
     },

src/views/particulars/list.vue

@@ -1,34 +1,36 @@
 <template>
-    <div class="note-detail">
+    <div>
-      <h1>{{ note.title }}</h1>
+      <main class="main-content">
-      <!-- 显示笔记内容的其它元素 -->
+        <!-- 显示详情内容 -->
+        <div v-html="detailContent"></div>
+      </main>
     </div>
   </template>
 
 <script>
 import { getlist } from '@/api/list'
+
 export default {
   name: 'liSt',
   data () {
     return {
-      note: {} // 存储笔记详细信息的对象
+      detailContent: '' // 存储详情内容
     }
   },
   created () {
-    this.getList()
+    this.fetchContent() // 获取内容
   },
-
   methods: {
-    getList () {
+    fetchContent () {
-      const id = this.$route.query.id
+      const id = this.$route.params.id // 获取路由参数中的内容 ID
-      getlist(id).then(res => {
+      // 根据 ID 获取内容
-        console.log(res)
+      getlist(id).then(response => {
-        this.note = res.data
+        // 处理返回的内容
+        this.detailContent = response.data[0].content // 假设返回的数据是数组，取第一个元素的内容字段
+      }).catch(error => {
+        console.error('Error fetching content:', error)
       })
     }
-  },
-  watch: {
-    '$route.query.id': 'fetchData'
   }
 }
 </script>