头条项目：文章发布+git 版本回退

莫凡是莫烦
161 阅读3分钟

这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

git版本回退

  1. 查看历史版本，找到要恢复的版本号 git reflog

image.png 2. 创建要回退版本的分支git branch 分支名 历史记录版本号（我这里是用户信息获取那个版本，版本号不写的话就是基于当前版本创建分支）

image.png

  1. 查看现有分支git branch

image.png

  1. 切换到userInfo 分支git checkout 【分支名】

image.png

  1. 切换后可运行代码查看效果

  2. 切回主分支（也就是当前版本）git checkout master(如果修改过userInfo分支记得保存提交（只用add 和 commit即可），否则无法进行切回)

文章发布结构创建

  1. 在views/publish下创建index.vue

image.png

  1. 配置路由

image.png

  1. 组件布局，代码如下
<template>
  <div class="publish-container">
    <el-card class="table-filter">
      <div slot="header">
          <!-- 面包屑导航路径 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="form.resource">
            <el-radio label="单图"></el-radio>
            <el-radio label="三图"></el-radio>
            <el-radio label="无图"></el-radio>
            <el-radio label="自动"></el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item label="频道">
          <el-select v-model="form.region" placeholder="请选择频道">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">发表</el-button>
          <el-button>存入草稿</el-button>
        </el-form-item>
</el-form>
    </el-card>
  </div>
</template>

处理表单数据绑定

  1. 首先查看接口文档，根据后端接口的要求处理绑定数据绑定
名称类型是否必须默认值备注其他信息
titlestring必须文章标题
contentstring必须文章内容
coverobject必须封面
├─ typeinteger必须封面类型 -1:自动，0-无图，1-1张，3-3张
├─ imagesstring []必须item 类型: string
channel_idinteger必须文章所属频道id
  1. 编写绑定数据的参数（data中的参数）

image.png 3. 接收频道接口（这里和文章列表基本类似）

import { getArticlesChannels } from '@/api/article'

 created () {
    this.onLoadChannels()
  },
  method: {
   onLoadChannels () {
      getArticlesChannels().then(res => {
        console.log(res)
        this.channels = res.data.data.channels
      })
    }
   }

image.png

处理富文本编辑器中的图片

1、创建 src/api/image.js 封装数据接口

2、自定义图片上传到服务器 表单验证处理

验证规则配置对象

1、创建 src/views/publish/components/upload-image.vue 组件并写入

注册

在模板中使用对话框

展示素材库

处理选择图片

1、添加一个数据字段用来存储当前点击的图片项的索引

2、模板绑定

数据绑定

1、在父组件中绑定数组元素给图片上传组件

2、在上传图片组件中

声明 value 接收数据

点击对话框确认触发：将所选的图片路径发送给父组件

上传图片

1、添加上传图片组件

2、记录选择的上传图片

3、对话框确定的时候

禁用路由缓存

我们发现一个小问题，从编辑文章导航到发布文章，表单内容并没有被清空，这是因为两个路由共用的同一个组件，两者之间相互跳转的时候，原来的组件实例会被复用。 因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

路由默认提供的这个功能的用意是好的，但是有时候却会带来问题，解决方案就是：禁用缓存。

在路由出口 router-view 上添加一个唯一的 key 即可。

详细内容请查阅官方文档：响应路由参数的变化。

avatar
文章
阅读
粉丝