Functional description

The small program can dynamically update the display content according to the management background configuration, such as the realization of the following new column picture source configurable, click the redirect URL configurable.

Implementation scheme

1 Create a map table on the backend. The table structure is as follows:

For example, key: ad1URL value: a.png

If you need to update the page image, just update the value corresponding to the AD1URL

3 Applet obtains configuration items based on the corresponding service key and updates the page display

Technology stack

Backend interface service: SpringBoot Mybatis MySql

Management background: VUE

Front end: applets

Code implementation

The backend interface

To ensure the uniqueness of the key, the key is set as the unique attribute in the database. The new and update functions are implemented by using the following SQL statement, mainly using replace into to achieve the uniqueness of the configuration item

@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")
Copy the code

API design

At first, I tried to implement the batch insertion function of configuration items by passing the list data to the back end, but found that the back end could not accept the data. Therefore, I adopted the json string to implement VUE (the network library uses AXIOS) to call the back end interface

@ApiOperation(value = "Add or update configuration list")
@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)); . }Copy the code

Management platform

The management platform is developed with VUE, the network framework is axiOS, and the list data is passed to the back end through JSON string

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];
letresult = await addConfigList({list: JSON.stringify(co nfigList)}); .Copy the code

Small program

The applet invokes the back-end interface to return all configuration items and obtains configuration items based on specific service keys

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

Copy the code

conclusion

This function I design in the process of developing their own small program page configuration implementation ideas, mainly encountered two small problems: 1 if to ensure the uniqueness of key 2 before and after the bulk data transmission problems; I hope it can give some inspiration to my friends who encounter the same problem. If you have a better solution, welcome to discuss it together