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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/733382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

anaconda问题合集

目录 一. 万分注意 二. ImportError: DLL load failed while importing _ctypes: 找不到指定的模块。 1. 发生情况 2. 导致结果和解决方法 三. WARNING: A newer version of conda exists. 1. 在conda install 某库的时候 2. 解决方法 一. 万分注意 不要轻易使用 conda …

UE4升级UE5 蓝图节点变更汇总(4.26/27-5.2/5.3)

一、删除部分 Ploygon Editing删除 Polygon Editing这个在4.26、4.27中的插件,在5.1后彻底失效。 相关的蓝图,如编辑器蓝图 Generate mapping UVs等,均失效。 如需相关功能,请改成Dynamic Mesh下的方法。 GetSupportedClass删…

Java Collections 工具类

public static int binarySearch(List list,T key) 在 List 集合中查找某个元素的下标,但是 List 的元素 必须是 T 或 T的子类对象,而且必须是可比较大小的,即支持自然排序的。而且集合也事先必须是有序的,否则结果不确定。…

【CMake】总体认识

文章目录 体系架构 CMake根据CMakeLists.txt进行对项目的构建,至少有一个位于项目根目录下的顶层CMakeLists.txt,此外还可以在项目的其他目录下设置CMakeLists.txt负责本目录下的构建。顶层CMakeLists.txt负责设置整个项目的全局参数,比如最低…

C语言学习--练习3(贪心)

目录 贪心算法 1. 两数对之间的最大乘积差 2.三角形的最大周长 3.数组拆分 4.救生艇 5.发送饼干 6.摆动数组 贪心算法 概念定义 所谓贪心,总是做出在当前看来是最好的选择。也就是说,不从整体最优上进行考虑,算法得到的是在某种…

初识C++编程语言(万字详解)

目录 ::域作用限定符 命名空间域(namespace): 流插入和流提取(C的输入输出) 缺省参数: 函数重载: 引用: 内联函数: auto关键字: 1、类型思考: 2、auto介绍&am…

【二十九】springboot高并发示例

本章演示在springboot项目中的高并发demo,演示导致的问题,以及单机部署下的解决方案和集群部署下的解决方式以及分布式下的解决方案。 目录 一、单机模式下高并发问题 二、集群模式下高并发问题 一、单机模式下高并发问题 前提:先写一个减扣…

lammps计算质心的两种方法

大家好,我是小马老师。 本文介绍lammps计算质心的两种方法。 在润湿、蒸发、烧结或者冲击模拟中,可能需要计算某个原子组的重心,以判断其移动速度或者相对运动的情况。 lammps提供了两种方法计算原子组的质心。 (1)xcm…

腾讯云轻量服务器流量用完了怎么办?停机吗?

腾讯云轻量服务器流量用完了怎么办?超额流量另外支付流量费,流量价格为0.8元/GB,会自动扣你的腾讯云余额,如果你的腾讯云账号余额不足,那么你的轻量应用服务器会面临停机,停机后外网无法访问,继…

创建数据表

Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 如果要进行数据表的创建 create table 表名称 (列名称 类型 [DEFAULT 默认值 ] ,列名称 类型 [DEFAULT 默认值 ] ,列名称 类型 [DEFAULT 默认值 ] ,...列名称 类型 [DEFAULT 默认值 ] )…

剑指offer-第二版

【剑指offer-第二版】习题感悟(一刷) 1. 面试流程2. 面试的基础知识2.1 C基础知识面试题1:赋值运算符函数面试题2:实现单例模式 2.2 数据结构面试题3:数组中重复的数字面试题4:二维数组中查找面试题5&#…

Yolov8涨点神器:添加可变形大核注意力,超越自注意力,实现暴力涨点(附代码)

目录 🚀🚀🚀订阅专栏,更新及时查看不迷路🚀🚀🚀 可变形大核注意力(D-LKA Net) deformable_LKA引入到yolov8 核心代码 yaml文件 DeformableConv2d ⭐欢迎大家订阅我的专栏一起学习⭐ &a…

力扣由浅至深 每日一题.01 两数之和

万物惊鸿,唯我澄明 —— 24.3.9 1. 两数之和https://leetcode.cn/problems/two-sum/ 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会…

【操作系统学习笔记】处理器管理1.3

【操作系统学习笔记】处理器管理1.3 参考书籍: 王道考研 视频地址: Bilibili 进程控制 进程控制的主要功能是对系统中的所有进程实施有效的管理,它具有创建新进程、撤销已有进程、实现进程状态转换的功能。简而言之,进程控制就是要实现进程的状态转换…

猫头虎分享已解决Bug || 系统监控故障:MonitoringServiceDown, MetricsCollectionError

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

华为OD机试真题-查找接口成功率最优时间段

查找接口成功率最优时间段 题目描述 服务之间交换的接口成功率作为服务调用关键质量特性,某个时间段内的接口失败率使用一个数组表示,数组中每个元素都是单位时间内失败率数值,数组中的数值为0~100的整数,给定一个数值(minAverag…

“比特币深夜冲破7万美元”!华尔街押注比特币:究竟是牛市墙头草,还是加密真信徒?

比特币ETF,使此次加密牛市与以往的繁荣、萧条周期截然不同。以往的周期往往由热衷风险的投机者以及最终崩盘的加密项目所驱动,例如无实物资产支持的加密货币借贷,以及一地鸡毛的ICO热潮。而现在,传统金融已经与加密世界联姻&#…

从零到一,构建坚如磐石的Redis 7高可用集群:全程实录与关键技术详解

1、引言 在日常的开发中,无论是主从复制还是哨兵模式,都在高并发的场景中存在致命的缺点: 主从复制:当Master Redis机器挂掉之后,Slave依旧可以读取数据,但是由于Master不能写数据了,所以就会…

python自动化测试如何做数据缓存 ?这个第三方包推荐给你,方便又简单!

1.数据缓存说明 数据缓存可以说也是项目开发中比不可少的一个工具 ,像我们测试的系统中 ,你都会见到像Redis一样的数据缓存库 。使用缓存数据库的好处不言而喻,那就是效率高 ,简单数据直接放在缓存中 ,存取简单方便 。…

[Vue]中数组的操作用法

列举了在Vue操作数据时,对数组的一些方法 1.增加功能 在数组尾部增加 push() push():向数组的末尾添加一个或更多元素,并返回新的长度。 arr [1,2,3,4,5] arr.push(6) //arr [1,2,3,4,5,6] 在数组头部增加 unshift() unshift()&#…