微信公衆號開發(二)

時間  2019-11-07
標籤 微信 公衆號 開發 简体版
原文   原文鏈接

今天把以前的知識整合一下 來作一個簡單公衆號購物界面的用戶評價界面,供你們學習javascript

總體思路: 咱們通常看到的淘寶用戶評價界面基本須要---->用戶頭像,用戶暱稱,和評論內容,評論時間等幾個基本字段 .如何獲取用戶的基本信息咱們在上一節說過了,獲取用戶的評論內容咱們如今根據現實購物訂單的用戶評價來用數據庫模擬.這樣咱們就能夠完成一個用戶評價界面的模塊功能了.css

首先咱們先建立實體類Evaluatehtml

@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獲取全部的用戶評價java

public interface EvaluateMapper {
List<Evaluate>listAll();
}
複製代碼

建立接口(略)和實現類jquery

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

建立EvaluateMapper.xmlajax

<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再建立控制類spring

<%@ 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 由於他給們提供了不少控件,根據官網提供的開發文檔咱們選擇合適的控件,選擇好控件後,咱們須要向控件傳入數據使得咱們的界面有數據顯示給用戶看sql

選擇WEIUI控件

接着咱們能夠經過EL表達式來獲取須要的值(先說jsp界面) 首先要引入EL表達式的頭文件 而後經過EL表達式從共享做用域裏獲取須要的值數據庫

建立EvaluateControllerjson

@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界面的內的內容修改一下,把原來的循環全部的評論條數的代碼所有刪除,點擊加載更多經過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('親你的網絡不穩定哦!');
    }
});
}
複製代碼

這樣咱們就把須要優化的部分優化了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程