当前课程知识点：软件开发实训--动态网站开发 > 9 后台主界面实现 > 9.3管理主界面实现 > 9.3.1管理主界面实现

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

9.3.1管理主界面实现在线视频

下一节:9.4.1授权验证拦截器实现

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

9.3.1管理主界面实现课程教案、知识点、字幕

同学

你好

欢迎回到软件开发实训课堂

上节课我们已经把登陆的整个流程实现了

那么登录成功后

我们会来到后台的主页

那么这节课咱们就把这个主页实现

打开我们的index的html

把多余的内容可以清掉

然后增加我们的命名空间

把thymeleaf模板增加进来

首页呢

标题写上

网站后台管理系统

然后把css拿过来

我们可以去其他文件复制一份

这样就不用我们从头再去写

处理

好

这些红色的线是开发工具去检测造成的

不认识

所以它出现了红色

我们可以去掉它

点击前面的灯泡

然后选择禁止对此文件执行html检查

这样的话它的红线就消失了

那么我们的主页规划对于后台来讲比较容易

前面我们没有去过多的去分析他

但是整体的结构我们已经给出来了

现在我们就按照我们前面的整体结构的

设计来看一下

先把容器给出来

我们这里可以让它占满整个屏幕

然后首行

首行主要是显示logo或者是

管理后台的网站系统的名称

以及谁登录了等等

以及当前时间这些信息

当然你也可以放上退出这样的按钮

第二行是具体的操作

所有的操作菜单链接以及我们操作的界面

都会在第二行出现

第三行你可以放一些提示的信息

比如说技术支持等等

好

我们来看一下

对于我们顶部

我们首先可以放一个提示文本

就叫做网站

后台管理系统

我们可以让它占上一半的空间

所以我们给他六个单元格

然后我们还可以显示当前登录的用户

欢迎把它写出来

因为他在setion里面

所以我们可以去通过筛选去获得它

account用账号显示

欢迎谁谁登陆

后面可以给出一个退出的链接

后边我们在实现它的退出功能

这样我们的网站的顶部就暂时实现好了

然后是我们网站的具体操作区域

操作区域

我们也把它分成左右两个部分

我们分少一点

左边主要是操作链接区

然后右边是我们的

每次点击链接后内容的展示区

我们让它占大一点

对于所有的页面

我们不再去做单独的头和尾

所以我们只把具体操作的内容放到了

页面上

比如说编辑用户

他没有相关的头和尾的部分

所以我们在显示的时候

把它放在iframe这样的框架里边去

iframe实际上是一个浏览器中的浏览器

我们可以用样式来控制它

让它按照我们的尺寸来显示它的具体内容

我们先把它加上一个ID

这样我们超链接左边的超链接

它的目标都是frame

把他的点击链接后显示的内容都到

frame来

我们先暂时写到这一块

现在我们来写

右边的

右边我们把内容放在导航里

后台的菜单我们可以把它固定着

因为它的功能是有限的

也是很具体的功能

比如说我们有用户管理

用户添加这样的功能

我们先看一下用户添加的

用th来输入他的地址

edituser

这叫用户添加或者添加用户都行

然后第二个

用户管理

或者用户列表

这主要是对于用户查询方面的

删除和修改的入口等等

所以我们这里写用户管理

listusers

那么我们的超链接一旦被点击后

它的内容进入到frame里去

而不是弹出这个窗口

也不是在当前的整个窗口里去显示

而是在frame里去显示

现在我们已经有了这样的一个界面

我们去浏览器先看一下

我们对

登录

我们进入登录界面来重新让它登陆成功

进来后他说有一个错误

我们可以看一下它的错误信息

在下面他说有一个session account

这样的表达是不能够被解析

说属性

user

不能被找到

也就是说你登录成功了

他找不着这个user

它无法获得user对象

我们通过方法来获取

使用单引号因为外层已经是双引号了

好渠道后我们来刷新界面

这样我们就得到了用户的账号信息

好

我们取消中断

得到用户信息后

我们看界面它已经进入到主界面了

现在我们只需要点击我们的超链接

它已经能够在

frame里边去展示我们的操作界面了

只要我们点击任何一个链接都可以看得到

现在我们对frame做一个样式的处理

frame只出现在这个界面

所以我们直接写在上面就可以了

myframe首先给它的宽为百分之百

高度

我们可以给他一定的高度

比如说800PX

边框设为零

这样设定后

我们来看一下效果

现在你在主界面上能看到的就是这些

基本的连接了

没有frame

我们点击链接

你就可以看到我们进入到相关的操作界面

这就是我们对主页一个简单的实现

好

关于网站后台的主界面

我们就实现到这里

下节课我们再见

软件开发实训--动态网站开发课程列表：

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用户管理添加用户调试

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随堂测试

9.3.1管理主界面实现笔记与讨论

也许你还感兴趣的课程:

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