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

2024-03-11 2329阅读

1.前后端整体合一

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

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)单选框

    JavaWeb开发——html、 jsp(html 、js 、java源码) 第2张
    ()

            (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整合在一起

    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]