# 收藏与取消收藏
说明：“收藏与取消收藏”和“点赞和取消点赞”是一个道理，API几乎也是一样的，只不过他们之前的差别，可能就是字段不一样而已！
下边就说说他们之间的功能吧！
在 [文章页](http://http://hongweizhiyuan.oschina.io/newthink_tpl/tpl/AUI/AUI2.1/module_article/article2.html) 这个链接中，我们可以看到，里边即有内容页，其关键代码如下：
```
<!--收藏-->
<div class="aui-bar-tab-item" style="width: 2.2rem;" >
<i class="aui-iconfont aui-icon-star"></i>
</div>
```
表面上看起来，一个简单的内容，其实好多好多程序员都不会！其中我也是曾经的一员！那怎么实现呢？先说一说方法：
>1、去掉内容中间的图标，并赋ID值
2、引用doT.js并加入script模板，并判断收藏状态
3、用js调用远程api并赋值
4、打开页面判断收藏状态
5、不同状态引用不同的点击事件
好吧！这一个图标的操作，简单比调用一篇文章还要复杂，是不是呢？
程序员们，那我们来看代码吧！
### 步骤1:去掉内容中间的图标，并赋ID值
```
<!--收藏-->
<div class="aui-bar-tab-item" id="userStar" tapmode style="width: 2.2rem;">
</div>
```
### 步骤2:引用doT.js并加入script模板，并判断收藏状态
```
<script type="text/javascript" src="../../../script/assets/doT.min.js"></script>
<!--收藏状态-->
<script id="collect_status" type="text/x-dot-template" >
{{ if(it.status == 1){ }}
<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i>
{{ }else{ }}
<i class="aui-iconfont aui-icon-star" onclick="collectArticle();" ></i>
{{ }; }}
</script>
```
### 步骤3:打开页面判断收藏状态
```
apiready = function() {
collectStatus(); //收藏状态
};
//收藏状态
function collectStatus(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Collect_Status;
let data = {
values:{
article_id:article_id,
uid:uid
}
};
var callback = function(ret){
if(ret.data){
dotTpl('collect_status','userStar',ret.data);
}else{
showToast('判断收藏状态错误', 2, 'bottom');
}
};
r_ajax(serverURL,data,callback);
}
```
### 步骤5:不同状态引用不同的点击事件
```
//取消收藏
function cancelCollectArticle(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Cancel_Collect;
let data = {values:{
article_id:article_id,
uid:uid
}};
var callback = function(ret){
if(ret){
$api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();"></i>');
showToast('取消收藏成功！', 2000, 'bottom');
collectStatus();
}else {
showToast('取消收藏失败！', 2000, 'bottom');
}
}
r_ajax(serverURL,data,callback);
}
//收藏
function collectArticle(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Collect;
let data = {values:{
article_id:article_id,
uid:uid
}};
var callback = function(ret){
if(ret){
$api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i>');
showToast('收藏成功！', 2000, 'bottom');
collectStatus();
}else {
showToast('收藏失败！', 2000, 'bottom');
}
}
r_ajax(serverURL,data,callback);
}
```
## 完整的代码如下：
```
<!--收藏-->
<div class="aui-bar-tab-item" id="userStar" tapmode style="width: 2.2rem;">
</div>
<script type="text/javascript" src="../../../script/assets/doT.min.js"></script>
<!--收藏状态-->
<script id="collect_status" type="text/x-dot-template" >
{{ if(it.status == 1){ }}
<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i>
{{ }else{ }}
<i class="aui-iconfont aui-icon-star" onclick="collectArticle();" ></i>
{{ }; }}
</script>
<script>
apiready = function() {
collectStatus(); //收藏状态
};
//收藏状态
function collectStatus(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Collect_Status;
let data = {
values:{
article_id:article_id,
uid:uid
}
};
var callback = function(ret){
if(ret.data){
dotTpl('collect_status','userStar',ret.data);
}else{
showToast('判断收藏状态错误', 2, 'bottom');
}
};
r_ajax(serverURL,data,callback);
}
//取消收藏
function cancelCollectArticle(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Cancel_Collect;
let data = {values:{
article_id:article_id,
uid:uid
}};
var callback = function(ret){
if(ret){
$api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();"></i>');
showToast('取消收藏成功！', 2000, 'bottom');
collectStatus();
}else {
showToast('取消收藏失败！', 2000, 'bottom');
}
}
r_ajax(serverURL,data,callback);
}
//收藏
function collectArticle(){
var uid = $api.getStorage('user').id; //用户id
var article_id = api.pageParam.object_id; //文章id
let serverURL = Config.api.User_Article_Collect;
let data = {values:{
article_id:article_id,
uid:uid
}};
var callback = function(ret){
if(ret){
$api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i>');
showToast('收藏成功！', 2000, 'bottom');
collectStatus();
}else {
showToast('收藏失败！', 2000, 'bottom');
}
}
r_ajax(serverURL,data,callback);
}
</script>
```
