暑假学习10（7.23 周四）

最新推荐文章于 2024-09-27 09:34:18 发布

chunkui7515

最新推荐文章于 2024-09-27 09:34:18 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2411765/blog/483730

版权

今天我们的工程是在之前的agriculture-mvc工程的基础上，把对应的一些jsp的页面修改为html。当然，今天我们做的是将电脑上的jsp页面转换为html，这与手机上的jsp页面转换为html还是有区别的。在修改为电脑的cartList.html中，我们通过一个th:if 属性值来进行判断，在这个判断中如果我们要对后台传来的一个字符串判断时，是通过strings.isEmpty方法来判断的，当然还是一个el表达式，下面是判断session中有没有传入用户的名字，写法如下：

</div>

在上边这个代码中，我们可以看到这个它除了判读是否传入用户名字外，还有在没有传入用户名字时会跟着执行下边<meta>标签中的内容。这个标签的作用是重新刷新页面，content=0表示隔0秒进行刷新到后边的url，后边的url是一个客户登陆的初始化controller。在一个jsp中嵌套其他对应的jsp内容是通过<jsp:include>这个标签来实现对应内容的替换：

<jsp:include page="/WEB-INF/jsp/shop/userBar.jsp"></jsp:include>

但是，在对应的html页面中是通过th:replace属性值来对应的替换掉的，<div th:replace="shop/userBar :: page-user-bar"></div>，注意路径写法不一样，直接写的是html文件夹下的路径。接下来是th:each循环属性的添加，在这个中添加是这样的：<div th:each="cartsInfo,status:${cartList}">，在这个中后边的status可以是任意的名字，并不是固定的，它表示的cartList的状态,可以有count,size等属性（count是表示对应的当前项为第几项，size表示其中共有几项信息）。在jsp页面的传值回后台是用的是：modelAttribute="cartForm" ，但是对应的html中是th:object="${cartForm}"。

对于一个需要一个循环变量中的两个属性值一起显示的时候，jsp中相对比较容易，是直接把两个属性放一起的，

<p>规格：每${cartsInfo.unit}${goodsForm.specifications}</p>，但是在html页面中是通过一个拼接来实现的，写法如下：

在下边这个代码中，我们定义一个button按钮，但是并没有设置点击事件，而是通过一个链接的形式去执行点击的事件：

</a>

在这边，我们通过一个判断，判断一下购物栏内有没有商品，在有的时候我们可以显示结账按钮，但是这个

这里的话有个疑问就是我们的button是怎么提交的信息的？？

在alipayConfrim.html页面，这个页面时用户登录成功后的支付确认页面，在这个页面中，我们使用了jquery的脚本文件，先通过$(document)作为一个索引，在整个页面的书写过程中写入了脚本文件，但是只有在对应的按钮点击才执行，这里是通过按钮的id来找到按钮，并判断点击执行事件，具体代码如下：

$(document).ready(function(){

$("#submitAlipay").click(function(){

alipayForm.target = "newWindow";

var win = window.open("about:blank", "newWindow");

win.focus();

alipayForm.submit();

window.location.href="initGoods?type=liangshi";

});

</script>

$（"#submitAlipay"）是为了页面可以找到这个按钮，这是按钮的id属性值，通过点击执行fuction中的代码：alipayForm是提交的表单的name属性值，它的target属性值表示一个用于显示alipayForm的内容的新页面名称，然后通过window.open()打开一个新页面，url设置为空白页（("about:blank"）并把新页面的内容显示上去。然后通过focus方法是页面光标定在新页面上，同时表单提交，当前浏览器整个页面重新定位到首页：window.location.href="initGoods?type=liangshi";

在guestAlipayConfrim页面中，我们可以看到在jsp页面中有一个这样的标签：<form:errors path="*"></form:errors>，其作用是：对应的path这个类对象中错误的显示在页面上。

在payResult页面中，有一个支付成功后关闭页面的按钮，它的点击事件也是jquery，代码如下：

$(document).ready(function(){

$("#close").click(function(){

window.open('','_self','');

window.close();

});

</script>

最上边的一行表明这个是jquery脚本，它引用了shop/js/jquery.min.js中定义的内容。

window.open('','_self','');三个参数作用是：第一个是打开页面的url，第二个是在当前页面打开，第三个是新页面的具有的格式。

转载于:https://my.oschina.net/u/2411765/blog/483730