实现文章发布

实现文章发布

https://element.eleme.cn/2.13/#/zh-CN/component/installati

1 在添加组件 配置路由

2 组件制作

2.1 使用 根据页面的内用删除多余的代码

  首页
  活动管理
  活动列表
  活动详情

2.2使用 Card 卡片 文本框 单选框 富文本框都是在 Card 卡片 的结构里

在data 中 定义一个对象要根据文档要收集的数据

**添加按钮 绑定点击事件 **

2.3 使用 文本框 在 Form 表单 截取 需要的代码

2.4 使用 单选按钮

  
          
            文章
            视频
          
        

2.5 富文本框组件的添加

下载 npm install vue-word-editor --save
地址 https://github.com/hsian/vue-word-editor

引入组件并注册

引入

注册

在富文本卡框中 使用

在data 中添加必要的配置

data(){
  return {
    config: {
      // 上传图片的配置
      uploadImage: {
        url: "http://localhost:3000/upload",
        name: "file",
        // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)
        }
      },
  	 
      // 上传视频的配置
      uploadVideo: {
        url: "http://localhost:3000/upload",
        name: "file",
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)
        }
      }
    }
  }

根据页面需要修改后

2.6 添加上传 Upload 上传

  点击上传
  
只能上传jpg/png文件，且不超过500kb

需要处理的

action

file-list

headers

on-success

2.7 添加封面上传 Upload 上传 照片墙

实现封面的预览

on-preview

文件超出提示

on-exceed

封面上传成功

on-success

移除封面的处理

on-remove

效果

总结过程

配置路由

1 使用组件

2 添加面包屑 Breadcrumb 面包屑

3 添加卡片 Card 卡片

4 添加文本框 Form 表单

5 添加单选框 Radio 单选框

6 难点 添加富文本框 需要下载 引入 注册 使用 根据文档需要配置的 我们所用到的组件，他可以实现文件的上传，但他并没有使用我们封装的axios ，而是内部自己封装了异步的请求操作，意味着不会经过我们的拦截器，需要使用组件内置的headers 来实现token 的传递

7 添加 Upload 上传

8 添加封面 Upload 上传

添加上传文件和封面上传都需要使用 headers 属性传递token