微信小程序通讯录效果二：数据从后台查询-即速应用

一、前台

1、communication.wxml

2、communication.wxss

/*list*/.wa-list{ /*整个List所占的宽度*/ width:100%; }
/* 设置每个item的样式 */.wa-item{ width: 100%;             /* 每个item所占的宽度 */ border: 1px solid #ddd; /* 每个item的边框 solid 实线 */ margin: -1px 0;          /* 外边距上外边距和下外边距是 -1px 右外边距和左外边距是 0px*/ font-size: 16px;         /* 字体大小*/ color: #444;             /* 字体颜色*/ padding:15px;            /* 内边距所有 4 个内边距都是 15px*/ box-sizing: border-box; /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ /* https://www.jianshu.com/p/e2eb0d8c9de6 */ position:relative;       /* position 属性规定元素的定位类型。 */ /* relative 生成相对定位的元素，相对于其正常位置进行定位。    因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。*/ background-color: #fff;   /* 每个item的背景颜色*/}
/* 3.关于文字的样式 */.wa-item-ava{ padding-left:60px; /* 内边距左内边距是 60px*/ min-height: 70px;   /* 设置段落的最小高度：*/}
/* 4.关于第二行文字的样式 */.wa-item-ava .wa-item-text{ font-size: 14px; position:absolute; /* position 属性规定元素的定位类型。 */ top:38px; left: 58px;}
/* 5.关于图片的样式 */.wa-item-ava .item-img-round{ position:absolute;   /* position 属性规定元素的定位类型。 */ /* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。     元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。*/ top:15px;      /* 图片的上边距*/ left: 10px;    /* 图片的左边距*/ width: 40px;   /* 图片的宽度*/ height: 40px; /* 图片的高度*/   border-radius: 50%; /* 向 div 元素添加圆角边框*/}

3、communication.js

Page({ /* 设置初始值 */ data: { communications: [], }, /* 窗口加载事件 */ onLoad: function (options) { var that = this; console.log('oload....'); wx.request({ url: 'http://localhost:8080/Min/Communication', data: { }, method: 'GET', header: { 'content-type': 'application/json' // 默认值 }, success: function (res) { console.log(res.data); that.setData({ communications: res.data }) }, fail: function (res) { console.log(".....fail....."); } }) },
communicationsTab:function(e){ let id = e.target.dataset.id; console.log('此次点击的id:'+id); } })

二、后台(java)

package servlet;

import java.io.IOException;
import java.io.Writer;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import eneity.Communication;

public class CommunicationServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {

resp.setContentType("text/html;charset=utf-8");
/* 设置响应头允许ajax跨域访问 */
resp.setHeader("Access-Control-Allow-Origin", "*");
/* 星号表示所有的异域请求都可以接受， */
resp.setHeader("Access-Control-Allow-Methods", "GET,POST");

Writer out = resp.getWriter();
List<Communication> list = new ArrayList<Communication>();
Communication comm1 = new Communication(1, "宋爱梅", "13678622987","../images/宋爱梅.png");
Communication comm2 = new Communication(2, "王志芳", "13878642987","../images/王志芳.png");
Communication comm3 = new Communication(3, "贾隽仙", "17278632987","../images/贾隽仙.png");
Communication comm4 = new Communication(4, "贾燕青", "17778652987","../images/贾燕青.png");
Communication comm5 = new Communication(5, "崔红宇", "18678612987","../images/崔红宇.png");
Communication comm6 = new Communication(6, "马福平", "18878662987","../images/马福平.png");
list.add(comm1);
list.add(comm2);
list.add(comm3);
list.add(comm4);
list.add(comm5);
list.add(comm6);

JSONArray jsonArray = JSONArray.fromObject(list);
System.out.println(jsonArray);

out.write(JSONArray.fromObject(list).toString());
out.flush();
}
}