README更新

README.md

@@ -5,46 +5,61 @@
 ## 功能特性
 
 - **文章管理**:创建、编辑、删除和预览博客文章
+- **个性化定义**:可以为每篇文章设置图片以及广告信息
 - **分类和标签**:对文章进行分类和关键字管理
-- **编辑器**:支持 Markdown 和所见即所得编辑模式
+- **编辑器**:支持 **Markdown** 所见即所得编辑模式
 - **统计分析**:提供访问量、关键字搜索量分析
-- **SEO 优化**:优化网站针对搜索引擎的排名
+- **SEO 优化**:使用 **router-link** 提高切换页面的速度以及提高网站被爬虫容易度
 - **响应式设计**:支持在不同设备上自适应显示
+- **高性能**:使用异步组件,优化首屏加载速度
 
 ## 技术栈
 
-- **前端**:Vue 3、Vite、ElementPlus、Windicss
-- **编辑器**: Markdown编辑器
+- **前端**:Vue 3、Vuex、Vue-router、ElementPlus、Windicss
+- **编辑器**: Markdown 编辑器
 - **部署**:Docker、Nginx
 
 ## 快速开始
 
 1. 克隆仓库:
-git clone https://github.com/Lijingwoquan/blog-vue.git
 
+```ssh
+git clone https://github.com/Lijingwoquan/blog-vue.git
+```
 
 2. 安装依赖:
 
+```ssh
 npm install
+```
 
 3. 环境配置:
-在 .env.development 中配置自己的生产环境
-在 .env.production 中配置自己的发布环境
-在  config.js中修改config.MANAGER_URL为你自己想要的url
+   在 `.env.development` 中配置自己的生产环境
+   在 `.env.production` 中配置自己的发布环境
+   在 `config.js` 中修改 **config.MANAGER_URL** 为你自己想要的 url,修改 **serviveUrl** 为本项目对于的后端接口
 
 1. 运行开发服务器:
 
+```ssh
 npm run dev
-
-
+```
 
 ## 部署
-- 该项目需要配置证书，需要在./src/ssl文件夹下配置
+
+- 该项目需要配置证书，需要在 `/ssl` 文件夹下配置
 
 - 该项目使用 Docker 进行部署
+
+```ssh
+docker build -t blog_vue .
+docker run -p 80:80 -p 443:443 -d  --name blog_vue blog_vue
+```
+
+- 如果无证书请使用 `ngnix/default.conf` 下被注释的代码,删除`Dockerfile` 下对密钥 `COPY` 的指令
+关闭 `Dockerfile` 下 **expose** 的443端口,
 ```ssh
-docker build -t blog_vue .   
-docker run -p 80:80 -p 443:443 -d  --name blog_vue blog_vue    
+docker build -t blog_vue .
+docker run -p 80:80 -d  --name blog_vue blog_vue
 ```
 
 ## 贡献

config.js

@@ -4,6 +4,6 @@
 export const config = {
   // 写你想要的路径
   MANAGER_URL: "/admin/lzh",
-  serviveUrl: "http://127.0.0.1:8080/api/",
-  // serviveUrl: "https://liuzihao.online:8080/api/",
+  // serviveUrl: "http://127.0.0.1:8080/api/",
+  serviveUrl: "https://liuzihao.online:8080/api/",
 };

nginx/default.conf

@@ -28,4 +28,16 @@ server {
     ssl_certificate /etc/nginx/ssl/certs/server.crt;
     ssl_certificate_key /etc/nginx/ssl/private/server.key;
     return 301 $scheme://liuzihao.online$request_uri;
-}
+}
+
+# server {
+#     listen 80;
+#     server_name 127.0.0.1;
+#     return 301 https://$server_name$request_uri;
+#     location / {
+#         root /usr/share/nginx/html;
+#         index index.html index.htm;
+#         try_files $uri $uri/ /index.html;
+#     }
+# }
+

src/components/paging.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="mt-2 flex justify-center items-center absolute left-[50%]"
-    style="transform: translateX(-50%)"
-  >
+  <div class="page-container" style="transform: translateX(-50%)">
     <div class="flex items-center">
       <router-link
         :to="
@@ -15,12 +12,13 @@
         <el-icon><ArrowLeft /></el-icon>
       </router-link>
     </div>
+
     <div>
       <!-- 第一页 -->
       <router-link
         v-if="totalPages > 1 && currentPage != 1"
         :to="currentRoute + '?page=1'"
-        class="mx-2 inline-block"
+        class="mx-2 inline-block page"
         >1
       </router-link>
 
@@ -79,6 +77,7 @@
         {{ totalPages }}
       </router-link>
     </div>
+
     <div class="flex items-center">
       <router-link
         :to="
@@ -157,3 +156,9 @@ const currentRoute = computed(() => {
   return route.path;
 });
 </script>
+
+<style>
+.page-container {
+  @apply mt-2 flex justify-center items-center absolute left-[50%];
+}
+</style>

src/pages/userEssay/list.vue

@@ -55,7 +55,7 @@
             />
           </div>
 
-          <div v-if="oneData.last?.id > 0 && oneData.next?.id > 0">
+          <div v-if="oneData.last?.id > 0 || oneData.next?.id > 0">
             <el-divider></el-divider>
             <!-- 导航 -->
             <div class="flex justify-between">