浅谈前后台交互

最近做一个电商商城的项目,和后台的交互成了这个项目的重点,也只是略懂皮毛,交互中的某一种方法,在此记录下。
和后台的交互首先是和后台的交流,还好我们的后台首先是个好脾气的几个年轻人,不管我们的交流出现什么问题,大家都可以和和气气的说话(论好脾气后台的重要性,嘿嘿)。
在万般讨论后,他们传过来的数据是这样的:


浅谈前后台交互_第1张图片
image.png

可以看出来传过来的json串是有点问题,出现这种情况,需要用到正则表达式进行替换解析

    var reg = /\\/g;
    data.replace(reg,"");
    data = data.replace("\"dataInfo\":\"","\"dataInfo\":");
    data = data.replace("\",\"state\":",",\"state\":");
    data = JSON.parse(data);

输出为


浅谈前后台交互_第2张图片
image.png

这样就解析成了对象,可以在ajax里正常操作。

这个项目我们前端小组用的是ES6里的一些方法,先把页面静态生成,再利用标签获取进行操作,最后就是几千行的代码,用几百行的js全部替换,话不多说,举一个模块的例子,直接上代码:
效果图:


浅谈前后台交互_第3张图片
image.png

(注:最上面右边部分我只写了一个红石榴)
首先


浅谈前后台交互_第4张图片
image.png
浅谈前后台交互_第5张图片
image.png

浅谈前后台交互_第6张图片
image.png

浅谈前后台交互_第7张图片
image.png

image.png

最后一个函数


浅谈前后台交互_第8张图片
image.png

(因为模块最上面一行没有看到数据,所以这里没有动态生成)

图片路径的方法


image.png

最前面部分是服务器地址。

以此方法,一个从后台调用数据的页面就完成了

你可能感兴趣的:(浅谈前后台交互)