Admin美化, README完善

cooper-xs · Jun 21, 2023 · 95604ef · 95604ef
1 parent eeecc70
commit 95604ef
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -22,40 +22,18 @@
 
 * [x] 构建和部署工具：GitHub
 * [x] 代码规范：ESLint、Prettier
-* [ ] DevOps运维相关：Docker、CI/CD、Nginx
-* [ ] 服务器端渲染: SSR
+* [x] DevOps运维相关：Docker、CI/CD、Nginx
 
 # 开发流程
 
 * [x] 代码规范、日志管理等方面的设置，例如ESLint、Prettier和Winston。
 * [X] 后端开发语言和框架的选择与搭建，以及数据库的连接和设计。
-* [x] 前端框架和样式库的选择和安装，例如Vue3和Element Plus。
-* [x] 路由管理和状态管理的设置与配置，例如Vue Router和Pinia。
-* [x] 开始编写前端页面代码，根据设计图逐步完成各个页面的构建，同时对应编写接口请求逻辑。
-* [ ] 设置构建工具，例如Vite4，并进行项目构建和打包。
-* [ ] 进行DevOps相关的设置，例如使用Docker进行部署、CI/CD流程的构建等。
-* [ ] 对于需要服务器端渲染（SSR）的页面，可以在前端框架中集成实现，例如Vue SSR。
+* [x] 前端框架和样式库的选择和安装，使用Vue3.2和Element Plus。
+* [x] 路由管理和状态管理的设置与配置，使用Vue Router和Pinia。
+* [x] 编写前端页面代码，根据设计图逐步完成各个页面的构建，同时对应编写接口请求逻辑。
+* [x] 编写后端接口代码，根据前端页面的请求逻辑逐步完成各个接口的编写。
+* [x] 项目构建和部署，使用GitHub Actions进行CI/CD。
+* [x] 配置服务器环境，包括Nginx、Docker、MySQL等。
+* [x] 使用Docker进行容器化部署。
+* [ ] 使用阿里云CDN加速。
 
-# 项目功能
-
-## 基本功能
-
-### 主页
-
-* [x] 展示所有文章的标题、摘要、发布日期，并支持按分类和标签进行筛选；
-
-### 文章详情页
-
-* [x] 展示文章的详细内容、发布日期、评论数和浏览量，并支显示章进行评论；
-
-### 搜索功能
-
-* [x] 支持根据关键字搜索文章；
-
-### 用户注册/登录
-
-* [x] 用户可以注册账号并登录，登录后可以进行评论；
-
-### 管理员后台
-
-* [x] 管理员可以管理用户、文章、分类和标签等信息，包括添加、编辑和删除操作。
diff --git a/lightblog-be/README.md b/lightblog-be/README.md
@@ -6,7 +6,41 @@
 pnpm i
 ```
 
-## 配置环境变量
+## 创建数据库
+
+1. 手动创建 database
+
+- 创建一个名为`blog`的数据库.
+- 编码为`utf8mb4`
+
+2. 创建数据库表结构
+
+- 手动执行
+
+  - 在数据库中执行`/src/config/blog-init.sql`中的 SQL 语句.
+  - 里面的`insert`数据也会一起放进去.
+
+- 自动执行
+  - 设置 TypeORM 的 `synchronize=true` 自动创建数据库表结构.
+
+
+## 配置连接信息
+
+### 配置环境变量
+
+在服务器中使用环境变量配置数据库连接信息.
+
+```shell
+# 请修改为自己的数据库配置
+export DB_HOST=localhost
+export DB_PORT=3306
+export DB_USERNAME=username
+export DB_PASSWORD=password
+export DB_DATABASE=blog
+```
+
+
+### 直接修改
 
 修改`/src/config/index.ts`中的数据库配置
 
@@ -24,36 +58,30 @@ export const DATASOURCE = {
 
 请注意: synchronize 项 在生产环境中设为 false; 开发环境中设可以为 true. 否则会导致数据丢失.
 
-## 创建数据库
-
-1. 手动创建 database
 
-- 创建一个名为`blog`的数据库.
-- 编码为`utf8mb4`
-
-2. 创建数据库表结构
-
-- 手动执行
+## 启动服务
 
-  - 在数据库中执行`/src/config/blog-init.sql`中的 SQL 语句.
-  - 这样的好处是里面的`insert`数据也会一起放进去.
+```shell
+# 开发环境
+pnpm dev
 
-- 自动执行
-  - 设置 TypeORM 的 `synchronize=true` 自动创建数据库表结构.
+# 生产环境
+# 支持热修改
+pnpm start
+```
 
-## 启动服务
+## 打包
 
 ```shell
-# pnpm start
-# 支持热修改
-pnpm dev
+pnpm build
 ```
 
 # 项目结构:
 
 ```shell
 lightblog-be
 ├── src
+│   ├── dist : 编译后的文件
 │   ├── app.ts : 入口文件
 │   ├── routes.ts : 路由配置, 转发请求到Controller
 │   ├── controller
@@ -75,9 +103,13 @@ lightblog-be
 │       ├── routerResponse.ts : 统一响应格式
 │       ├── errorHandler.ts : 统一错误处理
 │       └── tool.ts : 常用工具类
-├── misc : 项目相关的一些文件, 杂项
 ├── node_modules : 依赖包
-├── public : 静态资源
-├── logs : 日志文件
+├── public
+│   └── logs : 日志文件
+├── .gitignore : git忽略文件
+├── .prettierrc : prettier配置
+├── .eslintrc.js : eslint配置
+├── package.json : 项目依赖, 脚本等信息
+├── tsconfig.json : typescript配置
 └── README.md : 项目说明
 ```
diff --git a/lightblog-fe/README.md b/lightblog-fe/README.md
@@ -1,4 +1,4 @@
-# 本地运行 - 后端
+# 本地运行 - 前端
 
 ## 安装依赖
 
@@ -9,5 +9,46 @@ pnpm i
 ## 启动服务
 
 ```shell
