diff --git a/pc/docs/获取缓存数据.md b/pc/docs/获取缓存数据.md new file mode 100644 index 0000000..a00a434 --- /dev/null +++ b/pc/docs/获取缓存数据.md @@ -0,0 +1,259 @@ +# 获取缓存数据 - userinfo 实例 + +## 方法一:从 localStorage 获取 + +```javascript +// 获取用户信息 +function getUserInfo() { + try { + const userInfoStr = localStorage.getItem('userinfo'); + if (userInfoStr) { + const userInfo = JSON.parse(userInfoStr); + return userInfo; + } + return null; + } catch (error) { + console.error('获取用户信息失败:', error); + return null; + } +} + +// 使用示例 +const userInfo = getUserInfo(); +if (userInfo) { + console.log('用户名:', userInfo.username); + console.log('用户ID:', userInfo.id); + console.log('角色:', userInfo.role); +} else { + console.log('未找到用户信息'); +} +``` + +## 方法二:在 Vue 组件中使用 + +```vue + + + +``` + +## 方法三:使用工具函数 + +```javascript +// utils/storage.js +export class StorageUtil { + // 获取用户信息 + static getUserInfo() { + try { + const userInfoStr = localStorage.getItem('userinfo'); + return userInfoStr ? JSON.parse(userInfoStr) : null; + } catch (error) { + console.error('获取用户信息失败:', error); + return null; + } + } + + // 设置用户信息 + static setUserInfo(userInfo) { + try { + localStorage.setItem('userinfo', JSON.stringify(userInfo)); + } catch (error) { + console.error('保存用户信息失败:', error); + } + } + + // 清除用户信息 + static clearUserInfo() { + localStorage.removeItem('userinfo'); + } + + // 检查是否已登录 + static isLoggedIn() { + const userInfo = this.getUserInfo(); + return userInfo && userInfo.id; + } +} + +// 使用示例 +import { StorageUtil } from '@/utils/storage'; + +// 获取用户信息 +const userInfo = StorageUtil.getUserInfo(); +console.log('用户信息:', userInfo); + +// 检查登录状态 +if (StorageUtil.isLoggedIn()) { + console.log('用户已登录'); +} else { + console.log('用户未登录'); +} +``` + +## 方法四:使用 Pinia store + +```javascript +// stores/user.js +import { defineStore } from 'pinia'; +import { StorageUtil } from '@/utils/storage'; + +export const useUserStore = defineStore('user', { + state: () => ({ + userInfo: null + }), + + getters: { + isLoggedIn: (state) => state.userInfo && state.userInfo.id, + username: (state) => state.userInfo?.username || '' + }, + + actions: { + // 初始化用户信息(从缓存加载) + initUserInfo() { + this.userInfo = StorageUtil.getUserInfo(); + }, + + // 设置用户信息 + setUserInfo(userInfo) { + this.userInfo = userInfo; + StorageUtil.setUserInfo(userInfo); + }, + + // 清除用户信息 + clearUserInfo() { + this.userInfo = null; + StorageUtil.clearUserInfo(); + }, + + // 登录 + login(userInfo) { + this.setUserInfo(userInfo); + }, + + // 登出 + logout() { + this.clearUserInfo(); + } + } +}); + +// 在组件中使用 +import { useUserStore } from '@/stores/user'; + +export default { + setup() { + const userStore = useUserStore(); + + // 初始化时加载用户信息 + onMounted(() => { + userStore.initUserInfo(); + }); + + return { + userInfo: computed(() => userStore.userInfo), + isLoggedIn: computed(() => userStore.isLoggedIn) + }; + } +}; +``` + +## 方法五:使用 sessionStorage + +```javascript +// 获取用户信息(仅在当前会话有效) +function getUserInfoFromSession() { + try { + const userInfoStr = sessionStorage.getItem('userinfo'); + return userInfoStr ? JSON.parse(userInfoStr) : null; + } catch (error) { + console.error('获取用户信息失败:', error); + return null; + } +} + +// 设置用户信息到 sessionStorage +function setUserInfoToSession(userInfo) { + try { + sessionStorage.setItem('userinfo', JSON.stringify(userInfo)); + } catch (error) { + console.error('保存用户信息失败:', error); + } +} + +// 清除 sessionStorage 中的用户信息 +function clearUserInfoFromSession() { + sessionStorage.removeItem('userinfo'); +} +``` + +## 注意事项 + +1. **数据类型**: 缓存中存储的是字符串,需要使用 `JSON.parse()` 转换为对象 +2. **错误处理**: 务必使用 try-catch 处理 JSON 解析错误 +3. **数据验证**: 获取到数据后应该验证数据的完整性 +4. **安全性**: 敏感信息不要直接存储在前端缓存中 +5. **过期处理**: 可以添加时间戳来处理缓存过期逻辑 + +## 完整示例 + +```javascript +// 获取用户信息,包含过期检查 +function getUserInfoWithExpiry() { + try { + const userInfoStr = localStorage.getItem('userinfo'); + if (!userInfoStr) return null; + + const userInfo = JSON.parse(userInfoStr); + + // 检查是否过期(可选) + if (userInfo.expiry && Date.now() > userInfo.expiry) { + localStorage.removeItem('userinfo'); + return null; + } + + return userInfo; + } catch (error) { + console.error('获取用户信息失败:', error); + localStorage.removeItem('userinfo'); // 清除损坏的数据 + return null; + } +} + +// 设置用户信息,包含过期时间 +function setUserInfoWithExpiry(userInfo, expiryHours = 24) { + try { + const userInfoWithExpiry = { + ...userInfo, + expiry: Date.now() + (expiryHours * 60 * 60 * 1000) // 过期时间 + }; + localStorage.setItem('userinfo', JSON.stringify(userInfoWithExpiry)); + } catch (error) { + console.error('保存用户信息失败:', error); + } +} +``` \ No newline at end of file diff --git a/pc/docs/调用字典.md b/pc/docs/调用字典.md new file mode 100644 index 0000000..adf787f --- /dev/null +++ b/pc/docs/调用字典.md @@ -0,0 +1,27 @@ +```` + + +```` \ No newline at end of file diff --git a/pc/src/api/article.js b/pc/src/api/article.js index 8b59e65..2937fef 100644 --- a/pc/src/api/article.js +++ b/pc/src/api/article.js @@ -52,3 +52,56 @@ export function updateArticleStatus(id, status) { data: { status }, }); } + + +// 获取分类列表 +export function listCategories(params) { + return request({ + url: `/api/categories`, + method: "get", + params, + }); +} + +// 获取分类详情 +export function getCategory(id) { + return request({ + url: `/api/categories/${id}`, + method: "get", + }); +} + +// 创建分类 +export function createCategory(data) { + return request({ + url: `/api/categories`, + method: "post", + data, + }); +} + +// 更新分类 +export function updateCategory(id, data) { + return request({ + url: `/api/categories/${id}`, + method: "put", + data, + }); +} + +// 删除分类 +export function deleteCategory(id) { + return request({ + url: `/api/categories/${id}`, + method: "delete", + }); +} + +// 更新分类状态 +export function updateCategoryStatus(id, status) { + return request({ + url: `/api/categories/${id}/status`, + method: "patch", + data: { status }, + }); +} \ No newline at end of file diff --git a/pc/src/views/apps/cms/articles/category.vue b/pc/src/views/apps/cms/articles/category.vue new file mode 100644 index 0000000..fe21bd8 --- /dev/null +++ b/pc/src/views/apps/cms/articles/category.vue @@ -0,0 +1,581 @@ + + + + + \ No newline at end of file diff --git a/pc/src/views/apps/cms/articles/components/preview.vue b/pc/src/views/apps/cms/articles/components/preview.vue index 6ee2877..306357b 100644 --- a/pc/src/views/apps/cms/articles/components/preview.vue +++ b/pc/src/views/apps/cms/articles/components/preview.vue @@ -28,8 +28,8 @@ {{ formatDate(model.publish_time) }} - - {{ model?.status === 1 ? '已发布' : model?.status === 2 ? '已下架' : '草稿' }} + + {{ (articleStatusDict.find(item => item.dict_value == String(model?.status)) || {}).dict_label || '-' }} @@ -45,8 +45,9 @@ -