# go15

**Repository Path**: shiwjlinux/go15

## Basic Information

- **Project Name**: go15
- **Description**: No description available
- **Primary Language**: Go
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-05-18
- **Last Updated**: 2024-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# go15

## 介绍

Vblog

## Apipost接口文档

<https://console-docs.apipost.cn/preview/29116c9bed8b3551/25022440d9bd7e42>


避免通道，  有锁
回调


# vue

``` bash
# 安装
npm install -g @vue/cli

# 创建项目
npm create vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y


> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue-project
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

正在初始化项目 D:\goProject\go15\skills\vue-project...

项目初始化完成，可执行以下命令：

  cd vue-project
  npm install
  npm run format
  npm run dev

```


# 响应式变量
reactive ref

组件 keep-alive 不会被销毁
watch 可以监听一个变量是否改变


# 两种语法 
``` bash
innerText属性 vue {{ 变量 }}


<!-- 元素属性 -->
<!-- 不用testId.value -->
标签属性中 <div v-bind:id="testId"></div>
testId=ref("test")



<!-- 元素方法 事件 -->
onClick --> v-on:click


<!-- 元素样式 -->
:style 是一个对象
sytyleDivA1={
  color: 'red',
  fontSize: '20px'}

<!-- 元素class -->
:class  是个数组

定义一个ref数组，动态class改变
classDivA1=ref([])
classDivA1.push('class1')

classDivA1=['class1','class2']


<!-- v-mode -->
v-model 双向绑定 ,一般用于表单，  绑定input的value


v-bind: 缩写 ：
v-on: 缩写  @

v-bind:class 缩写 :class 
v-bind:style 缩写 :style 


!important 覆盖原来的样式



自定义指令
调用v-focus 定义vFocus



v-show 是否显示 ，对象还存在
v-if 是否显示 ，对象不存在
```js
  
v-model 双向绑定 

vue组件

vue vscode sni
```

# 前端页面
## 路由设置
默认跳转登陆页

```js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'HomePage',
      redirect: { name: 'LoginPage' }
    },
    {
      path: '/login',
      name: 'LoginPage',
      component: () => import('@/views/login/LoginPage.vue')
    },

    {
      path: '/backend',
      name: 'BackendPage',
      component: () => import('@/views/backend/BackendPage.vue'),
      redirect: { name: 'BackendBlogsList' },

      children: [
        {
          path: 'blogs/list',
          name: 'BackendBlogsList',
          component: () => import('@/views/backend/blogs/ListPage.vue')
        },
        {
          path: 'blogs/edit',
          name: 'BackendBlogsEdit',
          component: () => import('@/views/backend/blogs/EditPage.vue')
        }
      ]
    },

    {
      path: '/frontend',
      name: 'FrontendPage',
      component: () => import('@/views/frontend/FrontendPage.vue'),

      children: []
    }
  ]
})

export default router

```
## 基本样式
```js
vblog\ui\src\assets\main.css
APP占满整个浏览器
#app {
  font-weight: normal;
  width: 100vw;
  height: 100vh;
}

vblog\ui\src\views\login\LoginPage.vue form信息
<template>
  <div class="login-page-back-div">
    <div class="form-div">
      <a-form :model="form" hide-label="true" layout="vertical" @submit="handleSubmit">
        <a-form-item field="username">
          <a-input v-model="form.username" placeholder="请输入用户名..." />
        </a-form-item>

        <a-form-item field="password">
          <a-input-password v-model="form.password" placeholder="请输入密码..." />
        </a-form-item>

        <a-form-item field="isRemember">
          <a-checkbox v-model="form.isRemember"> 记住我 </a-checkbox>
        </a-form-item>

        <div class="login-div">
          <a-form-item>
            <a-button html-type="submit" style="width: 100%">登陆</a-button>
          </a-form-item>
        </div>

      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  username: '',
  password: '',
  isRemember: false
})

const handleSubmit = (data) => {
  console.log(data)
}
</script>

<style lang="css" scoped>
.login-page-back-div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-div {
  width: 500px;
  height: 300px;
  display: flex;
  align-items: center;
  border: solid 1px var(--color-neutral-4);
  padding: 30px;
}

.login-div {
  width: 100%;
}

