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


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 图片等比例缩放代码
May 13 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
js代码实现轮播图
May 04 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
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网上调查系统
2006/10/09 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
php事务处理实例详解
2014/07/11 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
php中this关键字用法分析
2016/12/07 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
PHP实现简单的计算器
2020/08/28 PHP
给Function做的OOP扩展
2009/05/07 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
python批量提取word内信息
2015/08/09 Python
python处理xml文件的方法小结
2017/05/02 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
python 爬虫请求模块requests详解
2020/12/04 Python
python asyncio 协程库的使用
2021/01/21 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
先进班集体事迹材料
2014/12/25 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Java的Object类的九种方法
2022/04/13 Java/Android