当前课程知识点:软件开发实训--动态网站开发 > 15 网站前端页面实现 > 15.2首页内容脚本实现 > 15.2.1首页内容脚本实现
同学 你好
欢迎回到软件开发实训课堂
上节课咱们把组件引入到首页来了
那么这节课我们来看一下
对首页的相关接口进行脚本的调试
我们来看一下
那么对于公告我们还要去检索内容
所以我们要去后台请求数据
对于后台请求数据
我们需要找到VUE的根结点
也就是vue的实体
实例化对象
在vul的实例化对象里面
我们找到请求
后台
数据的位置
也就是我们的滚动
还有幻灯片等等
我们把公告给它加上
这样我们获得数据直接给公告对象就可以了
而在我们的数据区域里边
我们需要去初始化一下公告
我们简单的初始化它需要的两个内容就行
这样公告就加完了
同样的
我们也需要三个内容
方式是一样的
home CON首页的内容
他是一个数组要注意
获取到的是数组
而上面获取到的是对象
同样我们需要对这个数组做一个定义
这样我们把后台的数据就获取到了
那么获取到后台数据后
我们还需要在内容区进行操作
内容区一共有三个部分
我们可以把它进行循环
用他的公共内容循环
V-for
循环的是
home con
这是一个数组
具体的内容
第1个
他是我们也可以用表格这里用行
是一个图片
这里我们绑定它
HC点TIMG这个图片宽度
一定要限制一下
因为我们的图片没有做处理
所以一定要限制它的宽度
那么宽度是多少呢
我们可以打开他的网站去看一下
193×85
193
85
这是它的宽和高
然后他的第2行是他的标题
我们用差值来显示他title
最下面显示它的内容
可以用一个DIV来完成
这样我们的首页内容也就显示出来了
好
我们来运行一下
把这三个部分去掉
现在运行我们的程序来看一下
运行成功后
我们打开浏览器去访问一下
登录我们的后台
添加内容
上传图片
把他们都一次性上传上去
这样我们拿到了一张图片
这里面是首页的内容
权重我们给0
具体的内容我们在站上去复制它
把它粘到我们的内容区
这里是把它的整个table过来了
我们不需要它
我们过滤一下内容
保存
这样我们就有了产品
然后我们添加第2个
solutions
内容用记事本过滤一下
沾到我们的内容区
他也是首页内容
权重我们给1
标题图片我们选择
第2个
好添加关于我们上传图片
它是内容区
权重2
把内容复制一下
在记事本中过滤
保存
我们访问首页
可以看到我们的内容已经出现在页面上了
那么下一步需要做的就是对它进行美化
那么还有一个位置就是
我们的版权和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随堂测试