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


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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python实现识别相似图片小结
2016/02/22 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Python 实现简单的客户端认证
2020/07/29 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
工商管理专业职业生涯规划
2014/01/01 职场文书
个人校本研修方案
2014/05/26 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python