文章目录
- 1.需求概念
- 2.后台开发
- 3.前端开发
- 1.微信页面
- 2.JS
- 3.请求
1.需求概念
我们需要循环的是这数据
2.后台开发
这里为了方便，直接写一起
@RestController
@Api(tags="Project模块") //模块名称
@CrossOrigin //开启跨域
public class ProjectController {@Autowiredprivate ProjectSer ser;/*** 查询项目列表* @return*/@GetMapping("/2001")@ApiOperation(value="显示Project列表", notes="显示Project列表")@Transactional(propagation = Propagation.SUPPORTS) // 查询用SUPPORTS 增删改用REQUIREDpublic 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 {@Autowiredprivate 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() + 1const 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
}
