微信小程序全栈实战(二):列表循环渲染
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
}