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;
    }
  • 相关阅读:
    解决 未能为数据库 '数据库用户名' 中的对象 '表名' 分配空间,因为文件组 'PRIMARY' 已满
    获取一个目录下文件扩展名为txt或htm或html的文件的几种方法
    由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面
    图解C#创建SqlServer MD5 加密函数
    SqlServer 日期转换 所有格式
    使用SoapHeader对WebService进行身份验证
    禁用文本框粘贴功能
    去除 以下文件中的行尾不一致,要将行尾标准化吗 的提示
    程序锁定windows系统以及调用其它系统对话框,如控制面板,重启系统
    yakuake shell
  • 原文地址:https://www.cnblogs.com/yh-simon/p/12361027.html
Copyright © 2011-2022 走看看