小程序頁面動(dòng)態(tài)配置實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-09-19 10:16:02 來源：腳本之家閱讀：269 作者：worldant 欄目：web開發(fā)

小程序可以根據(jù)管理后臺(tái)配置動(dòng)態(tài)更新展示內(nèi)容，如實(shí)現(xiàn)下面新鮮事欄目圖片的來源的可配置，點(diǎn)擊跳轉(zhuǎn)url的可配置。

實(shí)現(xiàn)方案

1后端創(chuàng)建一個(gè)map結(jié)構(gòu)的數(shù)據(jù)表，表結(jié)構(gòu)如下：

小程序頁面動(dòng)態(tài)配置實(shí)現(xiàn)方法

2 管理后臺(tái)根據(jù)不同業(yè)務(wù)設(shè)定不同的key和value，更新數(shù)據(jù)庫

如key：ad1url value：a.png

如果需要更新頁面圖片，只需更新ad1url對(duì)應(yīng)的value

3 小程序根據(jù)對(duì)應(yīng)業(yè)務(wù)key獲取對(duì)應(yīng)的配置項(xiàng)，更新頁面顯示

技術(shù)棧

后端接口服務(wù)：SpringBoot Mybatis MySql

管理后臺(tái)：vue

前端：小程序

代碼實(shí)現(xiàn)

后端接口

為了保證key的唯一性，key在數(shù)據(jù)庫設(shè)置為unique屬性，新增和更新功能通過以下sql語句實(shí)現(xiàn)，主要通過replace into實(shí)現(xiàn)配置項(xiàng)的唯一

@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設(shè)計(jì)

一開始想通過傳如list數(shù)據(jù)給后端實(shí)現(xiàn)配置項(xiàng)的批量插入功能，發(fā)現(xiàn)后端數(shù)據(jù)一直接受不到，故而退而求其次，通過json字符串實(shí)現(xiàn)vue（網(wǎng)絡(luò)庫使用axios）調(diào)用后端接口

@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));
 ......
}

管理平臺(tái)

管理平臺(tái)用vue開發(fā)，網(wǎng)絡(luò)框架采用axios，列表數(shù)據(jù)通過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)});
......

小程序

小程序調(diào)用后端接口返回所有配置項(xiàng)，具體業(yè)務(wù)根據(jù)具體業(yè)務(wù)key獲取配置項(xiàng)

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
 })
},

總結(jié)

這個(gè)功能我在自己的小程序開發(fā)過程中設(shè)計(jì)的頁面配置實(shí)現(xiàn)思路，主要遇到了兩個(gè)小問題：1 如果保證key的唯一性 2 前后端批量數(shù)據(jù)的傳輸問題；希望能給遇到同樣問題的小伙伴一些啟示，如果有更好的方案，歡迎一起討論

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

小程序頁面動(dòng)態(tài)配置實(shí)現(xiàn)方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