小程序页面动态配置实现方法


Posted in Javascript onFebruary 05, 2019

小程序可以根据管理后台配置动态更新展示内容,如实现下面新鲜事栏目图片的来源的可配置,点击跳转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", value: this.formData.ad2Url};
let config3 = {key: "adClick1", value: this.formData.adClick1};
let config4 = {key: "adClick2", value: 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 前后端批量数据的传输问题;希望能给遇到同样问题的小伙伴一些启示,如果有更好的方案,欢迎一起讨论

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
IE8 浏览器Cookie的处理
Jan 31 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 #Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 #Javascript
vue实现的树形结构加多选框示例
Feb 02 #Javascript
javascript中floor使用方法总结
Feb 02 #Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 #Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 #Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 #Javascript
You might like
德生1994机评
2021/03/02 无线电
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php防止sql注入简单分析
2015/03/18 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP常用的三种设计模式
2017/02/17 PHP
js获取单选按钮的数据
2006/11/27 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
python getopt 参数处理小示例
2009/06/09 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
python 模拟登录B站的示例代码
2020/12/15 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
小学生新学期寄语
2014/01/19 职场文书
食品安全检查制度
2014/02/03 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
高中运动会广播稿
2014/09/16 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
办公室卫生管理制度
2015/08/04 职场文书