Vue + Flask 实战开发系列（八）
Vue + Flask 实战开发系列（八）
登录和退出功能做完以后，接下来继续开发作者信息相关功能，例如作者列表，添加、删除、更新等功能。开发之前，先要清理一下vue-admin-template模板默认生成的路由信息。之后，我们从作者列表功能开始开发。
添加作者信息列表页面
首先，在src/views目录下，新建author和book两个目录。接着分别新建一个index.vue文件。两个文件的初始内容如下：
<template>此处编写html代码</template>
<script>此处编写Javascript代码</script>
<style>此处编写css代码</style>这个文件现在先写这么多内容，稍后再来完成。这一节内容中，主要分享作者信息相关功能的开发。
添加作者信息页面路由
完成页面初始部分后，我们就可以去添加页面相关路由了。我们如果需要可以访问到作者信息页面。这里就需要用到vue的路由功能，在vue中需添加相应页面的路由，才可以访问。接下来打开src/router/index.js文件，在constantRoutes数组中，编写如下程序：
{
path: '/books',
component: Layout,
redirect: '/book/author',
name: 'Book',
meta: { title: '图书管理', icon: 'el-icon-s-help' },
children: [
{
path: 'author',
name: 'author',
component: () => import('@/views/author/index'),
meta: { title: '作者信息', icon: 'table' }
},
{
path: 'book',
name: 'book',
component: () => import('@/views/book/index'),
meta: { title: '书籍信息', icon: 'table' }
},
]
},以上程序，我们实现了作者信息和图书信息页面的访问路由程序。
封装作者信息相关接口
紧接着，我们来把Flask作者相关接口，在前端做一个封装。也就是找一个地方统一进行管理。在src/api目录下，新建author.js和book.js两个文件。这里我们先不管book.js文件。重点在author.js文件，关于作者的所有接口，都被封装在author.js文件中。具体封装程序如下：
import request from '@/utils/request'
// 添加作者信息
export function createAuthorInfo(data) {
return request({
url: "/author/",
method: 'post',
data
})
}
// 获取所有作者信息
export function getAuthorInfo() {
return request({
url: "/author/",
method: 'get',
})
}
//通过作者ID获取作者信息
export function getAuthorInfoById(id) {
return request({
url: "/author/" + id,
method: 'get',
})
}
// 更新作者信息（待完善）
export function UpdateAuthorInfoById(id) {
return request({
url: "/author/" + id,
method: 'put',
})
}
// 删除作者信息接口
export function DeleteAuthorInfoById(id) {
return request({
url: "/author/" + id,
method: 'delete',
})
}以上封装好的接口，就是我们这次要用到的。接下来，我们来使用这些接口完成我们的功能吧。
HTML页面编写
现在回到我们在文章开始的时候，在src/views/author目录下，新建的index.vue文件中。编写页面的html部分。这部分内容主要用的element-ui组件，不太熟悉的读者，可以了解学习一下。以下就是作者信息页面的html部分。
<template>
<div class="app-container">
<!-- 添加作者信息按钮 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
</el-row>
<!--作者信息列表 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="序号" width="180"></el-table-column>
<el-table-column prop="first_name" label="姓名"></el-table-column>
<el-table-column prop="last_name" label="笔名"></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--添加作者信息表单-->
<el-dialog title="添加作者信息" :visible.sync="centerDialogVisible" width="50%" center>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="作者姓名">
<el-input v-model="form.first_name"></el-input>
</el-form-item>
<el-form-item label="作者笔名">
<el-input v-model="form.last_name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</el-dialog>
</div>
</template>编写完成html部分，就可以继续编写javascript部分程序了。首先，在JavaScript程序的开头部分，导入我们的封装的接口。具体程序如下：
import {
createAuthorInfo,
getAuthorInfo,
getAuthorInfoById,
UpdateAuthorInfoById,
DeleteAuthorInfoById
} from "@/api/author";接下来，我们来定义一下页面显示的数据和一些状态的控制。具体程序如下：
data() {
return {
tableData: [], //页面表格数据,即作者信息列表
centerDialogVisible: false, //用于控制添加与编辑作者信息表单组件是否显示
form: { //作者信息
first_name: "",
last_name: ""
}
};
}接下来，我们就可以开始编写按钮相关的事件了。这些事件都是在Vue的methods方法中来完成的。
编写添加作者信息功能
添加作者信息的表单，使用了Dialog 组件。该组件在保留当前页面状态的情况下，告知用户并承载相关操作。我们先来梳理一下，添加作者信息的流程。点击添加按钮->在弹窗中输入作者信息->保存或者取消。
//添加按钮事件
handleAdd() {
this.centerDialogVisible = true;
},
// 弹窗中的取消按钮事件
cancel() {
this.centerDialogVisible = false;
this.reset();
},
// 重置表单数据
reset() {
this.form = {
first_name: "",
last_name: ""
};
},
//弹窗中的确定按钮,调用接口保存作者信息
save() {
this.centerDialogVisible = false;
createAuthorInfo({
first_name: this.form.first_name,
last_name: this.form.last_name
})
.then(res => {
console.log(res);
if (res.code === "success") {
this.$message.success("添加成功");
this.getAuthorList();
} else {
this.$message.error("添加失败");
}
})
.catch(err => {
this.$message.error("服务端异常，添加失败。");
});
},以上程序代码，就是关于添加作者信息的所有程序。
编写获取作者信息功能
添加完作者信息后，需要在页面中把添加的信息展示出来。如下函数就是获取作者信息的程序。
getAuthorList() {
getAuthorInfo()
.then(res => {
if (res.code === "success") {
this.tableData = res.authors;
} else {
this.$message.error("获取信息失败");
}
})
.catch(err => {
this.$message.error("服务端异常，请联系管理员解决。");
});
},该函数需要在打开页面的时候调用，这样我们才能在打开页面的时候，看到加载的作者数据。要想实现这一功能，非常简单。只需要使用Vue的mounted的方法中调用即可。具体程序如下：
mounted() {
this.getAuthorList();
}此时，你运行前后端程序，即可进行测试和验证开发完成的功能了。最后是已实现功能的页面截图。
