淘宝浏览足迹功能实现(含代码)--cookie案例

首先,我们做一个类似的案例:访问页面,如果不是第一次访问则返回上次访问的时间。然后可以循序渐进,类似的将访问时间变成上次浏览的商品信息。
前奏:cookie案例-显示上次访问的时间。
需求:如果是第一次访问,输出欢迎信息。
非第一次访问,在欢迎信息之后输出上次访问的时间。
基本步骤:
1) 获取cookie参数,根据指定名字获取cookie的值。
2) 判断该指定名称cookie的值是否为空。为空则就是第一次访问,输出欢迎,然后回写这个cookie。不为空,则返回上一次访问的时间,同样回写cookie。

//1) 设置中文乱码。欢迎界面需要输出中文。对于响应对象的字符流的简写方式(非简:设置缓存编码方式;设置编码头)。
        response.setContentType("text/html;charset=UTF-8");
        //2) 获取cookie参数。获取最后一次访问的cookie参数。
        Cookie[] cookies=request.getCookies();
        //      根据cookie名称获取该名称的参数内容。
        Cookie lastTimeCookie=MyCookieUtils.getCookieByName("lastTi
  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
好的,下面是一个简单的 Vue 淘宝足迹功能代码实现,供您参考: 1. 创建足迹组件 Footprint.vue ```html <template> <div> <h1>我的足迹</h1> <div class="footprint-list"> <div v-for="item in footprintList" :key="item.id" class="footprint-item" @click="goDetail(item.id)"> <img :src="item.img" alt=""> <p>{{ item.name }}</p> <span>{{ item.price }}</span> </div> </div> <div class="add-footprint"> <input type="text" placeholder="请输入商品ID" v-model="productId"> <button @click="addFootprint">添加足迹</button> </div> </div> </template> <script> import { mapState, mapActions } from 'vuex' export default { computed: { ...mapState(['footprintList']) }, methods: { ...mapActions(['addFootprint']), goDetail(id) { this.$router.push(`/detail/${id}`) } }, data() { return { productId: '' } } } </script> ``` 2. 在 store.js 中创建足迹列表的状态和添加足迹的 action ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { footprintList: [] }, mutations: { addFootprint(state, item) { state.footprintList.unshift(item) } }, actions: { async addFootprint({ commit }, productId) { // 调用淘宝开放平台的接口,根据商品ID获取商品信息 const res = await fetch(`https://api.taobao.com/rest/api3.do?method=taobao.item.get&appkey=xxx&secret=xxx&num_iid=${productId}`) const data = await res.json() // 将商品信息添加到足迹列表中 commit('addFootprint', { id: data.item.id, name: data.item.title, img: data.item.pic_url, price: data.item.price }) } } }) ``` 3. 在路由文件中添加详情页的路由 ```javascript import Vue from 'vue' import Router from 'vue-router' import Footprint from '@/components/Footprint' import Detail from '@/components/Detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Footprint', component: Footprint }, { path: '/detail/:id', name: 'Detail', component: Detail } ] }) ``` 4. 在详情页组件 Detail.vue 中显示商品详情信息 ```html <template> <div> <h1>{{ item.name }}</h1> <img :src="item.img" alt=""> <p>{{ item.price }}</p> </div> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState(['footprintList']), item() { return this.footprintList.find(item => item.id === this.$route.params.id) } } } </script> ``` 以上是一个简单的 Vue 淘宝足迹功能代码实现,您可以根据自己的需求进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值