当前课程知识点：软件开发实训--动态网站开发 > 15 网站前端页面实现 > 15.1首页区域实现 > 15.1.1首页区域实现
同学你好
欢迎回到软件开发实训课堂
前面我们把首页需要的幻灯片
以及滚动菜单等等
相关内容做了介绍
并且实现了前端与后端数据的提供
并且实现了前端与后端的数据交互
那么这节课咱们来看一下首页该怎么实现
为了实现首页
我们打开我们的index点html页面
在这个页面
我们已经实现了首页的菜单部分和幻灯片部分
以及我们的滚动内容区
这里我们加上注释
这是幻灯片区
滚动内容区
对于滚动内容区
它实际上分了上下中三个部分
上面就是滚动
我们可以通过行进行划分
第1行
我们就放滚动区内容
第2行我们放搜索表单
这是英文网站
所以是谷歌的搜索
再下一行是公告
我们可以把公告的内容从数据库里获取
而对于中间的整个行属于内容区
这一列是内容区域的左侧
实际上在它的右侧还有三个单元格
这三个单格分别是产品解决方案
联系我们等等
产品放在这里
这个是解决方案
还有关于我们
那么这三个区域分别放了这三个内容
而这三个区域的内容都是来自于后端
最下面是阪泉区
这里边还有备案信息
这些都是来自于后台的内容
那么对于后台我们提供的公告以及这三个区域
我们都可以把它放到相关内容里边去
我们可以把它作为标志进行获取
其中一个标志是公告
第2个标志是首页区内容有这三项
而版权和备案信息以及前面的logo
都是来自于网站的配置
好
现在我们来看如何获取这些内容
首先我们来看一下公告
为了实现公告和这三个内容区
我们需要增加一个内容实体的标志
我们打开内容实体
在内容实体的标志上
我们设置首页内容公告
这样就可以了
这样我们在添加的时候就有了首页和公告
信息
有了这些
我们只需要在我们的客户端控制器去查询我们
相对的内容就可以了
那么查询哪些内容呢
我们来看打开我们的客户端服务
在我们服务接口里
实际上我们前面单独的写了sceoll
以及slide
这是独立的方法
针对的是滚动区
下面这个也是的
它只不过是幻灯片
我们都可以单独的获取
那么对于公告我们同样的可以把它
通过这种方式来获取
我们来看一下它的实现
在实现里面
他通过这样的标志来获取对应的内容
对于我们来讲
我们可以通过这种方式更简单的设置一个方法
而这个方法接受的参数就是我们的标志
而在我们的服务时限里边
也只需要实现它
通过数据访问对象去访问内容
这样我们在控制台就可以根据需要来获取我们
相对应的内容了
这里获取公告
公告通常情况下只需要一个就可以了
所以我们这里面直接返回一个对象就行
不需要返回集合
因为它公告那里边仅仅只显示一条信息
直接返回我们的对象
这样它只是把标志flag
放在了控制器里边去传递
这样得到的是一个集合
我们需要把集合做一个判断
因为我们只需要一个对象
我们判断他首先不为空
并且
他一定有元素
所以我们最终返回
第1个元素就可以了
如果说公告不存在我们返回一个空
而对于首页需要的内容区
我们一样的方式
这里边我们用con
它需要的仅仅只是一个集合
所以我们不需要对集合进行处理
首页的内容就可以了
前面说过我们把这个标志全部放在了煤局里边
实际上你完全可以把它放在
后台的数据库进行管理
这两种方式都是可行的
这样我们就把公告和内容发送到前端去了
在这里注意它返回的是节省数据
所以要加一个responsebody
这样一个注解
来表明我们的方法
返回的对象以内容的形式反馈给前端
当然这个内容的类型就是节省格式
好
这是获取的数据的控制器的实现
那么现在我们在前端来获取我们的公告和内容
首先我们把公告的标题给出来
我们打开园站公告的标题
就是这么一个红色的文字
我们这里用H5来表示
因为我们在获取数据时通过的是vueroot
这样一个根节点传进来的数据
所以在这里我们只需要把公告这个信息
给他加进来
公告
.title
然后具体的公告内容
我们用一个P标签
html格式
去TML格式的数据给他传过来
这样公告的标题和它的内容都显示出来了
然后搜索表单是谷歌的表单
它是一个固定的内容
因此上你可以把他的谷歌的搜索的路径给它
复制过来
因为我们现在无法去访问谷歌
所以你可以用百度来代替它
对于百度我们只要输入一个关键字
然后点击百度
那么通常情况下他就会给出搜索的路径
这样的话我们可以看一下路径里边
他首先用的是https协议
它的关键字用的是WD好
我们直接在这里来试一下
我们用https//加上WD来搜索一下
他并没有给我们搜索好
加了一个S路径我们再来一下
还有一个S的路径
他既然转向
我们就别让他转向直接加上baiducom
/S问号WD等于spring
这样的话他已经搜索了
他给我们搜索了
所以我们只需要通过这个路径来去完成我们的
表单就可以了
这个表单可以这样写
form
他是个请求
所以我们只需要给出action就可以了
com/
S问号
这样S就可以了
不需要加问号
然后我们的内容input等于text
给出名字
WD
它的搜索按钮
它是一个图片
所以我们可以用 图片来描述它
这样我们的左边区域
它的搜索以及这个公告
在html里面就写好了
好
有关首页使用组件我们先讲到这里
下节课我们再见
-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随堂测试
