• 基于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;
    }
  • 相关阅读:
    怎么让Windows2012和Windows2008多用户同时远程
    IIS站点/虚拟目录中访问共享目录(UNC)以及建立后的应用程序的信任级别问题
    Mac 快捷键
    SQL Server Profiler
    vscode 实用插件
    Xss测试
    RequireJS和AMD规范
    ECMAScript 6.0 学习笔记
    使用 create-react-app 构建 react应用程序
    vscode 快捷键
  • 原文地址:https://www.cnblogs.com/yh-simon/p/12361027.html
Copyright © 2020-2023  润新知