9202398

当前课程知识点:软件开发实训--动态网站开发 >  15 网站前端页面实现 >  15.5详细页面实现 >  15.5.1详细页面实现

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

15.5.1详细页面实现在线视频

下一节:15.6前端问题

返回《软件开发实训--动态网站开发》慕课在线视频列表

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.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

-6.6开发

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

15.5.1详细页面实现笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。