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


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 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
Vue页面骨架屏注入方法
May 13 Javascript
js实现录音上传功能
Nov 22 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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生成Gif图片验证码
2013/10/27 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python对列表排序的方法实例分析
2015/05/16 Python
python调用百度语音REST API
2018/08/30 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python中JWT用户认证的实现
2020/05/18 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
python函数超时自动退出的实操方法
2020/12/28 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
买房子个人收入证明
2014/01/16 职场文书
擅自离岗检讨书
2014/02/11 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
电子信息工程自荐信
2014/05/26 职场文书
医院科室评语
2015/01/04 职场文书
新课程改革心得体会
2016/01/22 职场文书
安全责任协议书范本
2016/03/23 职场文书
通知怎么写?
2019/04/17 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python