小程序页面动态配置实现
小程序可以根据管理后台配置动态更新展示内容,如实现下面新鲜事栏目图片的来源的可配置,点击跳转url的可配置。 实现方案1后端创建一个map结构的数据表,表结构如下: 2 管理后台根据不同业务设定不同的key和value,更新数据库 如key:ad1url value:a.png 如果需要更新页面图片,只需更新ad1url对应的value 3 小程序根据对应业务key获取对应的配置项,更新页面显示 技术栈后端接口服务:SpringBoot Mybatis MySql 管理后台:vue 前端:小程序 代码实现后端接口为了保证key的唯一性,key在数据库设置为unique属性,新增和更新功能通过以下sql语句实现,主要通过replace into实现配置项的唯一 @Insert("<script>" +
"REPLACE INTO `rental`.`t_config`(`key`,`value`) VALUES" +
"<foreach" +
" collection="list" item="item1" index="index" separator=",">" +
"(#{item1.key},#{item1.value})" +
"</foreach>" +
"</script>")
@Options(useGeneratedKeys = true,keyProperty = "configId",keyColumn = "configId")
复制代码
api设计 一开始想通过传如list数据给后端实现配置项的批量插入功能,发现后端数据一直接受不到,故而退而求其次,通过json字符串实现vue(网络库使用axios)调用后端接口 @ApiOperation(value = "新增或更新配置列表")
@RequestMapping(value = "/add_or_update_config_list",method = RequestMethod.POST,produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public ResponseBean<String> addOrUpdateConfigList(String list) {
long result = configService.batchInsertOrUpdate(JSONObject.parseArray(
list,Config.class));
......
}
复制代码
管理平台管理平台用vue开发,网络框架采用axios,列表数据通过json字符串传递给后端 let config1 = {key: "ad1Url",value: this.formData.ad1Url};
let config2 = {key: "ad2Url",51); font-weight: 700;">this.formData.ad2Url};
let config3 = {key: "adClick1",51); font-weight: 700;">this.formData.adClick1};
let config4 = {key: "adClick2",51); font-weight: 700;">this.formData.adClick2};
let configList = [config1,config2,config3,config4];
let result = await addConfigList({list: JSON.stringify(co
nfigList)});
......
复制代码
小程序小程序调用后端接口返回所有配置项,具体业务根据具体业务key获取配置项 getConfigList: function () {
var that = this;
wx.request({
url: constant.HOST + '/config/get_config_list',method: 'GET',header: {
'content-type': 'application/json'
},complete: function (res) {
},success: function (res) {
console.log("config list response:" + JSON.stringify(res));
that.setData({ configList: res.data.data});
}
});
},goAd1: function(){
wx.navigateTo({
url: '/pages/webview/webview?url=' + this.data.configList.adClick1
})
},复制代码
总结这个功能我在自己的小程序开发过程中设计的页面配置实现思路,主要遇到了两个小问题:1 如果保证key的唯一性 2 前后端批量数据的传输问题;希望能给遇到同样问题的小伙伴一些启示,如果有更好的方案,欢迎一起讨论。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |