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
-
46src/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