补充表单列表页面

vblog/apps/blog/api/api.go

@@ -64,6 +64,7 @@ func (h *BlogApiHandler) CreateBlog(ctx *gin.Context) {
 	if err != nil {
 		response.Failed(ctx, err)
 		return
+
 	}
 	response.Success(ctx, ins)
 }

vblog/logs/vblog.log

@@ -234,3 +234,15 @@
 {"level":"debug","time":"2025-01-12T11:19:41+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
 {"level":"debug","time":"2025-01-12T11:25:37+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
 {"level":"debug","time":"2025-01-12T11:44:07+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T14:17:55+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"info","component":"server","time":"2025-01-12T14:56:52+08:00","caller":"ioc/server/server.go:101","message":"receive signal 'interrupt', start graceful shutdown"}
+{"level":"info","component":"http","time":"2025-01-12T14:56:52+08:00","caller":"config/http/http.go:152","message":"start graceful shutdown"}
+{"level":"error","component":"http","time":"2025-01-12T14:56:52+08:00","caller":"config/http/http.go:146","message":"http: Server closed"}
+{"level":"info","component":"server","time":"2025-01-12T14:56:52+08:00","caller":"ioc/server/server.go:115","message":"http service stop complete"}
+{"level":"info","component":"gin_webframework","time":"2025-01-12T14:57:03+08:00","caller":"config/gin/framework.go:41","message":"enable gin recovery"}
+{"level":"debug","time":"2025-01-12T14:57:03+08:00","caller":"token/impl/impl.go:39","message":"DefaultExpiredTTL: 3600"}
+{"level":"info","component":"server","time":"2025-01-12T14:57:03+08:00","caller":"ioc/server/server.go:74","message":"loaded configs: [app.v1 trace.v1 log.v1 validator.v1 gin_webframework.v1 datasource.v1 grpc.v1 http.v1]"}
+{"level":"info","component":"server","time":"2025-01-12T14:57:03+08:00","caller":"ioc/server/server.go:75","message":"loaded controllers: [token.v1 user.v1 blog.v1]"}
+{"level":"info","component":"server","time":"2025-01-12T14:57:03+08:00","caller":"ioc/server/server.go:76","message":"loaded apis: [blogs.v1 tokens.v1]"}
+{"level":"info","component":"server","time":"2025-01-12T14:57:03+08:00","caller":"ioc/server/server.go:77","message":"loaded defaults: []"}
+{"level":"info","component":"http","time":"2025-01-12T14:57:03+08:00","caller":"config/http/http.go:144","message":"HTTP服务启动成功, 监听地址: 127.0.0.1:8080"}

vblog/web/src/api/blog.js

@@ -0,0 +1,12 @@
+// 登录的实现需要用到的接口
+
+import { client } from './client'
+
+export const QUERY_BLOG = (params) =>
+  client({
+    url: '/api/vblog/v1/blogs',
+    method: 'GET',
+    // query string 参数
+    // params: params
+    params,
+  })

vblog/web/src/views/backend/BackendLayout.vue

@@ -38,7 +38,7 @@
         </a-menu>
       </a-layout-sider>
       <!-- 内容区域 -->
-      <a-layout-content style="padding: 8px;">
+      <a-layout-content style="padding: 12px;">
         <RouterView></RouterView>
       </a-layout-content>
     </a-layout>

vblog/web/src/views/backend/blog/ListPage.vue

@@ -1,25 +1,77 @@
 <template>
   <div>
+    <!-- 页头 -->
     <div class="page-header">
-      <a-page-header title="ArcoDesign" subtitle="ArcoDesign Vue 2.0">
+      <a-page-header title="文章管理">
       </a-page-header>
     </div>
-    <div>
+    <!-- table 选项 -->
-      搜索框
+    <div style="display: flex;">
+      <div>
+        <a-select style="width: 300px;" placeholder="请选择文章分类">
+          <a-option>Golang</a-option>
+          <a-option>Java</a-option>
+          <a-option>Python</a-option>
+        </a-select>
+      </div>
+      <div style="margin-left: auto;">
+        <a-input-search :style="{ width: '320px' }" placeholder="请输入关键字 敲回车键进行搜索" />
+      </div>
     </div>
-    <div>
+    <div style="margin-top: 12px;">
-      表格数据
+      <a-table :data="data.items" :loading="queryBlogLoadding">
+        <template #columns>
+          <a-table-column title="编码" data-index="id"></a-table-column>
+          <a-table-column title="标题" data-index="title"></a-table-column>
+          <a-table-column title="分类" data-index="category"></a-table-column>
+          <a-table-column title="更新时间" data-index="updated_at"></a-table-column>
+          <a-table-column align="center" title="操作">
+            <template #cell="{ record }">
+              <a-space>
+                <a-button @click="$modal.info({ title: 'Name', content: record.id })">view</a-button>
+                <a-button @click="$modal.info({ title: 'Name', content: record.id })">view</a-button>
+                <a-button @click="$modal.info({ title: 'Name', content: record.id })">view</a-button>
+              </a-space>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
     </div>
   </div>
 </template>
 
 <script setup>
 
-import { isLogin } from '@/stores/token';
+import { onMounted, reactive, ref } from 'vue';
+import { QUERY_BLOG } from '@/api/blog'
+
+
+
+// API 请求数据
+const blogQueryRequest = reactive({
+  keywords: '',
+  category: ''
+})
+// 数据, reactive, 一个一个修改每个属性的值 ({data...})
+// ref   data.value = {}
+const data = ref({})
+
+
+// 什么时候调用这个API, 加载数据, 界面准备好了后，再把数据渲染上去
+const queryBlogLoadding = ref(false)
+onMounted(async () => {
+  try {
+    queryBlogLoadding.value = true
+    data.value = await QUERY_BLOG(blogQueryRequest)
+  } finally {
+    queryBlogLoadding.value = false
+  }
+})
+
 </script>
 
 <style lang="css" scoped>
-:deep(.page-header .arco-page-header-wrapper) {
+:deep(.arco-page-header-wrapper) {
   padding-left: 0px;
 }
 </style>