TienChin 渠道管理-前端展示渠道信息

在编写 Vue 项目的时候我们可以使用 IDEA 当中提供的一个工具叫做 structure，也就是说可以很轻松的列举出当前 Vue 文件的大致结构，点那个就会跳转到对应的地方。

简简单单介绍一个编写Vue时的一个小技巧，那么接下来进入核心内容，展示渠道信息的开发。

在 api 文件夹模块当中新建一个 tienchin 的文件夹，在当中编写一个 channel.js:

channel.js:

import request from '@/utils/request'

/**
 * 查询渠道列表
 * @param query 查询条件参数
 * @returns {*} 查询结果
 */
export function listChannel(query) {
    return request({
        url: '/tienchin/channel/list',
        method: 'get',
        params: query
    })
}

// 查询渠道详细
export function getInfo(channelId) {
    return request({
        url: '/tienchin/channel/' + channelId,
        method: 'get'
    })
}

// 新增渠道
export function addChannel(data) {
    return request({
        url: '/tienchin/channel',
        method: 'post',
        data: data
    })
}

// 修改渠道
export function updateChannel(data) {
    return request({
        url: '/tienchin/channel',
        method: 'put',
        data: data
    })
}

// 删除渠道
export function delChannel(channelIds) {
    return request({
        url: '/tienchin/channel/' + channelIds,
        method: 'delete'
    })
}

主要的就是编写了一下对接后台的 api。

接下来就是页面的调用代码：

index.vue:

!> 声明：本人在开发这个模块当中没有记录开发过程，我这里只是简简单单写一个文章来做个备份给新人看这个项目有个好的铺垫。