/* 覆盖原有样式 */
.login-div :deep(.arco-form-item-content-flex) {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
}
</style>
```

```js
vblog\ui\src\main.js 引入图标库
// 图标库
import ArcoVueIcon from '@arco-design/web-vue/es/icon';

app.use(ArcoVueIcon)
```

```js
vblog\ui\src\views\login\LoginPage.vue

        <a-form-item field="username">
          <a-input v-model="form.username" placeholder="请输入用户名...">
            <!-- 图标 -->
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item field="password">
          <a-input-password v-model="form.password" placeholder="请输入密码...">
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>
```

## form验证 隐藏*
```js

      <a-form
        :model="form"
        hide-label="true"
        layout="vertical"
        @submit="handleSubmit"
        :rules="rules"
      >
        <a-form-item field="username" :hide-asterisk=true>
          <a-input v-model="form.username" placeholder="请输入用户名...">
            <!-- 图标 -->
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item field="password" :hide-asterisk=true>
          <a-input-password v-model="form.password" placeholder="请输入密码...">
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>


const rules = {
  username: [
    {
      required: true,
      message: '用户名为必填项'
    }
  ],
  password: [
    {
      required: true,
      message: '密码为必填项'
    }
  ]
}
```
![登陆页面](image.png)

## 提交后打印data，data{errors,values}
```js


// 点击登陆时触发
const handleSubmit = async (data) => {
  // 没有errors时
  if (!data.errors) {
    console.log(data.values)

    try {
      // 设置Loading状态
      // 请求登陆接口
      // 接收返回的数据
      // 跳转后台页面
      console.log()
    } catch (error) {
      // 登陆失败
      console.log()
    } finally {
      // 不管是否登陆成功，取消Loading状态
    }
  }
}

```
## button的loading状态
```js


<a-button html-type="submit" style="width: 100%" :loading="loading">登陆</a-button>

const loading=ref(false)


```

![Loading状态](image-1.png)

## 配置axios
```js


npm install axios

vblog\ui\src\api\client.js

import axios from "axios";

var httpClient = axios.create({
    baseURL: 'http://127.0.0.1:9000/vblog/api/v1/',
    // baseURL:'',
    timeout:5000
})

export default httpClient

```

## 添加函数
```js

vblog\ui\src\api\vblog.js

import httpClient from './client'


export var LOGIN = (data) => {
  return httpClient.post('tokens', data)
}

vue中调用
      const resp = await LOGIN(data.values)
      console.log(resp)
```
![跨域问题](image-2.png)

## 配置vite代理
```js

