zoukankan      html  css  js  c++  java
  • 基于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;
       100%;
      justify-content: center;
      height: 3rem;
      align-items: center;
    }
    .td {
        40%;
        justify-content: center;
        text-align: center;
    }
    .bg-w{
      background: snow;
    }
    .bg-g{
      background: #E6F3F9;
    }
    .th {
       40%;
      justify-content: center;
      background: #3366FF;
      color: #fff;
      display: flex;
      height: 3rem;
      align-items: center;
    }
  • 相关阅读:
    17. Letter Combinations of a Phone Number
    16. 3Sum Closest
    15. 3Sum
    14. Longest Common Prefix
    13. Roman to Integer
    12. Integer to Roman
    11. Container With Most Water
    10. Regular Expression Matching
    9. Palindrome Number
    8. String to Integer (atoi)
  • 原文地址:https://www.cnblogs.com/yh-simon/p/12361027.html
Copyright © 2011-2022 走看看