1.前端代码
for(var i=1;i<json.length;i++){
picpath1=json[i].picpath1;
picpath2=json[i].picpath2;
alert(picpath2.length);
if(picpath1.length!=0&&picpath2.length!=0){
$("#shareText").append("<div id=textID"+i+"><input type=hidden value="+json[i].userID+" />"+"<input type=hidden value="+json[i].textID+" />"+"<div class=thumbnail><img src=./images/"+json[i].username+"/"+picpath1+" /><img src=./images/"+json[i].username+"/"+picpath2+" />"+"<div class=caption><h4>"+json[i].title+"</h4><h4>"+json[i].username+"</h4><p>"+json[i].text+"</p><p>"+"<input id=unionID"+i+" type=hidden value="+json[i].userID+json[i].textID+" />"+"<a role=button onclick=isLike("+i+") id=blike"+i+">点赞</a><a role=button onclick=addToMine("+i+") id=btome"+i+">收藏</a><a role=button onclick=sendMessage("+i+")>留言</a></p></div></div></div>" );
$("#shareText img").css({"width":"48%","float":"left","margin-left":"1%","margin-bottom":"5%"});
//children("p.1").css({"color":"red","border":"2px solid red"});
}else if(picpath2.length==0){
alert(json[i].textID);
$("#shareText").append("<div id=textID"+i+"><input type=hidden value="+json[i].userID+" />"+"<input type=hidden value="+json[i].textID+" / >"+"<div class=thumbnail><img src=./images/"+json[i].username+"/"+picpath1+" />"+"<div class=caption><h4>"+json[i].title+"</h4><h4>"+json[i].username+"</h4><p>"+json[i].text+"</p><p>"+"<input id=unionID"+i+" type=hidden value="+json[i].userID+json[i].textID+" />"+"<a role=button onclick=isLike("+i+") id=blike"+i+">点赞</a><a role=button onclick=addToMine("+i+") id=btome"+i+">收藏</a><a role=button onclick=sendMessage("+i+")>留言</a></p></div></div></div>" );
$("#shareText img").css("margin-bottom","5%");
}else{
alert("第一种图片为空");
$("#shareText").append("<div id=textID"+i+"><input type=hidden value="+json[i].userID+" />"+"<input type=hidden value="+json[i].textID+" />"+"<div class=thumbnail><img src=./images/"+json[i].username+"/"+picpath2+" />"+"<div class=caption><h4>"+json[i].title+"</h4><h4>"+json[i].username+"</h4><p>"+json[i].text+"</p><p>"+"<input id=unionID"+i+" type=hidden value="+json[i].userID+json[i].textID+" />"+"<a role=button onclick=isLike("+i+") id=blike"+i+">点赞</a><a role=button onclick=addToMine("+i+") id=btome"+i+">收藏</a><a role=button onclick=sendMessage("+i+")>留言</a></p></div></div></div>" );
$("#shareText img").css("margin-bottom","5%");
}
$("#shareText>div").addClass("col-sm-12 col-md-6 clo-lg-6");
$("#shareText a").addClass("btn btn-default");
//是按钮有浮动，消除高度塌陷
$("#shareText a").css("float","right");
$(".caption").css("overflow","hidden");
//消除浮动代码，虽然代码少，可能会出现一些情况是会无法消除浮动的，我们可以使用下面的代码来解决
//拯救高度坍塌--文章文本*/
.caption:after{
display:block;
visibility:hidden;
clear:both;
height:0;
content:'.'
}
.caption{
zoom:1;
}
/*拯救高度坍塌--图片*/
.box:after{
display:block;
visibility:hidden;
clear:both;
height:0;
content:'.'
}
.box{
zoom:1;
}
效果图
点赞实现的难点总结：
（1）.多篇文章，需要每一个点赞按钮在点击的时候传入一个参数来标志该文章。在这里我把后台传过来的json的序列值作为标识。
<input id=unionID"+i+" type=hidden value="+json[i].userID+json[i].textID+" />"+"<a role=button onclick=isLike("+i+") id=blike"+i+">点赞</a>
从这段代码中可以看出，我还设置一个唯一辨识的unionID用于cookie的遍历。标识的方法有很多，在这里就不展开了，但我曾经试过直接把常过来的userID和textID相互拼接起来，作为文章的唯一标识。但是，在ajax一步请求的时候，发生一些错误。比如textID=userID+textID2；本来在数据库存取的时候没有任何问题，得到值是预期的值，但是在利用ajax一步请求向数据库提取数据，然后把值赋给textID的时候，这个时候，问题就来了，textID并不是useriD和textID拼接起来的字符串，我后来想明白了，原来ajax在传输参数的时候，会对参数进行一些参数的转码，数据库可以正常存取，可能是因为编码和ajax的转码不一样。这样子的话，参数会带有一些特殊的字符，字符串拼接的话，和这些特殊的字符有结合的话，会对值产生影响。往往会出现前端的值比数据库的值大一。所以，我没有利用此方法作为文章ID。而是直接在前端把值接收过来后，再拼接，就不会出现在解析过程出现错误。
后台代码
点赞代码
SqlSession session=null;
int userID=Integer.parseInt(request.getParameter("userID"));
BigInteger textID=new BigInteger(request.getParameter("textID"));
try {
DataConnection connection=new DataConnection();
session=connection.getSession();
StudentMapper mapper=connection.getStudentMapper(session);
Integer count=mapper.isLike(userID,textID);
session.commit();
if(count!=0) {
Map<String, String> a=new HashMap<String, String>();
a.put("ok", "ok");
String jsonString = JSON.toJSONString(a);
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
PrintWriter writer = response.getWriter();
System.out.println(jsonString);
writer.append(jsonString);
writer.close();
}
}catch (Exception e) {
// TODO: handle exception
System.out.println("isLike has error"+e.getMessage());
}
finally {
if(session!=null) {
session.close();
}
}
取消点赞代码
int userID=Integer.parseInt(request.getParameter("userID"));
BigInteger textID=new BigInteger(request.getParameter("textID"));
try {
DataConnection connection=new DataConnection();
session=connection.getSession();
TextMapper mapper=connection.getMapper(session);
Integer count=mapper.notLike(userID,textID);
session.commit();
if(count!=0) {
Map<String, String> a=new HashMap<String, String>();
a.put("ok", "ok");
String jsonString = JSON.toJSONString(a);
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
PrintWriter writer = response.getWriter();
System.out.println(jsonString);
writer.append(jsonString);
writer.close();
}
}catch (Exception e) {
// TODO: handle exception
System.out.println("isLike has error"+e.getMessage());
}
finally {
if(session!=null) {
session.close();
}
}
两者代码相似
mybatis代码
public int isLike(@Param("userID") int userID,@Param("textID") BigInteger textID);
sql语句
<update id="isLike">
UPDATE text set num_like =(num_like+1) where userID=#{userID} AND textID=#{textID}
</update>
ajax代码
注意一点就是，当用户第一次使用这个网站的时候，没有cookie，这个时候需要判断是否cookie否则会报错
if(typeof $.cookie('user') == "undefined")//判断是否为一次登录，或者cookie消除之后，需要重新写cookie，然后才执行有cookie的情况
function isLike(textID){
//实现不用用户点赞，因为同一个浏览器只会有一份cookie，如果不同的用户使用一个浏览器，则需要判断不同的用户，所以，需要在cookie增加用户名来辨别
if($("#myID").val().length!=0){
var user=JSON.parse($.cookie('user')).user;
var userID=$("#textID"+textID).children().eq(0).val();
var textID2=$("#textID"+textID).children().eq(1).val();
var color=$("#unionID"+textID).next().css("background-color");
console.log(color);
var unionID=$("#unionID"+textID).val();
var likejson="";
if(typeof $.cookie("likejson") !== "undefined"){
likejson=JSON.parse($.cookie("likejson"));
}else{
likejson=[];
}
//根据按键的颜色看判断是否已经点赞
if(color=="rgb(135, 206, 235)"){
$.ajax({
url:"/mybatis_first_demo2/notLikeServlet",
type:"POST",
data:"userID="+userID+"&textID="+textID2,
dataType:'json',
success:function(json){
for(var i=0;i<likejson.length;i++){
console.log(likejson[i].unionID);
if(likejson[i].unionID==unionID&&likejson[i].username==user.username){
likejson.splice(i,1);
}
}
$("#unionID"+textID).next().css("background-color","white");
alert("取消成功");
var a=JSON.stringify(likejson);
$.cookie("likejson",a,{expires:365,path: '/'});
console.log(a);
},
error:function(){
alert("取消失败");
}
})
}else{
$.ajax({
url:"/mybatis_first_demo2/isLikeServlet",
type:"POST",
data:"userID="+userID+"&textID="+textID2,
dataType:'json',
success:function(json){
var like= {};
like.unionID =unionID;
like.username=user.username;
likejson.push(like);
//将对象保存在数组里
// $.cookie('user',user, {expires: 7, path: '/' });
$("#blike"+textID).css("background-color","skyblue");
// $("#blike"+textID).attr("disabled",true);
alert("点赞成功");
将数组化为字符串，进行保存，因为cookie只能保存字符串
var a=JSON.stringify(likejson);
$.cookie("likejson",a,{expires:365,path: '/'});
console.log(a);
},
error:function(){
alert("点赞失败");
}
})
}
}else{
alert("请登录账号");
$("#check").show();
}
};
使用该网站文件加载完成代码。
//使用这段代码的时候，需要注意一点
根据cookie来判断对按键的颜色进行渲染，前提是需要渲染的Dom结构已经被加载完成，而且dom的值也被js写进去，否则 $("input[value="+unionID+"]").next().css("background-color","skyblue");中的获取特定值得input的时候，会报错，即undefined，就是没有加载完成或者，value值，没有被写进去，造成没有找到符合条件的节点，所以会报错。总之，这段代码需要在value值填写之后才执行。
根据JavaScript加载顺序来看，先进行预处理，即处理变量的声明，再处理相应的代码，所以在声明变量的时候，没有找到这个节点，所以会报错。我是把这段代码。加到，js向数据库异步请求得到数据，并进行渲染的时候，才执行，保证代码正确执行
if(typeof $.cookie('likejson') == "undefined"){
alert("json清除");
}else{
//根据用户名和文章id辨识不同用户的不同点赞
var likejson=$.cookie('likejson');
likejson=JSON.parse(likejson);
alert(likejson);
for(var i=0;i<likejson.length;i++){
console.log(likejson);
var unionID=likejson[i].unionID;
if(user.user.username==likejson[i].username){
$("input[value="+unionID+"]").next().css("background-color","skyblue");
}
}
}
创建对象，like，想对象添加uinonid属性，push把对象添加到json块中
//将cookie进行解析
var likejson=JSON.parse($.cookie("likejson"));//这种情况下是已经存在cookie
var like= {};
like.unionID =unionID;
likejson.push(like);
没有cookie的时候，需要把likejon化为数组，即likejson=[]
var a=JSON.stringify(likejson);
$.cookie("likejson",a,{expires:365,path: '/'});
console.log(a);
使用cookie的时候，需要将json进行解析，代码如下，否则无法正常读取数据
解析代码如下
var likejson=JSON.parse($.cookie("likejson"));
删除cookie
// $.removeCookie('user',{ path: '/'}); 存取的时候带路径，删除的时候也需要带路径，否则无法删除
扫一扫
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
