当前课程知识点：软件开发实训--动态网站开发 > 13 网站配置管理实现 > 13.2网站配置界面模板实现 > 13.2.1网站配置界面模板实现
同学
你好
欢迎回到软件开发实训课堂
上节课我们讲了网站配置的相关类接口的实现
那么这节课我们来看一下界面该如何实现
前面说了
对于网站的配置用一个模板就可以了
因为他不需要去添加或者是删除这样的操作
也没有过多的数据查询出来的结果
不需要分页
好
我们在母版文件夹上点击右键
选择新建html来创建我们的editorSite
这样的文件打开后
我们来找一个文件
复制一下一些内容
我们就不需要再写它上边和下边的内容了
像这脚本就不需要再去重复的写他
禁止对文件进行错误检查
所以就看不到那些红线
要不然看到红线
麻烦我们来修改一下
这里叫网站相关信息配置
网站配置管理
然后我们的form要注意
它的每一个配置都需要一个form
因为他每一个配置在数据库里边实际上就是
一行数据
而它储存的时候用的路径是savesite
post方式
object我们也不需要了
然后我们在这里来写我们的内容
把DIV变成列
在这个列里边
我们显示我们所有的表单域
这里的表单域我们把多余的都删掉
可以留下一个按钮
而这个按钮放在这里
首先我们对表单进行循环
我们的对象叫sites在循环过程中
我们把每一个表单域给它放到Div里来
首先是input
隐藏域
ID是它数据的关键字
内幕也叫SID然后value需要动态的输出
所以前缀加th
然后我们就可以输出了
S点SID这是另外一个有了主键后
我们的标题一般情况下是不需要修改的
所以标题readonly就行
我们把它显示为纯文本格式
它的ID叫title
这样我们就让标题显示出来了
而对它的值需要进行修改
每一个值它是不一样的
根据它的类型不同
它的值是不一样的
首先我们把键ID等于skey
name等于skey value
s.skey
把他的键输出来隐藏
键不需要进行修改
因为程序会用到键
所以你要修改了
程序就无法读取了
而唯独能够修改的就是它的值
先把它显示出来
那么不同的类型
它显示的值的控件是不一样的
所以我们还需要进行判断
我们这里加一个DIV来做判断
这里说
如果我们得到的类型
把他转成小写
s点stype
等于text
说明他是一个普通文本
如果是html
那么也就是说支持父文本
也就我们用一个大文本框来输入数据
把C改成大写
这方法名LowerCase
另外对图片
图片就需要有一个上传图片的按钮
然后我们给出一个class
把它变成按钮
上传
把它写成浏览更符合一些
有时候不一定是图片
可能是视频
这里是image
给它一个ID
当点击的时候
我们就可以拿到这个图片
打开我们的图片对话框
那么拿到以后放在哪儿
放在文本框里面
我们文本框就不需要它显示出来了
隐藏着就可以了
好
那么图片总归让用户能够看见
这个时候我们需要一个src
等于文件的路径
来显示图片
我们可以把值
如果存在的话就给它显示出来
s.value
作为图片显示时
他有这样一个ID
然后我们就可以改变他
对于html
实际上和html可以给它弄成一个
都是父文本框
这样一来我们就需要ue
打开我们的内容编辑器
把ue的相关脚本复制过来
在这里我们就可以对他进行脚本编写了
script
我们只是简单的把文框显示出来
这里是var ue等于
get Editor
svalue
这里边有一个问题
如果说我有两个这样的框
这样的话ID就会重复
可以看一下
这是
svalue底下也是svalue
所以这样的话
多个svalue
就会出现
怎么办
我们可以用ID改变一下
把ID的值呢给它改掉
下划线
这样我们在这里也就可以输出它了
我们的ID也可以重新拿到
得到ID是
svalue下划线
我们可以用这样的方式把它加到一起
最后把ID给UE就可以了
同样的方式也可以用在下面也行
这是没有问题的
给每一个框单独的生成一个编辑器
而不是把编辑器共享
会引起一些问题
所以我们不如单独
这样的话他们相互之间是独立的
这样就可以了
这样无论你有多少个大文本框出现
那么它的编辑器都是相互独立的
互不影响的
那么通过对表单进行循环
那么所有的数据都是对应了单独的表单
也就是说数据库中每一条数据对应了一个表单
每个表单之间也相互不影响
都有自己的保存按钮
这样我们就有了网站的配置信息
好
有关网站配置界面的实现
我们就讲到这里
下节课我们再见
-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随堂测试
