http://www.cnblogs.com/xwwin/p/5816527.html

1 script src= " http://code.jquery.com/jquery.min.js " ></script>
2 <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
3 <link href="/static/images/favicon.ico" rel="shortcut icon">
4 <script src="/static/bootstrap/js/bootstrap.min.js" ></script>
5 <script src="/static/bootstrap/bootbox.min.js "></script>
6 <script src="https://vuejs.org/js/vue.min.js "></script>
7 <style>
8 .top { margin-bottom: 30px; }
9 </style>

vue的大体结构是

vm=new Vue({

el:'vue作用元素的css定位表达式'， //一般来说可以定位为整个body元素

data:{ 用于定义变量，为json形式}，

methods:{用于定义操纵改变上述data中定义的变量的值的方法，

　　　　　形式为 func_name:function(i){this.变量名=i;}

computed:{

　　　　用于定义一个实时变量，该变量的值实时等于调用对应方法返回的结果。与methods中的方法不同的是，methods中的方法只有在html中被触发的了才会执

　　　　行，儿computed中的方法，实时都在运行，返回一个实时变量。可在methods中通过this.var_name来获取这个实时的值，也可在htlm中绑定这个实时的值。

　　　　形式为 var_name:function(){ var del=this.var_1+2 ;return del }

})

  1 <script>//vue与ajax结合
  2 //python 模板safe，让传递内容不转义
  3     var all_site={{all_site|safe}};
  4         
  5     var vm=new Vue({
  6         el:'#sitepage',
  7         data:{
  8             "manage":all_site,
  9             addArr:{'id':'0','name':'','url':'','comment':'','class':1},
 10             addErr:{'name':false},
 11             nowEditCol:-1,
 12             editStatus:false,
 13             delId:-1
 14             
 15         },
 16         methods:{
 17         editModel:function(){  this.editStatus=true ;},
 18         editModelExit:function(){ this.editStatus=false; },
 19         startDel:function(id){ this.delId=id; },
 20         cancelDel:function(){ this.delId=-1; },
 21         //启动索引index数据 ,编辑单个条目
 22         startEdit:function(id){
 23             this.nowEditCol=id;
 24             this.addArr=this.editArr;
 25             },
 26         //取消单个条目的编辑状态
 27         cancelEdit:function(){
 28             this.nowEditCol=-1;
 29             this.resetStu();
 30             },
 31         //启动索引index数据修改确认，update
 32         sureEdit:function(id){
 33                   var index=this.editArr.index
 34                 //更新后台数据
 35                 var datas={
 36                     'method':'update',
 37                     'id':this.addArr.id,
 38                     'name':this.addArr.name,
 39                     'url':this.addArr.url,
 40                     'comment':this.addArr.comment,
 41                     'class':this.addArr.class
 42                 };
 43                 var result=this.VueAjax(datas);
 44                 if(result){
 45                 //更新前台页面数据显示
 46                   this.manage.splice(index,1,this.addArr);//3个入参时1表示插入，这个列表中的索引位置起插入元素this.editArr
 47                 }
 48               this.nowEditCol=-1;
 49               this.resetStu();//重置弹窗数值
 50         },
 51         //删除索引index数据
 52         deleteStu:function(id){
 53                         //删除后台数据
 54                           var datas={
 55                                     'method':'delete',
 56                                     'id':this.delArr.id
 57                                     };
 58                         var result=this.VueAjax(datas);
 59                         
 60                        
 61                         if(result){
 62                         //删除前台显示数据
 63                         this.manage.splice(this.delArr.index,1);
 64                         
 65                         }       
 66                         this.cancelDel();
 67         },
 68         //新增成绩
 69         submitStu:function(){
 70             if(this.addArr.name==''){
 71                 this.addErr.name=true;
 72                 }
 73                 else{
 74                     this.addErr.name=''
 75                     //ajax新增后台数据，返回id
 76                     var datas={
 77                         'method':'add',
 78                         'name':this.addArr.name,
 79                         'url':this.addArr.url,
 80                         'comment':this.addArr.comment,
 81                         'class':this.addArr.class
 82                     };
 83 
 84                     var return_id=this.VueAjax(datas);
 85                     if(return_id!=false){
 86                         //新增前台数据显示
 87                         var addArr={
 88                             'id':return_id,
 89                             'name':this.addArr.name,
 90                             'url':this.addArr.url,
 91                             'comment':this.addArr.comment,
 92                             'class':this.addArr.class
 93                             };
 94                         this.manage.push(addArr);
 95                     }
 96                     this.resetStu();
 97                 };
 98         },
 99         //复位新增表单
100         resetStu:function(){
101             this.addArr={
102                 'id':'',
103                 'name':'',
104                 'url':'',
105                 'comment':'',
106                 'class':1
107             };
108             this.addErr={'name':false};
109         },
110         //ajax方法
111         VueAjax:function(datas){
112             result=false
113             $.ajax({  
114             url: '/indexs/',  //请求的url地址
115             type: 'POST',              //请求方式
116             data: {"datas":JSON.stringify(datas), 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()},//传递给服务器的数据
117             dataType:'json',  //这里添加了dataType ,设置返回值类型
118             async : false,
119             success: function (arg) {  
120                 var jsonObj=arg;
121                 var status=jsonObj.status;
122                 if(status){
123                             // alert("success！");
124                             if(jsonObj.id){
125                                                 result= jsonObj.id;
126                                             }
127                             else{
128                                                 result= true ;
129                                  }
130                            }
131                 else{
132                     alert("some wrong,please try again！");
133                     result= false;
134                     }
135             }  
136         }); 
137         return result ;
138         }
139         },
140         computed:{
141         //存储当前编辑的对象,相当于一个实时检测，当前此刻处于编辑状态的对象是哪个
142         editArr:function(){
143             var editO={};
144             var index=0;
145             for(var i=0,len=this.manage.length;i<len;i++){
146               if(this.nowEditCol === this.manage[i]['id'] ){
147                 editO= this.manage[i];
148                 index=i;
149                 break;
150               }
151             }
152             return {
153                 'index':index,
154                 'id':editO.id,
155                 'name':editO.name,
156                 'url':editO.url,
157                 'comment':editO.comment,
158                 'class':editO.class
159             }
160         },
161         delArr:function(){//实时检测delId的值
162             var delO={};
163             var index=0;
164             for(var i=0,len=this.manage.length;i<len;i++){
165               if(this.delId === this.manage[i]['id'] ){
166                 delO= this.manage[i];
167                 index=i;
168                 break;
169               }
170             }
171             return {
172                 'index':index,
173                 'id':delO.id,
174                 'name':delO.name,
175                 'url':delO.url,
176                 'comment':delO.comment,
177                 'class':delO.class
178             }
179         }
180     }
181     })
182 </script>

vue部分

 1 <div class="col-md-6" id="manage">
 2         <h3>管理后台</h3> 
 3             <table class="table table-hover ">
 4             <thead><tr><th>
 5             <div class=row><div class="col-md-5">网站 </div><div class=col-md-7>备注</div></div>
 6             </th></tr></thead>
 7             <tbody> 
 8             <tr v-for="item in manage"><td v-if="item.class==1">  
 9             {% verbatim %}<!--编辑，做成弹窗或 就地编辑，就地编辑需要隐藏原文本，并显示编辑窗，先做就地编辑，还需要解决超链接在编辑时被点击的问题，暂时用jquery手动实现吧-->
10             <div class="row " v-bind:id="item.id" >
11                 <a  class="col-md-5 control-lable" v-bind:href="item.url" target="_blank">
12                 <div class=content>{{item.name}}</div></a><div class="content col-md-5">{{item.comment}}</div>
13                    <div class=" col-md-2" v-show="editStatus" >
14                     <button class="  btn btn-info btn-sm " v-on:click="startEdit(item.id)"  data-toggle="modal" data-target="#addModal">编辑</button>
15                     <button class=" btn btn-danger btn-sm" v-on:click="startDel(item.id)"  data-toggle="modal" data-target="#deleModal" >删除</button>
16                 </div>
17             </div>
18             {% endverbatim %}
19             </td></tr>
20             </tbody>
21             </table>
22         </div>
23         <div class="col-md-6" id="stat">
24         <h3>统计后台</h3> 
25             <table class="table table-hover ">
26             <thead><tr><th>
27             <div class=row><div class="col-md-5">网站 </div><div class=col-md-7>备注</div></div>
28             </th></tr></thead>
29             <tbody> 
30             <tr v-for="item in manage"><td v-if="item.class==2">  
31             {% verbatim %}<!--编辑，做成弹窗或 就地编辑，就地编辑需要隐藏原文本，并显示编辑窗，先做就地编辑，还需要解决超链接在编辑时被点击的问题，暂时用jquery手动实现吧-->
32             <div class="row " v-bind:id="item.id" >
33                 <a  class="col-md-5 control-lable" v-bind:href="item.url" target="_blank">
34                 <div class=content>{{item.name}}</div></a><div class="content col-md-5">{{item.comment}}</div>
35                    <div class=" col-md-2" v-show="editStatus" >
36                     <button class="  btn btn-info btn-sm " v-on:click="startEdit(item.id)"  data-toggle="modal" data-target="#addModal">编辑</button>
37                     <button class=" btn btn-danger btn-sm" v-on:click="startDel(item.id)"  data-toggle="modal" data-target="#deleModal" >删除</button>
38                 </div>
39             </div>
40             {% endverbatim %}
41             </td></tr>
42             </tbody>
43             </table>
44         </div>

vue+html渲染展示数据部分

vue中的变量格式与python的django模板类似，使用 {{var_name}}表示; v-for 表示for循环。 v-if的值为一个bool表达式，为true时则渲染出该元素，否则html中不会出现该元素

v-bind用于绑定元素的属性值，为单向绑定

v-on用于绑定元素的动作与方法，当发生该动作时，就会触发绑定的方法

data-toggle="modal" data-target="#addModal"是bootstrap的弹窗语法，当该元素被点击时则会弹出"#addModal"对应的弹窗，vue与bootstrap的触发方法各自执行。

verbatim是python的模板语法，用于标明它包含的html不需要渲染，本例中是右vue渲染

{% verbatim %}
<div class="modal-body"><div class="content" bind:id="delArr.id" >{{delArr.name}}</div></div>
{% endverbatim %}

 1 <!--bootstrap的新增项目的弹窗 ，.modal用于识别该块为弹窗，.fade切换弹窗时有淡出效果，aria-hidden="true"用于隐藏弹窗-->
 2         <div class="modal fade" id="addModal"  aria-hidden="true">
 3         <div class="modal-dialog" style="width:450px;">
 4         <div class="modal-content">
 5             <div class="modal-header">
 6                 <h6 class="modal-title" id="myModalLabel">新增项目</h6>
 7                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true" v-on:click="cancelEdit">&times;</button>
 8             </div>
 9             <div class="modal-body">
10             <form    class="form-horizontal">  
11             {% csrf_token %} 
12             <div class="row form-group">
13                 <label class="col-md-2 control-label" for="inputName">名称:</label>
14                 <div class=" col-md-8">
15                 <textarea class="form-control"  type="text" id="inputName"  v-model="addArr.name"></textarea>
16                 <div  style="color:red;" v-if="addErr.name">请填写网站名称</div>
17                 </div>
18             </div>  
19             <div class="row form-group">  
20                 <label class="col-md-2 control-label" for="inputUrl">网址:</label>
21                 <div class=" col-md-8">
22                 <textarea name=siteurl class="form-control" type="text" id="inputUrl"  v-model="addArr.url"></textarea>
23                 </div>
24             </div>  
25             <div class="row form-group">  
26                 <label class="col-md-2 control-label" for="inputPassword">备注:</label>
27                 <div class=" col-md-8">
28                 <textarea name=comment class="form-control" type="text" id="inputPassword"  v-model="addArr.comment"></textarea>
29                 </div>
30             </div>
31             <div class="form-group">
32                 <label class="radio " col-md-4>
33                   <input type="radio" name="optionsRadios" id="optionsRadios1" value=1 checked v-model="addArr.class">
34                   管理后台
35                 </label>
36                 <label class="radio inline" col-md-4>
37                   <input type="radio" name="optionsRadios" id="optionsRadios2" value=2 v-model="addArr.class">
38                   统计后台
39                 </label>
40             </div>
41             <div class="form-group" >
42                 <div class="modal-footer ">
43                     <button type="button" class="btn btn-info" data-dismiss="modal" v-on:click="resetStu" v-if="nowEditCol==-1">取消</button>
44                     <button type="button" class="btn btn-success" v-bind:data-dismiss="addArr.name?'modal':null" id=addsubmit v-on:click="submitStu" v-if="nowEditCol==-1">新增</button>
45                     <button type="button" class="btn btn-info" data-dismiss="modal" v-on:click="cancelEdit" v-if="editArr.id==nowEditCol">取消修改</button>
46                     <button type="button" class="btn btn-success" data-dismiss="modal" v-on:click="sureEdit(editArr.id)" v-if="editArr.id==nowEditCol">提交修改</button>
47                     <button type="button" class="btn btn-warning"  v-on:click="resetStu">清空</button>
48                 </div> 
49             </div>
50 
51             </form>
52             </div>
53         </div>        
54         </div>
55         </div>
56         <!--弹窗结束-->

bootstrap的编辑/新增弹窗

v-model用于输入框，表单的双向绑定，绑定的变量值变化会让显示的值变化。同时，显示的用户的输入改变也会让绑定的变量值改变

<label class="col-md-2 control-label" for="inputName">名称:</label>
<div class=" col-md-8">
<textarea class="form-control" type="text" id="inputName" v-model="addArr.name"></textarea>
<div style="color:red;" v-if="addErr.name">请填写网站名称</div>

v-if表达式的值如果为空值，‘’，未定义，也会当作False来处理

这样绑定，后就可以通过addArr.name获取用户的输入值。

点击新增，就会触发vue中定义的submitStu方法。

v-bind:data-dismiss="addArr.name?'modal':null" 这个表示如果addArr.name为true则属性data-dismiss='modal',否则不显示该属性值。

data-dismiss='modal'是bootstrap的弹窗中对弹窗操作的属性，添加该属性值，则点击该元素时，弹窗就会关闭。

提交修改与新增类似，只是点击编辑时，会通过方法startEdit(item.id)将启动编辑的变量赋值给与弹窗绑定的值addArr而显示在弹窗中。

startEdit:function(id){
this.nowEditCol=id;
this.addArr=this.editArr;
}

vue只是用于前端页面展示的交互控制，在vue根据用户的操作而改变页面展示时，在ajax也在对应方法中被调用，来在数据库中对数据进行处理。

这里把ajax定义到vue中的一个methods里面了，async : false,用于设置关闭ajax的异步操作，使在执行ajax的时候阻塞，执行完了ajax，再执行后面的return result;

VueAjax:function(datas){
result=false
$.ajax({
url: '/indexs/', //请求的url地址
type: 'POST', //请求方式
data: {"datas":JSON.stringify(datas), 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()},//传递给服务器的数据
dataType:'json', //这里添加了dataType ,设置返回值类型
async : false,
success: function (arg) {
var jsonObj=arg;
var status=jsonObj.status;
if(status){
// alert("success！");
if(jsonObj.id){
result= jsonObj.id;
}
else{
result= true ;
}
}
else{
alert("some wrong,please try again！");
result= false;
}
}
});
return result ;
}

posted on 2018-08-23 09:33 庭明阅读(1025) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

公告