当前课程知识点：软件开发实训--动态网站开发 > 15 网站前端页面实现 > 15.4Vue组件放入单文件 > 15.4.1Vue组件放入单文件
同学你好
欢迎回到软件开发实训课堂
上节课我们已经将首页制作完成了
剩下的美化工作
还需要你下去以后来完善它
那么这节课咱们看一下详细页面该如何实现
通过参考网站
可以看到详细页面里面
它的菜单部分和logo部分
以及版权部分是与首页共有的
但是在中间的部分
它有一个进入网页的提示
这是一个
第二个呢，它依然有搜索
还有另外一级的菜单
这个菜单实际上只是产品和解决方案
这两个菜单
把它放在了左边
这样展示出来
然后具体的内容放到了
这个右边区域
每一个内容它都不一样
好
我们来看一下如何去实现
在实现详细页时
我们的左边部分菜单
还是由你下去后来完成它
我们只需要把整个界面的大体的框架实现了
就可以了
好
首先我们来看公共部分该怎么处分
首先我们来看一下详细页与首页它的公共区域
该怎么处理
对于公共区域
包括了菜单logo以及下面的版权
而这些信息都是通过
我们的Vue来实现的
所以我们需要把Vue的相关内容
放在单独的文件去
比如说菜单
我们把它的模板
还有它的相关脚本都放在一个监视文件里去
为了做这个工作
我们需要把所有下边的有关Vue的模板
和组件的实现给它拿出来
剪掉
然后在JS目录下新建一个javasoript文件
我们就把它叫做sites.js
把我们复制的内容拷贝进去
这个时候我们可以看到它有html内容
也有javascript脚本
我们把所有的html内容转变成一个
javascript的变量
你可以用普通的字符串
也可以使用模板字符串
这里我们就以模板字符串为例来看一下
首先
我们定义变量
把ID变成变量名
这个单引号是键盘上escape下面那个键
"1"的左边键上的单引号
这个要注意
我们把这样单引号引起来的字符串
称之为模板字符串
这是javascript里面特有的
然后把这个变量交给对应的组件
注意不能再使用双引号把它括起来
它已经是变量名称了
这样我们的一个组件就写好了
同样的
我们定义幻灯片
模板字符串
不能有script标签
变量
不能带双引号
菜单
把它的格式调整一下
最后是我们的Vue实例化
去掉标签就可以了
然后调整一下格式
保存
那么怎么来用呢
我们只需要
去index文件里面把它包含进来就可以了
现在我们刷新界面看一下
好
效果依然是这样
下面的错误是因为我们初始化的时候并没有
给它初始化的值
所以你把初始化给它带上
另外图片找不到
这是它的一个错误
关于图片这一块
我们需要做一个简单的修改
因为springboot它把路径呢
做了一个临时路径
什么路径呢
就是我们的网站的根目录
它用的是一个临时目录
所以我们每次上传图片都是
上传到了临时文件夹里
当我们重新启动服务器时
这个文件夹就消失了
或者说它又重新生成了临时目录
造成我们每次都不能正常使用
所以我们需要把这个进行一次修正
怎么来修正呢
我们首先打开我们的配置文件
在我们的配置文件里面
我们定义一个变量
比如说我们定义变量
在这个目录下
斜杠
然后我们定义它的资源路径
所有的资源路径都来自于classpath
我们在static下
所以我们写这样子
然后我们再需要一个翻路径
那就是这个upload
注意这个upload是我们自定义的路径
好
然后我们再去我们的控制器
这里边获取的上下文路径
我们的UEdit编辑器在请求时
通过UEditContrller进入到编辑器的后台
在这个后台里我们使用了上下文获得路径
但这个路径始终它得到的是一个临时路径
我们需要把它改掉
去读取我们的配置
Propertysource
我们读的就是application.properties
这个文件
然后我们读取属性Value
读的值是upload.path
这样我们把rootpath
就可以给它改掉
使用我们自己的路径
这样每次它就不会发生变化
这是个绝对路径
所以我们直接给它就可以了
好
这样呢
我们把这个路径就改过来了
它每次就上传到文件夹下去了
现在呢我们再次访问我们的网站
去后台上传我们的数据
这样我们的数据就不会再消失了
它始终在这个位置里面
好
这些个内容就是我们上传后的内容
好
这节课就讲到这里
下节课我们再见
-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随堂测试
