在http/apis.js/添加后端请求路由
/* eslint-disable */
import { head } from 'shelljs'
import{get,post,put,del} from './index'
//用户登录
export const login = (params, headers) => post("/login/", params, headers)
//书籍管理接口
export const getBookList=(params,headers)=>get("/book/",params,headers)
export const addBook=(params,headers)=>post("/book/",params,headers)
export const editBook=(params,headers)=>put('/book/',params,headers)
export const delBook = (params, headers) => del("/book/", params, headers)
router/index.js 添加路由
import Books from '@/views/books/Books'
//图书增删改查案例
{
path: '/books',
name: 'Books',
component: Books
},
srcviewsooksBooks.vue 这里是父组件
图书管理系统
<button @click="addNew">新增图书
<BookEdit
v-show='dialogVisible'
:visible.sync='dialogVisible'
:data='editData'
@save='save'
>
<td>{{book.id}}</td>
<td>{{book.btitle}}</td>
<td>{{book.bpub_date}}</td>
<td>{{book.bread}}</td>
<td>{{book.bcomment}}</td>
<td>
<button @click="edit(index)">修改</button>
<button @click="del(index)">删除</button>
</td>
</tr>
</table>
</div>
</div>
图书编号
图书名字
出版时间
阅读数
评论数
操作
srcviewsooksBookEdit.vue 子组件
<el-button @click="cancel">取 消
<el-button
type="primary"
@click="addBook"
>确 定