微信公众号开发(二)

作者: CoderZS | 来源:发表于2017-09-06 01:14 被阅读85次

今天把之前的知识整合一下来做一个简单公众号购物界面的用户评价界面,供大家学习

整体思路:我们一般看到的淘宝用户评价界面基本需要---->用户头像,用户昵称,和评论内容,评论时间等几个基本字段
.如何获取用户的基本信息我们在上一节说过了,获取用户的评论内容我们现在根据现实购物订单的用户评价来用数据库模拟.这样我们就可以完成一个用户评价界面的模块功能了.

首先我们先创建实体类Evaluate

@Getter@Setter@ToString
public class Evaluate {
//保证一个用户可以有很多条评价
private Long id;
//用户的openID
private String openID;
//评价时间
private Date evaluateTime;
//评价内容
private String  content;
//昵称
private String  nickname;
//头像
private String  headimgurl;
}

接着创建EvaluateMapper获取所有的用户评价

public interface EvaluateMapper {
List<Evaluate>listAll();
}

创建接口(略)和实现类

@Service
public class EvaluateServiceImpl implements IEvaluateService {
@Autowired
private EvaluateMapper mapper;
@Override
public List<Evaluate> listAll() {
    return mapper.listAll();
}
}

创建EvaluateMapper.xml

<mapper namespace="com.jd.wx.mapper.EvaluateMapper">
<resultMap id="BaseResultMap" type="com.jd.wx.domain.Evaluate">
    <id column="id" property="id" jdbcType="BIGINT"/>
    <result column="openID" property="openID" jdbcType="VARCHAR"/>
    <result column="evaluateTime" property="evaluateTime" jdbcType="DATE"/>
    <result column="content" property="content" jdbcType="VARCHAR"/>
</resultMap>
<select id="listAll" resultMap="BaseResultMap">
    select o.id ,c.openID, o.evaluateTime, o.content
    FROM  t_order o
    LEFT JOIN client c  ON o.clientId = c.id
    order BY o.evaluateTime
</select>
</mapper>

我们先创建evaluate.jsp再创建控制类

<%@ page language="java" contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Insert title here</title>
<!-- head 中 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
</head>
<body>
//集成下拉刷新
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>

<div class="weui-grids">
<a href="" class="weui-grid js_grid">
    <div class="weui-grid__icon">
        ![](images/icon_nav_button.png)
    </div>
    <p class="weui-grid__label">
        Button
    </p>
</a>
<a href="" class="weui-grid js_grid">
    <div class="weui-grid__icon">
        ![](images/icon_nav_cell.png)
    </div>
    <p class="weui-grid__label">
        List
    </p>
</a>
</div>
  嘿嘿!
</body>
<!-- body 最后 -->
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
</html>

小结在这里我们使用的是 jQuery WeUI 因为他给们提供了很多控件,根据官网提供的开发文档我们选择合适的控件,选择好控件后,我们需要向控件传入数据使得我们的界面有数据显示给用户看

选择WEIUI控件

接着我们可以通过EL表达式来获取需要的值(先说jsp界面)
首先要引入EL表达式的头文件
然后通过EL表达式从共享作用域里获取需要的值

创建EvaluateController

@Controller
public class EvaluateController {
@Autowired
private IEvaluateService service;

@RequestMapping("/evaluate")
public String evaluatemanager(Model model) {
    List<Evaluate> listAll = service.listAll();
    List<Object> lists = new ArrayList<>();
    //遍历所有订单 如果订单有评论就获取获取用户信息
    for (Evaluate li : listAll) {
        String content = li.getContent();
            String openid = li.getOpenID();
            //调用接口获取用户详细信息
            String result = HttpUtil.get(WeixinUtil.GET_USERINFO_URL.replace("ACCESS_TOKEN", WeixinUtil.getAccessToken()).replace("OPENID", openid));
            //转成json对象
            JSONObject json = JSON.parseObject(result);
            String nickname = (String) json.get("nickname");
            String headimgurl = (String) json.get("headimgurl");
            li.setNickname(nickname);
            li.setHeadimgurl(headimgurl);
            lists.add(li);
            System.out.println("-----" + result);
    }
    model.addAttribute("lists",lists);
   //跳转到evaluate.jsp界面(用户评价界面)
    return "evaluate";
}
}

