十次方项目前端，文章管理（八）

一、准备工作

1.代码生成
（1）使用《黑马程序员代码生成器》，连接数据库tensquare_article
（2）将api 与vue页面拷贝到当前工程
2.路由设置

 {
    path: '/article',
    component: Layout,
    name: 'article',
    meta: { title: '文章管理', icon: 'example' },
    children: [
      {
        path: 'channel',
        name: 'channel',
        component: () => import('@/views/table/channel'),
        meta: { title: '频道管理', icon: 'table' }
      },
      {
        path: 'column',
        name: 'column',
        component: () => import('@/views/table/column'),
        meta: { title: '专栏审核', icon: 'tree' }
      },
      {
        path: 'article',
        name: 'article',
        component: () => import('@/views/table/article'),
        meta: { title: '文章审核', icon: 'table' }
      }
    ]
  },

3.easyMock接口导入
将swaggerAPI文档导入到easyMock中。

二、频道管理

修改频道状态为开关，代码略

        <el-form-item label="状态">
        <el-switch placeholder="状态" on-text="" off-text="" active-
        value="1" inactive-value="0" v-model="pojo.state" ></el-switch>
        </el-form-item>

三、专栏审核

1.修改修改easyMock数据
URL: article/column/search/{page}/{size}

{
  "code": 20000,
  "flag": true,
  "message": "@string",
  "data": {
    "total": "@integer(60, 100)",
    "rows|10": [{
      "id": "@string",
      "name": "@cword(10,20)",
      "summary": "@cword(30,50)",
      "userid": "@string",
      "createtime": "@string",
      "checktime": "@string",
      "state|1": ['0', '1']
    }]
  }
}

2.待审核专栏列表
修改src/table/column.vue ,修改data变量的值

searchMap: {state:'0'},

这样在查询时就会携带状态为0的条件。
3.专栏审核
（1）修改src/api/column.js ,新增专栏审核方法

  examine(id){
    return request({
      url: `/${group_name}/${api_name}/examine/${id}`,
      method: 'put'
      })
    }

（2）增加方法定义

    handleExamine(id){
      this.$confirm('确定要审核此纪录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
          columnApi.examine(id).then(response => {
            this.$message({ message: response.message, type: (response.flag
            ? 'success' : 'error') })
          if (response.flag) {
            this.fetchData() // 刷新数据
          }
        })
      })
    }

（3）审核按钮

<el-button @click="handleExamine(scope.row.id)" type="text" size="small">审核</el-button>

四、文章审核

1. 修改easyMock接口

{
  "code": 20000,
  "flag": true,
  "message": "@string",
  "data": {
    "total": "@integer(60, 100)",
    "rows|10": [{
      "id": "@string",
      "columnid": "@string",
      "userid": "@string",
      "title": "@cword(20,30)",
      "content": "@string",
      "image": "@string",
      "createtime": "@string",
      "updatetime": "@string",
      "ispublic": "@string",
      "istop": "@string",
      "visits": "@string",
      "thumbup": "@string",
      "comment": "@string",
      "state|1": ['1', '0'],
      "channelid": "@string",
      "url": "@string",
      "type": "@string"
    }]
  }
}

2.待审核文章列表

修改src/table/article.vue ,修改data变量的值

searchMap: {state:'0'},

对查询表单进行精简,将不需要的查询条件项删除

对表格列进行精简，将不需要显示的数据项删除

删除“新增”按钮
3.文章详情窗口
点击“详情”按钮打开窗口，显示标题和正文 v-html用于显示富文本内容。

<!‐‐编辑窗口‐‐>
<el‐dialog title="详情" :visible.sync="dialogFormVisible" >
{{pojo.title}}
<hr>
<div v‐html='pojo.content'></div>
</el‐dialog>

4.文章审核与删除
（1）修改src/api/article.js，增加文章审核的方法

  examine(id){
    return request({
      url: `/${group_name}/${api_name}/examine/${id}`,
      method: 'put'
    })
  }

（2）修改src/views/table/article.vue，增加方法

examine(id){
    return request({
      url: `/${group_name}/examine/${id}`,
      method: 'put'
    })
  }

（3）新增审核和删除按钮

<el‐button type="success" @click="handleExamine(pojo.id)" >审核通过</el‐
button>
<el‐button type="danger" @click="handleDelete(pojo.id)" >删除</el‐button>
<el‐button @click="dialogFormVisible = false">关闭</el‐button>

（4）删除方法添加代码

this.dialogFormVisible = false // 隐藏窗口