根据接口输出表单信息

了解我们要用的接口

我们一般去看接口里的这几种参数（后面会用的到）：

关于我的接口：
get：获取数据的（一种用来查询数据请求方式）
/manager/message/list：调什么路径
X-AIYANGNIU-SIGNATURE：后端传数据用的特征标识码
msgTypeCode：这个请求方式所用到的参数

接口的写法

模块化的写法，一般是在需要调用显示的模块下直接编写。例如我现在准备利用上述接口在 内容 下写一个 消息管理 新页面，我首先要
1.找到内容模块api，写代码片：

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

说明：
‘get’、‘apiContent’、 ‘/manager/message/list’部分按照自己项目来，然后我取了个名字叫做’GetMessageList’。
另外：
语句最后，一般请求方式是get、delete时使用 {params:params}
是post、put时直接使用params
因项目而异

2. 在主api.js中导入：

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

（以下内容点345就是创建新vue界面路由，后续说明会使用这个界面，可跳过）

3.现在建个新vue页面（我的在user/page/order下），
不管内容（我写了个表格，放在本文的最后了），
主要让它：

name:'messageList',

4.路由设置（我是在order.js）中敲入：

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

还有在export default下的部分代码片
（主要是component：messageList部分）：

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

5.最后在vue入口（我是在index.vue）键入
主要同上面已经生成的代码保持一致即可

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

创建新页面

现在我们配置好了可以跳转的vue和准备就绪的后端接口，
（用最简单的方法）我准备把新页面全部显示在新建的messageList下：

1.还记得第一章接口图片里的参数吗？msgTypeCode用在这里

let me=this; 只是为了以后数据写得多的时候更方便使用，不和this混淆，这里不写这种写法也可以。
注意async和await的用法要连在一起

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

另外在mounted下写函数调用，让它已经加载就运行：

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

回到页面，
按下F12，
看看Network下状态码是不是200（表示和后端连接成功了）：
（此时我的表格是空空如也）绿色的200
点开Preview，这里后端说传来code：101才代表我走通。

另外我还知道了后端获取的数据，然后写在上面我说过我写完的的表格中，和prop相连就行。

于是为了让它把走通的路可以显示数据，在刚刚的标记1要写如下代码

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

（此时再刷新我的表格就可以显示数据啦）

我的表格：

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> ```