springxxxx - 博客园

2021年7月5日

摘要：本回关键词：金角大王、银角大王、紫金葫芦、羊脂玉瓶。上回说到师徒四人离了宝象国，一路饥餐渴饮、夜住晓行，转眼又来到了三春景候。本回一开始，猴哥又以一副长者的姿态来教育师父了：师徒正行赏间，又见一山挡路，唐僧道：“徒弟们仔细。前遇山高，恐有虎狼阻挡。” 行者道：“师父，出家人莫说在家话。你记得那乌阅读全文

posted @ 2021-07-05 16:15 springxxxx 阅读(515) 评论(0) 推荐(0)

2021年7月3日

关于ECharts的使用总结——饼图、雷达图、仪表盘

摘要：一、饼图为饼图准备的数据是一个对象数组，每个对象有name和value两个属性。 var pieData = [ { name: '淘宝', value: 11231 }, { name: '京东', value: 22673 }, { name: '唯品会', value: 6123 }, { 阅读全文

posted @ 2021-07-03 17:03 springxxxx 阅读(1026) 评论(0) 推荐(0)

关于ECharts的使用总结——散点图和直角坐标系

摘要：一、散点图散点图要求x、y轴均为数值类型，且不必从0开始。series中type需指定为'scatter'，data的值需要为一个二维数组，如[ [1, 1], [2, 3]......]。 xAxis: { type: 'value', scale: true }, yAxis: { type: 阅读全文

posted @ 2021-07-03 16:10 springxxxx 阅读(2195) 评论(0) 推荐(0)

关于ECharts的使用总结——柱状图和折线图

摘要： ECharts拥有强大的数据可视化功能，而且使用非常便捷，下面做个总结：第一步，导入库文件： <script src="lib/echarts.min.js"></script> 第二步，创建一个放置图表的box： <div style="width: 600px;height:400px"></ 阅读全文

posted @ 2021-07-03 01:08 springxxxx 阅读(1758) 评论(0) 推荐(1)

2021年7月1日

购物车组件Cart与Vuex的应用

摘要：点击“加入购物车”后，商品信息便被保存在product对象中了，而要想把product对象分享给购物车Cart组件，最好的办法就是将它加入到全局的vuex中。我们创建一个store文件夹，将index.js文件作为状态管理模块的入口，代码如下： import Vue from 'vue' impo 阅读全文

posted @ 2021-07-01 14:59 springxxxx 阅读(257) 评论(0) 推荐(0)

2021年6月30日

相似推荐的展示和底部导航条的实现思路

摘要：相似推荐的数据请求是独立的，对应的接口为“/recommend”。 export function getRecommend(){ return request({ url: '/recommend', }) } 仍然是在created函数中： // 3、获取推荐数据 getRecommend(). 阅读全文

posted @ 2021-06-30 00:00 springxxxx 阅读(54) 评论(0) 推荐(0)

2021年6月29日

DetailParamsInfo组件和DetailCommentInfo组件的实现思路

摘要：商品参数信息在返回data中的分布也很松散，将它们整合为一个类GoodsParam，然后将数据保存在GoodsParam的实例paramsInfo中，发送给子组件DetailParamsInfo： export class GoodsParam{ constructor(info,rule) { t 阅读全文

posted @ 2021-06-29 23:28 springxxxx 阅读(85) 评论(0) 推荐(0)

DetailShopInfo组件的实现思路

摘要：和之前一样，我们将该组件要使用的数据封装进一个Shop类： this.shop = new Shop(data.shopInfo); export class Shop{ constructor(shopInfo){ this.logo = shopInfo.shopLogo this.name = 阅读全文

posted @ 2021-06-29 18:01 springxxxx 阅读(126) 评论(0) 推荐(0)

DetailSwiper和DetailBaseInfo的实现思路

摘要：由于有现成的Swiper, SwiperItem可以使用，所以DetailSwiper的实现非常简单。首先获取轮播图片的数组topImages，数组中存放的是一张张图片的url。 this.topImages = data.itemInfo.topImages; 然后将topImages发送给子组阅读全文

posted @ 2021-06-29 17:11 springxxxx 阅读(92) 评论(0) 推荐(0)

跳转到Detail组件

摘要：我们在前面将每件商品的信息传给了GoodsListItem组件，保存在goodsItem变量中。并且每件商品有一个唯一的标识符iid。当点击该商品后，会跳转到该商品的详情页。所有的详情页使用同一个组件Detail，今天我们来回顾一下Detail组件的开发过程。首先需要配置路由，由于Detail组件阅读全文

posted @ 2021-06-29 16:45 springxxxx 阅读(226) 评论(0) 推荐(0)