第三阶段第二周笔记及代码

2020/7/6–第一天—增删查改的实现

上午的时候：
通过.xml来处理持久层代码,以及新创添加活动.html以及修改.html

在.xml中书写处理代码>>在持久层Dao中添加两者都是传递类型(Activity entity)>>在接口类中定义>>实现类中@Autowired,并重载>>在Colltroller层

<mapper namespace="com.cy.pj.activity.dao.ActivityDao">
	<update id="updateObject">
	<!-- 在ActivityDao里面需要
	int updateObject(Activity entity);
	int insertObject(Activity entity);-+
			其他的流程一样没有区别 -->
		update tb_activity
		set title=#{title},
		category=#{category},
		startTime=#{startTime},
		endTime=#{endTime},
		remark=#{remark}
		where id=#{id}
	</update>
	<insert id="insertObject">
		insert into tb_activity
		(title,category,startTime,endTime,remark,state,createdTime,createdUser)
		values
		(#{title},#{category},#{startTime},#{endTime},#{remark},1,now(),#{createdUser})
	</insert>
</mapper>

@RequestMapping(“activity.html”)进入后可以选择新建,删除,修改,点击后会由resourse/template/pages/里面的.xml中的button按钮触发函数location.href="/activity/doDeleteById?id="+id;其中的/activity/doDeleteById是调用在控制层的方法

<button type="button" class="btn btn-danger btn-sm" 
	th:onclick="doDelete([[${a.id}]])">delete</button>
	↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
          function doDelete(id){
        	  //confirm为window对象中的一个方法，此方法的返回值为true或false
        	  if(!confirm("确认删除吗"))return;
        	  //基于id执行记录的删除操作
        	  location.href="/activity/doDeleteById?id="+id;
          }
	↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
	@RequestMapping("/activity/")//这里的activity   location.href="/activity/doDeleteById?id="+id;
public class ActivityController {
	   @RequestMapping("doDeleteById")//这里的doDeleteById  location.href="/activity/doDeleteById?id="+id;
	   public String doDeleteById(Long id) {
		   activityService.deleteById(id);
		   return "redirect:activity.html";
	   }
	   }

下午的时候：（几个插件可有可无吧，反正）
健康检查配置及测试
热部署配置及实现(最好不实现好一点)
Lombok插件应用:自己会提供很多方式的注解,简化代码,但是需要安装简短的安装过程

2020/7/7–第二天day08—AJAX_技术

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚 本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而 提高数据的响应和渲染速度

Ajax 请求响应过程分析

所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新，如图-4所示：

Ajax 编程基本步骤分析(控制层>客户端（html）>JavaScript进行处理)

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)

//基于ajax技术中的XMLHttpRequest对象，向服务端发起异步Get请求
//
function doAjaxGet(url,params,callback){
     //1.创建XmlHttpRequest对象
      var xhr=new XMLHttpRequest();
     //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
      xhr.onreadystatechange=function(){//callback(回调函数)
       //基于xhr对象获取的通讯状态，对响应数据进行处理
          if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
                  //服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
                  callback(xhr.responseText);
          }
     }
    //3.创建与服务端的连接
     xhr.open("GET",url+"?"+params,true);//true表示异步
     //4.发送请求
     xhr.send(null); //Get请求，send方法不传内容
   //5.对响应结果进行处理(在回调函数中处理)。
}

//基于ajax中XMLHttpRequest对象，向服务端发起异步Post请求。
//对于post请求在发送请求执行需要设置**请求头,见红色代码部分。**
 function doAjaxPost(url,params,callback){
         //1.创建XmlHttpRequest对象
         var xhr=new XMLHttpRequest();
         //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
         xhr.onreadystatechange=function(){//callback(回调函数)
                 //基于xhr对象获取的通讯状态，对响应数据进行处理
                 if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
                        //服务端响应的结果会传递给XHR对象，
                 //我们可以借助xhr.responseText获取响应结果
                        callback(xhr.responseText);
                 }
         }
         //3.创建与服务端的连接
         xhr.open("POST",url,true);//true表示异步
         xhr.setRequestHeader("Content-Type",
      "application/x-www-form-urlencoded");
         //4.发送请求
         xhr.send(params); //post请求将参数写到send方法
         //5.对响应结果进行处理(在回调函数中处理)。
}

Ajax 编程框架基本实现

(function(){
        //定义一个函数，可以将其连接为java中的类
        var ajax=function(){}
        //在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数
        ajax.prototype={        
//书写doAjaxPost和doAjaxGet方式
		}
        window.Ajax=new ajax();
})()

使用的方式有三种

参考CGB-AJAX-01的三种方式
1.调用方法ajax.js-----------function 方法名(){}
2.对象调用ajaxfk.js----------(function(){…window.Ajax=new ajax();})()
3.调用外部的jquery.min.js

@ResponseBody注解对方法进行描述，用于告诉SpringMVC将方法返回值转换为json格式的字符串。

2020/7/8–第三天day09—ajax配置到CGB-ACTIVITY-02_josn

配置文件application.properties的优先级高于application.yml
html中的一行跨多列
activity.html中会基于ajax技术向服务端发异步请求获取数据，然后更新的页面上。
持久层，接口，接口实现类，控制层没没什么区别,主要是在html上面做动作

josn属于一种数据结构

下午写了删除以及添加
debugger进行浏览器调试

2020/7/10–第四天day10—动吧项目

上午:添加数据库,导入动吧项目,配置环境,运行,答疑
下午:日志文件的显示以及分页实现还有创建测试类

2020/7/11–第五天day11—动吧项目

基于此对象封装业务执行结果
在java语言,可以将简单内存中的对象分为两大类
1存储数据的对象(设计的关键在属性上),典型的POJO对象(VO BO DO)
2执行业务的对象(设计的关键在方法上),典型的conterllor server dao