vue装修 模块 理念解析 - 前端笔记-vue 装修 是 在 后台界面人性化配置 页面 ， 在小程序端（或者任意地方）生成相对应的页面， { 'global' : { 'title' : '安德利商城', 'bgCo...

学习笔记

点滴记忆
回忆过往
   
首页>> web后端 >>vue装修 模块 理念解析 - 前端笔记
2021-11-30
分类： web后端

vue装修 模块 理念解析

文章作者：痴迷

vue 装修 是  在  后台界面人性化配置 页面 ， 在小程序端（或者任意地方）生成相对应的页面， { 'global' : { 'title' : '......

vue 装修 是  在  后台界面人性化配置 页面 ， 在小程序端（或者任意地方）生成相对应的页面，

05ed9db1710e4187a3e8b9ef899d2f208d165d2e58431d2587ffb1eef483bef3QzpcVXNlcnNcQWRtaW5cQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDQ2MjUwMjQyMF92MlxJbWFnZUZpbGVzXDE2MzgyNjE2MzkzMTVfQTRCNDA5QTItQkIwQi00YzRlLUFGODQtOTgwQTMzMDdBNTcyLnBuZw==.png
b965cf5d87a64d7f1882c0bc37d8f0ab6ba39da92eece3a388e5bc1ab9df5cbeQzpcVXNlcnNcQWRtaW5cQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDQ2MjUwMjQyMF92MlxJbWFnZUZpbGVzXDE2MzgyNjE2NTU3NjZfQzY3NzBERTAtNjM5Ny00YmJjLTlCQzYtNzExRDgxQjdBMjc0LnBuZw==.png5e5e1d1f120cbd04f6c74e9f23f9be481fdeaf31ecce78c0425ee21e279abad3QzpcVXNlcnNcQWRtaW5cQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDQ2MjUwMjQyMF92MlxJbWFnZUZpbGVzXDE2MzgyNjE2OTAxOTFfNjM2NTkzQzUtRTYyMy00YjFhLThBMjctNEM4RTJBQThCMDgwLnBuZw==.png

{ 'global' :
  { 'title'  : '安德利商城',  'bgColor'  : '#f2f2f2',  'topNavColor'  : '#ff852d',  'topNavbg'  : false,  'textNavColor'  : '#ffffff',  'topNavImg'  : '',  'moreLink'  :
    { 'title'  : '',  'wapUrl'  : '',  'curName'  : '',  'selectId'  : ''  } ,  'openBottomNav'  : true,  'navStyle'  : 1,  'textImgStyleLink'  : '1',  'textImgPosLink'  : 'left',  'mpCollect'  : false,  'popWindow'  :
    { 'imageUrl'  : 'https://img.zwztf.net/null/f2b085db3d9205d0bd459806a6064bed.png',  'count'  : 1,  'link'  :
      { 'title'  : '蝴蝶不锈钢哨子zfcg',  'wapUrl'  : '/pages/goods/detail/detail?goodsId=10',  'curName'  : 'ALL_GOODS',  'selectId'  : '10'  } ,  'imgWidth'  : '730',  'imgHeight'  : '882'  } ,  'bgUrl'  : '',  'type'  : 'PAGE',  'pageTitle'  : '页面设置',  'style'  : 3,  'styleType'  : 3,  'name'  : '页面设置'  } ,  'value' :
  [
    { 'style': '3',  'styleName': '风格一',  'backgroundColor': '#ff852d',  'textColor': '#ffffff',  'defaultTextColor': '#333333',  'addon_name': 'store',  'type': 'STORE_CHANGE',  'name': '门店展示',  'controller': 'StoreShow',  'is_delete': '0',  'marginLeftRight': 0  },  { 'selectedTemplate': 'carousel-posters',  'imageClearance': 0,  'imageRadius': 'fillet',  'carouselChangeStyle': 'circle',  'marginTop': 10,  'padding': 0,  'height': 0,  'list': [
        { 'imageUrl': 'https://img.zwztf.net/10000005/c2ad628fd9161f9a353b08c7bc4cab05.jpg',  'title': '',  'link': { 'title': '伞塔京酱肉丝50g',  'wapUrl': '/pages/goods/detail/detail?skuCode=1000',  'curName': 'ALL_GOODS',  'selectId': '1372',  'appid': '',  'page': '',  'mobile': ''  },  'imgWidth': '750',  'imgHeight': '350',  'id': '13tmpm4iaw740'  },  { 'link': { 'title': '伞塔牛肉面调料240g',  'wapUrl': '/pages/goods/detail/detail?skuCode=1002',  'curName': 'ALL_GOODS',  'selectId': '1374',  'appid': '',  'page': '',  'mobile': '',  'cardTitle': '',  'cardWapUrl': ''  },  'imageUrl': 'https://img.zwztf.net/10000005/1888539227e5a45876e2438f8715f41e.jpg',  'imgWidth': '750',  'imgHeight': '350'  },  { 'link': { 'title': '罗贯中老陈醋2.2L',  'wapUrl': '/pages/goods/detail/detail?skuCode=1003',  'curName': 'ALL_GOODS',  'selectId': '1375',  'appid': '',  'page': '',  'mobile': ''  },  'imageUrl': 'https://img.zwztf.net/10000005/d26bb3522352e1ba03ffc86ea0b4de69.jpg',  'imgWidth': '750',  'imgHeight': '350'  },  { 'link': { 'title': '金钱牌香辣豆豉鱼155G',  'wapUrl': '/pages/goods/detail/detail?skuCode=100492',  'curName': 'ALL_GOODS',  'selectId': '1377',  'appid': '',  'page': '',  'mobile': ''  },  'imageUrl': 'https://img.zwztf.net/10000005/eee4862453e6aae1f6052e4343082d1c.jpg',  'imgWidth': '750',  'imgHeight': '350'  }
      ],  'addon_name': '',  'type': 'IMAGE_ADS',  'name': '图片广告',  'controller': 'ImageAds',  'is_delete': '0',  'marginLeftRight': 12  },  { 'textColor': '#303133',  'defaultTextColor': '#666666',  'navRadius': 'fillet',  'backgroundColor': '#ffffff',  'selectedTemplate': 'imageNavigation',  'showType': '5',  'scrollSetting': 'fixed',  'padding': 20,  'marginTop': 10,  'list': [
        { 'imageUrl': 'http://img.zwztf.net/null/39ac120e4c72dd076927b12cab721521.png',  'title': '肉禽蛋品',  'link': { 'title': '新鲜水果',  'wapUrl': '/pages/goods/category/category?categoryCode=01',  'curName': 'GOODS_CATEGORY',  'selectId': '1009',  'appid': '',  'page': '',  'mobile': ''  },  'imgWidth': '70',  'imgHeight': '70',  'id': '1seirqy88b5s0'  },  { 'imageUrl': 'http://img.zwztf.net/null/36e815a489c63937ca6a8483f01764c8.png',  'title': '日用百货',  'link': { 'title': '新鲜蔬菜',  'wapUrl': '/pages/goods/category/category?categoryCode=12',  'curName': 'GOODS_CATEGORY',  'selectId': '1022',  'appid': '',  'page': '',  'mobile': ''  },  'imgWidth': '70',  'imgHeight': '70',  'id': 'nczxaq3s8w00'  },  { 'imageUrl': 'http://img.zwztf.net/null/164b8aca406a3a9b3c767dcfca95b30f.png',  'title': '速食冻品',  'link': { 'title': '肉类禽蛋',  'wapUrl': '/pages/goods/category/category?categoryCode=02',  'curName': 'GOODS_CATEGORY',  'selectId': '1030',  'appid': '',  'page': '',  'mobile': ''  },  'imgWidth': '70',  'imgHeight': '70',  'id': '18znxr8v9wsg0'  },  { 'imageUrl': 'http://img.zwztf.net/null/d072d1aaa34f5c31079864f3eb11122b.png',  'title': '时令水果',  'link': { 'title': '熟食冷冻',  'wapUrl': '/pages/goods/category/category?categoryCode=04',  'curName': 'GOODS_CATEGORY',  'selectId': '1046',  'appid': '',  'page': '',  'mobile': ''  },  'imgWidth': '70',  'imgHeight': '70',  'id': '167jd86jrev40'  },  { 'imageUrl': 'http://img.zwztf.net/null/dbe9c3899cf1dffec81fdff1ff30a19a.png',  'title': '新鲜蔬菜',  'link': { 'title': '纸品清洁',  'wapUrl': '/pages/goods/category/category?categoryCode=05',  'curName': 'GOODS_CATEGORY',  'selectId': '1057',  'appid': '',  'page': '',  'mobile': ''  },  'id': '11r96h337flc0',  'imgWidth': '70',  'imgHeight': '70'  },  { 'imageUrl': 'http://img.zwztf.net/null/36d3341f93ea25a90e8560718b245720.png',  'title': '休闲零食',  'link': { 'title': '个护美妆',  'wapUrl': '/pages/goods/category/category?categoryCode=14',  'curName': 'GOODS_CATEGORY',  'selectId': '1143',  'appid': '',  'page': '',  'mobile': ''  },  'id': 'z9bz8i5da5s0',  'imgWidth': '70',  'imgHeight': '70'  },  { 'imageUrl': 'http://img.zwztf.net/null/c12d40923758e680301a6caf050f6b2c.png',  'title': '乳品烘焙',  'link': { 'title': '海鲜水产',  'wapUrl': '/pages/goods/category/category?categoryCode=03',  'curName': 'GOODS_CATEGORY',  'selectId': '1039',  'appid': '',  'page': '',  'mobile': ''  },  'id': 'prtykcn9k5c0',  'imgWidth': '70',  'imgHeight': '70'  },  { 'imageUrl': 'http://img.zwztf.net/null/d33dafca757602c62a76e63b23c40603.png',  'title': '海鲜水产',  'link': { 'title': '海鲜水产',  'wapUrl': '/pages/goods/category/category?categoryCode=03',  'curName': 'GOODS_CATEGORY',  'selectId': '1039',  'appid': '',  'page': '',  'mobile': ''  },  'id': '10sbavna2ork0',  'imgWidth': '70',  'imgHeight': '70'  },  { 'imageUrl': 'http://img.zwztf.net/null/535b77d6e492c0cb783c716f1c42e6b2.png',  'title': '酒饮冲调',  'link': { 'title': '纸品清洁',  'wapUrl': '/pages/goods/category/category?categoryCode=05',  'curName': 'GOODS_CATEGORY',  'selectId': '1057',  'appid': '',  'page': '',  'mobile': ''  },  'id': '59olcqdmfwc0',  'imgWidth': '70',  'imgHeight': '70'  },  { 'imageUrl': 'http://img.zwztf.net/null/b7fe14d87ead5febefe8040d70e9debb.png',  'title': '粮油调味',  'link': { 'title': '纸品清洁',  'wapUrl': '/pages/goods/category/category?categoryCode=05',  'curName': 'GOODS_CATEGORY',  'selectId': '1057',  'appid': '',  'page': '',  'mobile': ''  },  'id': '1chv5y8lsqxs0',  'imgWidth': '70',  'imgHeight': '70'  }
      ],  'addon_name': '',  'type': 'GRAPHIC_NAV',  'name': '图文导航',  'controller': 'GraphicNav',  'is_delete': '0',  'marginLeftRight': 12  },  { 'selectedTemplate': 'single-graph',  'imageClearance': 0,  'imageRadius': 'right-angle',  'carouselChangeStyle': 'circle',  'marginTop': 0,  'padding': 0,  'height': 0,  'list': [
        { 'imageUrl': 'https://img.zwztf.net/10000005/068598ce795f0f81a1b95fb040b87dc3.png',  'title': '',  'link': { 'title': '支付宝-领券中心',  'wapUrl': '/promotionpages/alipay-coupon/list/list',  'curName': 'MALL_LINK',  'selectId': '83',  'appid': '',  'page': '',  'mobile': '',  'cardTitle': '',  'cardWapUrl': ''  },  'imgWidth': '690',  'imgHeight': '322'  }
      ],  'marginLeftRight': 12,  'isNeedLogin': 0,  'type': 'IMAGE_ADS',  'name': '图片广告'  },  { 'marginTop': 10,  'isShowAnchorInfo': '1',  'isShowLiveGood': '1',  'addon_name': 'live',  'type': 'LIVE_INFO',  'name': '直播',  'controller': 'LiveInfo',  'is_delete': '0',  'marginLeftRight': 12  },  { 'sources': 'default',  'style': '4',  'couponCount': '6',  'styleName': '风格四',  'backgroundColor': '',  'marginTop': 10,  'status': 1,  'couponIds': [],  'addon_name': 'coupon',  'type': 'COUPON',  'name': '优惠券',  'controller': 'Coupon',  'is_delete': '0'  },  { 'height': 5,  'backgroundColor': '',  'marginLeftRight': 0,  'type': 'HORZ_BLANK',  'name': '辅助空白'  },  { 'selectedTemplate': 'row2-lt-of2-rt',  'backgroundColor': '',  'list': [
        { 'imageUrl': 'https://img.zwztf.net/null/879b6b4ba48961454e622ae486d8002e.png',  'link': { 'title': '伞塔牛肉面调料240g',  'wapUrl': '/pages/goods/detail/detail?skuCode=1002',  'curName': 'ALL_GOODS',  'selectId': '1374',  'appid': '',  'page': '',  'mobile': ''  }
        },  { 'imageUrl': 'https://img.zwztf.net/null/46f6243fd586cb246e2b42e2d588bfff.png',  'link': { 'title': '纸品清洁',  'wapUrl': '/pages/goods/category/category?categoryCode=05',  'curName': 'GOODS_CATEGORY',  'selectId': '1057',  'appid': '',  'page': '',  'mobile': ''  }
        },  { 'link': { 'title': '康师傅辣卤牛肉桶面114g/桶',  'wapUrl': '/pages/goods/detail/detail?skuCode=100418',  'curName': 'ALL_GOODS',  'selectId': '1373',  'appid': '',  'page': '',  'mobile': ''  },  'imageUrl': 'https://img.zwztf.net/null/71356a8d76c2ed022c252e3564b75cd2.png'  },  { 'link': { 'title': '康师傅辣卤牛肉五连袋面',  'wapUrl': '/pages/goods/detail/detail?skuCode=100420',  'curName': 'ALL_GOODS',  'selectId': '1376',  'appid': '',  'page': '',  'mobile': ''  },  'imageUrl': 'https://img.zwztf.net/null/7a81c1ea244c7ce1e599ef086d4ad4b1.png'  }
      ],  'selectedRubikCubeArray': [],  'diyHtml': '',  'customRubikCube': 4,  'heightArray': [ '74.25px',  '59px',  '48.83px',  '41.56px'  ],  'imageGap': 4,  'type': 'RUBIK_CUBE',  'name': '魔方',  'marginLeftRight': 12  },  { 'sources': 'default',  'style': 1,  'couponCount': '6',  'styleName': '风格一',  'backgroundColor': '',  'marginTop': 0,  'status': 1,  'couponIds': [],  'type': 'COUPON',  'name': '优惠券',  'moreLink': {}
    },  { 'title': '多商品组1',  'selectColor': '#FF4544',  'nsSelectColor': '#303133',  'list': [
        { 'goodsStyle': 1,  'title': '热卖',  'desc': '热卖推荐',  'link': { 'title': '',  'wapUrl': '',  'curName': '',  'selectId': ''  },  'sources': 'diy',  'categoryId': '',  'categoryCode': '1',  'categoryName': '',  'goodsId': [],  'skuCodes': [ '1000',  '100418',  '1002',  '1003',  '100420',  '100492',  '100650'  ]
        },  { 'categoryId': '',  'categoryName': '',  'desc': '为你优选',  'goodsId': [],  'goodsStyle': 1,  'link': {},  'sources': 'diy',  'title': '精品',  'categoryCode': '',  'skuCodes': [ '101607',  '104536',  '1713',  '1430',  '1038',  '53303',  '75067',  '20796',  '74649',  '101608',  '1000',  '100418',  '1002'  ]
        },  { 'categoryId': '',  'categoryName': '',  'desc': '超值好货',  'goodsId': [],  'goodsStyle': 1,  'link': {},  'sources': 'diy',  'title': '特卖',  'categoryCode': '',  'skuCodes': [ '101818',  '104537',  '1431',  '1039',  '1719',  '75068',  '53304',  '74650',  '20797',  '52645',  '1003',  '100492',  '100420',  '100650'  ]
        },  { 'categoryId': '',  'categoryName': '',  'desc': '当季热销',  'goodsId': [],  'goodsStyle': 1,  'link': {},  'sources': 'diy',  'title': '爆款',  'categoryCode': '',  'skuCodes': [ '20803',  '1433',  '52648',  '101820',  '104539',  '75070',  '1072',  '53306',  '1723',  '101611',  '100492',  '100650',  '100420'  ]
        }
      ],  'goodsCount': '6',  'style': 1,  'backgroundColor': '',  'marginTop': 10,  'marginLeftRight': 12,  'type': 'MANY_GOODS_LIST',  'name': '多商品组'  },  { 'sources': 'group',  'categoryId': 0,  'categoryCode': '',  'categoryName': '请选择',  'goodsCount': 6,  'goodsId': [],  'skuCodes': [],  'groupTitle': '多商品组1',  'style': 2,  'backgroundColor': '',  'marginTop': 10,  'paddingLeftRight': 0,  'isShowCart': 0,  'cartStyle': 1,  'isShowGoodName': 1,  'isShowMarketPrice': 1,  'isShowGoodSaleNum': 1,  'isShowGoodSubTitle': 0,  'goodsTag': 'default',  'tagImg': { 'imageUrl': ''  },  'marginLeftRight': 12,  'type': 'GOODS_LIST',  'name': '商品列表'  }
  ]
}
总体来说  就是  后台端  和 小程序端  各一套代码  通过 json来传输

后台端：分 组件模块，展示模块，模块设置。等等三个功能， 通过vue.draggable 做 拖拽
传输层：通过规定好的json 传输
小程序：通过 自定义组件多种组件，通过通用组件渲染对应组件  type类型切换










×

感谢您的支持，我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

打赏作者
AD：【站长推荐】人生如同一面镜子，假如你对它微笑，它也回报你微笑，我的人生信条还是不断的改变现状，求真务实，明天更美好，人生重要的问题，不在于人拥有什么，而在于怎样使用它，人与人关系上最宝贵的是真诚，善于理解便是快乐人生。

版权所有，转载注意明处：前端笔记 » vue装修 模块 理念解析

QQ

admin

用心去记录前端旅途上的点点滴滴，用每一滴汗水换回所有付出所得的喜悦！

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论（0）

分类

日历

热门标签

react-native (2) node (2) vue (9) mysql (13) git (0) react (-1) js (0) axios (0) webpack (-1) weex (-1) 微信小程序 (-1) uni-app (4) 破解 (-1) php (16) nginx (1) redis (0) centos (0) ios (-1) 即时通讯 (-1) websocket (0) color-ui (-1) 重构 (-1) nide (-1) 爬虫 (3) 跨域 (-1) seo (-1) 预渲染 (-1) ts (-1) selenium-webdriver (-1) selenium (0) 自动化工具 (0) 可视区渲染 (-1) vue-virtual-scroll-list (-1) 长列表 (-1) python (17) requests (-1) 数据提取 (-1) 自动化测试 (-1) 自动化 (-1) html (-1) css (-1) echarts (-1) 正则表达式 (-1) jq (-1) jquery (-1) axjx (-1) mongoDB (-1) 数据库 (-1) ajax (-1) 小程序 (-1) linxu (-1) linux (-1) token (-1) jwt (-1) express (-1) 多进程 (-1) 多线程 (-1) socket (-1) 通讯 (-1) kali (-1) deepin (-1) pymysql (-1) 主从 (-1) 集群 (-1) 虚拟环境 (-1) django (5) Ｃ (-1) fyne (-1) go (0) GUI (-1)

友情链接