+# 开发环境
 pnpm dev
+
+# 生产环境
+# 支持热修改
+pnpm start
+```
+
+## 打包
+
+```shell
+pnpm build
+```
+
+## 项目结构
+
+```shell
+.
+├── .vscode
+│   └── extensions.json : VSCode 插件推荐
+├── dist : 编译后的文件(通过build命令生成)
+├── node_modules
+├── public : 静态资源
+├── src
+│   ├── App.vue : 根组件
+│   ├── main.ts : 入口文件
+│   ├── router.ts : 路由配置
+│   ├── store : Pinia 状态管理
+│   ├── assets : 静态资源, 字体和图片
+│   ├── components : 组件
+│   │   ├── Admin : 后台管理组件
+│   │   └── 其他组件
+│   ├── types : 类型声明
+│   ├── utils : 工具类
+│   └── views : 页面
+├── vite.config.ts : Vite 配置
+├── tsconfig.json : TypeScript 配置
+├── package.json : 项目依赖, 脚本等信息
+├── .prettierrc : prettier配置
+├── .eslintrc.js : eslint配置
+├── windi.config.ts : WindiCSS 配置
+└── README.md : 项目说明
 ```
diff --git a/lightblog-fe/src/components/Admin/ArticleList.vue b/lightblog-fe/src/components/Admin/ArticleList.vue
@@ -16,7 +16,7 @@
       </RouterLink>
     </el-card>
     <el-pagination class="" layout="prev, pager, next" :total="pagination.totalItem"
-      :current-page="pagination.currentPage" :page-size="pagination.pageSize" @current-change="handleCurrentChange" />
+      :current-page="pagination.currentPage" :page-size="pagination.pageSize" background @current-change="handleCurrentChange"/>
   </div>
 </template>
 

diff --git a/lightblog-fe/src/components/Admin/Dashboard.vue b/lightblog-fe/src/components/Admin/Dashboard.vue
@@ -1,30 +1,27 @@
 <template>
-  <!-- <el-button class="my-10" type="primary" :loading-icon="Star" loading>在这没有意义, 去管理一下你的文章吧</el-button><br />
-  <el-button type="primary" @click="$router.push('/admin/ArticleList')">文章列表</el-button>
-  <el-button type="primary" @click="$router.push('/admin/addArticle')">添加新文章</el-button>
-  <el-button type="primary" @click="$router.push('/admin/CategoryManager')">分类管理</el-button>
-  <el-button type="primary" @click="$router.push('/admin/TagManager')">标签管理</el-button> -->
-  <!-- <el-image class="h-full" :src="imgUrl" fit="contain"></el-image> -->
-  <!-- <div class="flex items-center justify-center w-3/4 h-3/4 bg-cover bg-center"
-    :style="{ backgroundImage: `url(${imgUrl})` }">
-  </div> -->
-  <div>
-
+  <div class="h-full flex items-center justify-center text-2xl">
+    <div class="bg-gray-600 bg-opacity-40">
+      <p>{{ dailyQuote }}</p>
+    </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-// import { Star } from '@element-plus/icons-vue'
-import { onMounted, ref } from 'vue';
-// 生成一个三位随机数, 从0到206, 不足的用0补齐
-const random = ref(Math.floor(Math.random() * 206).toString().padStart(3, '0'));
-const imgUrl = ref('');
-
-onMounted(() => {
-  setInterval(() => {
-    random.value = Math.floor(Math.random() * 200).toString().padStart(3, '0');
-    imgUrl.value = `/api/images/img-${random.value}.jpg`
-  }, 2 * 1000)
-})
+<script lang="ts">
+import axios from 'axios';
 
+export default {
+  data() {
+    return {
+      dailyQuote: '',
+    };
+  },
+  async created() {
+    try {
+      const response = await axios.get('https://v1.hitokoto.cn');
+      this.dailyQuote = response.data.hitokoto;
+    } catch (error) {
+      console.error('获取每日一言失败:', error);
+    }
+  },
+};
 </script>
diff --git a/lightblog-fe/src/views/Admin.vue b/lightblog-fe/src/views/Admin.vue
@@ -65,17 +65,17 @@
           </el-menu-item>
         </el-menu>
       </el-aside>
-      <el-container class="flex-1 w-full h-full bg-cover bg-center" :style="{ backgroundImage: `url(${imgUrl})` }">
+      <el-container class="bg-cover bg-center" :style="{ backgroundImage: `url(${imgUrl})` }">
         <div class="bg-white bg-opacity-40 w-full h-full">
           <!-- 头部导航栏 -->
-          <el-header class="flex justify-center items-center space-x-20">
+          <el-header class="flex justify-center items-center space-x-20 h-16">
             <span>个人博客后台管理系统</span>
             <ElLink type="primary" @click="logout">
               退出登录
             </ElLink>
           </el-header>
           <!-- 内容区域 -->
-          <el-main>
+          <el-main class="h-[calc(100vh-4rem)] overflow-y-auto">
             <RouterView />
           </el-main>
         </div>
@@ -99,7 +99,7 @@ onMounted(() => {
   //   imgUrl.value = `/api/images/img-${random.value}.jpg`
   // }, 0.5 * 1000)
   random.value = Math.floor(Math.random() * 200).toString().padStart(3, '0');
-  imgUrl.value = `/api/images/img-${random.value}.jpg`
+  imgUrl.value = `https://lightblog.oss-cn-shenzhen.aliyuncs.com/images/img-${random.value}.jpg`
 })
 
 const adminStore = useAdminStore();