微信小程序信息展示列表
 
 
 
 
效果展示:
 
 

 

  
 
 
 
 
代码展示:
 
 
wxml
 
 
<view class="head">
  <view class="head_item">分类</view>
  <view class="ring"></view>
  <view class="head_item">价格</view>
</view>
<block wx:for="{{ets}}">
  <view class="item" bindtap="seePerson" id="{{item.id}}">
    <view class='img'>
      <!-- img -->
      <image src="{{baseUrl}}{{item.avatar}}" style="width:100px;height:100px;"></image>
    </view>
    <view class="intro">
      <!-- 广东礼仪带队宵夜 -->
      <view class="position">
        {{item.name}}
      </view>
      <view class="jiaqian">
        ￥--/人
      </view>
      <view class="address">
        原价：￥--
      </view>
      <!-- 广州市 | 共有49个案例，0个视频 -->
      <view class="dizhi">
        {{item.city}} {{item.gender}} {{item.age}} {{item.label}}
      </view>
    </view>
    <button class='but'>火爆</button>
    <view class='rendu'>
      热度：190
    </view>
  </view>
  <view class="hr"></view>
</block>


<!-- 
<view class="item">
  <view class='img'>
    <image src="{{img}}" style="width:100px;height:100px;"></image>
  </view>
  <view class="intro">
    <view class="position">
      广东礼仪带队宵夜
    </view>
    <view class="jiaqian">
      ￥300/人
    </view>
    <view class="address">
      原价：￥500
    </view>
    <view class="dizhi">
      广州市 | 共有49个案例，0个视频
    </view>
  </view>
  <button class='but'>6.0折</button>
  <view class='rendu'>
    热度：190
  </view>
</view>
<view class="hr"></view>

<view class="item">
  <view class='img'>
    <image src="{{img}}" style="width:100px;height:100px;"></image>
  </view>
  <view class="intro">
    <view class="position">
      广东礼仪带队宵夜
    </view>
    <view class="jiaqian">
      ￥300/人
    </view>
    <view class="address">
      原价：￥500
    </view>
    <view class="dizhi">
      广州市 | 共有49个案例，0个视频
    </view>
  </view>
  <button class='but'>6.0折</button>
  <view class='rendu'>
    热度：190
  </view>
</view>
<view class="hr"></view>


<view class="item">
  <view class='img'>
    <image src="{{img}}" style="width:100px;height:100px;"></image>
  </view>
  <view class="intro">
    <view class="position">
      广东礼仪带队宵夜
    </view>
    <view class="jiaqian">
      ￥300/人
    </view>
    <view class="address">
      原价：￥500
    </view>
    <view class="dizhi">
      广州市 | 共有49个案例，0个视频
    </view>
  </view>
  <button class='but'>6.0折</button>
  <view class='rendu'>
    热度：190
  </view>
</view>
<view class="hr"></view>

<view class="item">
  <view class='img'>
    <image src="{{img}}" style="width:100px;height:100px;"></image>
  </view>
  <view class="intro">
    <view class="position">
      广东礼仪带队宵夜
    </view>
    <view class="jiaqian">
      ￥300/人
    </view>
    <view class="address">
      原价：￥500
    </view>
    <view class="dizhi">
      广州市 | 共有49个案例，0个视频
    </view>
  </view>
  <button class='but'>6.0折</button>
  <view class='rendu'>
    热度：190
  </view>
</view>
<view class="hr"></view> -->
复制代码
 
wxss
 
 
.item {
  display: flex;
  flex-direction: row;
}
.head_item {
  width: 374rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
}

.head {
  height:80rpx;
  background-color: #D53E37;
  border-top: 1rpx solid #fff;
  border-bottom: 1rpx solid rgba(204, 204, 204, 1);
  display: flex;
  align-items: center;
  top: 0;
}

.ring {
  width: 2rpx;
  height: 100%;
  background-color: rgba(204, 204, 204, 1);
}

.img {
  margin: 10rpx 0 10rpx 10rpx;
}

