前端美化, 评论健壮性

feat(字体美化): 整个项目全部使用得意黑字体
fix(Discuss): 修复了几个格式检查bug, 提供加载提交健壮性支持
feat(响应式布局): 根据页面尺寸修改显示内容

README.md

@@ -1,47 +1,40 @@
 # 技术栈
 
-高优先级:
+## 前端
 
-* [x] 前端框架：Vue3.2 + setup
+* [x] 前端框架：Vue3.2 + setup语法糖
+* [x] 构建工具：Vite4
 * [x] 样式库：Element Plus
 * [x] CSS框架：WindiCSS
 * [x] 状态管理：Pinia
 * [x] 路由管理：Vue Router
-* [x] 构建工具：Vite4
+* [x] 请求库：Axios
+
+## 后端
+
 * [x] 后端开发语言：Node.js
-* [x] 后端框架：koa / ~~egg.js~~ / ~~midway.js~~
+* [x] 后端框架：koa2
 * [x] 数据库：MySQL
-* [ ] DevOps相关：Docker、CI/CD、Nginx
-* [ ] 服务器端渲染（SSR）：<Mark>Vue SSR<Mark>
-* [x] 构建和部署工具：GitHub
-* [x] 代码规范：ESLint、Prettier
-* [ ] ~~暗夜模式（细节多，后期做）~~
-* [x] Markdown支持：markdown-it / mavonEditor?富文本编辑器
+* [x] Markdown支持：markdown-it
 * [x] 日志管理：Winston
 
----
+## DevOps
 
-低优先级:
-
-* [ ] 图片处理和管理：Cloudinary / AWS S3(TODO)
-* [ ] 搜索引擎优化（SEO）：Vue Meta(TODO)
-* [ ] ~~测试框架：Vitest~~
-* [ ] ~~接口开发：RESTful API设计原则(折磨自己)~~
-* [ ] ~~3D图形库：three.js(没空)~~
-* [ ] ~~国际化(相对鸡肋)~~
-* [ ] ~~静态网站生成器（SSG）：VuePress(只做SSR)~~
+* [x] 构建和部署工具：GitHub
+* [x] 代码规范：ESLint、Prettier
+* [ ] DevOps运维相关：Docker、CI/CD、Nginx
+* [ ] 服务器端渲染: SSR
 
 # 开发流程
 
+* [x] 代码规范、日志管理等方面的设置，例如ESLint、Prettier和Winston。
 * [X] 后端开发语言和框架的选择与搭建，以及数据库的连接和设计。
 * [x] 前端框架和样式库的选择和安装，例如Vue3和Element Plus。
 * [x] 路由管理和状态管理的设置与配置，例如Vue Router和Pinia。
 * [x] 开始编写前端页面代码，根据设计图逐步完成各个页面的构建，同时对应编写接口请求逻辑。
-* [x] 对于需要服务器端渲染（SSR）的页面，可以在前端框架中集成实现，例如Vue SSR。
 * [ ] 设置构建工具，例如Vite4，并进行项目构建和打包。
 * [ ] 进行DevOps相关的设置，例如使用Docker进行部署、CI/CD流程的构建等。
-* [x] 针对代码规范、日志管理等方面的问题，引入相应的工具和库进行优化。
-* [ ] 最后再考虑其他细节性功能的添加和调整，例如暗夜模式、图片处理和管理、富文本编辑器等。
+* [ ] 对于需要服务器端渲染（SSR）的页面，可以在前端框架中集成实现，例如Vue SSR。
 
 # 项目功能
 
@@ -65,8 +58,4 @@
 
 ### 管理员后台
 
-* [ ] 管理员可以管理用户、文章、分类和标签等信息，包括添加、编辑和删除操作。
-
-### 暗夜模式
-
-* [ ] 支持一键切换到暗夜模式
+* [x] 管理员可以管理用户、文章、分类和标签等信息，包括添加、编辑和删除操作。

lightblog-be/.gitignore

@@ -4,4 +4,5 @@ node_modules/
 build/
 tmp/
 temp/
-public/logs/
+public/logs/
+dist/

lightblog-be/package.json

