当前课程知识点：软件开发实训--动态网站开发 > 14 网站前端组件实现 > 14.6滚动接口调试 > 14.6.1滚动接口调试
同学
你好
欢迎回到软件开发实训课堂
上节课我们已经实现了滚动后端的内容
那么它到底是否能够使用
这节课我们来对滚动的接口进行调试
那么写完这个以后
我们还需要去做一些修改
那就是我们的界面
对于我们内容的编辑界面目
我们需要做一个调整
就是使用我们的枚举类型
我们在这里加一个方法
把它转换成列表
首先我们获得它的相关值
content
flag点values
得到这个数组
然后把它转成列表
打开我们的服务控制器
我们内容的控制器
在我们编辑时
将这个枚举放入model中
关键字为flags
然后content点
contentflags
flag点tolist
把它转换一下
这样我们再见面就可以用到它了
之前我们并没有写他
我们在这里来加一下
首先标题、标题图片
下面就写我们的标志
占一行
并且是表单组
标签
标签就写这内容
标志for topflag
这个用下拉菜单selete
我们绑定我们的字段
Topflag
class等于form-control
option
对他进行循环
flags
这里边值呢
等于A
显示的文本
也是A就可以了
好
这样我们再添加内容时就可以有滚动的内容了
现在我们通过浏览器来添加一些滚动的内容
来看一下
这里边有一个问题
clientservice
howtoview我们的注解clientservice
为什么出这个错
是因为我们clientservice的实现类没有
加service的
注解
加完注解节后我们再来看
正常登录
然后添加内容
添加内容这里
我们可以加一些标题
然后我们上传一些图片在本地上传就可以了
好
我们上传几张图片
上传三张
直接点击开始上传
好
成功
点击确认
这样我们的图片就上传上来了
标志我们这里边是滚动
注意这个下拉框没有
正常实现
看一下
selete
我们写错了单词
selete
ct
内容添加
我们已经上传了
我们只需要选择一个就够了
确定
我们没有限制图片的大小
所以看起来非常的大
然后我们放的是滚动区
我们只要内容就行了
其实不需要图片
分类
我们可以加一个滚动的分类
这里边我们就不加了
直接放在通知里边
好
这里
你看到的是来自服务器端的滚动内容
好
保存成功后
我们只需要一个就够了
测试一下我们前台的滚动内容是否能够正常
scoll
看一下
这里面明显的是一个死循环
也就是说进入到一个不能停止的循环状态了
这是什么原因引起
这是我们内容和内容类型之间的一个问题
那么在我们生成内容的时候
我们可以把这个内容类型给它去掉
不让它放在 里
这是一种情况
第二种情况是contenttype
我们来看一下
她是否有和内容之间的关联
好
它有一个负节点
这里我们把这个负节点给它跳过去
json ignore
这个注解的意思是
当产生json格式时
不要包含这个属性
这是它的含义
就跳过去
好
我们重新生成
好
再来
这样我们就得到了需要的数据看一下
它是一个它是一个数组
首先里边有一个对象是花展的内容
contents
都有了
然后类型也有
类型
包含的在的区域是滚动内容、时间等等
这些内容都有了
但实际上我们并用不到这些这么多都不一定用得到
我们只需要用到这个内容和图片或标题这三项
就足够了
好
对前台如何来加载这个内容
我们打开index点html来看一下
注意这个地方是滚动区域的内容
所以我们可以在这个位置去加载它
好看一下怎么加载
当我们的Vue实例化完成后
我们就可以去加载这个内容了
好
我们来看一下
用我们用mountedt这个函数生命周期函数来处理加载
这是一个
问
方法
这个方法是处理参数提供的内容
处理完成后执行对应的函数
这里我们去加载它
第一个函数是$点get
因为我们没有参数
所以直接去斜杠C斜杠scoll
去请求
请求完成后
他返回的数据对应的就是function
我们对应的参数第一个数据
现在我们先给它输出
现在我们来访问index
打开我们的开发者工具
来看一下它的输出
这里边输出了一个数组
很显然这个内容是我们需要的内容
当我们加载的数据到达时
A就包含了我们所有的数据
我们这个时候可以对A进行循环
of循环是去循环它的元素本身对应的执
这和硬循环是有区别的
好
我们把要滚动的内容给它简单的放进来
这里我们去读取它的内容
第一个是title
第二个是timg
第三个是contents
这是三个内容
我们来把它转换成一个字符串
第一个是标题
我们用H6这个标签来加他
B点title
然后图片给一个标签
img
这里我们演示一下图片
后期我们还得把它去掉
第一点
timd
注意这个图片忒大
所以我们要把它设一下高度
我们用一百就行了
注意双引号里边用单引号就可以
最后把我们的内容给它加进去
用一个P标签
好
这些内容获得以后
我们需要把它传递给我们的组件
这里边就需要把S定义在外边
注意
这样我们不断的这样循环
它的内容就会叠加到后边去
最后执行完成后
我们要改变这个值
contents
而这个contents
注意是
注意我们把this关键字给它赋个值
让它保留在另一个对象
要不然这里的this和上面的this就
不是一个对象了
contents等于
S
好
这样我们就把前端也写好了
现在我们来加载内容看一下
这里的红线我们可以禁止它对
检查错误
就没有了红线了
我们再次刷新界面
看一下我们的内容已经出来了
我们的图片显示不出来是因为我们在开发过程
把 boot
他把图片删掉了
因为他每次都会生成一个临时的上下文路径
所以我们刚才上传的图片已经不存在了
为了存在
我们可以在后台上传一次
我们进入内容管理
把花展图片重新给他选一下
因为已经不存在图片了
他有
临时文件已经换了
所以我们在这里重新选一张图片给他
好
上传
上传完成后确定
最后要保存一下
现在在前端刷新界面
我们看一下这个图片就已经出现了
好
这是有关前端滚动内容的这个接口
好
有关滚动实现就讲完了
这节课我们就讲到这里
下节课我们再见
-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随堂测试