.intro {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: 100%;
}

.introing {
  display: flex;
  flex-direction: column;
  flex: right;
  margin-right: 30rpx;
}

.position {
  margin-top: 20rpx;
  width: 60%;
  font-size: 28rpx;
  font-weight: bold;
}

.jiaqian {
  font-size: 28rpx;
  color: red;
  margin-top: 20rpx;
}

.address {
  font-size: 25rpx;
  color: #999;
  margin-top: 20rpx;
}

.dizhi {
  font-size: 25rpx;
  margin-top: 20rpx;
}

.but {
  position: absolute;
  font-size: 25rpx;
  margin-left: 620rpx;
  margin-top: 55rpx;
  border: red;
  color: red;
}

.rendu {
  position: absolute;
  font-size: 25rpx;
  margin-left: 620rpx;
  margin-top: 120rpx;
}

.line {
  align-content: center;
  border: 1px solid #ccc;
  opacity: 0.2;
}

.hr {
  height: 10px;
  background-color: #eee;
}
复制代码
 
json
 
 
{
  "navigationBarTitleText": "达叔小生",
  "enablePullDownRefresh": true
}
复制代码
 
js
 
 
// 获取应用实例
var app = getApp()
Page({
  data: {
    ets: [],
    baseUrl: app.globalData.baseUrl
  },
  onLoad: function() {
    // this.loading();
    var that = this;
    that.loadPer();
  },
  // 加载艺人列表
  loadPer: function() {
    var that = this;
    wx.request({
      url: app.globalData.baseUrl + '/list/', // 接口地址
      method: 'GET',
      header: {
        'content-type': 'application/json' //默认值
      },
      // 成功
      success: function(res) {
        console.log("加载艺人列表 成功", res.data.data);
        that.setData({
          ets: res.data.data
        });
      },
      // 失败
      fail: function(err) {
        console.log("加载艺人列表 失败", err);
      }
    })
  },

  // 下拉刷新
  onPullDownRefresh: function() {
    console.log("下拉刷新")
    var that = this;
    wx.showNavigationBarLoading()

    setTimeout(() => {
      that.loadPer();
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    }, 2000)
  },

  seePerson: function(e) {
    // if (!e.currentTarget.id == "") {
    //   wx.navigateTo({
    //     url: "../person/person?id=" + e.currentTarget.id
    //   })
    //   console.log(e)
    // } else {
    //   console.log("无内容")
    // }

    if (!e.currentTarget.id == "") {
      wx.navigateTo({
        url: "../detailjiemu/detailjiemu?id=" + e.currentTarget.id
      })
      console.log(e)
    } else {
      console.log("无内容")
    }
  }
})
复制代码
 
 
  
达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通 简书博客： 达叔小生 www.jianshu.com/u/c785ece60…
 
 
 
 
结语
 
 
下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
小礼物走一走 or 点赞

例: 在浏览器中输入地址之后 , 查询出所有的用户信息 !
 1.准备工作.
 
 
 
1.web - > WEB-INF - > lib包下导入jia包.
 2.创建数据库和表 , 初始化表中数据 .
 3.将c3p0工具类 , 放在src下 , 修改表名.
 4.编写用于展示的jsp页面 .
 5.创建好三层架构 .
 
 
 
Web层 -> UserServlet.java
 
@WebServlet("/findAll")
public class UserServlet extends HttpServlet {
   
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 创建UserService对象 , 使用其方法.
        UserService us = new UserService();
        // 返回一个List集合 , 把user对象放到集合中.
        List<User> list = us.findAll();

        // 将返回的list集合 , 添加到域对象中.
        request.setAttribute("user",list);

        // 成功之后 , 请求转发到jsp页面 , 给用户展示.
        request.getRequestDispatcher("/list.jsp").forward(request,response);
    }
}
 
Service层 -> UserService.java
 
public class UserService {
    // 创建UserDao对象 , 调用其方法 , 并返回 .
    UserDao dao = new UserDao();
    public List<User> findAll() {
        return dao.findAll();
    }
}
 
