panda
9 months ago
12 changed files with 303 additions and 149 deletions
-
4src/api/admin.ts
-
0src/api/blog.ts
-
91src/components/admin/MainWrapper.vue
-
5src/router/admin.ts
-
18src/store/index.ts
-
48src/stores/blog.ts
-
13src/stores/counter.ts
-
110src/stores/index.ts
-
1src/views/admin/blogmange/BlogFormView.vue
-
14src/views/admin/blogmange/BlogManageView.vue
-
100src/views/admin/classticmanage/ClassticManageView.vue
-
48src/views/blog/blogcontent/BlogListView.vue
@ -0,0 +1,4 @@ |
|||
// 语录管理
|
|||
export interface searchValue{ |
|||
classtictitle: string, |
|||
} |
|||
@ -1,18 +0,0 @@ |
|||
import { defineStore } from 'pinia'; |
|||
|
|||
export const useAuthStore = defineStore({ |
|||
id: 'auth', |
|||
state: () => ({ |
|||
token: '', |
|||
username:'' |
|||
}), |
|||
|
|||
actions: { |
|||
setToken(token:string) { |
|||
this.token = token; |
|||
}, |
|||
removeToken(){ |
|||
localStorage.removeItem('token'); |
|||
} |
|||
}, |
|||
}); |
|||
@ -1,48 +0,0 @@ |
|||
import { ref } from 'vue' |
|||
import { defineStore } from 'pinia' |
|||
import { get } from "@/tools/request" |
|||
import dayjs from 'dayjs'; |
|||
|
|||
export const blogContentStore = defineStore("blog", () => { |
|||
interface blogInterface { |
|||
key:string, |
|||
id: number, |
|||
blogtitle: string, |
|||
create_at: Date, |
|||
readnum: number, |
|||
readminite: number, |
|||
wordcount: number, |
|||
img: string, |
|||
blogcontent: string, |
|||
typename: string, |
|||
labelname: string |
|||
} |
|||
const bloglist = ref<blogInterface[]>([]) |
|||
async function blogList() { |
|||
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.readminite, |
|||
wordcount: items.wordcount, |
|||
img: items.img, |
|||
blogcontent: items.blogcontent, |
|||
typename: items.typename, |
|||
labelname: items.labelname |
|||
})) |
|||
} else { |
|||
console.log("bloglist is not exits") |
|||
} |
|||
} catch (error) { |
|||
console.log("bloglist is error") |
|||
} |
|||
|
|||
} |
|||
return { blogList, bloglist } |
|||
}) |
|||
@ -1,13 +0,0 @@ |
|||
import { ref, computed } from 'vue' |
|||
import { defineStore } from 'pinia' |
|||
|
|||
export const useCounterStore = defineStore('counter', () => { |
|||
const count = ref(0) |
|||
const doubleCount = computed(() => count.value * 2) |
|||
function increment() { |
|||
count.value++ |
|||
} |
|||
|
|||
return { count, doubleCount, increment } |
|||
}) |
|||
|
|||
@ -0,0 +1,110 @@ |
|||
import { reactive, ref } from 'vue' |
|||
import { defineStore } from 'pinia' |
|||
import { get } from "@/tools/request" |
|||
import dayjs from 'dayjs'; |
|||
|
|||
export const useAuthStore = defineStore("auth", () => { |
|||
const tokenValue = ref("") |
|||
function setToken(token: string) { |
|||
tokenValue.value = token |
|||
} |
|||
function removeToken() { |
|||
localStorage.removeItem('token'); |
|||
} |
|||
return { setToken, removeToken } |
|||
}) |
|||
|
|||
// 博客列表接口
|
|||
export const blogContentStore = defineStore("blog", () => { |
|||
interface blogInterface { |
|||
key: string, |
|||
blogtitle: string, |
|||
create_at: Date, |
|||
readnum: number, |
|||
readminite: number, |
|||
wordcount: number, |
|||
img: string, |
|||
blogcontent: string, |
|||
typename: string, |
|||
labelnames: string |
|||
} |
|||
const bloglist = ref<blogInterface[]>([]) |
|||
async function blogList() { |
|||
try { |
|||
const response = await get("/blogs/list"); |
|||
if (response) { |
|||
bloglist.value = response.data.data.map((items: any, index: any) => ({ |
|||
key: (index + 1).toString(), |
|||
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.readminite, |
|||
wordcount: items.wordcount, |
|||
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") |
|||
} |
|||
|
|||
} |
|||
return { blogList, bloglist } |
|||
}) |
|||
|
|||
// 语录列表接口
|
|||
export const classticContentStore = defineStore("classtic", () => { |
|||
interface classticInterface { |
|||
key: string, |
|||
header: string, |
|||
text: string, |
|||
descr: string |
|||
} |
|||
const classticlist = ref<classticInterface[]>([]) |
|||
async function classticList() { |
|||
try { |
|||
const response = await get("/classtics/list") |
|||
if (response) { |
|||
classticlist.value = response.data.data.map((items: any, index: any) => ({ |
|||
key: (index + 1).toString(), |
|||
header: items.header, |
|||
text: items.text, |
|||
descr: items.descr |
|||
})) |
|||
} else { |
|||
console.log("classtic is not exit") |
|||
} |
|||
} catch (error) { |
|||
console.log("classtic is error") |
|||
} |
|||
} |
|||
return { classticList, classticlist } |
|||
}) |
|||
// 语录单查询
|
|||
export const classticSearchStore = defineStore("classticSearch", () => { |
|||
const classticsearch = ref<{ header: string }>() |
|||
|
|||
async function classticSearch() { |
|||
try { |
|||
const response = get( |
|||
"/classtics/search", |
|||
classticsearch.value?.header |
|||
) |
|||
if (response) { |
|||
classticsearch.value = (await response).data.data.map((items: any) => ({ |
|||
header: items.header |
|||
})) |
|||
} else { |
|||
console.log("header is not exit") |
|||
} |
|||
} catch (error) { |
|||
console.log("header is error") |
|||
} |
|||
} |
|||
return { classticsearch, classticSearch } |
|||
}) |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<div class="content"> |
|||
<div class="search"> |
|||
<a-space> |
|||
<a-input v-model:value="searchList.classtictitle" placeholder="语录标题" /> |
|||
</a-space> |
|||
<a-space style="margin-left: 16px;"> |
|||
<a-button @click="classticSearch.classticSearch()">查询</a-button> |
|||
<a-button type="primary" ghost @click="classticAdd">新增</a-button> |
|||
</a-space> |
|||
</div> |
|||
<div class="table"> |
|||
<a-table bordered :data-source="classticContent.classticlist" :columns="columns"> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.dataIndex === 'operation'"> |
|||
<a-space> |
|||
<div> |
|||
<a-button size="small" danger @click="showModal(record.key, record.id)">删除</a-button> |
|||
<a-modal v-model:open="open" title="提示" @ok="ackDelete(record)" ok-text="确认" cancel-text="取消" @cancel="unDelete"> |
|||
<p>确认删除吗？</p> |
|||
</a-modal> |
|||
</div> |
|||
<a-button size="small" type="primary" ghost @click="ackUpdate(record)">编辑</a-button> |
|||
<a-button size="small" type="primary" ghost @click="ackWatch(record)">预览</a-button> |
|||
</a-space> |
|||
</template> |
|||
</template> |
|||
</a-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang='ts'> |
|||
import { ref, reactive, onMounted } from 'vue'; |
|||
import type { searchValue } from "@/api/admin" |
|||
import { useRouter } from "vue-router" |
|||
const router = useRouter() |
|||
import {classticContentStore,classticSearchStore} from "@/stores" |
|||
const searchList = reactive<searchValue>({ |
|||
classtictitle:"" |
|||
}) |
|||
const classticContent=classticContentStore() |
|||
const classticSearch=classticSearchStore() |
|||
const open = ref<boolean>(false); |
|||
const toDelete = reactive<{ key: string, id: number }>({ |
|||
key: '', |
|||
id: 0 |
|||
}); |
|||
const showModal = (key: string, id: number) => { |
|||
open.value = true; |
|||
// 将需要删除的数据项的 key 和 id 存储到 ref 中，以便确认后使用 |
|||
toDelete.key = key; |
|||
toDelete.id = id; |
|||
}; |
|||
|
|||
// 新增单独跳转到一个页面 |
|||
const blogAdd = function () { |
|||
router.push('/admin/blogmanage/add') |
|||
} |
|||
// 获取列表 |
|||
onMounted(async () => { |
|||
classticContent.classticList() |
|||
|
|||
|
|||
}); |
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'key', |
|||
width: '5%', |
|||
}, |
|||
{ |
|||
title: '语录标题', |
|||
dataIndex: 'header', |
|||
width: '20%', |
|||
}, |
|||
{ |
|||
title: '语录内容', |
|||
dataIndex: 'text', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'descr', |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
dataIndex: 'operation', |
|||
}, |
|||
]; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.content { |
|||
padding: 24px 24px 0 24px; |
|||
} |
|||
|
|||
.search { |
|||
margin: 0 0 24px 0; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue