Vue前端篇之作者功能开发（一）

一、EasyMock生成作者数据 

（一）获取所有数据 

新建get请求接口 http://192.168.35.16:7300/mock/60ef1eb22475f419e941cf61/authors

{
  "code": 200,
  "message": "获取成功",
  "data|10": [{
    "id|+1": 10,
    "username": "@ctitle",
    "email": "@email"
  }]
}

使用测试工具获取数据： 

（二）新增一条数据 

新增post请求接口 http://192.168.35.16:7300/mock/60ef1eb22475f419e941cf61/author

{
  "code": 200,
  "message": "新增成功"
}

二、API接口调用 

（一）获取所有数据 

在src目录中新建api目录，然后新建authors.js文件： 

其内容为：

import request from "@/utils/request";

export function getAuthors() {
  return request({
    url: "/authors",
    method: "get"
  });
}

然后在views/authors/index.vue文件中调用接口、获取数据、进行渲染，其中渲染的表格模板：

<template>
    <el-table
      :data="authorsList"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
    </el-table>
</template>

<script>
import { getAuthors } from "@/api/authors";

export default {
  data() {
    return {
      authorsList: []
    }
  },
  name: "index",
  created() {
    this.getAuthors();
  },
  methods: {
    async getAuthors() {
      const res = await getAuthors();
      let {code, message, data} = res.data
      console.log(code,message,data)
      if (code == 200) {
        this.authorsList = data;
        this.$message(message);
      }
    }
  }
};
</script>
<style scoped>

</style>

显示效果为：

（二）新增数据 

在authors.js文件中：

export function addAuthor(data) {
  return request({
    url: "/author",
    method: "post",
    data: data
  })
}

在views/authors/index.vue文件中进行调用，首先需要使用dialog form对话框。  

1、将添加按钮、弹出框放在合适的地方 

注意的是弹出方法需要自己实现，因为需要重置表单，清空数据，需要注意的是： 

• el-form 使用ref属性 
• el-form-item 指定prop，否则重置不生效

<template>
  <div>
    <el-row style="margin-bottom: 5px">
      <el-button type="primary" @click="handleAdd">添加作者</el-button>
    </el-row>
      <!--
    <el-row>
      <el-table
        :data="authorsList"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
      </el-table>
    </el-row>
	-->
    <el-dialog title="添加作者" v-model="dialogFormVisible">
      <el-form ref="postForm" :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addData">确 定</el-button>
    </span>
      </template>
    </el-dialog>
  </div>
</template>

在确定按钮中绑定addData方法。 

2、添加数据属性、方法

显示的效果： 

更多文章合集前往：往期精彩文章