shangrila-xiu

112
文章
101
分类
33
标签

ex-teraction

交互的例子

交互的时候，需要引入 vue.js 和 vue-resource.js 自己去官网下载吧，熟悉一下

前面我讲过了三种交互的方式，今天我要讲的是更进一步的交互，下面我直接给出代码吧！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
<div class="znsArea">
<!--留言-->
     <div class="takeComment">
        <textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="t1"></textarea>
        <div class="takeSbmComment">
            <input type="button" class="inputs" value="" @click="add" />
            <span>(可按 Enter 回复)</span>
        </div>
    </div>
<!--已留-->
    <div class="commentOn">
        <div class="noContent" v-show="msgData.length==0">暂无留言</div>
        <div class="messList">
        	<div class="reply" v-for="item in msgData" v-cloak>
                <p class="replyContent">{{item.content}}</p>
                <p class="operation">
                    <span class="replyTime">{{item.time|date}}</span>
                    <span class="handle">
                    	<a href="javascript:;" class="top">{{item.acc}}</a>
                        <a href="javascript:;" class="down_icon">{{item.ref}}</a>
                        <a href="javascript:;" class="cut">删除</a>
                    </span>
                </p>
            </div>
        </div>
        <div class="page">
        	<a href="javascript:;" class="active">1</a>
        	<a href="javascript:;">2</a>
        	<a href="javascript:;">3</a>
        </div>
    </div>
</div>
</body>

js的代码我分开放在下面吧！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
//过滤器过滤时间，将时间转化为想要的格式
        Vue.filter('date',function(input){
            var oDate=new Date(input*1000);
            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
        });
        window.onload=function(){
            var URL='weibo.php';
            new Vue({
                el:'.znsArea',
                data:{ //vue的属性、数据
                    t1:'',
                    msgData:[]
                },
                methods:{
                    add:function(){
                        //发送请求
                        this.$http({
                            url:URL,
                            data:{ //给后台发送数据
                                act:'add',
                                content:this.t1
                            }
                        }).then(function(res){
                            var json=res.data;
                            //msgData添加数据
                            this.msgData.unshift({
                                content:this.t1,
                                time:json.time,
                                acc:0,
                                ref:0,
                                id:json.id
                            });
                            this.t1='';
                        });
                    },
                  //获取打开的页数
                    getPageData:function(n){
                        this.$http({
                            url:URL,
                            data:{
                                act:'get',
                                page:n
                            }
                        }).then(function(res){
                            //console.log(res.data);
                            var arr=res.data;
                            for(var i=0; i<arr.length; i++){
                  //将数据添加到数组中
                               this.msgData.push({
                                   content:arr[i].content,
                                   time:arr[i].time,
                                   acc:arr[i].acc,
                                   ref:arr[i].ref,
                                   id:arr[i].id
                               });
                            }
                        });
                    }
                },
                ready:function(){
                   this.getPageData(1);
                }
            });
        };
    </script>

需要的css:

1
2
3
4
5
6
7
8
引入css的方法：
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
<style>
        [v-cloak]{
            display: none;
        }
</style>

