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整合在一起
相关推荐
2601_950703949 小时前
Spring IoC入门实战:XML与注解双解
java
带刺的坐椅9 小时前
Snack JSONPath 项目架构分析
java·json·java8·jsonpath
飞Link9 小时前
【AI大模型实战】万字长文肝透大语言模型(LLM):从底层原理解析到企业级Python项目落地
开发语言·人工智能·python·语言模型·自然语言处理
妙蛙种子3119 小时前
【Java设计模式 | 创建者模式】 原型模式
java·开发语言·后端·设计模式·原型模式
LlNingyu9 小时前
Go 实现无锁环形队列:面向多生产者多消费者的高性能 MPMC 设计
开发语言·golang·队列·mpmc·数据通道
Lyyaoo.9 小时前
【JAVA基础面经】线程的状态
java·开发语言
Hello小赵9 小时前
C语言如何自定义链接库——编译与调用
android·java·c语言
John.Lewis9 小时前
C++进阶(8)智能指针
开发语言·c++·笔记
希望永不加班10 小时前
SpringBoot 配置绑定:@ConfigurationProperties
java·spring boot·后端·spring
悟空码字10 小时前
MySQL性能优化的天花板:10条你必须掌握的顶级SQL分析技巧
java·后端·mysql