微信小程序全栈实战(二)：列表循环渲染

1.需求概念

我们需要循环的是这数据

2.后台开发

这里为了方便，直接写一起

@RestController
@Api(tags="Project模块") //模块名称
@CrossOrigin //开启跨域
public class ProjectController {

    @Autowired
    private ProjectSer ser;

    /**
     * 查询项目列表
     * @return
     */
    @GetMapping("/2001")
    @ApiOperation(value="显示Project列表", notes="显示Project列表")
    @Transactional(propagation = Propagation.SUPPORTS) // 查询用SUPPORTS 增删改用REQUIRED
    public Result getList(String ptype){
        Result result = new Result();
        List<Project> ProjectList = ser.ProjectAll(ptype); 
        result.setData(ProjectList);
        result.setOk(Result.ok().getOk()); 
        result.setStatus(200);
        result.setMsg("查询Project列表成功"); 
        return result;
    }
}

//=========================================service

@Service
public class ProjectSer {

    @Autowired
    private ProjectDao dao;
    
    public List<Project> ProjectAll(String ptype){
    	Project project = new Project();
    	if(!ptype.isEmpty() && ptype!="") {
    		project.setPtype(ptype);
    		Example<Project> example = Example.of(project);
    		List<Project> list = dao.findAll(example);
    		return list;
    	}
    	return dao.findAll();
    }


//===========================================dao

/**
 * 增删改需用@modify注解
 * 使用原生sql > @Query(value="select * from t_book order by RAND() LIMIT ?1",nativeQuery=true)
 */
public interface  ProjectDao extends JpaRepository<Project,Integer> {
	/**
	   * 项目列表查询
	 * @return
	 */
	
	@Query(value="select * from t_project LIMIT :count,8",nativeQuery=true)
	List<Project> getProjectList(@Param("count")Integer count);
	
	@Query(value="select * from t_project WHERE id=:id",nativeQuery=true)
	Project getProjectById(@Param("id")Integer id);
	
	@Query(value="select ptype from t_project group by ptype",nativeQuery=true)
	List<String> getTypeList();

	@Query(value="select * from t_project where ptype = :ptype",nativeQuery=true)
	List<Object> getProjectBytype(@Param("ptype")String string);

}

//====================entity
@Entity
@Table(name="t_project")
public class Project {
    @Id
    @GeneratedValue
    @Column(length = 11)
    private Integer id;

    @Column(length = 20)
    private String pname;
    
    @Column(length = 20)
    private String ptype;			
    
    @Column(length = 20)
    private String pcomment;

	//getter/setter
    
}

3.前端开发

1.微信页面

<i-panel title="火热项目">
  <block wx:for="{{projectlsit}}">
    <view style="padding: 15px;height:2rem">
      <image style="width:2.2rem;height:2.2rem" src="https://static.easyicon.net/preview/117/1171971.gif"></image>
      <view class="projectList">
        <text style='display:block;line-height:20px'>{{item.pname}}</text>
        <text class='desc_css' style='margin : 1.25rem;'>{{tools.sub(item.pcomment,10)}} </text>
      </view>
    </view>
  </block>
</i-panel>

2.JS

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    url: 'http://localhost:90/',
    projectlsit: [],
  },
  //页面启动的时候
  onLoad:function(options) {
    console.log('[你当前获取主页项目信息列表]')
    wx.request({
      url: this.data.url + '2002',
      data: {
        count: 0,
      },
      method: "GET",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        console.log(res.data.data)
        this.setData({
          projectlsit: res.data.data
        })
      }
    })


  },

})

3.请求

当跳转到这个页面的时候


页面进行循环即可

里面就是通过点出属性即可
下面的tools这里使用了一个长度分割工具类

若太长，他会有截取
工具类引入方法

<!--index.wxml-->
<wxs src="../../utils/subutil.wxs" module="tools" />

工具类代码
subutil.wxs

var sub = function (val,number) {
  if (val.length == 0 || val == undefined) {
    return;
  }
  if (val.length > number) {
    return val.substring(0, number) + "...";
  } else {
    return val;
  }
}
var localData = function (value) {
  var date = getDate(value);
  var Month = date.getMonth() + 1;
  var Day = date.getDate();
  var hours = date.getHours(); //计算剩余的小时
  var minutes = date.getMinutes(); //计算剩余的分钟
  var Y = date.getFullYear() + '年';
  var M = Month < 10 ? '0' + Month + '月' : Month + '月';
  var D = Day + 1 < 10 ? '0' + Day + '日' : Day + '日';
  var H = hours < 10 ? '0' + hours + ':' : hours + ':'
  var m = minutes < 10 ? '0' + minutes : minutes;
  return Y + M + D + "   " + H + m;
}
module.exports = {
  localData: localData,
  sub : sub
}

util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}