Java项目笔记之知识点总结03 - HelloWorld开发者社区

不点蓝字，我们哪来故事？

SSM

本质是 Spring 去集成 Spring MVC 和 MyBatis，即控制器对象、业务对象、 Mapper 对象等都交由 Spring 容器管理，使用 Spring IoC 和 DI 来完成对象创建及其属性注入，使用 AOP 来配置事务。

作用是在框架上基础上开发，发挥各个框架在各层的好处，提高开发效率。

步骤：

先用 Spring 集成 MyBatis，再加入 Spring MVC。

搭建项目，添加依赖配置插件。
把 Spring 和 MyBatis 的等配置文件拷贝进项目 resources 目录下
配置数据库连接池
配置 SqlSessionFactory
配置 Mapper 组件
配置 Service 组件
配置事务相关
在 web.xml 配置端控制器和编码过滤器
在项目 resources 目录下添加 Spring MVC 的配置文件，并配置 MVC 注解解析器，扫描控制器，静态资源处理，视图解析器等等
在 Spring MVC 的配置文件中引入 Spring 配置文件

创建项目：注意打包方式 war。

添加依赖和插件：前面集成项目的依赖和插件。

MyBatis 逆向工程

一个 Maven 插件，根据数据的表生成实体类和 Mapper 接口和 Mapper.xml。

在 pom.xml 引入插件，在项目中 resources 目录中提供配置文件 generatorConfig.xml；

创建表，修改配置文件中修改连接数据库的四要素，修改根据哪个表名来进行逆向，修改完成运行插件命令。

拦截器：