weibo.css的具体内容见 下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@charset "utf-8";body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0}
body{font-size:12px;font-family:"Microsoft YaHei"}
ul,ol{list-style-type:none}
select,input,img,select{vertical-align:middle}
a{text-decoration:underline;color:#313030}
a{blr:expression(this.onFocus=this.blur())}
input,textarea{outline:0;resize:none}
a{outline:0}
.znsArea{width:755px;overflow:hidden;margin:0 auto;font-family:"Microsoft YaHei"}
.commentOn{width:753px;display:block;overflow:hidden;border:#a5bcff solid 1px;background:#f3f8fd;margin-top:25px;font-family:Verdana}
.reply{overflow:hidden;padding:10px 20px;background:#FFF;border-top:#e9e9e9 solid 1px;border-bottom:#e9e9e9 solid 1px}
.userInfo{display:block;overflow:hidden;height:25px;border-bottom:#bababa solid 1px}
.userName{float:left;background:url(../img/userBj.png) left center no-repeat;padding-left:15px;color:#000;font-size:14px;font-weight:bold}
.replyTime{float:left;color:#8b8585;line-height:30px;font-size:11px}
.replyContent{line-height:24px;font-size:14px;color:#2b2b2b;font-family:"Microsoft YaHei"}
.operation{clear:both;width:100%;height:30px;margin-top:8px}
.handle{float:right;padding-top:6px}
.handle a{text-decoration:none;float:left;margin-left:12px;background:url(../img/icons.png) 0 0 no-repeat;height:18px;line-height:18px;padding-left:20px}
.handle .top_icon{background-position:0 0}
.handle .down_icon{background-position:0 -17px}
.handle .cut{background-position:0 -33px}
.handle a:active{color:#09F}
.noContent{text-align:center;display:block;background:#FFF;font:14px/2.3 "Microsoft YaHei";border-bottom:#e9e9e9 solid 1px;border-top:#e9e9e9 solid 1px;color:#999}
.takeComment{width:713px;display:block;overflow:hidden;border:#a5bcff solid 1px;background:#f3f8fd;margin-top:25px;font-family:Verdana;padding:15px 20px}
.takeTextField{width:701px;height:70px;border:#b1b1b1 solid 1px;clear:both;display:block;margin:10px 0 10px 0;line-height:20px;padding:5px;box-shadow:inset 0 0 5px #DDD;font-family:"Microsoft YaHei"}
.takeSbmComment{display:block;overflow:hidden}
.takeSbmComment span{float:right;color:#CCC;line-height:37px;padding-right:10px}
.inputs{float:right;width:125px;height:37px;border:none 0;background:tranparent;background:url(../img/takeSbmComment.png) left top no-repeat;cursor:pointer;opacity:.8}
.inputs:hover{opacity:1}
.inputs:active{opacity:.9}
.messList{overflow:hidden}
.page{text-align:right;font-size:0;font-family:Verdana;padding:10px 16px}
.page a{display:inline-block;height:20px;padding:0 7px;border:#CCC solid 1px;font:12px/20px Verdana;text-decoration:none;margin-left:5px;background:#FFF}
.page a:hover{background:#09F;color:#FFF;border-color:#09F}
.page .active{background:#CCC}
.page a:active{opacity:.8}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<?php
/*
**********************************************
	Author:	
	Date:	
	usage:
			weibo.php?act=add&content=xxx	添加一条
				返回：{error:0, id: 新添加内容的ID, time: 添加时间}
			
			weibo.php?act=get_page_count	获取页数
				返回：{count:页数}
			
			weibo.php?act=get&page=1		获取一页数据
				返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]
			
			weibo.php?act=acc&id=12			顶某一条数据
				返回：{error:0}
			
			weibo.php?act=ref&id=12			踩某一条数据
				返回：{error:0}
	
	注意：	服务器所返回的时间戳都是秒（JS是毫秒）
**********************************************
*/
//创建数据库之类的
$db=@mysql_connect('localhost', 'root', 'admin123') or @mysql_connect('localhost', 'root', 'admin');
mysql_query("set names 'utf8'");
mysql_query('CREATE DATABASE zns_ajax');
mysql_select_db('zns_ajax');
$sql= <<< END
CREATE TABLE  `zns_ajax`.`weibo` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`content` TEXT NOT NULL ,
`time` INT NOT NULL ,
`acc` INT NOT NULL ,
`ref` INT NOT NULL
) CHARACTER SET utf8 COLLATE utf8_general_ci
END;
mysql_query($sql);
//正式开始
//header('Content-type:zns/json');
$act=$_GET['act'];
$PAGE_SIZE=6;
switch($act)
{
	case 'add':
		$content=urldecode($_GET['content']);
		$time=time();
		
		$content=str_replace("\n", "", $content);
		
		$sql="INSERT INTO weibo (ID, content, time, acc, ref) VALUES(0, '{$content}', {$time}, 0, 0)";
		
		mysql_query($sql);
		
		$res=mysql_query('SELECT LAST_INSERT_ID()');
		
		$row=mysql_fetch_array($res);
		
		$id=(int)$row[0];
		
		echo "{\"error\": 0, \"id\": {$id}, \"time\": {$time}}";
		break;
	case 'get_page_count':
		$sql="SELECT COUNT(*)/{$PAGE_SIZE}+1 FROM weibo";
		
		mysql_query($sql);
		
		$res=mysql_query($sql);
		
		$row=mysql_fetch_array($res);
		
		$count=(int)$row[0];
		
		echo "{\"count\": {$count}}";
		break;
	case 'get':
		$page=(int)$_GET['page'];
		if($page<1)$page=1;
		
		$s=($page-1)*$PAGE_SIZE;
		
		$sql="SELECT ID, content, time, acc, ref FROM weibo ORDER BY time DESC LIMIT {$s}, {$PAGE_SIZE}";
		
		$res=mysql_query($sql);
		
		$aResult=array();
		while($row=mysql_fetch_array($res))
		{
			$arr=array();
			array_push($arr, '"id":'.$row[0]);
			array_push($arr, '"content":"'.$row[1].'"');
			array_push($arr, '"time":'.$row[2]);
			array_push($arr, '"acc":'.$row[3]);
			array_push($arr, '"ref":'.$row[4]);
			
			array_push($aResult, implode(',', $arr));
		}
		if(count($aResult)>0)
		{
			echo '[{'.implode('},{', $aResult).'}]';
		}
		else
		{
			echo '[]';
		}
		break;
	case 'acc':
		$id=(int)$_GET['id'];
		
		$res=mysql_query("SELECT acc FROM weibo WHERE ID={$id}");
		
		$row=mysql_fetch_array($res);
		
		$old=(int)$row[0]+1;
		
		$sql="UPDATE weibo SET acc={$old} WHERE ID={$id}";
		
		mysql_query($sql);
		
		echo '{"error":0}';
		break;
	case 'ref':
		$id=(int)$_GET['id'];
		
		$res=mysql_query("SELECT ref FROM weibo WHERE ID={$id}");
		
		$row=mysql_fetch_array($res);
		
		$old=(int)$row[0]+1;
		
		$sql="UPDATE weibo SET ref={$old} WHERE ID={$id}";
		
		mysql_query($sql);
		
		echo '{"error":0}';
		break;
	case 'del':
		$id=(int)$_GET['id'];
		$sql="DELETE FROM weibo WHERE ID={$id}";
		//echo $sql;exit;
		mysql_query($sql);
		echo '{"error":0}';
		break;
}
?>