本篇我们在 book_list 页增加一个添加书目的功能，后端的代码在前面已经完成，我们直接来完成前端部分：
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<title>Book List</title>
<script type="text/javascript" src="{% static "js/vue1.js" %}"></script>
<script type="text/javascript" src="{% static "js/reqwest.js" %}"></script>
</head>
<!-- verbatim 标签，表示该标签内的内容不是用django渲染 -->
{% verbatim %}
<body id="app">
<!-- 展示书目内容 -->
<h3>书目信息：</h3>
<div v-for='book in books'>
<a href="book/{{ book.id }}">
<p>{{ book.title }}</p>
</a>
</div>
<!-- 添加书目 -->
<hr>
<h3>添加书目：</h3>
<form>
<input v-model="books_form.title" type="text" placeholder="标题">
<input v-model="books_form.author" type="text" placeholder="作者">
<input v-model="books_form.summary" type="text" placeholder="简介">
</form>
<br>
<button v-on:click="sendData">添加</button>
<script>
var vm = new Vue({
el:"#app",
data: {
books:[],
// 用于添加书目的变量，接收form的数据
books_form:{
title: '',
author: '',
summary: '',
}
},
methods: {
// 用reqwest从api中获取数据
getData:function () {
var self = this;
reqwest({
// 请求的网址，即上文中创建的api地址
url:'http://127.0.0.1:8000/api/book/',
// 获取数据的格式：json
type:'json',
// 请求的方法：get
method:"get",
// 请求成功后执行的方法
// 这里把数据保存到data的books中
success:function (resp) {
self.books = resp;
},
})
},
// 添加数据
sendData:function () {
var self = this;
reqwest({
url:'http://127.0.0.1:8000/api/book/',
method:'post', // post方法发送数据
type:'json',
// 包装好前端输入的数据
data:{
title: self.books_form.title,
author: self.books_form.author,
summary: self.books_form.summary,
},
success:function (resp) {
// 添加完成后重新执行一次getData方法，展示新的数据
self.getData()
}
})
}
},
// 预执行，打开网页时自动执行getData方法
ready:function () {
this.getData()
}
})
</script>
</body>
{% endverbatim %}
</html>
页面如下：
Paste_Image.png
