# articlemanger-frontend

**Repository Path**: ww24kobe/articlemanger-frontend

## Basic Information

- **Project Name**: articlemanger-frontend
- **Description**: 后台前端页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-22
- **Last Updated**: 2024-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue后台文章管理系统课堂笔记

# 仓库地址：

后端：https://gitee.com/ww24kobe/article-manger-backend

前端：https://gitee.com/ww24kobe/articlemanger-frontend


# 封装附件管理组件

效果如下：
![](./snippet/1.png)

使用：
```
<template>
  <div>
    <p>外部的checkID:{{ checkID }}</p>
    <media
      :media-data="medias"
      is-show-mask
      @click="click2"
      :check-id.sync="checkID"
    />
  </div>
</template>

<script>
// 导入媒体组件
import media from '@/components/media'
export default {
  data() {
    return {
      checkID: 1,
      medias: [
        {
          id: 1,
          path_url:
            'https://img0.baidu.com/it/u=4083294720,1137316458&fm=253&fmt=auto&app=120&f=JPEG?w=723&h=500',
        },
        {
          id: 2,
          path_url:
            'https://img1.baidu.com/it/u=3285035919,1927652182&fm=253&fmt=auto&app=120&f=JPEG?w=456&h=810',
        },
        {
          id: 3,
          path_url:
            'https://img1.baidu.com/it/u=3478713884,2113445472&fm=253&fmt=auto&app=120&f=JPEG?w=634&h=356',
        },
      ],
    }
  },
  methods: {
    delete1(item) {
      console.log('delete1', item)
    },
    click2(item) {
      console.log('click2', item)
    },
  },
  components: {
    media,
  },
}
</script>
```
## API



### props

| 参数                | 说明                                 | 类型          | 可选值 | 默认值 |
| ------------------- | ------------------------------------ | ------------- | ------ | ------ |
| check-id            | 默认选中的图片id。加sync可以双向绑定 | Number/String |        | 0      |
| media-data          | 数据源                               | Array         | 必传   | []     |
| is-show-delete-icon | 是否显示删除按钮                     | Boolean       |        | false  |
| is-show-mask        | 是否显示遮盖                         | Boolean       |        | false  |

### event


| 参数   | 说明             | 回调参数    |
| ------ | ---------------- | ----------- |
| click  | 单击图片事件     | item (对象) |
| delete | 单击删除按钮触发 | item(对象)  |



# 全屏的功能

```
// 全屏
const fullScreen = () => {
  let full = document.fullscreenElement
  if (!full) {
    // 开启全屏模式
    document.documentElement.requestFullscreen()
  } else {
    // 退出全屏模式
    document.exitFullscreen()
  }
}
```



# vue轮子

- vue3:https://vueuse.org/guide/
- vue2/3:https://awesome-vue.js.org/



# wangeditor富文本编辑器

## 基本使用

官网：https://www.wangeditor.com/

1. 安装

   ```
   npm install @wangeditor/editor @wangeditor/editor-for-vue
   ```

2. 使用

   ```
   <template>
     <div style="border: 1px solid #ccc">
       <Toolbar
         style="border-bottom: 1px solid #ccc"
         :editor="editor"
         :defaultConfig="toolbarConfig"
         :mode="mode"
       />
       <Editor
         style="height: 500px; overflow-y: hidden"
         v-model="html"
         :defaultConfig="editorConfig"
         :mode="mode"
         @onCreated="onCreated"
       />
     </div>
   </template>

   <script>
   import Vue from 'vue'
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
   import '@wangeditor/editor/dist/css/style.css'
   export default Vue.extend({
     components: { Editor, Toolbar },
     data() {
       return {
         editor: null,
         html: '<p>hello123</p>',
         toolbarConfig: {},
         editorConfig: { placeholder: '请输入内容...' },
         mode: 'simple', // or 'simple'
       }
     },
     methods: {
       onCreated(editor) {
         this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
       },
     },
     beforeDestroy() {
       const editor = this.editor
       if (editor == null) return
       editor.destroy() // 组件销毁时，及时销毁编辑器
     },
   })
   </script>

   <style lang="scss" scoped></style>

   ```

   ​

## 常用API

- 内容处理

  ```
  // 设置内容
  editor.setHtml('<p>hello <strong>world</strong></p>')
  // 获取内容
  editor.getHtml()
  ```

- 工具栏配置

  ```
  data() {
      return {
        // 工具栏配置
        toolbarConfig: {
          toolbarKeys: ['bold', '|'], // 显示哪些菜单
          excludeKeys: ['italic'], // 排除哪些菜单
        },
      
      }
    },
  ```

  获取所有的菜单key:

  ```
   // 查看所有的配置菜单key
    console.log(this.editor.getAllMenuKeys())
  ```

- 编辑区配置

  ```
  data() {
      return {
        // 编辑器配置
        editorConfig: {
          placeholder: '请输入内容...',
          readOnly: false,
          maxLength: 20,
        },
      }
    },
  ```

  组件：

  ```
  <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onMaxLength="onMaxLength"
  />
  ```





## 上传图片

```
 //   编辑器配置
      editorConfig: {
        placeholder: '请输入内容...',
        readOnly: false,
        maxLength: 20,
        MENU_CONF: {
          lineHeight: ['1', '1.5', '2', '2.5', '3.5'],
          uploadImage: {
            server: 'http://127.0.0.1:3000/upload',
            fieldName: 'file',
            maxFileSize: 2 * 1024 * 1024, // 2m
            maxNumberOfFiles: 3,
            allowedFileTypes: ['image/*'],
            headers: {
              token: this.$store.state.token,
            },
            onBeforeUpload(file) {
              console.log('上传之前')
              return file
            },
            onSuccess(file, res) {
              console.log(`${file.name} 上传成功`, res)
            },
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res)
            },
            customInsert(res, insertFn) {
              console.log('customInsert', res)
              let { path } = res
              path = 'http://127.0.0.1:3000/' + path
              insertFn(path)
            },
          },
        },
      },
```




# echart图表的基本使用

配置项：https://echarts.apache.org/zh/option.html#title
```js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.js"></script>
    <script>
      // 初始化图表
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: 'ECharts 入门示例',
          show: true,
          textStyle: {
            fontSize: '20px',
            color: 'red',
          },
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          data: ['体育', '娱乐', '财经'],
        },
        yAxis: {},
        series: [
          {
            name: '文章篇数',
            type: 'bar',
            data: [50, 200, 36],
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    </script>
  </body>
</html>

```


# 开源后台参考

- https://vue3.youlai.tech/
- http://x.vueadminwork.com/


# 省市区数据
- 仓库地址：https://github.com/modood/Administrative-divisions-of-China
- 配合级联选择器一起使用：https://github.com/modood/Administrative-divisions-of-China/issues