第二章.创建web项目. file->new->web project. 设置 java version 1.8 设置 Target Tomcat8.0 web项目下面src JAVA源码目录 WebRoot 网站目录 WEB-INF classes及lib目录. webroot下添加HTML. 如何创建一个web项目,了解了web项目的一般结构. 2.2部署web项目. 1.创建web项目. 在浏览器打开网页时, 汉字出现乱码? 解决办法:手工修改html,在<head>里 添加 <meta charset='UTF-8' /> 在tomcat目录下,<Host>标签内最后添加<Context path="/demo" docBase="E:\JavaWeb\demo0202\WebRoot" /> 其中, docBase 指向 WebRoot目录的路径 ,path是网站的映射路径 注意是WebRoot的目录,不是项目目录 第三章 Servlet servlet 服务小程序. java web很重要的功能. 在src下面的packge下面新建一个servlet 每次记得修改tomcat的server.xml的docBase Servlet运行原理 get/servlet 浏览器(客户端)--------------->Tomcat(服务器) <--------------- 200 OK 资源内容 tomcat在接收到客户端请求后,会根据请求的资源路径URI,来分派给不同的Servlet来处理 例如: /SimpleServlet ->my.SimpleServlet 3.2 创建时间服务 1.创建showtimeservlet服务. 2.修改@WebServlet("/ShowTimeServlet")->@WebServlet("/showtime") //修改的就是uri的地址. 3.doGet代码修改. response 是应答,request是请求. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { SimpleDateFormat sdf =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String timestr =sdf.format(new Date()); //当前时间 response.getWriter().write("Now:" + timestr); //暂时不用中文避免乱码. } 注意: 1.uri区分大小写. servlet运行原理 get/servlet 浏览器(客户端)--------------->Tomcat(服务器) <--------------- 200 OK 时间 tomcat在接收到客户端请求后,会根据请求的资源路径URI,来分派给不同的Servlet来处理 例如: /SimpleServlet ->my.SimpleServlet /showtime->my.ShowTimeServlet. doGet()可以修改返回数值和方法. 3.3 生成HTML 添加一个Servlet,用于生成HTML页面. -添加HtmlServlet -映射URI为 /test/1.html (称为映射路径) //映射路径 @WebServlet("/test/1.html") protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); //设置字符集编码 response.setContentType("text/html"); //设置内容格式 PrintWriter out =response.getWriter(); out.write("<html><body> 如何<html><body>"); //返回客户端的数据 } servlet运行原理 get/test/1.html 浏览器(客户端)--------------->Tomcat(服务器) <--------------- 200 OK 时间 1.一个URI 可能是一个文件,也可能是一个Servlet 2.客户端不能区分,也没必要区分 3.如果既不是Servlet,又不是文件,返回404错误 4.如果即是Servlet,又是文件呢. 3.4 生成JavaScript Jscript @WebServlet("/sample.js") public class JscriptServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); // 设置字符集编码 response.setContentType("text/plain"); // 设置内容格式 PrintWriter out = response.getWriter(); // 返回一行javaScript文本 out.write("var author='仁豪'; "); out.write("var name='yyf'; "); } } 写一个.java文件 创建html,导入juery.js, <html> <head> <title>RH.html</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="sample.js" ></script> </head> <body> <div class='main' style="height: 35px; "> </div> <div class='ame'> </div> </body> <script> $('.main').html ( author + author ); $('.ame').html (name + name); </script> </html> 此外tomcat的配置 <Context path="/demo" docBase="E:\javaweb\demo0201\WebRoot" reloadable="true" /> docBase写到WebRoot一级目录才行. 4.1 POJO 简单的java类. -属性:简单类型 int String boolean... -方法:Getter/Setter POJO类可以重写toString() 4.2 JSON javascript对象的文本化表示 jar包放在WebRoot下面的WEB-INF 下面的lib里面,自动bulid path JSON多用于数据传输 { "id":20111111, //示例 "name":"仁豪", "phone":"1300099"; } 使用JSON-ORG 或者jsonlib来操作JSON 其中,大括号表示一个JSON对象。在这个对象里,包含4个字段。 例如, "id" 字段的值为 20180001,是数字类型 ( Number ) "name" 字段的值为 "邵", 是字符串类型 ( String ) "sex" 字段的值为 true,是布尔类型 (Boolean) 可以很直观的发现, 如果值是一个String,则应该用双引号,如"邵发" 如果值是一个Number,则不加双引号,如20180001 如果值是一个Boolean,则应该是 true 或者是 false, 不加双引号 加入JSON-java JSON-lib JSONObject jobj = new JSONObject(); jobj.put("id", 20180001); // Integer jobj.put("name", "邵发"); // String jobj.put("sex", true); // Boolean jobj.put("cellphone", "13810012345"); // String String jsonstr = jobj.toString(2); System.out.println(jsonstr); JSONObject里的字段显示顺序是无关的,谁先上、谁在下不影响最终结果。 // POJO -> JSONObject // 如果是POJO对象 ( 已经添加了 getter ),则可以直接转成JSONObject public static void test3() { Student stu = new Student("邵发", 1238909, true, "13810012345"); JSONObject j = new JSONObject(stu); String jsonstr = j.toString(2); // 缩进2 System.out.println(jsonstr); } JSON的语法格式 用JSON可以表示Object信息,以一对大括号包围,里面可以多个字段。 例如: { "name": "邵发", "id": 1208439, "sex": true, "phone": "13810012345" } 语法要点: - 以大括号包围 - 字段名称要加双引号 - 字段的值可以为String, Integer, Boolean, Array, null 等类型 - 每个字段以逗号分隔 (最后一个字段末尾不能加逗号) - 字段的顺序无关 注:JSONObject在概念上对应于Java里的Map public class TestJson { public static void test1() { Student pojo =new Student(20180001,"仁豪",true,"13800000"); JSONObject jobj =new JSONObject(pojo); String js =jobj.toString(2); //縮放為2是 System.out.println(js); } public static void test2() { ArrayList<Student> students = new ArrayList(); students.add(new Student(20180001,"仁豪",true,"13800000")); students.add(new Student(20180002,"x",true,"138000001")); students.add(new Student(20180003,"y",true,"138000002")); students.add(new Student(20180004,"z",true,"138000003")); JSONArray jarray =new JSONArray(students); System.out.println(jarray.toString(2)); } public static void main(String[] args) { test2(); } } 直接添加一个main方法,单元测试. 4.3使用json public class StudentQuery extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ArrayList<Student> students = new ArrayList(); students.add(new Student(20180001,"仁豪",true,"13800000")); students.add(new Student(20180002,"x",true,"138000001")); students.add(new Student(20180003,"y",true,"138000002")); students.add(new Student(20180004,"z",true,"138000003")); JSONArray jarray =new JSONArray(students); response.setCharacterEncoding("UTF-8"); response.setContentType("text/plain"); //設置內容格式 PrintWriter out = response.getWriter(); //返回javascript文本 out.write(jarray.toString(2)); } } 4.4 web项目的调试 java调试的一般方法. 1.打印调试. 2.单步调试 两者结合使用. 单步调试. 以debug方式运行服务器 点debug下面的debug configurations 选择tomcat8.0下面的source(来源) add,javaproject 勾选目标project文件夹,然后ok ,apply,close. 然后在代码添加断点,在浏览器输入地址. myeclipse弹出提示是否切换debug页面. 如果关闭,在Windows,show view里面找 source not found ,第三方jar不用管. web项目的调试,被调试的主体其实是tomcat程序,tomcat程序会间接的调用我们的servlet代码. 第五章 5.1 数据查询. 查询和显示数据库中的数据. 模拟:一个假的数据库. DemoDb:用于模拟一个数据库. 实现一个查询功能,可以返回所有数据行. URL查询. @WebServlet("/QueryAll") public class QueryAll extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Student> rows = DemoDb.i.list(); // List -> JSONArray JSONArray result = new JSONArray(rows); // 返回应答数据 response.setCharacterEncoding("UTF-8"); response.setContentType("text/plain"); Writer writer = response.getWriter(); writer.write( result.toString(2)); writer.close(); } } 5.2 URL参数 按学号范围进行查询. 比如,查询20180001-20180004. 客户端需要把请求的参数发给服务器. 请求可以附在URL末尾 例如:http://127.0.0.1:8080/demo/QueryById?from=20180001&to=20180004 URL参数的写法规则: 1.以问号引导QueryById?xxxxx 2.多个参数对中间用&分开 示例:?key1=value1&key2=value2&key3=value3 3.中文参数比较复杂. 使用request.getParameter("...")获取URL的参数. @WebServlet("/QueryById") public class QueryById extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //从request 里取得参数 String strFrom = request.getParameter("from"); String strTo = request.getParameter("to"); //参数处理 int from = Integer.valueOf(strFrom); int to = Integer.valueOf(strTo); //数据查询 List<Student> rows = DemoDb.i.list(from, to); //List->JSONArray JSONArray result = new JSONArray(rows); //返回应答数据 response.setCharacterEncoding("UTF-8"); response.setContentType("text/plain"); Writer writer = response.getWriter(); writer.write(result.toString(2)); writer.close(); } } 5.3 HTTP网络抓包演示 请求/应答模式.
Wireshark 网络鲨鱼. 可以抓取本机和其他机器的数据交互. HTTP协议:应答数据. HTTP/1.1 200状态码. 200-OK,可以访问 403-Forbidden 无权访问 404-Not Found 资源不存在 Content-Length:287 表示正文部分的长度为287字节 正文内容 头部按行定义,每行末行为\r\n 头部与正文之间有一个空行. 5.4 Chrome浏览器抓包 请求/应答 模式. -F12,开发者工具. -切换到network面板. headers表示请求 response应答. 第六章 6.1 AJAX 后台提供的服务(接口),前台如何调用? http://127.0.0.1:8080/demo6/QueryAll http://127.0.0.1:8080/demo6/QueryById?from=1&to=10000000 前端希望取得后台数据,并且显示在页面上. AJAX,一种在网页上调用后台接口的方式. 后台接口:指后台代码实现的服务 类似 /demo/QueryAll /demo/QueryById jQuery里提供的AJAX调用方法. 示例: $.ajax({...参数...}) 其中, -$.ajax()等同于jQuery.ajax() -参数里面是一个JS对象 test.html <!DOCTYPE html> <html> <head> <title>test.html</title> <meta charset='UTF-8' > <script type="text/javascript" src="js/query.min.js"></script> </head> <body> <div