add new

src/components/blogs/ceshi.vue

@@ -1,95 +1,30 @@
 <template>
-  <a-table :columns="columns" :data-source="data">
-    <template #headerCell="{ column }">
-      <template v-if="column.key === 'name'">
-        <span>
-          <!-- <smile-outlined /> -->
-          Name
-        </span>
-      </template>
-    </template>
-
-    <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'name'">
-          {{ record.name }}
-      </template>
-      <template v-else-if="column.key === 'tags'">
-        <span>
-          <a-tag
-            v-for="tag in record.tags"
-            :key="tag"
-            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-          >
-            {{ tag.toUpperCase() }}
-          </a-tag>
-        </span>
-      </template>
-      <template v-else-if="column.key === 'action'">
-        <span>
-          <a>Invite 一 {{ record.name }}</a>
-          <a-divider type="vertical" />
-          <a>Delete</a>
-          <a-divider type="vertical" />
-          <a class="ant-dropdown-link">
-            More actions
-            <down-outlined />
-          </a>
-        </span>
-      </template>
-    </template>
-  </a-table>
+  <a-form-item name="select-multiple" label="Select[multiple]">
+    <a-select v-model:value="formState.labels" mode="multiple" placeholder="Please select favourite colors">
+      <a-select-option :value="type.id" v-for="type in typelist" >
+        {{ type.color }}
+      </a-select-option>
+    </a-select>
+  </a-form-item>
 </template>
-<script lang="ts" setup>
-import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
-const columns = [
-  {
-    name: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    key: 'address',
-  },
-  {
-    title: 'Tags',
-    key: 'tags',
-    dataIndex: 'tags',
-  },
-  {
-    title: 'Action',
-    key: 'action',
-  },
-];
 
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
+<script setup lang='ts'>
+import { ref } from 'vue';
+
+const formState = ref({
+  labels: [2, 3] // 初始值设定为 typelist 中的 id 值
+});
+
+const typelist = ref([
   {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
+    id: 2,
+    color: 'red'
   },
   {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher'],
-  },
-];
+    id: 3,
+    color: 'green'
+  }
+]);
 </script>
 
+<style></style>

src/router/admin.ts

@@ -14,18 +14,7 @@ const adminRoute: Array<RouteRecordRaw> = [
             {
                 path: "blogmanage",
                 name: "blogmanage",
-                component: () => import("@/views/admin/blogmange/BlogManageView.vue")
-            },
-            {
-                path: "blogmanage/add",
-                component: () => import("@/views/admin/blogmange/BlogFormView.vue"),
-                meta: { requiresAuth: true }
-            },
-            {
-                path: "blogmanage/update/:id",
-                component: () => import("@/views/admin/blogmange/BlogFormView.vue"),
-                meta: { requiresAuth: true },
-                props: true
+                component: () => import("@/views/admin/BlogManageView.vue")
             },
             {
                 path: "classticmanage",

src/views/admin/blogmange/BlogManageView.vue → src/views/admin/BlogManageView.vue

@@ -27,7 +27,7 @@
                             </a-select>
                         </a-form-item>
                         <a-form-item name="labelname" label="标签名称" class="items">
-                            <a-select v-model:value="formState['labelname']" mode="multiple" placeholder="请选择标签">
+                            <a-select v-model:value="formState.labelnames" mode="multiple" placeholder="请选择标签">
                                 <a-select-option :value="label.id" v-for="label in labellist">{{ label.labelname
                                     }}</a-select-option>
                             </a-select>
@@ -135,17 +135,15 @@ const search = async () => {
     }
 };
 
-// 新增
 const formState = ref({
     id: '',
     blogtitle: '',
     typeid: null,
     blogcontent: "",
-    labelname: [],
+    labelnames: [],
     descr: '',
     imglink: ""
 });
-
 const labellist = ref<labelInterface[]>([])
 const labelList = async () => {
     try {
@@ -207,6 +205,7 @@ const addModal = () => {
     formControl.value.open = true
     console.log(formControl.value.ids)
 }
+
 const editModal = (id: any) => {
     formControl.value.ids = id
     formControl.value.open = true
@@ -214,6 +213,7 @@ const editModal = (id: any) => {
         `/blogs/list/search/${id}`
     ).then(response=>{
         formState.value=response.data.data
+
     })
     console.log(formControl.value.ids)
 }
@@ -221,7 +221,7 @@ const onSubmit = () => {
     formRef.value
         .validate()
         .then(async () => {
-            const labels = formState.value.labelname.map(labelId => {
+            const labels = formState.value.labelnames.map(labelId => {
                 const label = labellist.value.find((label: any) => label.id === labelId);
                 return label ? { "id": label.id, "labelname": label.labelname, "descr": label.descr } : null;
             });
@@ -267,7 +267,7 @@ const blogList = async () => {
                 update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'),
                 readnum: items.readnum,
                 readminite: items.readminite,
-                wordcount: items.wordcount,
+                wordcount: items.blogcontent.length,
                 img: items.img,
                 blogcontent: items.blogcontent,
                 typename: items.typename,

src/views/blog/blogcontent/BlogListView.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="main">
-        <div class="mainContent" v-for="article in blogContent.bloglist">
+        <div class="mainContent" v-for="article in bloglist">
             <a-badge-ribbon :text=article.typename color="black">
                 <a-card hoverable>
                     <h2>{{ article.blogtitle }}</h2>
@@ -53,18 +53,45 @@
 
 <script setup lang='ts'>
 import { onMounted, ref } from 'vue';
-import { blogContentStore } from "@/stores"
 import iconComponents from '@/assets';
-const blogContent = blogContentStore();
+import dayjs from 'dayjs';
+import type { blogInterface } from '@/api/admin';
+import {get} from "@/tools/request"
 const randomColor = () => {
     const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"])
     return labelColor.value[Math.floor(Math.random() * labelColor.value.length)];
 }
+const bloglist = ref<blogInterface[]>([])
+const blogList = async () => {
+    try {
+        const response = await get("/blogs/list");
+        if (response) {
+            bloglist.value = response.data.data.map((items: any, index: any) => ({
+                key: (index + 1).toString(),
+                id: items.id,
+                blogtitle: items.blogtitle,
+                create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'),
+                update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'),
+                readnum: items.readnum,
+                readminite: (items.blogcontent.length/150).toFixed(2),
+                wordcount: items.blogcontent.length,
+                img: items.img,
+                blogcontent: items.blogcontent,
+                typename: items.typename,
+                labelnames: items.labelnames
+            }))
+        } else {
+            console.log("bloglist is not exits")
+        }
+    } catch (error) {
+        console.log("bloglist is error")
+    }
 
+}
 
 
 onMounted(() => {
-    blogContent.blogList();
+    blogList();
 });
 </script>