La interfaz de salidas de forma de información

Aprender acerca de nuestra interfaz de uso

Generalmente vemos la interfaz en estos tipos de parámetros (que más tarde sería utilizado):

Acerca de mi interfaz:
GET: Obtiene datos (se utiliza para consultar el modo de solicitud de datos)
/ Gerente / la / Lista de mensajes: ¿Qué sintonizar Ruta
X-AIYANGNIU-FIRMA: Características de transmisión de datos back-end con el código
msgTypeCode: El método de la petición los parámetros utilizados

escribiendo las interfaces

redacción modular, suele escribir directamente en las necesidades Módulo para mostrar llamada. Por ejemplo, yo estoy listo para tomar ventaja de las interfaces por encima de contenido para escribir una gestión de mensajes nueva página, primero quiero
1. Encontrar módulo de contenido api, a piezas de escritura de código:

//根据类型获取未读消息列表
export const GetMessageList = (params) => res('get','apiContent', '/manager/message/list', {params:params});

Descripción:
'GET', 'apiContent', '/ Gerente / la / Lista de mensajes' parte del proyecto a su cuenta, y entonces tomo un nombre llamado el 'getMessageList'.
También:
El resultado final es, el método de la petición se consigue generalmente, utilice Delete {params: params}
es POST, PUT utilizando directamente params
variar según el proyecto

2. Presentación de los principales api.js:

import * as apiContent  from './modules/apiContent'
export const content  = apiContent

(El siguiente punto es la creación de 345 ruta nueva interfaz de vue, siga las instrucciones a utilizar esta interfaz, puede omitir)

3. Ahora acumulación vue una nueva página (en mi usuario / página / bajo pedido),
independientemente de los contenidos (I escribió una mesa, colocada al final del artículo),
la principal es:

name:'messageList',

4. Configuración de Direccionamiento (yo estaba en order.js) Knockin:

const messageList = resolve => require(['user/page/order/messageList.vue'], resolve) 

Hay alguna pieza de código en la forma predeterminada de exportación
(principalmente componentes: la sección messageList):

{
name: '消息管理',
path: '/messageList',
component: messageList,
meta: {
 loggedIn: true //登录验证
},
},

5. entrada Finalmente vue (I estaba en index.vue) tipo
es principalmente con el código anterior se ha generado para ser consistente

{
    icon: '',
    title: '消息管理',
    url: this.user+'/messageList',
    show: true
}

Crear una nueva página

Ahora podemos saltar de una interfaz de servicios de fondo vue configurado y listo buena
(con la forma más fácil) Voy a mostrar toda la nueva página en la nueva messageList sigue:

1. Recuerde que el primer capítulo de los parámetros de la interfaz de la imagen que? msgTypeCode utiliza aquí

let me=this;Sólo para luego escribir más datos cuando más cómodo de usar, y esto no se confunde aquí no escribir este enfoque puede ser.
Nota asyncy awaitel uso a estar juntos

methods: {
  //获取消息列表
  async getList(){
    let me = this;
    await content.GetMessageList( {msgTypeCode:''}).then(res => {
       //这里等等填入数据（标记1）
      }).catch(err => {
        me.$Message.error(err || '请求数据失败2')
      });
  }
 }

Además las llamadas de función de escritura montados, se ha cargado en la carrera:

mounted(){
    this.getList()//获取消息列表
  }

Volver a la página,
pulse F12,
echar un vistazo a código de estado de red no está 200 (representación y la conexión de back-end es exitosa):
(En este punto mi mesa está vacío) verde 200
puntos para abrir la vista previa, aquí vino el back-end, dicho code：101solamente ir a través de mi parte.

Además, también sé que la adquisición de datos back-end, y luego le dije que iba a escribir en la parte superior de la mesa a fin, y Prop conectada en la línea.

Así que con el fin de hacer que se vaya a través de la ruta de los datos se pueden mostrar en tan sólo el número 1 de escribir el siguiente código

 if (res.code == 101) {
     me.msgList = res;
} else {
     me.$Message.error(res.message || '请求数据失败1')
}

(En este punto, actualizar la tabla de datos puede mostrar)

Mi forma:

style="margin-top:10px">
      <el-table-column prop="id" label="ID" width="100"/>
      <!-- <el-table-column prop="addUserId" label="addUserId" width="100"/> -->
      <el-table-column prop="remarks" label="订单编号" width="200"/>
      <el-table-column prop="title" label="标题" width="150"/>
      <el-table-column prop="status" label="状态" width="100"/>
      <el-table-column prop="addTime" label="添加时间" width="150"/>
      <el-table-column prop="content" label="内容" width="200"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="edit(scope.$index,scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="del(scope.$index,scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table> ```