Dao层 -> UserDao.java
 
public class UserDao {
    // 查询数据库中所有的用户信息.
    public List<User> findAll() {
        // 1.创建QueryRunner对象.
        QueryRunner qr = new QueryRunner(DataSourceUtil.getDataSource());
        // 2.创建sql语句.
        String sql = "select * from user ";
        // 3.使用query方法执行sql语句.
        try {
            return qr.query(sql, new BeanListHandler<>(User.class));
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }
}
 
javaBean -> User.java
 
属性名  ==========  字段名
创建getter/setter方法 !
 
jsp页面 -> list.jsp
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>用户信息管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="resource/css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="resource/js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="resource/js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h3 style="text-align: center">用户信息列表</h3>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${user}" var="user">
            <tr>
                <td>${user.id}</td>
                <td>${user.name}</td>
                <td>${user.sex}</td>
                <td>${user.age}</td>
                <td>${user.address}</td>
                <td>${user.qq}</td>
                <td>${user.email}</td>
                <td><a class="btn btn-default btn-sm" href="update.jsp">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="">删除</a></td>
            </tr>
        </c:forEach>
        <tr>
            <td colspan="8" align="center"><a class="btn btn-primary" href="add.jsp">添加联系人</a></td>
        </tr>
    </table>
</div>
</body>
</html>

做的一个项目，有一个展示信息的页面，同时要展示相应的图片。
一开始是想用jQuery easyUI的datagrid，但是这个显示效果不好，会出现表格的一些特性，展示图片时会有加减号控制。其实是我想多了，图片就放在本地，数据库表中只是存储的图片的基本信息（ID，URL等），其实可以在后台获取这些信息后直接传到页面，在相应的地方展示出来就可以了。在这我是在一个form表单中展示。
后台controller


@ResponseBody
    @RequestMapping("/apply/veriApplyGet")
    public String getVeriApply(String id, String techCls){
        String sql = "";
        if("1".equals(techCls)){
            sql = "select p.id, p.data_id, p.pics_url, p.pics_name from TBL_BASE_PICS p，TBL_TECH_ACHV a where p.data_id = a.id and a.id = '"+id+"' and p.data_cls = '1' ";
        }
        if("2".equals(techCls)){
            sql = "select p.id, p.data_id, p.pics_url, p.pics_name from TBL_BASE_PICS p，TBL_TECH_DEMAND d where p.data_id = d.id and d.id = '"+id+"' and p.data_cls = '2' ";
        }
        List photoList = commonService.execSql4List(sql, true, true);
        Map<String, Object> infoMap = this.getVeriEntityInfo("get", Integer.parseInt(techCls), id);
        infoMap.put("photo", photoList);
        return this.writeJson(infoMap);
    }
前台展示

.ftl
    <div data-options="region:'east',width:360" style="padding:10px 5px;">
          <form id="photoForm1" method="post"></form>
     </div>

script
//处理图片表photoForm
                        var photoForm = "<div style=\"padding:10px;font-size:14px;\">";
                        var photo = data.photo;
                        for(var i = 0; i < photo.length; i++){
                            photoForm += "<img src=\"${ctx}" + photo[i].picsUrl + "\" style=\"height:300px; width:300px;\">";
                        }
                        photoForm += "</div>";
                        $("#photoForm1").html(photoForm);

概述：最近在赶毕业设计，遇到一个问题，爬虫模块我用PyQt5写了图形界面，为了将所有的输出信息都显示到图形界面上遇到了问题。
 
先演示一下效果最终效果吧，下面两张图用来镇楼。可以看到我们图形界面和程序运行的返回的信息是一样的，并且成功把数据展示到图形界面。
 
 
    
 
 
 
 
 
 
 
 
      1.怎么获取输出信息。eg：我们平时用编译器，例如pycharm，运行的时候，会有很多信息，或者直接在cmd窗口输入命令的时候，也有同样信息。例如我启动数据库。
 
                           
 