小结:这里我们想把界面需要的数据传给jsp界面首先要知道怎么讲数据传递过去,这里就要知道spring的几种传值方式,点击查看Spring传值方式我就随便找了一篇博客如果需要可以花一分钟看看,然后我们需要获取过滤数据库的用户订单信息,我们需要的是用户评价的信息,所以有两种方式获取1.通过sql条件排除没有评价的订单信息,2.获取所有订单,遍历过滤没有评论内容的订单.接着我们通过查询数据库获取到订单信息这是过滤后的每一个订单都是有用户评论的,然后调用接口获取用户详细信息,订单信息里有用户的openID,我们遍历每一个订单获取用户的openID,发送请求,
String result = HttpUtil.get(WeixinUtil.GET_USERINFO_URL.replace("ACCESS_TOKEN", WeixinUtil.getAccessToken()).replace("OPENID", openid));
这是我们需要返回的结果转成json对象,
JSONObject json = JSON.parseObject(result);
然后取值再赋值,我们希望把需要的属性全部封装到对象里这时我们就必须在实现类里添加用户头像headimgurl和昵称nickname两个字段,
String nickname = (String) json.get("nickname");
String headimgurl = (String) json.get("headimgurl");
li.setNickname(nickname);
li.setHeadimgurl(headimgurl);
lists.add(li);
然后就可以通过Spring的传值方式把集合共享到作用域里,在jsp界面再通过EL表达式获取即可
model.addAttribute("lists",lists);

这里用到HttpUtil工具类

