当前课程知识点：软件开发实训--动态网站开发 > 14 网站前端组件实现 > 14.7幻灯片接口实现 > 14.7.1幻灯片接口实现
同学
你好
上节课我们已经讲了
滚动组件的完整实现对它的接口进行了调试
那么这节课我们来看一下
幻灯片接口的实现
我们来看一下
为了实现幻灯片
我们在这里打开
ClientController控制器
在控制器中我们定义幻灯片的方法
幻灯片的请求
我们用slide就可以了
一样的
它需要的也是阶层数据
slide
Model
ResponseBody
这样我们就会把返回的结果以
内容的形式反馈到前端
首先去请求内容
clientService
findBySlide
查询幻灯片的内容
这里我们去实现它
好
它已经实现好了
只要我们通过它自动的去实现方式把它实现了
然后我们打开它的实现类
添加我们的方法
实现抽象方法
这里边只需要简单的返回return语句
contentRepository
findBy
通过标志来查询
而这里的标志是幻灯片
就可以了
最后我们把它返回去
当然这两句话可以改成一句
省去中间的变量
直接return就行
显得更简洁一些
运行完成后
我们来看一下
在前端如何去请求呢
好
这里我们来请求第二个数据
注意看
在get方法的后面加上一个逗号
接着写
get
请求的路径是slide的
对应的是第二个数据
当然第二个数据我们这里边
把这变量名给它改一下
第一个就叫scrolls
第二个叫slides
scrolls
这样我们就容易去区别它
好slides
幻灯片拿到后
我们来看一下幻灯片需要的内容
幻灯片需要一个timg一个title就可以了
而我们的对象在得到的时候
就包含了title和image这两个对象
因此我们只需要把slides
赋值一下就行
后台它已经包含了title以及timg
所以我们在这里并不需要做别的处理
只需要把我们的数据直接赋给它就可以了
好
现在我们打开浏览器
来看一下
首先我们添加内容当然重新又编译了
所以它的tomcat的路径也发生了变化
这张图也就没了
那么我们不管滚动了
我们只需要来看一下我们新的内容
好
内容添加
我们添加标题
这是幻灯片的第一个内容
同时我们上传图片
我们把这几个图全给它上传上去
好
上传上去之后
我们的第一个幻灯片就有了
它不需要内容
所以可以空着
保存成功
我们再来
第二个
这次不需要上传
只需要选择一张图片就可以了
保存
好
有两张
我们来看一下
刷新主界面
这里边有一个404的错误
说明我们有内容没有找到
我们来看一下是哪个内容
看一下
我们测试一下幻灯片的内容
slides没有问题可以得到幻灯片
然后我们再来测一下它的scroll
也是有内容的
好
我们先把这个给它去掉
我们来看是不是这里引起的错误
看来是我们这个路径这块请求不对
我们来看一下它的执行
好
问方法
用这个get没有实现我们需要的执行完成后
再去执行后边这个函数的功能
我们把这个给它改一下
去掉
我们不需要用when来执行了
我们用get直接来执行
执行完成后得到数据一条一条来
再来执行第二个
function
slides
this点slides等于slides
来看一下它返回的数据
console点logslides
刷新
好
这样的话我们的内容就出来了
而且幻灯片也是正常的
这样我们把后端的数据
就能够很好的放到前端来
这是对幻灯片的接口的一个实现
实际上和滚动的实现是一样的
只不过是到了前台后
它们俩的处理形式有所不同
滚动需要去连接它的内容
形成一个内容区里边的内容
然后幻灯片呢是直接把它拿来
形成了我们需要的数据
当然了
你也可以把这个滚动区滚动区也做成一个对象
让它的模板去处理这些内容
也是没有问题的
这样的话我们这里只需要简单的一句话就可以
了
这和下面的实现就一样了
好
这是有关幻灯片的接口实现
前端和后端衔接起来了
好
有关幻灯片接口的实现就讲到这里
下节课我们再见
-1.1课程介绍
--1.1.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试