                            cmd窗口下执行命令返回的信息                                                              Pycharm运行的效果
 
我就想把这种类似输出的信息，展示到图形界面上，上面这两种方法本质都是一样的，都是在向用mysql 命令net start mysql启动的，前面是在cmd窗口下，后一种是用os.sysytem("net start mysql")。
 
    2.怎么把信息发送给图形界面展示。
 
解决方案： 
 
对于问题1，需要用到PyQt其中一个模块 ：subprocess。看名字大概可以猜到是新开一个进程去执行某些功能。由于我是结合网上资料和源码进行运用的， 大概简单说一些吧。
 
官方源码中这么说的：
 
This module allows you to spawn processes, connect to their
input/output/error pipes, and obtain their return codes.
 
 
 
翻译过来就是：该模块允许您生成进程，连接到其输入/输出/错误管道  并获取其返回码。
 
意思就是新开一个进程去执行功能，返回状态码，以及信息。这里要想像cmd里面或者pycharm运行那样，得到里面的输出数据，就要用到subprocess.Popen（cmd），或者subprocess.getstatusoutpu(cmd)，subprocess.getoutpu(cmd)。都能获取到输出的日志信息，cmd是字符串命令。博主这里用的subprocess.get系列。就实例话展示一下。
 
subprocess.getoutput（cmd）：返回的是在Linux shell或者windows cmd窗口执行命令返回信息。例如启动数据库。
 
import subprocess

reply=subprocess.getoutput("net start mysql")
print(reply)
 
 
subprocess.getstatusoutput（cmd）:返回的是在Linux shell或者windows cmd窗口执行命令返回状态码和信息。比上面命令多了一个状态码，状态码为0代表执行成功，其余值就是失败。每个值对应一种错误
 
import subprocess

reply=subprocess.getstatusoutput("net start mysql")
print(reply)
 
 
对于上面两种情况，如果你需要状态码和信息就用第二种，只需要返回信息就用第一种。博主用的第二种，因为我需要状态码判断是否成功，因为我的图形界面有消息盒子需要判断。当然你可以根据个人情况而定。
 
 
 
对于问题2：我这里采用是Pyqt中的信号机制，我把所有信息用信号发送出去，在用信号函数接收，连接槽函数再显示，因为我的功能比较多，所以需要显示的数据，都用信号发出去。当然你的功能单一的话，你可以直接用上面的模块，得到返回信息显示就行。比如我这里，有测试功能，连接数据库，关闭数据库等，我就展示其中一个具体的例子演示。
 
首先得在一个类中定义信号   eg：show_infoes_signal=pyqtSignal(str)  str是参数 
  #自定义信号,发送日志信息，展示到界面
    show_infoes_signal=pyqtSignal(str)
 
 
 
在类中init初始化中写接收信号，连接槽函数。show_infoes是写的展示函数 
 def __init__(self):
       
        self.show_infoes_signal.connect(self.show_infoes)
 
 
 
比如在某个具体功能中发送信号，并把信息用哪个信号传出去。例如我的连接数据库的功能。 
 def connect_mysql(self):
        self.show_infoes_signal.emit("连接数据库ing....")
        reply=subprocess.getstatusoutput("net start mysql")
        #subprocess返回状态码和字符串元组，0成功，其余值失败
        if reply[0]==0:
            # 发送数据信号
            self.show_infoes_signal.emit(reply[-1])
            QMessageBox.information(self, "消息", "Congratulation! 数据库连接成功！")
        else:
            self.show_infoes_signal.emit(reply[-1])
            QMessageBox.warning(self, "警告", "连接失败")
 
在连接数据库功能中，用新进程打开，看状态码是否为0，为0启动成功，发送信号并且消息盒子提示连接成功，否则连接失败。
 
 
最后就是展示的槽函数。当我们发送信号后，就能接收到发送的信号以及信息，最后把拿到的信息进行展示。
 
  #展示信息槽函数
    def show_infoes(self,info):
        print(info)
        pre_text=self.show_label.text()
        self.show_label.setText(pre_text+info+'\n\n')