当前课程知识点：软件开发实训--动态网站开发 > 15 网站前端页面实现 > 15.5详细页面实现 > 15.5.1详细页面实现
同学你好
欢迎回到软件开发实训课堂
现在我们来做详细页
在static目录上点击右键
选择html
就叫做detail.html
然后把我们的index页面拿过来
复制一份
这里边我们需要修改的
首先是幻灯片区不需要了
然后内容区、版权区
这是需要的
而上面的菜单与logo以及下面的版权是不变的
变化的就是滚动区不再需要
而滚动区仅仅只需要它的一个内容
就是显示一句话
你正在哪个页面里面
我们可以看一下当前的位置
这是一个说明
我们可以把它放在这里
这样，我们的语句就放在这里了
然后我们有一个红色的文字可以放在这里
红色的文字是菜单的名称
现在我们只需要显示它的名称就可以了
当我们点击一个菜单时
这个菜单会链接到某一个位置
当它进来时需要显示这个菜单的数据
也就是它的菜单名称
我们来看一下如何实现它的菜单名称的显示
当我们每次点击超链接时
会进入到这个界面
实际上这就是每次菜单被点击时
也会进到这个界面
我们来看一下
首先定义我们的路径
那么我们菜单的路径是通过动态生成的
也就是我们后台可以去添加它
那么在每次请求时
我们只需要点击菜单发送给后台一个
请求就可以了
所以我们把菜单的名称一定要给它带在这个
请求路径上
因此我们这里需要发送的请求路径就在这里
给它写出来
从路径上获取数据
我们这个是模板与后台的模板很类似
我们这里要用thimlefe 来获取
我们的菜单名称
看一下
好
我们显示它的菜单名
也就是位置
你这里就叫做mname
这是来自后台的数据
当然我们首页呢
这个详细页也需要把它作为模板
来处理
所以我们移动一下它的位置
把它从staiticly移动到timply
作为这个模板出现
而不是作为静态网页出现
我们要去获取它的内容
获取前缀
这些个实际上是不需要改变的
因为它都是从静态目录里获取的内容
所以这些东西不需要改
只需要加一个前缀就可以了
好
那么我们该如何去请求打开我们的控制器
客户端控制器
我们来发送一个链接的请求
所有的菜单请求都会发送到这里来
注意这里不能再使用Responsebody了
而是直接转给detail模板
它需要前端数据
所以这里边需要一个model
那么请求的路径是什么呢
刚才说了是第一个是con
我们需要在路径上加上一个c，c已经有了
在上面
已经定义了C，所以我们在这里直接写
detail/
我们这里是m name
菜单的名称
然后加上我们请求的内容的地址
我们内容的地址
其实对于我们从数据库去查找
只需要用它的编号就可以了
我们这里用cid
所以当请求详细信息的时候
实际上就是来自于哪个菜单
然后来自于哪一个ID
去请求哪个ID的内容
这样我们获取它的数据
菜单名称
然后再来获取内容ID内容
内容ID它是一个整型
通过注解PathVariable
就得到了路径的参数
我们先把菜单名称给它保存起来
在前台显示
并且在这里我们给它加上
m name.
我们把它的第一个字母变成大写
然后再加上它的后面的字符
就可以了
实际上我们传递的时候
完全可以把菜单名称
直接传递成大写也是可以的
不一定非得这样去转换
根据你自己的设计来完成
好
现在我们去查询对应的内容
在我们的客户端服务里边
我们需要定义查询内容的方法
它返回的仅仅是一个内容对象
接收的是一个ID
好
我们用contentRpoisitory
去查找findById
这个方法它返回的是一个Optional对象
Optiona
contect
这样我们就可以判断它是否包含对象
如果说它有我们就返回oc.get
把对象返回去
否则的话我们返回一个空就可以了
而在这里我们需要做的就是把它拿过来
clienService
findBYId
然后return detail
现在我们来改变菜单的路径
它的链接路径
我们可以这样
c /detail/
然后HOME
直接大写
你要是小写的话也可以
因为我们有转换
然后是它的ID，这个ID实际上是来自于后台
可以生成
我们这里去添加几个内容
把它的ID拿过来
我们来添加
把它直接复制过去
这是一个产品
产品的名字是这个样子的
我们把它放在这里
然后产品的图片
我们可以给它加上这个也可以不用
因为这个是文章里的图片
而不是这个标题图片
这里我们先暂时不需要它了
那么在这里我们看一下
我们这个里边没
相关的位置去显示它
这里应该有一个空的选项
我们把它放在置顶这个位置
因为置顶这个标志还没有被使用
然后分类我们可以加一个通知内容
或者产品等等
保存
保存成功后
我们来看一下
这是我们新加的内容
但这个ID需要我们去找一下
因为我们没有菜单这一块需要下去
自己来实现这个菜单
那么在选择路径的时候
你可以通过一个功能来实现对路径的实现
我们这里直接去选择它
这样我们得到它的编号13
home的连接地址是/就行了
让它链接到主页
后边我们这些就可以链接到13
13
这里边它有空格
我们把它放到这里来
下面都可以改成13
这个根据你自己添加
所以你在实现菜单功能的时候
一定要注意它的链接需要你去选择
而不是手动输入
你要是输入的话就很麻烦了
这就光查个ID就比较费劲了
所以要注意自己去实现它
好
我们就把它复制这么多
这样我们就可以看一下效果
我们刷新首页界面
看一下我们内容
这样的话我们About Suncom就过来了
它已经显示在我们的左边了这个位置
现在我们只需要加上内容就可以了
在我们的详细页里边没有公告
只有一个菜单
所以你需要把它换过来
好
我们来看一下具体的内容
把它去掉
内容区里边它和上边的部分
分享上面是三个单元格
那么剩下的九个单元格就归内容来显示
好
我们来显示它
直接输出我们的内容
用模板来输出
这里边是htmi内容
所以我们用utext来输出
con.conents
刷新界面
看一下我们的内容就出现了
这里边需要把它调整为
左右方向
这是每个单元格要注意它的方向
我们把V- for这个不需要了
把它删掉
看来我们的CSS没进来看一下有什么错误
我们所有的脚本都没有进来
所以我们脚本还得需要用动态去计算一下
这里边
th把它绑定一下
还不能够直接这样去放
因为它是用的是从根目录计算的路径
所以不能只写一个js而应该用这个
"/"开头的js
这里我们直接就把它改成动态计算的
改变完成后
我们刷新界面来看一下
整个效果就有了
但是这里边还有一点
就是我们的菜单和下面的版权并没有出现
我们这个属性没有去改
它必须要有前缀
这个千万不能忘记了
否则的话它请求不到
加上"/”
从根路径开始计算
那么这个 “@ { ” 它会自动的去
添加你的上下文路径
这样我们的菜单就出现了
版权也就出现了
还缺一个logo
我们来看一下logo
我们的后台图片
看一下logo的内容
我们的logo不见了
重新得上传一下
来看一下
因为我们重新换路径了
好
上传确认
保存一下
刷新界面
这样我们的页面也就做好了
那么左边的菜单需要你自己去完善
再一个界面的美化也需要你自己去完善它
好
这里有一个中文版的图片
这个是模板里面的路径的问题
我们可以去模板
把路径给它改一下
在菜单的模板里
我们找到中文版的路径
加上一个斜杠
从根目录去查找
就可以了
这样中文版也就出来了
好
有关动态网站的相关开发就讲完了
我们这节课就讲到这里
下节课再见
好
-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随堂测试
