11-发布文章-发表&存入草稿

• 点击发表，点击存入草稿
  • 把文章数据提交给后台
  • 成功：提示+跳转内容管理

Message 消息提示组件-基础用法模式：
https://element.eleme.cn/#/zh-CN/component/message
publish/index.vue

//API文档规定——  false-发表  true-存入草稿  绑定事件
<el-button type="primary" @click="submit(false)">发表</el-button>
<el-button @click="submit(true)">存入草稿</el-button>

publish/index.vue中的methods:

//参数draft 为后台API命名
async submit (draft) {
      // 省去了校验
      await this.$http.post(`articles?draft=${draft}`, this.articleForm)
      // 成功提示
      this.$message.success(draft ? '存入草稿成功' : '发表成功')
    //跳转到内容管理页面
      this.$router.push('/article')
    }

12-发布文章-合并修改文章业务

• 在内容管理页面，点击编辑的时候，携带ID跳转过来。
  • 所以，根据地址栏是否有ID来判断当前的页面是什么。
• 如果是编辑业务：
  • 获取当前文章信息，组件初始化的时候。
  • 更新界面，面包屑文字，底部操作按钮替换。
  • 修改请求。

更新表单

publish/index.vue中的data中声明：

// 当前文章Id
      articleId: null

publish/index.vue中的export中声明:

created () {
    this.articleId = this.$route.query.id
    // 如果是编辑    &&——短路与  运算符，如果前段为假，后段不执行；
                  //  &——与 ，运算符，如果前段为假，后段继续执行；
    // this.articleId && this.getArticle()
    //等同如下，如果前段存在，执行后段
    if (this.articleId) {
      this.getArticle()
    }
  },

publish/index.vue中的methods:

// 获取文章数据
    async getArticle () {
      const { data: { data } } = await this.$http.get(`articles/${this.articleId}`)
      // 填充表单
      this.articleForm = data
    },

面包屑：publish/index.vue中的div盒子里:

<my-bread>{{articleId?'修改':'发布'}}文章</my-bread>

底部按钮

publish/index.vue中的div盒子里:

 <el-form-item v-if="!articleId">
          <el-button type="primary" @click="submit(false)">发表</el-button>
          <el-button @click="submit(true)">存入草稿</el-button>
        </el-form-item>
        <el-form-item v-else>
          <el-button type="success" @click="update(false)">修改</el-button>
          <el-button @click="update(true)">存入草稿</el-button>
        </el-form-item>

publish/index.vue中的methods里:

  // post 请求 post(‘地址’，‘数据’)
    // get 请求 get(‘地址’，‘{params:数据}’)

    //解构赋值
// 得到 用户 信息  res.data.data  res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值：res.data ={data:'用户信息'}
// ES6提供解构赋值语法：{data:{data:data}}

  // 函数的返回值  加载await之后  是then接受的数据
  // 在使用await之后在 外层函数必须用async 来申明

async update (draft) {
      // 地址栏多了ID  方式put，类似post
      await this.$http.put(`articles/${this.articleId}?draft=${draft}`, this.articleForm)
      // 成功
      this.$message.success(draft ? '修改时存入草稿成功' : '修改成功')
      this.$router.push('/article')
    }