2.1 前端界面库 常见的前端界面库:layui,bootstrap等 本系统教程采用的是layui做为教学 前端界面库包含什么: -JS -CSS -少量界面图片资源 为什么要使用前端界面库 -统一风格 -快速构建前端界面 但是,对于大型前端开发团队,一般会自己定义. 2.2 使用layui 解压layui,把layui目录拷贝到项目下 可以发现1,里面有js,css,字体,图片资源 在HTML中引入 在HTML头部加上: layui/layui.all.js layui/css/layui.css 第一个例子 在HTML中引入layui里的样式. <button class="layui-btn">一个标准的按钮</button> 2.3 使用表格 参照https://www.layui.com/doc/element/table.html 官网文档 <body> <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人</td> </tr> </tbody> </table> </body> 2.4 表单 本节课介绍 layui 里面的表单的使用 1 添加表单 给 div 添加 class='layui-form' 样式 <div id='info' class="layui-form" style='width: 600px;margin:20px;'> ... 表单 ... </div> 2 添加一行 添加一个div, 指定class='layui-form-item' , 表示一行 <div class="layui-form-item"> .... 表单的一行 ... </div> 3 添加行内控件 一般会在行内添加一个label, input 例如，左侧label, 右侧 input <label class="layui-form-label">职位</label> <div class="layui-input-block"> <input class="layui-input" name='title'> </div> 在这里，用 layui-input-block 将<input> 包起来使用 layui-input-block: 占剩余空间 layui-input-inline : 指定空间 4 select / checkbox / ratio 在 layui 里，下拉列表要显示出效果来，必须手工调用 JS 在scrpit里添加一行: layui.form.render(); //对select/checkbox/ratio自动渲染 只有运行了这一行代码，才能显示出正常效果 5 layui 与 jquery 据作者说，layui里自带了一个1.x版本的jquery。不过，我们还用自己的jquery吧。 顺序： 先引入jquery，再引入layui 。 <script type="text/javascript" src="js/jquery.min.js" ></script> <script type="text/javascript" src="layui/layui.all.js"></script> <link rel="stylesheet" href="layui/css/layui.css" /> 然后便可以按正常方式来使用jquery了。 2.5 提示框 layui.layer.msg():提示消息,自动关闭 layui.layer.alert():提示消息 layui.layer.confirm():确认输入 .msg的提示消息自动关闭 <body> <button class="layui-btn layui-btn-normal" onclick='test()'>消息提示</button> </body> <script> function test() { layui.layer.msg('welcome,boy!'); //可以附加参数 //layui.layer.msg('welcome,boy!',(time:1500)); } </script> .alert提示消息 <body> <button class="layui-btn layui-btn-normal" onclick='test()'>消息提示</button </body> <script> function test() { layui.layer.alert('xxxx',{ title:false, btn:['确定','取消'], yes:function(index,layero){ console.log('执行删除操作...'); layui.layer.close(index); }, cancel:function(index,layer){ console.log('取消了操作...'); } }); //可以附加一些参数 //layui.layer.msg('welcome,boy!',{time:1500}); } </script> 使用open方法可以实现前面全部的功能,实质上.alert和.msg就是open方法的一种封装 2.6 弹出框 几个layui通用弹出式对话框的用法, 打开对话框 var index=layui.layer.open(...); 关闭对话框 layui.layer.close(index); 注:layui里用一个数字index来代表对话框 弹出框 (1)index:一个数字,指代对话框 (2)layero:此参数指向创建的DOM层对象 (3)success:此回调在创建层并显示后调用 (4)yes:此回调在点确认按钮后调用. 注:layui会新建一个层<div> <body> <button class="layui-btn layui-btn-normal" onclick='test()'> 购买 </button> <!-- 请定义一个顶级div作为对话框的内容 --> <div id='buy_dialog_content' style='display:none'> <div style='padding: 20px'> <div> <label class='layui-form-label'> 数量</label> <div class="layui-input-inline"> <input class='layui-input' style='width:140px' name='amount' > </div> </div> </div> </div> </body> <script> function test() { //返回值时一个数字,在layui里叫index,用来指代一个对话框 //title:标题 //content:内容(请单独定义一个顶级的<div>做为内容) //id:指定layui生成的层对象的id //area:宽高 //btn:按钮 //success:在层生成显示后的回调方法,可以在里面初始化表单的值 //yes:点确认按钮的回调 var layerIndex = layui.layer.open({ title: "购买数量设定", content: $('#buy_dialog_content').html(), id : 'buy_dialog', area:['400px', 'auto'], btn: ['确定'], success: function(layero, index){ console.log('初始化显示...'); $('[name=amount]', layero).val(1); }, yes: function(index,layero){ var amount = $('[name=amount]', layero).val(); console.log('amount=' + amount); layui.layer.close(index); } }); // 可以附加一些参数 // layui.layer.msg('welcome , boy !', { time: 1500 }); } </script> 2.7 独立的layer模块 layer.layui.com 在项目中可以只使用layer的包,而不使用layui. layui就是给后端使用的简单的前端框架. 独立的layer模块 1.先引jquery.js,再引layer.js 2.使用layer.open()创建层.而不是使用layui.layer.open(). 3.不含layui的其他模块和样式 3.1 富文本编辑器 普通富文本编辑器:<textarea>,只能编辑纯文本 富文本编辑器:带格式的能图文混编的编辑器 常见的有, UEditor:https://ueditor.baidu.com KingEditor:http://kindeditor.net/ 富文本编辑器特点 -基于HTML网页实现 -支持丰富的格式,如颜色,字体,对齐 -支持图文混编 -支持JS的API操作 3.2 KindEditor 演示版本:4.1.11 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script charset="utf-8" src="kindeditor/kindeditor-all-min.js"></script> <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script> //中文支持包 </head> <body> <!-- kindeditor placehoder --> <textarea id="editor" style="width:700px;height:300px;"></textarea> </body> <script> var editor = KindEditor.create('#editor'); //editor.html("<p> This is KindEditor. </p>"); </script> </html> 使用富文本编辑器KindEditor. 3.3 初始化参数 在初始化KindEditor时,可以指定一些配置参数 var editor=KindEditor.create('#editor',{ ...参数... }); 比如, items:工具按钮组 cssData:文本样式 <script> var config = { cssData : 'p{ font-size:14px;text-indent:2em;}' , items : [ 'source', , '|','fontname', 'fontsize' , '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight' , '|', 'justifyleft', 'justifycenter', 'justifyright' ] //items定义工具按钮 }; var editor = KindEditor.create('#editor', config); //editor.html("<p> This is KindEditor. </p>"); </script> 3.4 API KindEditor提供一个API以便操作 如,editor.html()可以设置/取值 editor.insertHtml()可以在当前位置插值 注:可以引入jquery,和jquery同时使用. <button onclick='do_submit()'>发布</button> function do_submit() { var data={}; data.title=$('[name=title]').val(); data.content=editor.html(); console.log(data); } 3.5 图片上传 //用到时再看. 在 MyEclipse 里新建一个 Web 项目， 部署到 tomcat 下 http://127.0.0.1:8080/senior0305/ 1 在工具栏添加一个图片按钮 items : [ 'source', , '|','fontname', 'fontsize','image', '|', 'forecolor', 'hilitecolor', 'bold','italic', ] 2 后台添加一个接收文件上传的 Servlet KindEditorUpload UrlPattern: *.kind 按照 kindeditor 的要求，上传成功时返回（示例）， { "error" : 0, "url" : "http://www.example.com/path/to/file.ext" } 上传失败时返回（示例）， { "error" : 1, "message" : "错误信息" } 3 在 kindeditor 初始化参数里设定， uploadJson : 'fileupload.kind' 即指定后台服务的地址 4.1 Hibernate表的设计 例如 学生信息表student 字段 类型 意义 id INT 行ID code STRING 编号(学号) name STRING 姓名 gender TINYINT 性别 deptId SMALL INT 院系ID year SMALL INT 入院年份 contact STRING 联系电话 email STRING 邮箱 timeCreated DATETIME 创建时间 timeModified DATATIME 修改时间 命名规范 表名:小写,加下划线 如user_log user_privilege 列名:首单词小写,其他大写首字母 如:timeCreated lastLoginTime 自增主键,索引,自增起点 id:自增主键(数字ID查询速度快) code:学号,字符串型 为学号建立unique index unique唯一索引 自增起点:1000000(100万为起点,目的ID整齐,都是七位整数) 其他 bool类型等价于tinyint(1) varchar列的最大长度,影响其实不大 再建立一张院系的表dept 字段 类型 意义 id SMALLINT 院系ID code STRING 院系编号 name STRING 名称 manager STRING 负责人名称 telephone STRING 联系电话 timeCreated DATETIME 创建时间 timeModified DATETIME 修改时间 表的关联关系 在student表中,deptId记录的是该学生所在院系的ID student.deptId<--------->dept.id 数量级估计(重要) 学生:每年10000*10年,最大100000人(10万) 数量每年增加一次(INT) 院系:数量<500,几乎不会变化(SMALL INT) 自增ID<-->指定ID student.id:自增 院系ID:由于院系比较少,所以可以手工指定ID,也可以自增 小结:设计了两张表student和dept. 4.2 Hibernate 生成POJO类 逆向生成POJO类 使用Hibernate Reverse Engineering 8.1 初识HTTP HTTP协议 HTTP,HyperText Transfer Protocol(基于TCP) 简单的说,用于请求资源/下载文件的一个协议 服务器称为HTTP服务器,如tomcat 客户端称为HTTP客户端,如chrome浏览器 HTTP协议 从客户端的视角来描述HTTP协议 比如,服务器上有一个文件,book.jpg 想要下载这个文件,于是 (1)建立tcp socket,连接到服务器 (2)发送请求,请求里注明我要的文件 (3)接收请求,把数据保存到文件 演示 test.afanihao.cn/201705/hello.txt test.afanihao.cn/201705/book.jpg 注:清理缓存,否则可能提示304Not Modified 8.2 HTTP请求(Socket) HTTP的几种实现方式 1.使用Socket(理解原理) 2.使用URLConnect 3.使用Apache Http Component(最常见的API) HTTP:用Socket实现 HTTP是基于TCP协议,建立一个Socket即可实现 大致上就是一个普通TCP的基本使用步骤: Socket s=new Socket() s.connect(...) s.getOutputStream().write(...) s.getInputStream().read(...) s.close() HTTP的几种实现方式 发送请求: String request="GET/201802/book.jpg HTTP/1.1\r\n" +"HOST:test.afanihao.cn\r\n" +"\r\n"; 注意:每行末尾\r\n HTTP的几种实现方式 接收应答: InputStream instream=client.getInputStream(); 解析部分稍微复杂,大致思路: -先把头部的每一行接收下来 -空行表示头部结束 -继续接收,把正文部分保存下来. 难点: 1.HTTP的头部是文本形式,正文是字节形式 因此正文里可以是一个jpg文件的数据,也是一个mp4文件的数据. 2.空行标志着头部的结束,正文的开始 问题是:什么叫空行 3.如何一行一行的接收 4.用BufferedReader来读取头部时,会多读取到一部分正文数据. 因此用自己写的AfBufferedReader 小结: 1.展示了Socket方式访问HTTP的方法 2.常用的方式是使用Apache Http Component的API
网站高级
猜你喜欢
转载自www.cnblogs.com/cqbstyx/p/10551923.html
周排行