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


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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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实现水仙花数的4个示例分享
2014/04/08 PHP
php制作动态随机验证码
2015/02/12 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP多进程简单实例小结
2019/11/09 PHP
jQuery中Dom的基本操作小结
2014/01/23 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
高中运动会入场词
2014/02/14 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
小学三年级学生评语
2014/04/22 职场文书
怎样写离婚协议书
2015/01/26 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
行政复议答复书
2015/07/01 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书