vblog\ui\vite.config.js server中添加proxy
export default defineConfig({
  plugins: [vue(), vueDevTools()],
  server: {
    host: '0.0.0.0',
    port: '3000',
    // open: true,
    proxy: {
      '/vblog/api/v1': 'http://127.0.0.1:9000/'
      // '/vblog' : 'http://127.0.0.1:9000/'
    }
  },

vblog\ui\src\api\client.js
  var httpClient = axios.create({
    // 使用了vite代理
    // baseURL: 'http://127.0.0.1:9000/vblog/api/v1/',
    baseURL:'',
    timeout:5000
})

vblog\ui\src\api\vblog.js

export var LOGIN = (data) => {
  return httpClient.post('/vblog/api/v1/tokens', data)
}

```
![alt text](image-3.png)

## axios返回数据处理
```js
vblog\ui\src\api\client.js

import axios from "axios";

var httpClient = axios.create({
    // 使用了vite代理
    // baseURL: 'http://127.0.0.1:9000/vblog/api/v1/',
    baseURL:'',
    timeout:5000
})

// httpClient
// 请求时返回正常数据 或者 AxiosError

// AxiosError 使用 interceptors拦截器

httpClient.interceptors.response.use(

    // 请求成功返回成功的数据
    (response) => {
        return response.data
    },
    // 请求失败返回错误信息
    (error) => {
        return Promise.reject(error.response)
}
)

export default httpClient
```
## 处理LOGIN结果
```js

vblog\ui\src\views\login\LoginPage.vue
<script setup>
import { ref } from 'vue'
import { LOGIN } from '@/api/vblog'
import { Message } from '@arco-design/web-vue';

// 提交的数据
const form = ref({
  username: '',
  password: '',
  isRemember: false
})

// button 的loading状态
const loading = ref(false)

// 点击登陆时触发
const handleSubmit = async (data) => {
  // 没有errors时
  if (!data.errors) {
    // console.log(data.values)

    try {
      // 设置Loading状态
      // 请求登陆接口
      // 接收返回的数据
      // 跳转后台页面
      loading.value = true
    //   const resp = LOGIN(data.values)
    const resp = await LOGIN(data.values)
    //   
      console.log(resp)
    } catch (error) {
      // 登陆失败
    //   console.log(error.data)
    Message.error(error.data.code + ' ' + error.data.message)

    } finally {
      // 不管是否登陆成功，取消Loading状态
      loading.value = false
    }
  }
}

// 验证
const rules = {
  username: [
    {
      required: true,
      message: '用户名为必填项'
    }
  ],
  password: [
    {
      required: true,
      message: '密码为必填项'
    }
  ]
}
</script>

```
![alt text](image-4.png)


## 登陆成功
```js
vblog\ui\src\api\client.js
httpClient.interceptors.response.use(
  // 请求成功返回成功的数据
  (response) => {
    return response
  },

```
跳由跳转
```js
vblog\ui\src\views\login\LoginPage.vue
import { useRouter } from 'vue-router'

const router = useRouter()


// 点击登陆时触发
const handleSubmit = async (data) => {
  // 没有errors时
  if (!data.errors) {
    // console.log(data.values)

    try {
      // 设置Loading状态
      // 请求登陆接口
      // 接收返回的数据
      // 跳转后台页面
      loading.value = true
      //   const resp = LOGIN(data.values)
      const resp = await LOGIN(data.values)
      //
      console.log(resp)

      if (resp.status === 200) {
        if (data.values.isRemember) {
          // 持久化存储
          // resp.data
        }
        Message.success('登陆成功')
        // 跳转后台页面
        router.push({ name: 'BackendPage' })
      }
    } catch (error) {
      // 登陆失败
      // console.log(error)
      Message.error(error.code + ' ' + error.message)
    } finally {
      // 不管是否登陆成功，取消Loading状态
      loading.value = false
    }
  }
}
```
![alt text](image-5.png)

## 持久化存储
```js
保存token信息
npm i @vueuse/core

vblog\ui\src\stores\storage.js
import { useStorage } from '@vueuse/core'

const token = {}

export default useStorage(
    'my-store', 
    token, 
    localStorage, 
    { mergeDefaults: true }
)

vblog\ui\src\views\login\LoginPage.vue
// 什么时候用{} 什么时候不用
import storage from '@/stores/storage'
      if (resp.status === 200) {
        // if (data.values.isRemember) {}
        // 持久化存储
        // resp.data
        storage.value.token = resp.data

        Message.success('登陆成功')
        // 跳转后台页面
        router.push({ name: 'BackendPage' })
      }

```

## 跳转到后台页面
```js
vblog\ui\src\views\backend\BackendPage.vue

<script setup>
// import { defineComponent } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconCaretRight, IconCaretLeft, IconHome, IconCalendar } from '@arco-design/web-vue/es/icon'
import { useRouter } from 'vue-router'
const router = useRouter()

const handleLogout = () => {
  //TODO 退出登录
  Message.success('退出成功')
  router.push({ name: 'LoginPage' })
}
</script>
```
![alt text](image-6.png)

## 退出登录
```js
vblog\ui\src\api\vblog.js

export var LOGOUT = (refreshToken) => {
  return httpClient.delete('/vblog/api/v1/tokens', {
    headers: {
      'X-REFRESH-TOKEN': refreshToken
    }
  })
}

vblog\ui\src\views\backend\BackendPage.vue
<script setup>
import storage from '@/stores/storage'
import { ref } from 'vue'
import { LOGOUT } from '@/api/vblog'
import { Message } from '@arco-design/web-vue'
import { IconCaretRight, IconCaretLeft, IconHome, IconCalendar } from '@arco-design/web-vue/es/icon'
import { useRouter } from 'vue-router'
const router = useRouter()

const loading = ref(false)
const handleLogout = async () => {
  //TODO 退出登录
  //TODO 清理本地存储

  try {
    loading.value = true
    const refreshToken = storage.value.token.refresh_token
    storage.value.token = {}
    // console.log(refreshToken)
    await LOGOUT(refreshToken)

    Message.success('退出成功')
  } catch (error) {
    console.log()
  } finally {
    loading.value = false
    router.push({ name: 'LoginPage' })
  }

}
</script>
```
![alt text](image-7.png)

## 侧边栏
```js
vblog\ui\src\views\backend\BackendPage.vue

    <a-layout-sider collapsible breakpoint="xl">
      <div class="logo" />

      <!-- 单击事件，点击后跳转到指定页面 -->
      <a-menu
        :default-open-keys="['BlogManagement']"
        :default-selected-keys="['BackendBlogsList']"
        :style="{ width: '100%' }"
        @menu-item-click="handleMenuItemClick"
      >
        <!-- 这里的key是路由名称，单击后跳转到指定路由 -->
        <a-sub-menu key="BlogManagement">
          <template #title> <icon-apps></icon-apps> 文章管理 </template>
          <a-menu-item key="BackendBlogsList">文章列表</a-menu-item>
          <a-menu-item key="BackendTagsList">标签列表</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="CommentManagement">
          <template #title> <IconCalendar></IconCalendar> 评论管理 </template>
          <a-menu-item key="BackendCommentsList">评论列表</a-menu-item>
        </a-sub-menu>
      </a-menu>
      <!-- trigger -->
      <template #trigger="{ collapsed }">
        <IconCaretRight v-if="collapsed"></IconCaretRight>
        <IconCaretLeft v-else></IconCaretLeft>
      </template>
    </a-layout-sider>

<script>
    // 单击后跳转到指定路由
const handleMenuItemClick = (key) => {
  // console.log(key)
  router.push({ name: key })
}
</script>
```

## 404页面

```js
vblog\ui\src\router\index.js
    {
      path: '/:pathMatch(.*)*',
      name: 'NotFoundPage',
      component: () => import('@/views/common/NotFound.vue')
    }

vblog\ui\src\views\backend\BackendPage.vue

<script setup>
  
import router from '@/router'
import storage from '@/stores/storage'
import { ref } from 'vue'
import { LOGOUT } from '@/api/vblog'
import { Message } from '@arco-design/web-vue'
import { IconCaretRight, IconCaretLeft, IconCalendar } from '@arco-design/web-vue/es/icon'
import { useRouter } from 'vue-router'
const r = useRouter()

const loading = ref(false)
const handleLogout = async () => {
  //TODO 退出登录
  //TODO 清理本地存储

  try {
    loading.value = true
    const refreshToken = storage.value.token.refresh_token
    storage.value.token = {}
    // console.log(refreshToken)
    await LOGOUT(refreshToken)

    Message.success('退出成功')
  } catch (error) {
    console.log()
  } finally {
    loading.value = false
    r.push({ name: 'LoginPage' })
  }
}
// 单击后跳转到指定路由
const handleMenuItemClick = (key) => {
  console.log(key)
  // console.log(r.getRoutes)
  // console.log(router.getRoutes())
  router.getRoutes().forEach((route) => {
    if (route.name === key) {
      // console.log(route)
      r.push({ name: key })
      
    }
  })

}
</script>
```

## 后端列表页
```js
vblog\ui\src\views\backend\blogs\ListPage.vue

<template>
  <div class="">
    <div class="backend-header-breadcrumb">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>文章管理</a-breadcrumb-item>
        <a-breadcrumb-item>文章列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="backend-body">
      <div class="backend-header-button-group">
        <div class="backend-header-button">
          <a-button type="primary" :loading="loading2" @click="handleClick2">
            <template #icon>
              <icon-plus />
            </template>
            创建文章
          </a-button>
        </div>
        <div>
          <a-input-search :style="{ width: '320px' }" placeholder="请输入关键字" search-button>
            <template #button-icon>
              <icon-search />
            </template>
            <template #button-default> Search </template>
          </a-input-search>
        </div>
      </div>

      <div class="backend-table">
        <a-table :data="data" style="margin-top: 30px">
          <template #columns>
            <a-table-column title="First Name" data-index="id"></a-table-column>
            <a-table-column title="创建时间">
              <template #cell="{ record }"> {{ record }} </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="css" scoped>
.backend-header-breadcrumb {
  padding: 8px;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.backend-body {
  padding-left: 5px;
  padding-right: 20px;
}

.backend-header-button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.backend-header-button {
  padding: 10px;
}
</style>

```

![alt text](image-8.png)

## table显示列表
```js
<template>
  vblog\ui\src\views\backend\blogs\ListPage.vue

  <div class="">
    <div class="backend-header-breadcrumb">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>文章管理</a-breadcrumb-item>
        <a-breadcrumb-item>文章列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="backend-body">
      <div class="backend-header-button-group">
        <div class="backend-header-button">
          <a-button type="primary" @click="handleCreateBlog">
            <template #icon>
              <icon-plus />
            </template>
            创建文章
          </a-button>
        </div>
        <div>
          <a-input-search :style="{ width: '320px' }" placeholder="请输入关键字" search-button>
            <template #button-icon>
              <icon-search />
            </template>
            <template #button-default> Search </template>
          </a-input-search>
        </div>
      </div>

      <div class="backend-table">
        <a-table :data="data.items" style="margin-top: 30px" :loading="tableLoading">
          <template #columns>
            <a-table-column title="First Name" data-index="id"></a-table-column>

            <a-table-column title="标题">
              <template #cell="{ record }"> {{ record.title }} </template>
            </a-table-column>

            <a-table-column title="作者">
              <template #cell="{ record }"> {{ record.author }} </template>
            </a-table-column>

            <a-table-column title="概要">
              <template #cell="{ record }"> {{ record.summary }} </template>
            </a-table-column>

            <a-table-column title="状态">
              <template #cell="{ record }"> {{ record.status }} </template>
            </a-table-column>

            <a-table-column title="创建时间">
              <template #cell="{ record }"> {{ record.created_at }} </template>
            </a-table-column>

            <a-table-column :width="500" title="操作">
              <template #cell="{ record }">
                <a-space>
                  <a-button
                    type="primary"
                    @click="$router.push({ name: 'BackendBlogsEdit', query: { id: record.id } })"
                    >编辑</a-button
                  >
                  <a-button type="primary" status="success">发布</a-button>

                  <a-popconfirm
                    :content="`确认删除标题为【${record.title}】的文章吗？`"
                    @ok="handleDeleteBlog(record)"
                    :ok-loading="deleteLoading"
                  >
                    <a-button type="primary" status="danger">删除</a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
```

## 显示文章列表 和 删除文章
```js

<script setup>
import { onMounted, ref } from 'vue'
import { LIST_BLOGS, DELETE_BLOG } from '@/api/vblog'

const tableLoading = ref(false)
const data = ref({ total: 0, item: [] })
const keywords = ref('')
const deleteLoading = ref(false)

const ListBlog = async () => {
  try {
    tableLoading.value = true
    const resp = await LIST_BLOGS({
      keywords: keywords.value
    })
    // console.log(resp)
    if (resp.status === 200 && resp.data) {
      data.value = resp.data
      // console.log(data.value)
    }
  } finally {
    tableLoading.value = false
  }
}

onMounted(() => {
  ListBlog()
})

const handleDeleteBlog = async (record) => {
  try {
    deleteLoading.value = true
    const resp = await DELETE_BLOG(record.id)
    console.log(resp)
  } finally {
    deleteLoading.value = false
  }
  console.log(record)
}

const handleCreateBlog = () => {
  console.log('create blog')
}
</script>


```

```js
vblog\ui\src\api\vblog.js
export var LIST_BLOGS = (data) => {
  return httpClient.get('/vblog/api/v1/blog', {
    params: data
  })
}

export var DELETE_BLOG = (id) => {
  return httpClient.delete(`/vblog/api/v1/blog/${id}`)
}

```
![alt text](image-9.png)
![alt text](image-10.png)

## 分页
```js
pagination分页
      <!-- page-change 表格分页发生改变时触发 page: number -->
      <!-- page-size-change 表格每页数据数量发生改变时触发 pageSize: number -->
      <div class="backend-table">
        <a-table
          :data="data.items"
          style="margin-top: 30px"
          :loading="tableLoading"
          :pagination="pagination"
          @page-change="handlePageNumberChange"
          @page-size-change="handlePageSizeChange"
        >
        </a-table>
      </div>

<script setup>
import { onMounted, ref } from 'vue'
import { LIST_BLOGS, DELETE_BLOG } from '@/api/vblog'

const tableLoading = ref(false)
const data = ref({ total: 0, items: [] })
const keywords = ref('')
// const pageInfo=ref({current:1,pageSize:10})
const deleteLoading = ref(false)

// 查询文章列表 params:{keywords page_size,page_number}
// 返回total和items
const ListBlog = async () => {
  try {
    tableLoading.value = true
    const resp = await LIST_BLOGS({
      keywords: keywords.value,
      page_size: pagination.value.pageSize,
      page_number:pagination.value.current

    })
    // console.log(resp)
    if (resp.status === 200 && resp.data) {
      data.value = resp.data
      pagination.value.total = data.value.total
      // console.log(data.value)
    }
  } finally {
    tableLoading.value = false
  }
}

onMounted(() => {
  ListBlog()
})

// 删除文章
const handleDeleteBlog = async (record) => {
  try {
    deleteLoading.value = true
    const resp = await DELETE_BLOG(record.id)
    console.log(resp)
  } finally {
    deleteLoading.value = false
  }
  console.log(record)
}

const handleCreateBlog = () => {
  console.log('create blog')
}

// 分页
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: data.value.total,
  showTotal: true,
  showMore: true,
  showJumper: true,
  showPageSize: true
})

// pageNumber改变时
const handlePageNumberChange = (current) => {
  pagination.value.current=current
  // console.log(current)
  ListBlog()
}
// pageSize改变时
const handlePageSizeChange = (pageSize) => {
  pagination.value.pageSize=pageSize
  // console.log(pageSize)
  ListBlog()
}
</script>
```
![alt text](image-11.png)
![alt text](image-12.png)
![alt text](image-13.png)

## 格式化日期
```js
 npm install dayjs --save

 import dayjs from 'dayjs'

             <a-table-column title="创建时间">
              <template #cell="{ record }"> {{ dayjs.unix(record.created_at).format() }} </template>
            </a-table-column>

```
![alt text](image-14.png)

## 搜索
```js
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="请输入关键字"
            search-button
            @change="handleSearch"
          >
            <template #button-icon>
              <icon-search />
            </template>
            <template #button-default> Search </template>
          </a-input-search>


const handleSearch = (v) => {
  keywords.value = v
  ListBlog()
}
```
![alt text](image-15.png)

## 跳转到编辑页面
```js
编辑和创建跳转同一页面

编辑跳转带参数
                  <a-button
                    type="primary"
                    @click="$router.push({ name: 'BackendBlogsEdit', query: { id: record.id } })"
                    >编辑</a-button
                  >

创建跳转不带参数
          <a-button type="primary" @click="handleCreateBlog">
            <template #icon>
              <icon-plus />
            </template>
            创建文章
          </a-button>

// 跳转到创建页面
const handleCreateBlog = () => {
  router.push({name:'BackendBlogsEdit'})
}
```
![alt text](image-17.png)
![alt text](image-16.png)
## 创建文章&&编辑文章
### markdown编辑器
```js
npm i md-editor-v3 --save

            <a-form-item field="content" label="文章内容">
              <MdEditor v-model="text" />
            </a-form-item>

<script setup>
import { ref } from 'vue'
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

// form字段绑定
const form = ref({
  title: '',
  summary: '',
  content: '# 请输入文章内容'
})

</script>



```
### ref 属性
```js
在 Vue 3 中，ref 属性用于在模板中引用 DOM 元素或组件实例。通过在 setup 函数中定义和返回 ref，你可以在组件的其他部分访问这些引用。这对于处理表单元素特别有用，例如聚焦输入框、触发表单验证等
```
### 三元表达式
```js
// 通过url参数判断是否为编辑
const isEdit = ref(false)

onMounted(() => {
  router.currentRoute.value.query.id ? (isEdit.value = true) : (isEdit.value = false)
})

显示创建或编辑文章
        <a-breadcrumb-item>{{ isEdit ? '编辑' : '创建' }}文章</a-breadcrumb-item>

```

### form表单
通过ref属性操作form表单，调用form validate()验证表单
```js
    <div class="backend-header-breadcrumb">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>文章管理</a-breadcrumb-item>
        <a-breadcrumb-item>{{ isEdit ? '编辑' : '创建' }}文章</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

        <a-space direction="vertical" size="large" :style="{ width: '100%' }">
          <!-- form 表单 -->
          <!-- 
          :model绑定表单数据 
          ref 绑定表单实例
          rules 验证规则
          -->
          <a-form :model="form" layout="vertical" ref="formRef" :rules="rules">
            <a-form-item>
              <!-- 保存按钮 -->
              <!-- 
              @click 点击事件 提交数据
              :style 设置按钮样式
              handleSave 通过form ref属性操作form表单
               -->
              <a-button type="primary" @click="handleSave" :style="btnStyle" :loading="btnLoading">
                <template #icon>
                  <icon-save />
                </template>
                保存
              </a-button>
            </a-form-item>

            <a-form-item field="title" label="文章标题">
              <a-input v-model="form.title" placeholder="请输入文章标题..." />
            </a-form-item>

            <a-form-item field="summary" label="文章概要">
              <a-input v-model="form.summary" placeholder="请输入文章概要..." />
            </a-form-item>

            <a-form-item field="content" label="文章内容">
              <MdEditor v-model="form.content" />
            </a-form-item>

            <!-- <a-form-item field="isRead">
              <a-checkbox v-model="form.isRead"> I have read the manual </a-checkbox>
            </a-form-item> -->
          </a-form>
        </a-space>
```
### 表单script
```js
<script setup>
import { onMounted, ref } from 'vue'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { UPDATE_BLOG, CREATE_BLOG } from '@/api/vblog'
import { useRouter } from 'vue-router'
const router = useRouter()

const btnLoading = ref(false)
const formRef = ref(null)
const isEdit = ref(false)

// 页面加载时，判断是否有id参数
// 通过url参数判断是否为编辑
onMounted(() => {
  router.currentRoute.value.query.id ? (isEdit.value = true) : (isEdit.value = false)
})

// form字段绑定 ,这里的id 可以在form表达中隐藏，或者从路由中获取，在更新时使用id
const form = ref({
  title: '',
  summary: '',
  content: '# 请输入文章内容',
  tags: {}
})

// 通过form ref属性操作form表单
const handleSave = async () => {
  // 判断ref属性是否为null
  if (!formRef.value) return

  // 调用ref的validate方法,验证表单
  await formRef.value.validate((valid) => {
    // 如果valid有返回值，表单验证不通过
    if (valid) {
      console.log('error submit!')
      return false
    }
    // 如果没有返回值，表单验证通过 (undefined)
    // console.log(valid)

    try {
      btnLoading.value = true
      if (isEdit.value) {
        console.log('edit')
        // 根据id更新内容
        UPDATE_BLOG(router.currentRoute.value.query.id, form.value)
      } else {
        // 创建文章
        CREATE_BLOG(form.value)
      }
    } catch (error) {
      console.log(error)
    } finally {
      btnLoading.value = false
    }
  })
}

// 校验规则
const rules = {
  title: [
    {
      required: true,
      message: '请输入文章标题',
      trigger: 'blur'
    }
  ],
  summary: [
    {
      required: true,
      message: '请输入文章概要'
      // trigger: 'blur'
    }
  ],
  content: [
    {
      required: true,
      message: '请输入文章概要'
      // trigger: 'blur'
    }
  ]
}
const btnStyle = {
  width: '100px',
  marginLeft: 'auto'
}
</script>
```

### 编辑时加载数据
```js
const describeBlog = ref(null)

const titleDisabled = ref(false)
const summaryDisabled = ref(false)
const contentDisabled = ref(false)
// 页面加载时，判断是否有id参数
// 通过url参数判断是否为编辑
onMounted(async () => {
  router.currentRoute.value.query.id ? (isEdit.value = true) : (isEdit.value = false)

  if (isEdit.value) {
    try {
      formLoading.value = true

      describeBlog.value = await DESCRIBE_BLOG(router.currentRoute.value.query.id)
      if (describeBlog.value.status === 200) {
        form.value = describeBlog.value.data
      } else {
        console.log('err')
      }
    } catch (error) {
      // 如果无法获取数据，则禁用表单
      titleDisabled.value = true
      summaryDisabled.value = true
      contentDisabled.value = true
      Notification.error({
        title: error.message
      })
    } finally {
      formLoading.value = false
    }
  }
})

```
![alt text](image-20.png)
![alt text](image-18.png)
![alt text](image-19.png)
![alt text](image-21.png)
![alt text](image-22.png)


## 主页显示文章


# proto

include/google/any.proto