JavaWeb开发——html、 jsp(html 、js 、java源码）

1.前后端整体合一

��       在页面上，包含界面和业务数据处理

2.前后端分离

        项目整体上分成前端部分和后端部分，相互独立

Jquery的核心

1. 选择器----找到需要操作的Dom
2. 读取或者设置DOM的值或者属性
3. 事件的处理

一、jQuery选择器

1. $("标签类型")
2. $(".class名称")
3. $("#id")

二、jQuery事件处理

三、常见界面元素DOM的属性读取和设置

1. 读取和设置dom的内

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• text()和html()读取的是显示的内容，非输入框和表单的内容，
• 如果需要读取表单和输入框里面的内容，那么就是用val()
  1. 表单中常见元素值的读取和设置

          (1)单选框

  （）

          (2)多选框

          (3)下拉框

  一、页面的整体刷新和局部刷新

  1.整体刷新：

  在页面1总进行数据入炉，然后整体提交到页面2进行处理，

  在处理过程中，如果数据存在问题，页面跳转回1，这样会导致页面1中

  所有已经录入的内容被清空，用户需要重新录入所有内容。
  2.局部刷新：

  在页面1中进行数据录入，当某项数据录入完毕后，页面1整体表单并不进行提交，

  而是异步发送一个请求到后端接口，后端进行处理，将结果返回给前端，前端收到

  处理解雇后，更新页面1的某些内容。

  ----ajax技术
  3.前后端分离的模式

      在前端页面上，不再具有具体的数据处理内容，前端只负责通过ajax方式从后端接口获的数据，

  然后缝隙页面内容，在与用户的交互过程中，前端实时发送ajax请求到后端接口，实现数据的更新。

  二、jQuery实现ajax请求

    基本语法

          $.ajax(

              {

                  url:'xxxxx';

                  type:'',

                  data:{}

                  datatype:'',

                  success:function(result){}

              }

          ) 

  补充，利用json-server来模拟后端接口

  json-server提供基于json文件的数据存放,向外提供一系列的数据读取，、

  增加、删除的接口的Restfull标准

  启动json-server服务

  1.在某个目录下（最好不要带中文)创建data.json文件

  2.启动json-server服务

      在控制台下输入命令json-server --watch data.json 

  三、利用jQuery + ajax实现信息的查询、增加、删除、修改模块的流程

  （1） 打开页面，在列表中显示已有数据

  （2） 用户可以通过输入关键词进行查询

  （3） 新增完毕，列表中的数据要进行刷新

  （4） 删除、修改完毕，列表中的数据要进行刷新
  思路：

      （1）将从接口中取数据，更新列表页面的操作，封装到一个

      独立方法loadData中

      （2）在增删改查完毕的处理里面，调用loadData（）

      （3）在页面元素加载完毕的时候，调用loadData

          $(document).ready(function(){

              loadData();

          });

      (4) 数据的修改

          ----修改界面和新增界面复用

          补充 RestFull接口的标准

          1) 取列表数据 get方式 http://ip:端口/接口名

          2) 根据id取单个数据

              get方式 http://ip:端口/接口名/id值

          3）删除

              delete方式 http://ip:端口/接口名/id值

          4）新增 post方式 http://ip:端口/接口名

              传递数据放入到data里面

          5）修改 put方式 http://ip:端口/接口名/id值

              传递数据放入到data里面

          

      条件查询

          get方式 http://ip:端口/接口名/id值

          案例：高校成绩管理

          学院信息：colleges

          专业信息：majors

          班级信息：class

          学生信息：students

          课程信息：courses

          成绩信息：scores

  （1）后端部分：不涉及界面的呈现，只提供接口（RESTFUL规范）供前端访问，返回json数据给前端。

  • 获得数据列表  /接口名        get方式，返回json数组[{},{}......]，取列表数据 get方式 http://ip:端口/接口名
  • 获得某个数据的详情     /接口名/Id    get方式，返回json对象{ }，http://ip:端口/接口名/id值。
  • 新增数据   /接口名      post方式。
  • 删除数据  delete方式 http://ip:端口/接口名/id值。
  • 修改 put方式 http://ip:端口/接口名/id值传递数据放入到data里面。

    （2）前端部分：只进行界面的数据呈现、用户的交互，发送请求到后端接口，将返回的json进行呈现。

    课程目标

    使用当前页面主流的SSM框架来快速开发高质量的后端接口代码

    后端接口：

    提供接口，接收前端的访问，进行相关数据库的操作，然后将处理结果，返回前端，利用SSM框架们可以快速高效的完成。

    • M(Mybatis）：提供对数据库的访问，不需要编写复杂的数据库访问过程和SQL语句
    • S（SpringMVC）：提供接口给前端访问
    • S（Spring）：对象容器，将Mybatis和SpringMVC整合在一起