@@ -12,14 +12,16 @@
     "typescript": "5.0.4"
   },
   "scripts": {
-    "start": "ts-node src/app.ts",
     "dev": "ts-node-dev --respawn --transpile-only src/app.ts",
+    "build": "tsc",
+    "start": "cross-env NODE_ENV=production node dist/app.js",
     "typeorm": "typeorm-ts-node-commonjs"
   },
   "dependencies": {
     "@koa/cors": "^4.0.0",
     "@koa/router": "^10.0.0",
     "@types/node": "^18.15.12",
+    "cross-env": "^7.0.3",
     "jsonwebtoken": "^9.0.0",
     "koa": "^2.14.2",
     "koa-bodyparser": "^4.4.0",

lightblog-be/src/config/data-source.ts

@@ -8,6 +8,8 @@ import { Tag } from '../entities/Tag';
 import { Users } from '../entities/Users';
 import { DATASOURCE } from '../config';
 
+const isProd = process.env.NODE_ENV === 'production';
+
 export const AppDataSource = new DataSource({
   type: 'mysql',
   host: DATASOURCE.host,
@@ -16,7 +18,7 @@ export const AppDataSource = new DataSource({
   password: DATASOURCE.password,
   database: DATASOURCE.database,
   synchronize: DATASOURCE.synchronize,
-  entities: ['src/entities/*.ts', Article, ArticleTagReferenced, Category, Discuss, Tag, Users],
+  entities: [isProd ? 'dist/entities/*.js' : 'src/entities/*.ts'],
   migrations: [
     // "src/migrations/*.ts"
   ],

lightblog-be/src/routes.ts

@@ -150,7 +150,6 @@ const routes: IRoute[] = [
     path: '/addUser',
     controller: UsersController,
     action: 'addUser',
-    needLogin: true,
   },
   {
     method: 'delete',
@@ -183,7 +182,6 @@ const routes: IRoute[] = [
     path: '/addDiscuss',
     controller: DiscussController,
     action: 'addDiscuss',
-    needLogin: true,
   },
   {
     method: 'get',

lightblog-be/src/utils/errorHandler.ts

@@ -6,7 +6,6 @@ export default async function errorHandler(ctx: Context, next: Next) {
   try {
     await next();
   } catch (err) {
-
     if (err instanceof ParamsError) {
       ctx.status = 400;
       ctx.body = { message: err.message };

lightblog-be/tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
-    "outDir": "./build",
+    "outDir": "./dist",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "sourceMap": true,

lightblog-fe/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/lightblog.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>

lightblog-fe/src/App.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import '@/assets/fonts/stylesheet.css'
 </script>
 
 <template>
   <RouterView />
-</template>
+</template>
+
+<style lang="less">
+body {
+  // font-family: Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-family: 'Smiley Sans';
+  font-weight: normal;
+  font-style: italic;
+}
+</style>

lightblog-fe/src/assets/fonts/stylesheet.css

@@ -0,0 +1,71 @@
+@font-face {
+    font-family: 'Fira Code';
+    src: url('FiraCode-Bold.woff2') format('woff2'),
+        url('FiraCode-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('FiraCode-Light.woff2') format('woff2'),
+        url('FiraCode-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('FiraCode-Medium.woff2') format('woff2'),
+        url('FiraCode-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('FiraCode-Regular.woff2') format('woff2'),
+        url('FiraCode-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Fira Code Retina';
+    src: url('FiraCode-Retina.woff2') format('woff2'),
+        url('FiraCode-Retina.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('FiraCode-SemiBold.woff2') format('woff2'),
+        url('FiraCode-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+  font-family: 'Smiley Sans';
+  src: url('SmileySans-Oblique.woff2') format('woff2'),
+      url('SmileySans-Oblique.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Smiley Sans Oblique';
+  src: url('SmileySans-Oblique.woff2') format('woff2'),
+      url('SmileySans-Oblique.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}

lightblog-fe/src/components/Admin/CategoryManager.vue

@@ -44,7 +44,7 @@
             <el-col :span="3">
               <el-form-item>
                 <el-button type="primary" @click="submitCategoryForm()">
-                  {{ categoryForm.categoryId === 0 ? "添加" : "更新" }}
+                  {{ categoryForm.categoryId === 0 ? "保存" : "更新" }}
                 </el-button>
               </el-form-item>
             </el-col>

lightblog-fe/src/components/Admin/Dashboard.vue

@@ -1,11 +1,30 @@
 <template>
-  <el-button type="primary" :loading-icon="Star" loading>在这没有意义, 去管理一下你的文章吧</el-button>
+  <!-- <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-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>
 </template>
 
 <script lang="ts" setup>
-import { Star } from '@element-plus/icons-vue'
+// 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>

lightblog-fe/src/components/Admin/TagManager.vue

@@ -35,7 +35,7 @@
             <el-col :span="3">
               <el-form-item>
                 <el-button type="primary" @click="submitTagForm()">
-                  {{ tagForm.tagId === 0 ? "添加" : "更新" }}
+                  {{ tagForm.tagId === 0 ? "保存" : "更新" }}
                 </el-button>
               </el-form-item>
             </el-col>