文章目录
一、后台管理1、根据点击的 div 展示相应页面2、解决 height: 100% 不起作用问题3、 th:onclick 引用的函数参数是 model值 二、商家管理1、th:each="obj,itemStat:${objList}"2、使用 min-height3、获取 input 的 text 值4、ajax 中 async: false5、让 input 填满 td 三、商品详情页四、加入购物车功能1、解决 Long 在 JS 中精度丢失问题2、使用 Vue 实例3、使用 v-bind 绑定数据一、后台管理
采用左边栏多级菜单的形式,前端页面如下:
1、根据点击的 div 展示相应页面
根据点击不同的选项,需要在右侧页面中显示不同的内容:
<div class="content" style="width: 85%;height:100%;float:right"><div style="background-color:black;display: none;height: 100%;color: #2b2b2b" onclick="cont(this)">我是A的内容</div><div style="background-color: blue;display: none;color: snow" onclick="cont(this)" >我是B的内容</div><div style="background-color: orange;display: none" onclick="cont(this)" >我是C的内容</div><div style="background-color: green;display: none" onclick="cont(this)" >我是D的内容</div></div><script type="text/javascript">//点击菜单执行函数function tab(param) {var sp_an=$(param).attr('list');//获取被点击菜单的list属性值(0,1,2,3)$('.content').children('div').eq(sp_an).click();//点击菜单后,对应的内容被点击,从而实现展示//使用click()方法模拟点击事件,触发下面的cont函数}//这个函数的触发是通过点击菜单的时候触发的function cont(param){$(param).show();//被选中的内容显示$(param).siblings().hide();//没有被选中的内容隐藏}</script>
2、解决 height: 100% 不起作用问题
注意到左边栏的高度并没有充满页面,需要调整一下:
只将此处的 height 改成 100%,是不会奏效的,因为 Web 浏览器在计算有效宽度时会考虑浏览器窗口的打开度。如果不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围 (导致滚动条出现)。或者给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。
因为页面并没有缺省的高度值,所以,当让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;。当要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined 的结果。也就是一个 null 值,浏览器不会对这个值有任何的反应。
也就是说,现在的问题在于,iframe 的父元素 body、body 的父元素 html 都没有设定固定高度,于是子元素的高度 height: 100% 也不会起作用。
如果想让一个元素的百分比高度 height: 100% ;起作用,需要给这个元素的所有父元素的高度设定一个有效值:
这时再看效果:
还需要把右边的页面整成靠右,占 85% 的效果(因为左边占 15% 了),但是如果设置成 85% ,有一部分是重叠的,经过调整,83.5% 比较合适:
页面效果:
至此,页面布局和展示没问题了,后续需要设计管理的具体功能实现。
后端提供展示未入驻商家列表的方法。
先在 com.changgou.user.feign 包里提供 :
整成表格的形式:
接下来需要一些后端的逻辑实现,逻辑是相似的,在这里就不一一列举了。
比如,商家管理,展示未入驻商家列表,对应 http://localhost:18087/admin/unCenter 路径,是在 user 微服务中的,而要在 web-admin 工程中调用,就需要使用 feign,先提供个 feign:
@FeignClient(name = "user")@RequestMapping("/admin")public interface AdminFeign {@GetMapping("/unCenter")public Result unCenterList();}
注意!!! 这里的FeignClient 里的 name 属性值不能随便写,它是用来指定 FeignClient 的名称,如果项目使用了 Ribbon,name 属性会作为微服务的名称,用于服务发现。也就是说,对应的路径是在哪个微服务里,就写哪个微服务的名称。 否则报错 :
flix.client.ClientException: Load balancer does not have available server for client: admin at flix.loadbalancer.LoadBalancerContext.getServerFromLoadBalancer(LoadBalancerContext.java:483) ~[ribbon-loadbalancer-2.3.0.jar:2.3.0]
运行结果:
3、 th:onclick 引用的函数参数是 model值
这里主要要注意的是,从后端给 model 赋值后,在表格里获取 model 的值,并用 th:each 进行渲染时,按钮也需要遍历,而不是只写成 button:
<button th:onclick="permitCenter([[${unCenter.storeName}]]);" style="width: 50%;" >允许入驻</button>
permitCenter 方法中还有 ajax 代码:
<script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript">function permitCenter(storeName){$.ajax({url: "http://localhost:18087/admin/permitCenter",type: "GET",dataType: "JSON",contentType: "application/json;charset=UTF-8",data: {storeName:storeName},success: function (result) {alert("商家入驻成功!");},error: function (result) {console.log(result);alert("商家入驻失败!");},cache: false})}</script>
注意 thymeleaf 的 th:onclick 引用的函数参数的入参是 model 值时的写法。
如果传入多个参数,需要使用逗号隔开,并且,可以进行拼接,比如:
th:onclick="update([[${brands.name}]],[[${brands.id}]],'cell'+[[${brandState.index}]])"
二、商家管理
1、th:each=“obj,itemStat:${objList}”
同样的,修改商品品牌数据时,需要根据所在的 tr 获取修改的值,也是要循环遍历的,然后进行拼接:
注意到 thymeleaf 中使用th:each
迭代循环对象集合时,还可以获取对象的状态,而且th:id
是可以拼接的。
语法格式:
th:each="obj,itemStat:${objList}
itemStat 称作状态变量,属性有:
index:当前迭代对象的index(从0开始计算)count: 当前迭代对象的index(从1开始计算)size:被迭代对象的大小current:当前迭代变量even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)first:布尔值,当前循环是否是第一个last:布尔值,当前循环是否是最后一个
2、使用 min-height
当从后端查询出的数据很多,需要滚动条时,需要将 height 改为 min-height ,才能进行数据填充,否则只有一个不滚动页面的容量:
3、获取 input 的 text 值
<td th:text="${brands.image}" th:id="'cell'+${brandState.index}"></td>
function update(name,id,imageid){var image=document.getElementById(imageid).innerText;
通过表格中的 td 的 id,获取 td 的值,需要用innerText。
4、ajax 中 async: false
注意,当 js 的方法里不仅有 ajax,还有其他要执行的代码时,需要在 ajax 中添加async: false
,将请求设置为同步请求,这样才会按照代码的顺序执行。
5、让 input 填满 td
正确写法:
<td><input id="brandtrnameid" style="width: 90%"></input></td>
错误写法:
<td><input id="brandtrnameid" width="100%"></td>
三、商品详情页
点击商品后跳转至商品详情页的思路,是点击商品图片后,调用 http://localhost:18088/page/createHtml/1148477874278244352 方法,在 changgou-web-item\src\main\resources\static 路径下生成 Html。
同样地,需要解决跨域问题,否则在 GET 方法之前会使用 OPTIONS,而且它还会自己追加 Query String Parameters:
403 状态码是因为跨域,在调用的 createHtml 方法上加 @CrossOrigin 就好啦:
四、加入购物车功能
在 item.html 中,是创建了 Vue 实例,实现的根据 spec 切换 name、price,接下来需要把商品加入购物车,需要 skuid。
1、解决 Long 在 JS 中精度丢失问题
有一个问题,数据库 sku 表中 id 是 bigint 类型,Java 对象中 id 是 long 类型,先试图在网页上渲染 id 值,就会发现,long 类型在 JS 中,发生了精度丢失,比如 : 1148477874387296256 会显示成 1148477874387296300;1148477874399879168 会显示成 1148477874399879200。要解决这个问题,可以使用@JsonSerialize注解进行序列化处理。
这样,获取到的 skuid 的精度不会丢失。
(同理,在 search 服务中,用户在商品详情列表中,点击某个商品时,需要获取 spuid,进而生成对应的 html, Skuinfo 里 的 spuid 也是需要序列化处理的。
Long 类型在数据库、ES 索引库的存储中都是没问题的,但是涉及到 js,比如说传递参数、在页面弹窗显示,就会出现精度损失的问题,一定要引起注意!!!。
2、使用 Vue 实例
复习一下 Vue 实例:
<script th:inline="javascript">var item = new Vue({el: '#itemArray',data: {skuList : [[${skuList}]],sku: {},spec:{}},methods:{......})</script>
可以看到,创建了一个 vue 对象,并赋值给 el,绑定了 id 为 itemArray 的 div 标签,相当于 item 绑定了 id为 itemArray 的标签对象,可以使用此对象操作标签。然后在 data 中,创建了 key 为 skuList、sku 的数据对应的值。
在 div 标签中,使用{{}}
大括号,里面写 key 名称,就可以完成相应的渲染。而如果想获取 data 里面的数据的值(而不是渲染),比如当用户点击按钮时,获取此时 vue 实例中的 skuid,可以使用 v-bind 。
3、使用 v-bind 绑定数据
先导入 vue.js 的依赖,可以使用网址,也可以下到自己的项目中来。
/npm/vue/dist/vue.js
<script src="../static/js/vue.js"></script>
使用 v-bind 绑定数据,绑定 button 的 value 为 sku.id,直接引用 sku 对象即可,不需要什么符号。
然后试着在 div 外部获取 button 的值:
$(function () {$('#cart').on('click', function () {var skuid=$('#cart').val();alert(skuid);
运行后成功获取到 skuid 值。