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;
    }
  • 相关阅读:
    怎样快速学会ZBrush 中的移动笔刷的运用
    ZBrush中如何才能快速完成脸部雕刻(下)
    ZBrush中如何才能快速完成脸部雕刻(上)
    ZBrush中的Clip剪切笔刷怎么快速运用
    ZBrush中必须记住的常用快捷键
    怎么在ZBrush中渲染漫画风格的插画
    怎么运用ZBrush中的Z球制作身体部分
    ZBrush中的笔刷该怎样制作
    如何在ZBrush中添加毛发
    App交互demo
  • 原文地址:https://www.cnblogs.com/yh-simon/p/12361027.html
Copyright © 2011-2022 走看看