解决s:link的view功能为什么没有起到刷新页面的效果

本文介绍了一种在JSF框架下实现删除操作后页面实时刷新的方法。通过在SiteList.page.xml文件中添加导航配置,使得删除操作后能立即跳转并刷新到指定页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<s:link view="/siteadmin/SiteList.xhtml"
                    value="Delete"
                    id="siteDelete"
                    propagation="end"
                    action="#{siteHome.remove}" onclick="JavaScript:if(confirm('Are your sure to delete it?')){return true;}else{return false;}">
                 <f:param name="siteId" 
                        value="#{_site.id}"/>
</s:link>

    上面是在页面SiteList.xhtml中的一个delete的链接,也就是上一篇中要点击的那个delete的链接。它点击完成后是删除成功了,但是页面没有及时的看到效果即这条记录还存在在页面中。

     其实这里的view="/siteadmin/SiteList.xhtml"是起到了作用,它是跳到了SiteList.xhtml这个页面,就是没有刷新而已。解决的办法:

    

在对应的SiteList.page.xml中写入:
<navigation from-action="#{siteHome.remove}">
	   <redirect view-id="/siteadmin/SiteList.xhtml">
	   </redirect>
</navigation> 

这样就可以解决及时刷新的问题了。 

界面product.vue代码如下:<template> <view class="container"> <view class="top"> <!-- 头部信息 --> <view class="top-info"> <view class="header-left"> <view class="tea">奶茶点餐></view> <view class="content">距离您100m</view> </view> <image src="../../static/logo1.png" mode="widthFix" class="header-logo"></image> </view> <!-- 新增搜索框 --> <view class="search-box"> <image src="../../static/search.png" mode="aspectFit" class="search-icon"></image> <input type="text" placeholder="搜索奶茶、小吃" class="search-input" /> </view> <!-- 新增热销背景图 --> <view class="hot-bg"> <image src="../../static/pb3.png" mode="widthFix" class="hot-bg-image"></image> </view> </view> <!-- 轮播图区域 --> <view class="swiper-container"> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="h100"> <swiper-item v-for="item in swiperList" :key="item.id"> <view class="swiper-item"> <image :src="item.iurl" mode="widthFix" class="swiper-image"></image> </view> </swiper-item> </swiper> </view> <!-- 分类及商品列表区域 --> <view class="list-container"> <view class="left-list"> <view v-for="(item, i) in typeList" :key="i" :class="i === index ? 'current category-item-active' : 'category-item'" @click="selectTab(i, item.id)" > <image :src="item.timageurl" mode="widthFix" class="category-icon"></image> <view class="category-name">{{ item.typename }}</view> </view> </view> <view class="right-list"> <view v-for="item in productList" :key="item.id" class="product-item"> <image class="product-photo" :src="item.pimageurl" mode="widthFix"></image> <view class="product-info"> <view class="title">{{ item.pname }}</view> <view class="number">{{ item.tintroduce }}</view> <view class="price-container"> <view class="price"> ¥<text class="main-price">{{ item.tprice }}</text>起 </view> <image class="cart-icon" src="../../static/cart.png" mode="widthFix" @click="addCart(item)" ></image> </view> </view> </view> </view> </view> </view> </template> <script> import { queryImageByType, getTypes, queryProductByType, addCart } from "@/api/index"; export default { data() { return { //当前索引值 index: 0, //定义图片数组 swiperList: [], typeList: [], productList: [] } }, onLoad() { this.getSwiperImageList() //函数调用 this.getTypeList() this.queryProductByType(1) }, methods: { // 轮播图获取接口 getSwiperImageList() { queryImageByType(3).then(res => { console.log(res.data) this.swiperList = res.data }) }, //分类获取接口 getTypeList() { getTypes().then(res => { this.typeList = res.data }) }, //切换不同的分类 selectTab(currentIndex, id) { this.index = currentIndex this.queryProductByType(id) }, //切换 queryProductByType(productId) { queryProductByType(productId).then(res => { this.productList = res.data }) }, addCart(product) { console.log("购物车") console.log(product) // http://47.96.80.123:8000/cart/addCart?pid=3&number=1&token=63e3423e4185eeb0d9f19d32479bd785&tprice=20 addCart(product.id + "&tprice=" + product.tprice).then(res => { console.log(res) if (res.code === 200) { uni.showToast({ title: "添加成功", duration: 2000, }) } else { uni.showToast({ title: res.data.msg, duration: 2000, icon: "error" }) } }) } } } </script> <style> /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFang SC", sans-serif; } /* 顶部区域优化 */ .top { padding: 30rpx 25rpx; background: #ffffff; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06); } .top-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .header-left { display: flex; flex-direction: column; gap: 8rpx; } .tea { font-size: 36rpx; font-weight: 600; color: #ff6600; } .content { font-size: 24rpx; color: #999999; } .header-logo { width: 180rpx; height: 120rpx; } /* 搜索框优化 */ .search-box { display: flex; align-items: center; padding: 0 30rpx; height: 80rpx; background: #f0f0f0; border-radius: 40rpx; } .search-icon { width: 40rpx; height: 40rpx; color: #666666; } .search-input { flex: 1; margin-left: 20rpx; font-size: 28rpx; color: #333333; background: transparent; border: none; } /* 热销背景图优化 */ .hot-bg { height: 160rpx; margin-top: 25rpx; border-radius: 20rpx; overflow: hidden; } .hot-bg-image { width: 100%; height: 100%; object-fit: cover; } /* 轮播图区域优化 */ .swiper-container { margin: 30rpx 25rpx; border-radius: 20rpx; overflow: hidden; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08); } .swiper-image { width: 100%; height: 100%; object-fit: cover; } /* 分类列表优化 */ .list-container { display: flex; margin: 0 25rpx 30rpx; gap: 20rpx; } .left-list { width: 180rpx; background: #f8f8f8; border-radius: 15rpx; padding: 15rpx; } .category-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25rpx 15rpx; border-radius: 10rpx; margin-bottom: 20rpx; transition: all 0.3s ease; } .category-item-active { background: #ffffff; box-shadow: 0 4rpx 12rpx rgba(255, 102, 0, 0.1); } .category-icon { width: 80rpx; height: 80rpx; margin-bottom: 10rpx; } .category-name { font-size: 28rpx; color: #333333; } /* 商品列表优化 */ .right-list { flex: 1; } .product-item { display: flex; align-items: flex-start; gap: 25rpx; padding: 25rpx 0; border-bottom: 1rpx solid #f0f0f0; } .product-photo { width: 220rpx; height: 220rpx; border-radius: 15rpx; object-fit: cover; } .product-info { flex: 1; } .title { font-size: 32rpx; font-weight: 500; color: #333333; margin-bottom: 10rpx; } .number { font-size: 24rpx; color: #666666; line-height: 1.6; margin-bottom: 15rpx; } .price-container { display: flex; justify-content: space-between; align-items: center; width: 100%; } .price { font-size: 30rpx; color: #ff6600; font-weight: 600; } .main-price { font-size: 40rpx; } .cart-icon { width: 60rpx; height: 60rpx; color: #ff6600; } </style>界面myCart.vue代码如下:<template> <view class="container"> <view class="top"> <!-- 头部信息 --> <view class="top-info"> <view class="header-left"> <view class="tea">奶茶点餐></view> <view class="info">距离您100m</view> </view> <image src="../../static/logo1.png" mode="widthFix" class="header-logo"></image> </view> <!-- 搜索框 --> <view class="search-box"> <image src="../../static/search.png" mode="aspectFit" class="search-icon"></image> <input type="text" placeholder="搜索购物车商品" class="search-input" /> </view> <!-- 热销背景图 --> <view class="hot-bg"> <image src="../../static/pb3.png" mode="widthFix" class="hot-bg-image"></image> </view> </view> <!-- 购物车列表 --> <view class="list-container"> <view class="no-cart" v-if="cartData.length <= 0"> <view class="empty-content"> <text class="empty-text">购物车空空如也。。。</text> <text @click="toProduct" class="go-shopping">去购买</text> </view> </view> <view class="cart-list"> <view class="cart-item" v-for="item in cartData" :key="item.id"> <image :src="item.product.pimageurl" mode="widthFix" class="item-image"></image> <view class="item-info"> <view class="title">{{ item.product.pname }}</view> <view class="text">{{ item.product.tintroduce }}</view> <view class="price-container"> <view class="price">¥{{ item.product.tprice }}</view> <view class="number-control"> <view @click="changeNumber('down', item.id)" class="control-btn">-</view> <view class="contro">{{ item.number }}</view> <view @click="changeNumber('add', item.id)" class="control-btn">+</view> </view> </view> </view> <view @click="delCart(item.id)" class="delete-btn">删除</view> </view> </view> </view> <!-- 底部结算栏 --> <view class="footer"> <view class="left-footer"> <view class="total-title">合计:</view> <view class="pay-price">{{ getTotalPrice }}</view> </view> <view class="to-pay-btn" @click="addOrder">去结算</view> </view> </view> </template> <script> import { myCart, deleteCart, changeNumber, addOrder } from "@/api/index"; export default { data() { return { //用户购物车数据 cartData: [] } }, onLoad() { }, onShow() { this.queryCartInfo() }, methods: { queryCartInfo() { myCart().then(res => { // 处理接口返回为 null 的情况,转为空数组 this.cartData = res.data || []; console.log(res.data) }) }, delCart(id) { deleteCart(id).then(res => { this.cartData = res.data uni.showToast({ title: "删除成功" }) this.queryCartInfo() }) }, changeNumber(cmd, id) { changeNumber(id, cmd).then(res => { uni.showToast({ title: "操作成功" }) this.queryCartInfo() }) }, //点击结算 添加订单 addOrder() { addOrder().then(res => { uni.showToast({ title: "购买成功" }) //跳转到my页面 switchtab uni.switchTab({ url: "/pages/my/my" }) }) }, toProduct() { uni.switchTab({ url: "/pages/product/product" }) } }, computed: { getTotalPrice() { var num = 0; for (var i = 0; i < this.cartData.length; i++) { var cart = this.cartData[i]; num += cart.number * cart.product.tprice } return num.toFixed(2) //保留小数点后两位 } } } </script> <style scoped> /* 全局样式 */ * { box-sizing: border-box; font-family: "PingFang SC", sans-serif; } /* 顶部区域优化 */ .top { padding: 30rpx 25rpx; background: #ffffff; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06); margin-bottom: 20rpx; } .top-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25rpx; } .header-left { display: flex; flex-direction: column; gap: 8rpx; } .tea { font-size: 36rpx; font-weight: 600; color: #ff6600; } .info { font-size: 24rpx; color: #999999; } .header-logo { width: 180rpx; height: 120rpx; } /* 搜索框优化 */ .search-box { display: flex; align-items: center; padding: 0 30rpx; height: 80rpx; background: #f0f0f0; border-radius: 40rpx; margin-bottom: 25rpx; } .search-icon { width: 40rpx; height: 40rpx; color: #666666; } .search-input { flex: 1; margin-left: 20rpx; font-size: 28rpx; color: #333333; background: transparent; border: none; } /* 热销背景图优化 */ .hot-bg { height: 160rpx; border-radius: 20rpx; overflow: hidden; } .hot-bg-image { width: 100%; height: 100%; object-fit: cover; } /* 购物车列表优化 */ .list-container { padding: 0 25rpx; } .no-cart { display: flex; flex-direction: column; align-items: center; padding: 200rpx 0; color: #666666; } .empty-content { text-align: center; } .empty-text { font-size: 28rpx; margin-bottom: 15rpx; } .go-shopping { font-size: 28rpx; color: #ff6600; font-weight: 500; } .cart-list { gap: 20rpx; } .cart-item { display: flex; align-items: center; padding: 25rpx 0; border-bottom: 1rpx solid #f0f0f0; } .item-image { width: 180rpx; height: 180rpx; border-radius: 15rpx; object-fit: cover; margin-right: 25rpx; } .item-info { flex: 1; display: flex; flex-direction: column; gap: 10rpx; } .title { font-size: 32rpx; font-weight: 500; color: #333333; } .text { font-size: 24rpx; color: #666666; line-height: 1.6; } .price-container { display: flex; justify-content: space-between; align-items: center; } .price { font-size: 30rpx; color: #ff6600; font-weight: 600; } .number-control { display: flex; align-items: center; gap: 8rpx; } .control-btn { width: 45rpx; height: 45rpx; border: 1rpx solid #e5e5e5; border-radius: 5rpx; font-size: 32rpx; color: #333333; display: flex; justify-content: center; align-items: center; cursor: pointer; } .contro { width: 60rpx; height: 45rpx; border: 1rpx solid #e5e5e5; text-align: center; line-height: 45rpx; font-size: 28rpx; } .delete-btn { font-size: 28rpx; color: #ff6600; cursor: pointer; } /* 底部结算栏优化 */ .footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 80rpx; background: #ffffff; box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04); padding: 0 25rpx; display: flex; justify-content: space-between; align-items: center; } .left-footer { display: flex; align-items: center; gap: 10rpx; } .total-title { font-size: 28rpx; color: #666666; } .pay-price { font-size: 36rpx; color: #ff6600; font-weight: 700; } .to-pay-btn { width: 160rpx; height: 50rpx; background: #ff6600; color: #ffffff; border-radius: 25rpx; font-size: 28rpx; font-weight: 500; text-align: center; line-height: 50rpx; } </style>界面productDetail.vue代码如下:<template> <view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> </style> 现在根据前两个界面的功能逻辑和地址等,然后实现功能在product.vue和myCart.vue中点击各个商品中的图片能跳转到商品详情页面,补全文件productDetail.vue
06-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值