制作字典管理页面

开发工具与关键技术：制作字典管理页面
作者：冉启东  年级：1804
撰写时间：2019年06月15日                
本技术文献起止时间 2019年 06月08日～ 2019年06月18日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
导入此页面的css写入此页面需要的代码如图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143400999.PNG)
再行导入bootstrap.min.css和layui.css，由于bootstrap.min.css以及layui.css代码太多而且又是横写的没办法一次截图完所有就不截图了，不知道的自己去百度上找。
再导入Main的css进行图片的全局化，代码如图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143446956.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143422170.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70)
在body写入div class="dropdown" style="font-size:18px;font-weight:400;"再在下一行写入div class="btn-group" style="margin:0px 7px 8px 7px;
再写入buttontype="button"class="btnbtn-darkdropdown-toggle"data-toggle="dropdown"系统设置(M)span class="caret"/span/button设置系统设置按钮
ul class="dropdown-menu" role="menu"
li a class="dropdown-item" id="OperationLog" href="#"操作日志/a /li
li a class="dropdown-item" id="SystemParameter" href="#"系统参数设置/a /li
li a class="dropdown-item" id="ChangePassword" href="#"修改密码/a /li
li a class="dropdown-item" id="StationInformation" href="#"车站信息/a /li
li a class="dropdown-item" id="UserInformation " href="#"用户信息/a /li
li a class="dropdown-item" id="UserType" href="#"用户类型/a /li
li a class="dropdown-item" id="UserTypePermissions" href="#"用户类型权限/a /li li a class="dropdown-item" id="PersonnelOnline" href="#"人员在线情况/a /li li a class="dropdown-item" id="GenerateTicketVersion" href="#"生成票版/a /li li a class="dropdown-item" href="#"清空演示数据/a /li li a class="dropdown-item" href="#"LED显示/a/li li a class="dropdown-item" id="Dictionary" href="#"字典管理/a/li li a class="dropdown-item" href="#"转换存储数据库/a/li/ul/div/div,写好点击开后的样子如图 。业务管理，售票管理，检票管理，路单管理，调度管理，安全检查，稽查出站，对外结算，财务管理，领导查询，票据管理，统计分析，语音播报，行包托运，代码如上所有的写好了没有点击开的效果如图； ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143512149.PNG)
写入div class="container-fluid"把之前写好的表格页面让其加载并且显示出来如图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143530125.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70)
!--=======================content 显示需要加载的页面===================--        iframeid="content"style="display:block;width:100%;border:none;height:1200px;"src="/DictionaryManagementInputInterface/DictionaryManagementContent"/iframe
!--=======================content 显示需要加载的页面===================-->
/div把上一个DIV收起来
再写一个设置模态窗体divclass="container" divclass="modal fade" id="exampleModal" aria-hidden="true" style="display: none;"
div class="modal-dialog" role="document" div class="modal-content"
div class="modal-header"h5 class="modal-title" id="exampleModalLabel"添加字典窗口/h5 buttontype="button"class="close" data-dismiss="modal"arialabel="Close"
span aria-hidden="true" × /span /button /div div class="modal-body"h5 ID /h5类型:input name="" type="text" size="15"style="width:155px;height:25px;"
内容:input name="" type="text" size="15" style="width:155px;height:25px;"
/div div class="modal-footer" button type="button" class="btn btn-secondary" data-dismiss="modal"关闭/button button type="button" class="btn btn-primary"保存更改/button/div/div/div/div/div
div class="buttom" button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" 添加 /button以上就是添加的模态窗体如图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143630488.PNG)点击添加然后会弹出模态窗体如图![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143642159.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70) 输入需要打内容点击保存更改。
button class="btn btn-outline-secondary" id="Delete"修改/button
button class="btn btn-outline-secondary" id="Delete"删除/button
button class="btn btn-outline-secondary" id="Delete"打印/button
button class="btn btn-outline-secondary" id="Delete">返回
/div按钮写完后如图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143659937.PNG)
导入jquery-3.2.1.min.js实现下拉菜单
导入popper.min.js
导入bootstrap.min.js实现按钮
/body
/html
全面图如图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190615143720192.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70)