Vue.js 超详细入门与项目实战（微课视频版）课件 第16章 商城动态页开发

第16章商城动态页开发课件V1.0

教学内容第一节

动态列表页功能第二节列表详情页功能第三节

点赞与收藏功能知识目标教学目标理解和掌握路由传参的方法和使用过程掌握pinia中定义状态变量和方法的过程掌握在组件中使用pinia定义的变量和方法知识点预览#节知识点难点重点应用16C16-01动态列表页功能1、页面效果

2、列表数据源3、列表制作C16-02列表详情页功能1、页面效果2、组件代码C16-03Vant表单组件1、页面效果2、组件代码3、全局状态与方法

商城动态也是商城开发中的一项重要功能，动态内容可以是商品信息，也可以是促销文章，通常以列表的形式展示，点击列表中标题后查看详情页。动态列表页功能

动态列表的展示数据，源于

shop.js

文件中的

news

属性值。说明：数组

news

中的对象属性

src，用于显示列表中的缩略图片，detail

属性则用于显示动态列表中某项数据的详细内容，因为该数据是由后台文本编辑器创建，因此，它的内容中包含了各种

HTML5

元素和布局的样式。列表数据源

在src/components目录下，新建一个名称为news的文件夹，该文件夹保存所有与商城动态有关的组件，目录结构如图所示。在示意图中，RtList是商城动态的列表组件，在组件中，获取列表数据，并通过遍历的方式展示在van-grid组件中。在代码中，通过van-grid组件展示列表，column-num属性设置列表只显示一列，再遍历van-grid-item组件，绑定各行中显示的数据，当点击某一行时，触发绑定的click事件函数onNavTo，在该函数中，获取并携带传入的动态Id值，跳转到动态详细页中。列表制作

在动态列表页中，当用户点击某项列表时，便携带该项列表的Id号，跳转至列表详情页，在列表详情页中，获取转入的Id号，并根据该Id号，获取对应的详情页数据，再将该数据通过绑定组件的形式，显示到页面模板中。列表详情页功能

在示意图中，由名为

RtDisplay的组件实现的功能。在代码中，先获取通过路由传入的Id号，并根据该Id号获取对应的数据记录，并将记录保存在变量curNews中，再将变量curNews中的detail属性值绑定元素，从而实现对应Id号详情的显示效果。说明：在绑定并显示含有HTML5元素内容的数据时，需要使用v-html指令的格式，因为这种格式绑定的内容，会将绑定的内容用HTML格式解析后再输出。组件代码

在列表详情页的底部，添加了两个按钮，一个用于点赞功能，另一个用于收藏功能，两个按钮单击后的数据和状态变化，全部通过pinia状态工具进行保存。点赞与收藏功能在示意图中，由名为

RtAction的组件实现详细页底部点赞和收藏的功能。在代码中，当点击“点赞”按钮时，触发pinia中定义的方法add_like_act，在该方法中，将会向数据集合中增加一条对应Id号的记录，同时，再通过retNewsLikes函数检测该条记录是否增加成功，如果成功，则改变按钮的icon图标。当击“收藏”按钮时，触发pinia中定义的方法add_collect_act，它的功能逻辑与点击“点赞”按钮基本相似，仅仅是执行了不同的方法，这两个方法都是在pinia中定义的。组件代码

为了全局性管理组件的状态和数据，本项目中安装了pinia工具，安装成功后，在src目录下创建了一个名称为store子文件夹，并在该文件夹下，创建了一个index.js的文件，用于实例化pinia对象，并缓存定义的状态变量。在代码的加粗部分中，先在state函数中，返回两个全局的状态数组变量，一个名为collects，另一个名为likes，前者用于保存收藏记录，后者用于保存点赞记录。为了能操作这两个变量，在actions对象中，定义了两个相应的方法。最后，在persist对象中，通过strategies数组配置需要缓存的状态变量，其中，