public class HttpUtil {
/**
 * 发送get请求
 * @throws Exception
 */
public static String get(String url) {

    String result = "";
    InputStream in = null;
    try {
        // 打开和URL之间的连接
        HttpURLConnection conn = (HttpURLConnection) new URL(url)
                .openConnection();
        // 设置通用的请求属性
        conn.setRequestProperty("accept", "*/*");
        conn.setRequestProperty("connection", "Keep-Alive");
        conn.setRequestProperty("Content-Type", "application/json");
        conn.setRequestProperty("Accept", "application/json");
        conn.setRequestMethod("GET");
        // 建立实际的连接
        conn.connect();
        // 定义输入流来读取URL的响应
        in = conn.getInputStream();
        result = StreamUtils.copyToString(in, Charset.forName("utf-8"));
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        if (in != null) {
            try {
                in.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    return result;
}

在js里集成下拉刷新

$(function () {
//初始化下拉刷新
$(document.body).pullToRefresh();
//下拉刷新
$(document.body).on("pull-to-refresh", function() {
window.location.reload();
});
//当下拉刷新的工作完成之后，需要重置下拉刷新的状态
$(document.body).pullToRefreshDone();
})

效果图

上面的代码只能完成一点初级的要求,性能比较差.比较冗余,下面我们对上面的代码进行优化----->查看更多功能(先跳转jsp界面,再调用加载更多方法)

先贴上代码

public class EvaluateController {
@Autowired
private IEvaluateService service;

//先跳转evaluate.jsp界面
@RequestMapping("/evaluate")
public String evaluatemanager(Model model) {
    return "evaluate";
}
/**
 * 作用:加载更多,执行查询分页类似的功能,点击查询更多功能会加载固定数量的消息,知道加载全部
 * @param qo  封装当前页,页面大小,和起始位置
 * @return 返回pageResult对象
 */
@RequestMapping("/loadmore_list")
@ResponseBody
public PageResult loadMorelist(QueryObject qo) {
    PageResult pageResult=service.evaluatePageResult(qo);
    List<Evaluate> rows=  pageResult.getRows();
    for (Evaluate li : rows) {
        String openid = li.getOpenID();
        //调用接口获取用户详细信息
        String result = HttpUtil.get(WeixinUtil.GET_USERINFO_URL.replace("ACCESS_TOKEN", WeixinUtil.getAccessToken()).replace("OPENID", openid));
        //转成json对象
        JSONObject json = JSON.parseObject(result);
        String nickname = (String) json.get("nickname");
        String headimgurl = (String) json.get("headimgurl");
        li.setNickname(nickname);
        li.setHeadimgurl(headimgurl);
    }
    return pageResult;
}
}

接着我们来修改jsp界面

只是把上面的jsp界面的<body>内的内容修改一下,把原来的循环所有的评论条数的代码全部删除,点击加载更多通过js动态向jsp标签中批量添加数据 ,这样明显更加灵活,

<body>
<div class="weui-pull-to-refresh__layer">
    <div class='weui-pull-to-refresh__arrow'></div>
    <div class='weui-pull-to-refresh__preloader'></div>
    <div class="down">下拉刷新</div>
    <div class="up">释放刷新</div>
    <div class="refresh">正在刷新</div>
</div>
<div class="weui-panel weui-panel_access">
     <div class="weui-panel__hd">宝贝评价</div>
     <div class="weui-panel__bd"></div>
    <div class="weui-panel__ft">
    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
        <div class="js-load-more">加载更多</div>
        <span class="weui-cell__ft"></span>
    </a></div>
</div>
咻咻😝
</body>

evaluate.js

$(function () {
//下拉刷新
$(document.body).pullToRefresh();
$(document.body).on("pull-to-refresh", function () {
    window.location.reload();
});
$(document.body).pullToRefreshDone();
});
$(function () {
/*初始化*/
/*计数器*/
var counter = 1;
/*从那一页开始加载*/
var pageStart = 1;
/*每次加载多少条数据*/
var pageSize = 10;


/*第一次加载页面*/
getData(counter, pageSize);
/*监听点击加载更多更多按钮,每次点击都会触发对应的事件*/
$(document).on('click', '.js-load-more', function () {
    counter++;
    pageStart = counter * pageSize;
    alert("counter:"+counter + "pageSize:" + pageSize);
    //第一次加载页面时就要调用
    getData(counter, pageSize);
    $(".js-load-more").hidden=true;
});
})

//传入参数查询结果集
function getData(pageStart, pageSize) {
$.ajax({
    type: 'GET',
    url: '/loadmore_list.do?page=' + pageStart + "&rows=" + pageSize,
    dataType: 'json',
    success: function (reponse) {
        console.info(reponse);
        var data = reponse.rows;
        var total=reponse.total;
        var sum = reponse.rows.length;
        var result = '';

        if (sum - pageStart < pageSize) {
            pageSize = sum - pageStart;
        }
    //拼接要展示的界面
        for (var i = 0; i < data.length; i++) {
            result += '<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd">' +
                '![]('+data[i].headimgurl+')</div><div class="weui-media-box__bd">'+
                '<h1 class="weui-media-box__title">'+data[i].nickname+'</h1>' +
                '<p class="weui-media-box__desc">'+data[i].content+'</p>' +
                '</div></a>';
        }
     //将拼接结果追加到指定位置
        $('.weui-panel__bd').append(result);

        /*隐藏more按钮*/
        if (pageStart >= total) {
            $(".js-load-more").hidden=true;
        } else {
            $(".js-load-more").show();
        }
    },
    error: function (xhr, type) {
        alert('亲你的网络不稳定哦!');
    }
});
}

这样我们就把需要优化的部分优化了

微信公众号开发(二)

在js里集成下拉刷新

上面的代码只能完成一点初级的要求,性能比较差.比较冗余,下面我们对上面的代码进行优化----->查看更多功能(先跳转jsp界面,再调用加载更多方法)

接着我们来修改jsp界面

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员之家

Java 杂谈