前后端分离的一个小demo

0、写在前面

最近听人说现在的项目的都是前后端分离了，原来那种后端渲染模板的方式已然过时。

而且最近自己做项目发现，前后端维护一个包里的代码确实痛苦不堪、、、

为了让自己跟上时代的尾巴，加强开发的体验，就学习了vue.js和restful规范。

发现果然是好东西，那就先攒出来一个小demo，后期再上大项目。

1、资源接口表

HTTP方法	资源操作	URL	描述
GET	SELECT	/book/api/v1.0/books	查多个资源
POST	INSERT	/book/api/v1.0/books	新增资源
GET	SELECT	/book/api/v1.0/books/<id>	查单个资源
PUT	UPDATE	/book/api/v1.0/books/<id>	更新单个资源
DELETE	DELETE	/book/api/v1.0/books/<id>	删除单个资源

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、实现

前端vue.js+webpack模板+elemen-ui

 1 import Axios from 'axios'
 2 
 3 Axios.defaults.baseURL='http://localhost:5000'
 4 
 5 const BookListURL = '/book/api/v1.0/books'
 6 const BookURL = '/book/api/v1.0/books/'
 7 
 8 export function getBookListAPI() {
 9     return Axios.get(BookListURL).then(res=>res.data)
10 }
11 
12 export function postBookListAPI(data) {
13     return Axios.post(BookListURL,data).then(res=>res.data)
14 }
15 
16 export function getBookAPI(id) {
17   return Axios.get(BookListURL+'/'+id).then(res=>res.data)
18 }
19 
20 export function putBookAPI(id,data) {
21   return Axios.put(BookListURL+'/'+id,data).then(res=>res.data)
22 }
23 
24 export function deleteBookAPI(id) {
25   return Axios.delete(BookListURL+'/'+id).then(res=>res.data)
26 }

/src/restful/api.js