Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gaoding-inc/v-model
V-Model is a model plugin for Vue.js, like ng-resource.
https://github.com/gaoding-inc/v-model
axios ngresource vue
Last synced: about 2 months ago
JSON representation
V-Model is a model plugin for Vue.js, like ng-resource.
- Host: GitHub
- URL: https://github.com/gaoding-inc/v-model
- Owner: gaoding-inc
- Created: 2016-12-09T17:09:22.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-21T10:05:27.000Z (over 5 years ago)
- Last Synced: 2024-03-22T10:12:43.688Z (3 months ago)
- Topics: axios, ngresource, vue
- Language: JavaScript
- Homepage:
- Size: 58.6 KB
- Stars: 58
- Watchers: 4
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue - v-model - V-Model is a model plugin for Vue.js, like ng-resource. (Components & Libraries / Utilities)
- awesome-vue - v-model ★39 - V-Model is a model plugin for Vue.js, like ng-resource. (Utilities / HTTP Requests)
README
## V-Model
[](https://www.npmjs.org/package/v-model)
[](https://travis-ci.org/laoshu133/v-model)
V-Model is a model plugin for Vue.js, like ng-resource.
based on axios, path-to-regexp, and bluebird.
The V-Model provides interaction support with RESTful services, can work with Vue.js 1.x and 2.x.
See more about [ng-resource](https://docs.angularjs.org/api/ngResource/service/$resource)
## Installation
```
> npm i -S v-model
```
```javascript
import Model from 'v-model';
// set baseURL
Model.http.defaults.baseURL = '//api.laoshu133.com';
// install
Vue.use(Model);
```
## Usage
```javascript
import Vue from 'vue';
import Model from 'v-model';
// set baseURL
Model.http.defaults.baseURL = '//api.laoshu133.com';
// install plugin
Vue.use(Model);
const PostModel = Model.extend('/posts/:id', {
publish: { method: 'POST' }
}, {
EDITING: 0,
PUBLISHED: 1
});
const app = new Vue({
el: '#app',
data: {
post: new PostModel({
status: PostModel.EDITING,
content: '',
title: ''
})
},
methods: {
load(id) {
this.post = PostModel.get({
id: id
});
return this.post.$promise;
},
save(data) {
return this.post.$save(data);
}
}
});
```
## Model Factory
Before you can create model(s), you need to generate a Model.
```javascript
Model.extend(url, actions, staticProps, options);
```
#### url
An Express-style path string, e.g `/posts/:id`.
#### actions
Hash with declaration of custom actions.
```
{
action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, hasPagination:?, ...}
}
```
Default actions:
```
{
get: { method: 'GET' },
save: { method: 'POST' },
update: { method: 'PUT' },
delete: { method: 'DELETE' },
query: { method: 'GET', isArray:true }
};
```
Where:
- `action` {String} The name of action.
- `method` {String} Case insensitive HTTP method (e.g. GET, POST, PUT, DELETE, JSONP, etc).
- `params` {Object} Optional set of pre-bound parameters for this action.
- `headers` {Object} Optional set of pre-bound request headers for this action.
- `timeout` {Number} timeout in milliseconds.
- `isArray` {Boolean} If true then the returned object for this action is an array.
- `hasPagination` {Boolean} Only work with `isArray: true`, if true then tranform the request result to `{items: requestResult, pagination: {num: ?, size: ?, total: ?}}`
#### staticProps
Hash with declaration of static properties.
```
Model.extend('/posts/:id', null, {
EDITING: 0,
PUBLISHED: 1
});
```
#### options
Set http request default settings for.
Where:
- `baseURL` will be prepended to `url` unless `url` is absolute.
- `headers` are custom headers to be sent
See more [axios config](https://github.com/mzabriskie/axios#request-config)
## API
With static method:
```javascript
// get single post
const post = PostModel.get({
id: 1
});
// get post list
const posts = PostModel.query({
status: PostModel.PUBLISHED
});
// update
const post = PostModel.update({
id: 1,
title: 'New post title'
});
// delete
PostModel.delete({
id: 1
});
```
With instance method:
```javascript
// create/save
let post = new PostModel();
let promise = post.$save({
title: 'Post title'
})
// update
let post = new PostModel({
id: 1,
title: 'Post title'
});
let promise = post.$update({
title: 'New post title'
});
```
## Pagination
V-Model support pagination via reponse headers `X-Pagination`.
Some http request:
```
> GET /posts?page_num=1&page_size=20 HTTP/1.1
> Host: api.laoshu133.com
> User-Agent: curl/7.49.1
>
< HTTP/1.1 200 OK
< Content-Type: application/json; charset=utf-8
< X-Pagination: {"num":1,"size":20,"total":44}
[{"id":1,"title":"Post title","content":"content..."}]
```
Usage:
```javascript
const PostModel = Model.extend('/posts/:id', {
query: { method: 'get', hasPagination: true }
});
let postsData = PostModel.query({
page_size: 20,
page_num: 1
});
postsData.$promise.then(data => {
console.log(data === postsData); // true
console.log(postsData); // { "pagination":{"num":1,"size":20,"total":44}, "items": [...]}
});
```
## Cancellation
Sometimes we need to abort the request, such as quick switch page number.
Usage:
```javascript
import Model from 'v-model';
import Pormise from 'bluebird';
// enable bluebird cancellation
Promise.config({
cancellation: true
});
const PostModel = Model.extend('/posts/:id', {
query: { method: 'get', hasPagination: true }
});
new Vue({
data() {
return {
query: {
page_num: 1
},
itemsData: {
pagination: { num: 1, size: 20, total: 0 },
items: []
}
}
},
methods: {
load() {
// Cancel the last request
// If it has not responded yet
let promise = this.itemsData.$promise;
if(promise) {
promise.cancel();
}
// make a new request
this.itemsData = PostModel.query(query);
}
},
watch: {
query() {
this.load();
}
},
created() {
this.load();
}
});
```
## $resolved flag
The V-Model instance/result has a `$resolved` flag.
Can be used for loading status.
Usage:
```html
Loading...
- {{item.id}}
...
import Model from 'v-model';
const PostModel = Model.extend('/posts/:id', {
query: { method: 'get', hasPagination: true }
});
export default {
data() {
return {
itemsData: {
pagination: { num: 1, size: 20, total: 0 },
items: []
}
};
},
created() {
this.itemsData = PostModel.query({
page_num: 1
});
}
};
```
## Interceptors
You can intercept requests or responses.
```
// global interceptor
const http = PostModel.http;
// request
http.interceptors.request.use(beforeSend, requestError);
// response
http.interceptors.response.use(afterSend, responseError);
```
See more [axios Interceptors](https://github.com/mzabriskie/axios#interceptors)
## Running tests
```
> npm test
```
## License
MIT