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


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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
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
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
python比较两个列表大小的方法
2015/07/11 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python列表对象实现原理详解
2019/07/01 Python
Python实现TCP通信的示例代码
2019/09/09 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
房地产开盘策划方案
2014/02/10 职场文书
个人简历中自我评价
2014/02/11 职场文书
员工生日会策划方案
2014/06/14 职场文书
质量保证书
2015/01/17 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL