# Lade_Doing_BLOG_Web

**Repository Path**: koreantion/lade_doing_blog_web

## Basic Information

- **Project Name**: Lade_Doing_BLOG_Web
- **Description**: Vue全家桶搭建的博客前台页面，使用到了动态路由、全局状态管理器、路由拦截，前台用户管理页面和后台管理页面，
实现了一个简易、美观、实用的博客系统，
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-17
- **Last Updated**: 2025-10-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



## 截图
![输入图片说明](login.png)

![输入图片说明](guide.png)

![输入图片说明](person_detail.png)

![输入图片说明](peson.png)

![输入图片说明](tools.png)

![输入图片说明](blogList.png)

![输入图片说明](blog_detail.png)

![输入图片说明](categoryList.png)

![输入图片说明](tagList.png)

![输入图片说明](data_articles.png)

![输入图片说明](data_categories.png)

![输入图片说明](data_home.png)

![输入图片说明](data_me.png)

![输入图片说明](data_tags.png)

![输入图片说明](data_tools.png)

![输入图片说明](data_tools_content.png)

  页面

  - 前端页面front
    - front.vue
      - FHeader.vue
      - FContent.vue
      - FSider.vue
    - blogDetail.vue
    - person.vue
  - 后端页面back
    - back.vue
      - FHeader.vue
      - FContent.vue
      - FSider.vue
    - Article.vue
    - Category.vue
    - Tag.vue
    - User.vue

  Vue-Router路由
  (使用动态路由进行搭建)

  - Admin
    -

  

  ### 日志

  搭建一个Vue+Vite项目:`pnpm create vite@latest my-vue-app -- --template vue`
  安装Vue-Router:`pnpm install vue-router@4 --save`
  安装`pnpm install @vitejs/plugin-vue`解决引入插件问题，然后在Vue.config.js中使用:

  ~~~javascript
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from "path"
  
  export default defineConfig({
    resolve:{
      alias:{
        "@":path.resolve(__dirname,"src")
      }
    },
    server:{
      proxy:{
        '/api': {
          target: 'http://127.0.0.1:9090',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    },
    plugins: [vue()]  //这里必须要使用，才能让vite识别vue文件
  })
  ~~~

  安装`pnpm install universal-cookie@4.0.4 @vueuse/core@8.4.2 @vueuse/integrations@8.4.1`
  安装`pnpm install crypto-js (加密工具) pnpm install gsap(动画库)`
  安装`pnpm install axios --save`
  安装`pnpm install vuex@4.* --save`,并在`main.js`中配置vuex
  安装element-plus：`pnpm install @element-plus/icons-vue` 和 `pnpm install element-plus` ,没有自动加上--save默认放在生产模式下。
  main.js引进去

  安装`nprogress`，然后main.js中引进去。

  

  ## 定义菜单数据

  - 文章
    - 所有文章
    - 分类目录
    - 写文章
    - 标签
  - 用户
    - 修改用户

  ~~~
  {
      title: "文章",
      icon: "el-icon-document", // 文章图标
      children: [
          {
              title: "所有文章",
              icon: "el-icon-document", // 文章图标
          },
          {
              title: "分类目录",
              icon: "el-icon-menu", // 目录图标
          },
          {
              title: "写文章",
              icon: "el-icon-edit", // 编辑图标
          },
          {
              title: "标签",
              icon: "el-icon-collection-tag", // 标签图标
          },
      ]
  },
  {
      title: "用户",
      icon: "el-icon-user", // 用户图标
      children: [
          {
              title: "修改用户",
              icon: "el-icon-edit-outline", // 编辑图标（轮廓版）
          }
      ]    
  }
  
  ~~~


  使用登录页面进行测试接口

  后端您能不能不要只返回id数组，你隔着给我添加工作量是吧！！你直接返回一个对象不久得了？？？这样我能拿到id又能拿到其他信息
  特别是文章关联分类、标签，用户管理文章，最好能返回一个实体类（分类类、标签类、文章类!）

  其实请求的时候不用写catch，因为后端除了服务器报错，其他警告都是通过then报出错的原因的。
  所以catch可以统一在axios中配置即可。


  ~~~html
                <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.avatar"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[scope.row.avatar]"
                    :initial-index="4"
                    preview-teleported<!--   将预览图片插入到body上面        -->
                    fit="cover"
                />
  ~~~

  在复制属性的时候，最好没有的值赋值为null，因为后端都是用包装类进行封装实体类。

  ~~~javascript
  // 新增文章
  const handleAdd = () => {
    dialogTitle.value = '新增文章'
    Object.keys(articleForm).forEach(key => {
      articleForm[key] = Array.isArray(articleForm[key]) ? [] : null //如果是数组的话初始化为空数组要不为空对象
    })
    dialogVisible.value = true
  }
  ~~~

  ~~~javascript
  // 新增文章
  const handleAdd = () => {
      dialogTitle.value = '新增文章'
      Object.keys(articleForm).forEach(key => {
      articleForm[key] = Array.isArray(articleForm[key]) ? [] : null
      })
      articleForm.content = "" //这里不能让为null，因为markdown解析器需要传递字符串！
      dialogVisible.value = true
  }
  ~~~


  ~~~javascript
  <template>
    <keep-alive>
      <component :key="componentKey"></component>
    </keep-alive>
  </template>
  
  <script>
  export default {
    data() {
      return {
        componentKey: 0, // 初始值
      };
    },
    methods: {
      refreshComponent() {
        this.componentKey += 1; // 更新 key 值，强制重新渲染子组件
      },
    },
    mounted() {
      // 在 mounted 阶段自动刷新，或者在需要的时候调用 refreshComponent 方法
      this.refreshComponent();
    },
  };
  </script>
  ~~~ 解决有些组件需要重新刷新来更新数据
  ~~~

  

  ## dataset的使用
首先JavaScript当中如果要定义数据放到html页面当中，而且可以随意的删除带有该数据的节点，而且可以获取该节点上的数据
方便地操作自定义数据属性，通过dataset，可以简化获取和设置data属性的代码，提高可读性。虽然在浏览器中性能方面稍须于getAttribute，
但考虑到便捷性和维护性，dataset是处理少量自定义属性的优选。
比如：
~~~html
<div class="parent" href="javascript:;" >
    <div class="child" >
        <!-- 其他内容 -->
         <!-- 操作按钮 -->
        <button class="removeBtn">删除</button>
    </div>
</div>

~~~


~~~javaScript

const parent = document.querySelector(".parent")
    
    //data数据，从其他地方获取，比如:
    this.data = [
        {
            index: 1,
            content: "测试内容1"
        },
        {
            index: 2,
            content: "测试内容2"
        }
    ]
    this.data.forEach((item1)=>{
        const item = document.createElement(".child")
        //代替hiddenIup,可以存储id数据
        item.dataset.id = item1.index
        //渲染之后的html代码为：
        // <div class="child" data-id="1"></div>
        //最后将子节点渲染到parent
        parent.appendChild(item)
    })


removeDel.addEventListener("click", function () {
    //之后数据进行删除和更改：
    //获取到按钮互近的祖先节点
    const card = removeDel.closest(".divListItem"); // 最近的祖先
    if (!card) return; // 容错

    const id = Number(card.dataset.id);
    if (isNaN(id)) return;

    //进行数据的更换，修改的是原对象bookShelves
    const idx = bookShelves.findIndex(b => b.index === id);
    if (idx !== -1) bookShelves.splice(idx, 1); // 原数组变了
    // 从 DOM 中直接移除，不影响数据。
    card.remove();
}, { once: true })


~~~