如何定义拦截器：定义一个类实现 HandlerInterceptor

 public class MyInterceptor implements HandlerInterceptor {

mvc.xml配置文件中配置拦截器
```
 
```
拦截器的执行流程

用拦截器实现登录逻辑：项目有些资源需要登录才可以访问的。在登录拦截器中判断session中是否有用户的信息来判断用户是否登录过，来决定拒绝或是放行。

JQuery

JSON

JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。

JSON 就是一种有格式的字符串。

规则如下:

映射用冒号（“:”）表示。“名称” : 值，标准格式名称用双引号括起来；
并列的数据之间用逗号（“,”）分隔。“名称1” : 值1, ”名称2“ : 值2；
映射的集合（对象）用大括号（“{}”）表示。{“名称1” : 值1, “名称2” : 值2}
并列数据的集合（数组）用方括号(“[]”)表示。

[{“名称1” : 值, “名称2” : 值2},{“名称1” : 值, ”名称2“ : 值2}]
元素值可具有的类型：string, number, object, array, true, false, null

Ajax

AJAX = 异步 JavaScript 和 XML。

一种新的发送请求的方式，让你可以通过 JS 代码发送请求处理响应，可以做到不刷新页面，发送的请求是异步的。

Ajax 不是一项具体的技术，而是几门技术的综合应用。Javascript、XHTML 和 CSS、DOM、XML 和 XMLHttpRequest。
Ajax 核心只不过是要在 Javascript 中调用一个叫 XMLHttpRequest 类，这个类可以与 Web 服务器使用 HTTP 协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的 JavaScript 对象发送请求和接收响应。
XMLHttpRequest 对象在网络上的俗称为 Ajax 请求对象。
一种不用刷新整个页面便可与服务器通讯的办法（更新网页部分数据）。

同步和异步的区别：

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

Ajax 缺陷

Ajax 大量使用了Javascript 和 Ajax 引擎，而这个取决于浏览器的支持。使用 Ajax 的程序必须测试针对各个浏览器的兼容性。
Ajax 更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
对流媒体的支持没有 Flash、Java Applet 好。H5
Ajax 不支持跨域访问。（不做特殊处理只能请求同源的资源）

状态码：

readyState 总共有 5 个状态值，分别为 0 ~ 4，每个值代表了不同的含义：

0：初始化，XMLHttpRequest 对象还没有完成初始化
1：载入，XMLHttpRequest 对象开始发送请求
2：载入完成，XMLHttpRequest 对象的请求发送完成
3：解析，XMLHttpRequest 对象开始读取服务器的响应
4：完成，XMLHttpRequest 对象读取服务器响应结束

status 是 XMLHttpRequest 对象的一个属性，表示响应的 HTTP 状态码：

1xx:信息响应类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求

**xmlhttp.readyState==4 && xmlhttp.status==200**的解释：请求完成并且成功返回

实例：

<head>



//后台响应

JSON 库

用来完成 Java 对象与 JSON 字符串之间的复杂繁琐的转换。

Jackson：在 SpringMVC 中内置的一个转换 JSON 的插件，速度也挺快，稳定性比较好。

Fastjson：阿里出品，号称是 Java 领域中转换 JSON 最快的一个插件，中文文档比较齐全。用起来比较友好的。 Java 对象 <---> JSON 字符串

依赖：

Jackson：jackson-databind
Fastjson：fastjson

Spring MVC 如何响应 JSON？

1、在 pom.xml 中添加 Jackson 依赖。

2、在 mvc.xml 配置 MVC 注解解析。(一般都已配置好了)

3、定义 JsonResult，有两个属性 success 和 msg。

4、改之前响应服务器时间的处理方法，在其上贴 @ResponseBody 注解，指定方法返回类型为 JsonResult。

5、在处理方法中创建 JsonResult 类型的对象，封装数据返回即可。

jQuery

jQuery 是一个优秀的 Javascript 框架。jQuery 是一个兼容多浏览器的 Javascript 库，核心理念是 write less，do more（写得更少，做得更多）。

为什么要用jQuery？

jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 Ajax 交互。

jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。

jQuery 引入

拷贝 jQuery 文件到项目中：jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用。
页面中引入 jQuery ：<script src="https://my.oschina.net/static/jQuery-1.11/jquery-1.11.3.min.js"></script>

jQuery 对象

通过 document.getElementById() 找到的元素和通过 $() 找不到元素不一样：

通过 jQuery 方法获取的页面元素，都是 jQuery 对象。
jQuery 对象其实就是对 DOM 对象进行了包装，增强相关了方法，让开发者使用起来更加便利。
虽然 jQuery 对象包装了 DOM 对象但是两种不能混用，可以理解为 jQuery 对象与 DOM 对象是两个不类型的对象，但是我们调用 jQuery 对象的方法，事实上底层代码还是操作的是 DOM 对象。

$ 与 jQuery

$ 表示 jQuery对象，即 $ === jQuery。

jQuery 对象与 DOM 对象之间转换

jQuery 对象上有很多 DOM 对象没有的方法，jQuery 中没有提供获取标签名的方式，所有需要把 jQuery 对象和DOM 对象相互转换：

$(DOM 对象)；$("#username")[0]

选择器：

方便快速地定位页面中任何元素，并为其添加响应的行为。jQuery 提供获取页面元素一种语法。

注意：如果通过 jQuery 方法获取页面中元素，没有查找到，返回值不是 null，返回值为一个空数组 []，所以判断是否获取到元素，通过 jQuery.length != 0 来判断。

#id：根据给定的ID匹配一个元素
element**：**根据给定的元素名匹配所有元素
.class：根据给定的类匹配元素
*****：匹配所有元素，多用于结合上下文来搜索
selector1, selector2, selectorN：将每一个选择器匹配到的元素合并后一起返回。可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
ancestor descendant：在给定的祖先元素下匹配所有后代元素
parent > child：在给定的父元素下匹配所有的子元素
prev + next ：匹配所有紧接在 prev 元素后的 next 元素
prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素
过滤选择器：通过特定的过滤规则来筛选所需要的 DOM 元素，该选择器一般以一个冒号（:）开头

常用方法：

jQuery对象.size()
jQuery对象.html([参数]) // 若有参数就设置元素中的内容，没有就是获取
jQuery对象.text([参数]) // 若有参数就设置元素中的内容，没有就是获取
jQuery对象.val([[参数]]) // 若有参数就设置元素的 value 属性值，没就是获取元素 value 属性值
jQuery对象.css('样式名'，'样式值') // 设置元素 style 属性值
jQuery对象.prop('属性名'[，值]) // 操作元素 property（如：checked、 seleced ）属性值
jQuery对象.data('以data-开头的属性名') //获取data-xxx属性值，若是 JSON 格式会自动转成 JS 对象
针对 class 属性值，使用 addClass removeClass toggleClass hasClass
jQuery对象.attr('属性名'[，值]) // 操作元素、其他属性值
jQuery对象.append(儿子) // 给元素加儿子
jQuery对象.after(弟弟) // 给元素加弟弟
jQuery对象.remove|detach() // 删除自己和所含的子节点
jQuery对象.empty() // 删除子节点
$.inArray(元素值，数组对象) // 返回元素在数组里面索引，若不存在返回 -1
$.get|post('请求路径', 请求参数，回调函数)
jQuery对象.事件方法名(事件处理匿名函数) // 注意函数中 this 表示事件源，是一个 DOM 对象

jQuery发送请求的方式：

jQuery.get(url, [data], [callback], [type]) 返回值:XMLHttpRequest

通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。
jQuery.post(url, [data], [callback], [type]) 返回值:XMLHttpRequest

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。
jQuery.ajax(url,[settings]) 返回值:XMLHttpRequest

如果要处理$.ajax()得到的数据，则需要使用回调函数
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
数据类型指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。

发送数据到服务器：默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

默认情况下，请求总会被发出去，但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果，可以设置cache参数为false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置ifModified为true。

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。
```
 $.ajax({
```

常见操作：

下拉框回显：

 <script>       $(function () {          $('#btn').click(function () {              //名为option 第3个元素,索引 ，属性值为true，被选中             //$('option:eq(2)').prop('selected', true);              //直接操作属性，用val方法             $('#s1').val(4);             });         }); </script>

全选：

 <script>     function checkChange(srEle) {       //状态显示         $('[name="hobby"]').prop('checked',$(srEle).prop('checked'));     }     //全选的函数    function checkAll(flag) {       //获得选项，把 checked 值为true       $('[name="hobby"]').prop('checked',flag);       //最上面选中状态的处理       $('#checkAll').prop('checked',flag);     }      //反选    function checkUnAll() {       //找到复选框，获取状态值，取反设置回去       //遍历复选框         // $('[name="hobby"]').each(function (i,domEle) {             // var $input = $(domEle);//转jQuery对象             // $input.prop('checked', !$input.prop('checked'));         // });         //通过prop获得多个元素，在设置val属性       // ps:不知道参数时，打印arguments来确定，怎么定义形参         $('[name="hobby"]').prop('checked',function (i,val) {             return !val;         });         checkFun();     }     //处理复选框状态的显示    function checkFun() {       var target = true;       $('[name="hobby"]').each(function (i, doEle) {          //取到状态值，赋给taget          target = target && $(doEle).prop('checked');//一个不满足，就是false         });       $('#checkAll').prop('checked',target);//将状态给到状态元素的checked属性     }  </script>

列表移动：

 <script>         //列表移动         //移动所有         function moveAll(srcId, targetId) {             console.log(srcId);//源节点             console.log(targetId);//目标节点             // 批量加字节点             $('#' + targetId).append($('#' + srcId + ' > option'));         }          //移动被选中         function moveSelected(srcId, targetId) {             // 批量加子节点             $('#' + targetId).append($('#' + srcId + ' > option:selected'));//被选中的         } </script>

下拉框去重：

 <script>     //去重     function distinct() {         //数组接收选项         var arr = [];         //获取右边的所有的选项         $('#s2 > option').each(function (i, domEle) {             arr.push($(domEle).val());//将value属性值装进去         });         console.log(arr);         //获取左边的所有的选项         $('#s1 > option').each(function (i, domEle) {             var $option = $(domEle);             var val = $option.val();//拿到val值             //判断值是否存在数组中，存在就删除             if ($.inArray(val, arr) >= 0) {//索引存在，就是存在                 $option.remove();             }         });     } </script>

GET 请求检查用户名是否存在：

前端JS代码：使用 jQuery 发送 Ajax 请求。

     <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>     <script>         $(function () {             //失去焦点事件             $('#username').blur(function () {                 // 获取用户在页面上输入用户名 ：事件源的val值                 var u = $(this).val();                 console.log(u);                 // 使用 jQuery 发送 AJAX 请求                 // 函数（回调寒素）是在服务成功响应浏览器调用的 data 服务器返回数据                 // 若响应回来是 json 格式数据，把响应的数据转成 js 对象                 // 调用你提供回调函数，作为这个函数实参                 $.get('/existName.do', 'username=' + u, function (data) {                     //获得结果节点，获得服务器响应的信息，设置信息的样式属性                     $('#result').html(data.msg).css('color', data.success ? 'green' : 'red');                 })             });         });     </script> </head> <body> <input type="text" id="username" placeholder="用户名"> <span id="result"></span> </body>

后端java代码：

 //响应JSON {"success":true,"msg":"帅呆了"}  {"success":false,"msg":"菜虚鲲"} @RequestMapping("/existName") @ResponseBody public JsonResult existName(String username) {     // 模拟username: will     String dataName = "will";     return dataName.equals(username) ?              new JsonResult(false, "用户名已存在！")             : new JsonResult(false, "注册成功！"); }

POST 请求用户登录操作

前端JS代码：使用 jQuery 发送 Ajax 请求。

 <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>     <script>         $(function () {             $('#login').click(function () {                 var u = $('#username').val();                 var p = $('#password').val();                 console.log(u, p);                  // 底层会帮你把第二个参数转成参数字符串 username=xx&password=123                 $.post('/loginJson.do', {password: p, username: u}, function (data) {                     console.log(data);                     $('#result').html(data.msg.css('color', data.success ? 'green' : 'red');                 });             });         });     </script> </head> <body> <span id="result"></span><br/> <input type="text" id="username" placeholder="用户名"><br/> <input type="text" id="password" placeholder="密码"> <button id="login">登录</button> </body>

后端java代码：

 // 响应 JSON {"success":true,"msg":"登录成功"}  {"success":false,"msg":"用户名或密码错误"} @RequestMapping("/loginJson") @ResponseBody public JsonResult loginJson(String username, String password) {     // 模拟一下  will 123     String dataName = "will";     String dataPassword = "123";     return dataName.equals(username) && dataPassword.equals(password) ?             new JsonResult(false, "登录成功！")             : new JsonResult(false, "用户名或密码错误！"); }

二级联动

二级联动的实现思路：
页面加载完，省份下拉框从后台获取省份数据；
将后台获取的响应数据，渲染到省份下拉框中；
给省份下框绑定值改变的事件，值发生改变之后，把选择的省份 id 传给后台；
将后台获取的响应数据，渲染到城市下拉框中。
怎么把数据渲染到下拉框中？
响应回来的数据是什么格式的？
什么时候发请求？

发什么请求？

Ajax 请求。

什么时候发请求？

页面加载完，省份下拉框值改变。

响应回来的数据是什么格式的？

HTML、XML、JSON。

怎么把数据渲染到下拉框中？

用 JS 代码拿获取到的数据按照下拉框中格式渲染。append

代码实现

编写页面

提供省份和城市下拉框。

编写 JS 代码

使用 jQuery 发送 Ajax 请求获取省份和城市数据，注意发送时机。

     <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>     <script>          // 为什么选 JSON，因为轻量         // 分析我们构成 option 需要数据，只要省份 id 的值，省份名称         // [{"id":1, "name":"广东省"}, {"id":2, "name":"湖南省"}]         $(function () {             // 页面加载完，发送 AJAX 请求获取省份数据显示在页面上              var $p = $('#p');             var $c = $('#c');               $.get('/province.do', function (data) {                 //遍历响应回来的数据                 data.forEach(function (ele) {                     // 给省份下拉框添加 option                     $p.append('<option value="' + ele.id + '">' + ele.name + '</option>')                 });             });              // 给省份下拉框绑定值改变事件: 值改变事件更合理，值相同不必重复发请求             $p.change(function () {                 // 根据省份 id 去查询城市数据 AJAX                 // 获取被选中的省份的 value 值                 var pval = $(this).val();                                                   // 清除它的子节点                 $c.empty();                 //将请选择的标签放进去                 $c.append('<option value="-1">请选择</option>');                                                   // 避免发送无效的请求:请选择时，不需要发送请求，当选择了val不为-1的标签，才发送请求                 if (pval > 0) {                     $.get('/city.do', 'pid=' + pval, function (data) {                         data.forEach(function (ele) {                             // 给城市下拉框添加 option                             $c.append('<option value="' + ele.id + '">' + ele.name + '</option>')                         });                     });                 }             });          });              </script> </head> <body> 省份：<select id="p">     <option value="-1">请选择</option> </select> 城市：<select id="c">     <option value="-1">请选择</option> </select>

编写后台获取省份数据和城市数据

把练习目录中实体类（City.java 和 Province.java）拷贝项目中。

使用 SpringMVC 响应省份和城市数据，是 JSON 格式。

 @Controller public class AddressController {     @RequestMapping("/city")     @ResponseBody     public List<City> city(Long pid) {         return City.getCityByProvinceId(pid);//获得所有的城市     }      @RequestMapping("/province")     @ResponseBody     public List<Province> province() {         return Province.getAllProvince();//获得省份     } }

不点蓝字，我们哪来故事？

java学途

只分享有用的Java技术资料

扫描二维码关注公众号

Java项目笔记之知识点总结03