基于Servlet构建基础的后台服务器

以微信小程序为例

1.后台CommentServlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        request.setCharacterEncoding("UTF-8");
        PrintWriter out=response.getWriter();
        Gson gson=new Gson();
//        Map<String,Object> map=new HashMap<>();
//        map.put("name", "YH_Simon");
        List<Admin> adminList=new ArrayList<Admin>();
        Map<String, Object> map=new HashMap<String, Object>();
        adminList.add(new Admin(1,"张三",20,"男","南昌"));
        adminList.add(new Admin(2,"李四",22,"女","天津"));
        adminList.add(new Admin(3,"王五",20,"女","上饶"));
        adminList.add(new Admin(4,"赵六",20,"男","杭州"));
        String jsonObject=gson.toJson(adminList);
        out.write(jsonObject);
        out.flush();
        out.close();
    }

2.前台 index.js

data: {
    adminList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getAdminList();
  },

getAdminList() {
      let that=this;
      wx.request({
        url: 'http://localhost:8080/Test1/CommentServlet',
        success(res){
          // console.log(res);
          // that.adminList=res.data;
          // console.log(that.adminList);
          that.setData({
            adminList:res.data
          })
        }
      })
  },

补充:因为微信小程序无table标签,可通过以下方式实现表格格式

3.index.wxml

<view style="text-align:center;color:gray;font-size:40rpx;">学生信息</view>
<view class="table">
  <view class="tr bg-w">
    <view class="th">id</view>
    <view class="th">姓名</view>
    <view class="th ">年龄</view>
    <view class="th ">性别</view>
    <view class="th ">地址</view>
  </view>
  <block wx:for="{{adminList}}" wx:key="{{index}}">
    <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      <view class="td">{{item.id}}</view>
      <view class="td">{{item.name}}</view>
      <view class="td">{{item.age}}</view>
      <view class="td">{{item.gender}}</view>
      <view class="td">{{item.address}}</view>

    </view>
    <view class="tr" wx:else>
      <view class="td">{{item.id}}</view>
      <view class="td">{{item.name}}</view>
      <view class="td">{{item.age}}</view>
      <view class="td">{{item.gender}}</view>
      <view class="td">{{item.address}}</view>
    </view>
  </block>
</view>

4.index.wxss

.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}

猜你喜欢

转载自www.cnblogs.com/yh-simon/p/12361027.html
今日推荐