# blog-admin

**Repository Path**: echoc/blog-admin

## Basic Information

- **Project Name**: blog-admin
- **Description**: 个人博客后台管理系统

前端使用Vue3.0进行搭建，antd vue作为ui框架
后端使用SpringBoot搭建，Shiro做安全框架，
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-12-08
- **Last Updated**: 2022-06-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

TODO

- [ ] 后台编写删除菜单，编辑菜单，查询菜单，删除菜单接口

- [ ] 进行主题的适配

- [ ] 编写模糊查询文章接口

- [ ] 后台端口鉴权操作

- [ ] 刷新组件原理？

- [ ] 学习相关icon，iconpicker的编写方法

    

+ 使用use安装插件，实现组件公用
+ Vuex模块化
+ 使用`vue-i18n`来完成标签tab的切换
+ 借鉴 tabs 标签页的list
+ 借鉴全局组件中的count组件
+ `.env`模式和环境变量 [相关参考](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F)



#### [如何在 Vue3 的 setup 中使用 $refs](https://www.cnblogs.com/yinyuxing/p/14510803.html)

方法一：借助ref()函数

通过ref函数，依然可以实现类似this.$refs的功能

+ setup中定义一个Ref变量

    ```vue
    const divRef = ref(null)
    ```

+ 将这个 `divRef` 变量挂载到 DOM 上

    ```vue
    <template>
      <div ref="divRef" />
    </template>
    ```

方法二：找到`this`

vue3.0可以通过 `getCurrentInstance()` 可以获得 vue 实例对象。

console.log(getCurrentInstance().ctx.$refs.divRef)

#### vue中使用axios发送post

> **简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。**

+ 第一种方法

发送post请求需要使用qs模块将参数转序列化==否则后端接口拿不到相关参数==

```js
var url = "换成你的地址";
var data = {}
axios.post(url, qs.stringify(data), {
                            headers: {
                                'Content-Type':'application/x-www-form-urlencoded'
                            }
                        }).then(res => {
                            console.log(res);
                        })
```

> qs.stringify():将json字符串转换成查询字符串
>
> qs.parse():将查询字符串转换成json字符串

+  第二种方法

new URLSearchParams()    进行处理

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

出来的结果和 qs 转换过一样

var data = new URLSearchParams() ;

data.append('time', 11111111);   // 添加数据

```js
var url = "换成你的地址";
var data = new URLSearchParams() 
data.append('time', 15555555);
axios.post(url, data, {
        headers: {
              'C':'application/x-www-form-urlencoded'
          }
      }).then(res => {
          console.log(res);
})
```

> 直接以原始数据格式(js对象格式)传递的话，那样存储在body中的话，不是以键值对的形式附加到url中，所以服务端是无法直接识别的， 之前你用表单的时候，为啥可以 是因为表单 浏览器自动帮我们处理了

#### application/json 和 application/x-www-form-urlencoded 区别

[相关参考](https://blog.csdn.net/weixin_40599109/article/details/113614103)

????使用application/json后台应该怎么处理才能获取数据

#### 注意事项

使用ref或者reactive使用`const pageData = reactive({list:{}})`,pageData.list可以修改，const中不可改变的是指针，在赋值操作中只能赋值pageData.list里面的数据，不可以直接修改pageData

#### vue3中挂载全局变量

[相关参考](https://blog.csdn.net/weixin_43090018/article/details/117222606)



[gin框架解决跨域问题](https://cloud.tencent.com/developer/article/1634556)

+ 怎么使用icon  首先需要绑定一个全局配置   让$antIcons[type]起作用

+ 动态组件是什么意思？

> 我们之前曾经在一个多标签的界面中使用 `is` attribute 来切换不同的组件 **动态组件**

#### 左侧菜单

+ 工作空间
    + 分析页
    + 工作台
+ 标签相关
    + 标签列表
    + 增加标签
+ 文章相关
    + 文章列表
    + 增加文章
+ 系统管理
    + 当前权限
    + 菜单列表
    + 角色列表
    + 用户列表