day04

最新推荐文章于 2023-04-20 10:39:59 发布
最新推荐文章于 2023-04-20 10:39:59 发布
阅读量182 收藏
点赞数
文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57820942/article/details/123538547
版权

1. 构建SpringMVC项目

1.1 代码结构

在这里插入图片描述

1.2 编辑UserController

用户通过:http://localhost:8090/findAll查询数据

在这里插入图片描述

1.3 编辑UserService

利用MP实现数据全部查询.
在这里插入图片描述

1.4 效果测试

在这里插入图片描述

2. JSON结构

2.1 JSON介绍

 

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。它是基于 JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。 JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

由来: http请求协议 1.字符串 2.字节信息 A------B获取数据 http请求
 

 

2.2 JSON基本格式

2.2.1 对象格式

 

demo1: 

{"id":1,"name":"黑熊精","age":3000,"sex":"男"}

在这里插入图片描述

2.2.2 数组格式

 

demo: 

 

    ["张三","李四","不知火舞"]

在这里插入图片描述

2.3 嵌套格式

demo:

[{"id":1,"name":"黑熊精","age":3000,"sex":"男"},{"id":3,"name":"金角大王","age":3000,"sex":"男"}]
在这里插入图片描述
扩展练习: 要求实现4层结构嵌套 

[1,"张三",{"id":100,"name":"李四","hobby":["敲代码","打游戏",{"gender":"女"}]}]

3. 实现前后端交互

3.1 构建页面

<!DOCTYPE html>
<html>
    <!-- 后端开发工程: 简单页面会写,复杂页面看懂即可 -->
    <head>
        <meta charset="utf-8">
        <title>前后端交互</title>
    </head>
    <body>
        <!-- 需要准备一个表格,展现user的数据 -->
        <table border="1px" width="80%" align="center">
            <tr align="center" height="60px">
                <th colspan="5"><h1>用户列表</h1></th>
            </tr>
            <tr align="center" height="60px">
                <th>编号</th>
                <th>名称</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr align="center" height="60px">
                <th>1</th>
                <th>黑熊精</th>
                <th>3000</th>
                <th>男</th>
                <th></th>
            </tr>
            <tr align="center" height="60px">
                <th>2</th>
                <th>唐僧</th>
                <th>30</th>
                <th>男</th>
                <th></th>
            </tr>
        </table>
    </body>
</html> 

 

 

3.2 jQuery动态获取数据

3.2.1 下载jQuery.js

1).官网地址: jquery.com
在这里插入图片描述
2). 下载JS
在这里插入图片描述

3.2.2 导入函数类库

 

<!DOCTYPE html>
<html>
    <!-- 后端开发工程: 简单页面会写,复杂页面看懂即可 -->
    <head>
        <meta charset="utf-8">
        <title>前后端交互</title>
        
        <!-- 导入JS函数类库 -->
        <script src="./jquery-3.6.0.min.js"></script>
        <script>
            //jQuery语法: 让整个页面浏览器加载完成之后,再次执行JS
            $(function(){
                alert("页面加载完成")
                //要求从后端http://localhost:8090/findAll
                //获取数据,之后将数据页面列表展现
            })
        </script>
    </head>
    <body>
        <!-- 需要准备一个表格,展现user的数据 -->
        <table border="1px" width="80%" align="center">
            <tr align="center" height="60px">
                <th colspan="5"><h1>用户列表</h1></th>
            </tr>
            <tr align="center" height="60px">
                <th>编号</th>
                <th>名称</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr align="center" height="60px">
                <th>1</th>
                <th>黑熊精</th>
                <th>3000</th>
                <th>男</th>
                <th></th>
            </tr>
            <tr align="center" height="60px">
                <th>2</th>
                <th>唐僧</th>
                <th>30</th>
                <th>男</th>
                <th></th>
            </tr>
        </table>
    </body>
</html> 

3.3 Ajax

3.3.1 特点

  1. 局部刷新 异步访问

3.3.2 Ajax说明

 

说明: Ajax是实现前后端交互,最为常用的一种方式.
发展:
1. 原生的JS中包含了Ajax. 但是操作比较复杂. 20行左右
2. jQuery是JS的一种高级函数类库.
3. jQuery提供了一种高效的Ajax的请求的方式.
展望:
现阶段所使用的Ajax是由jQuery进行的动态的封装.,如果将来的前端不使用jQuery则应该采用另外的一种形式发起Ajax请求.
 

3.3.3 Ajax异步调用原理 

同步: 用户发起请求时,要求第一时间服务器做出响应.在此期间用户不可以做其它操作,只能等待服务器返回数据. 刷新1次.

异步: 用户发起请求时,要求服务器做出响应.在此期间用户可以做其它的操作.如果后端服务器返回数据则通过回调函数通知客户. 局部刷新多次.
在这里插入图片描述

3.3.4 常见请求类型

  1. GET 如果携带参数已如下格式展现 参数 id=100,name=“tom”
    http://localhost:8090/findAll?id=100&name=tom

3.4 Ajax实现数据获取

3.4.1 $.ajax请求

 

<script>
            //jQuery语法: 让整个页面浏览器加载完成之后,再次执行JS
            $(function(){
                /**
                 * data参数传递：  id=100,name=tom age=18
                 *     1.对象方式数据传参
                 *         语法: {key:value,key2:value2}
                 *  2.拼接字符串的方式
                 *         语法: key1=value1&key2=value2
                 */
                $.ajax({
                    type: "get",    //请求类型
                    url:  "http://localhost:8090/findAll", //url地址
                    data: {id:100,name:"tom",age:18},
                    //data: "id=100&name=tom&age=18",           //参数
                    success: function(data){
                        console.log(data)
                    }
                })
            })
        </script>
 

3.4.2 跨域请求实现

由于是跨域请求,则需要添加@CrossOrigin的注解.

 

 

在这里插入图片描述 

 

3.4.3 关于Ajax返回值数据说明

 

说明: 后台服务器返回的是JSON串,但是经过Ajax业务调用,则程序会自动的根据返回值类型进行解析.解析之后形成了JS的对象.
API说明:
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。
在这里插入图片描述

虽然服务器的返回值是JSON,但是经过Ajax智能的判断,则动态的转化为JS的对象. 

在这里插入图片描述 

3.4.4 JS原生for循环写法

3.4.4.1 原生写法

for(var i=0;i<data.length;i++){
    console.log(data[i])
}

3.4.4.2 in关键字

说明: 其中index代表的是遍历的下标. 从0开始 0,1,2,3…

 for(index in data){
    console.log(data[index])
}

 

3.4.4.3 of关键字

说明: 其中user代表的是遍历的对象. 更加常用

for(user of data){
    console.log(user )
}
 

3.4.5 JS模版字符串语法

说明: 原生的JS中经常出现字符串拼接的现象.
弊端:
1. 如果换行,则需要重新编辑字符串.("号)
2. 如果其中需要动态的拼接参数 则结构复杂

在这里插入图片描述
3.使用原生的字符串拼接 没有数据结构,导致阅读混乱.

优化: ES6-7 提供了新的模版语法 反引号. 作用:动态拼接字符串.

在这里插入图片描述

3.4.6 JS实现user表格展现

 <!DOCTYPE html>
<html>
    <!-- 后端开发工程: 简单页面会写,复杂页面看懂即可 -->
    <head>
        <meta charset="utf-8">
        <title>前后端交互</title>
        
        <!-- 导入JS函数类库 -->
        <script src="./jquery-3.6.0.min.js"></script>
        <script>
            //jQuery语法: 让整个页面浏览器加载完成之后,再次执行JS
            $(function(){
                /**
                 * data参数传递：  id=100,name=tom age=18
                 *     1.对象方式数据传参
                 *         语法: {key:value,key2:value2}
                 *  2.拼接字符串的方式
                 *         语法: key1=value1&key2=value2
                 *
                 * 
                 */
                $.ajax({
                    type: "get",    //请求类型
                    url:  "http://localhost:8090/findAll", //url地址
                    //data: {id:100,name:"tom",age:18},
                    //data: "id=100&name=tom&age=18",           //参数
                    //dataType: "json"
                    success: function(data){    //[{},{},{}]
                        //将data中的数据添加到表格中???
                        //JS原生函数 in关键字遍历的是下标
                        //JS原生函数 of关键字遍历的是对象
                        for(user of data){
                            /* let id = user.id
                            let name = user.name
                            let age = user.age
                            let sex = user.sex */
                            //${对象.属性值} 动态的获取数据.
                            let tr = `
                                <tr align='center'>
                                    <td>${user.id}</td>
                                    <td>${user.name}</td>
                                    <td>${user.age}</td>
                                    <td>${user.sex}</td>
                                </tr>
                            `
                            //append将指定的元素进行追加
                            $("#tab1").append(tr)
                        }
                    }
                })
            })
        </script>
    </head>
    <body>
        <!-- 需要准备一个表格,展现user的数据 -->
        <table id="tab1" border="1px" width="80%" align="center">
            <tr align="center" height="60px">
                <th colspan="5"><h1>用户列表</h1></th>
            </tr>
            <tr align="center" height="60px">
                <th>编号</th>
                <th>名称</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </table>
    </body>
</html>

 

 

3.5 JS变量基本用法

3.5.1 var关键字

var id: 表示定义一个变量名称为ID. 该变量相当于在全局范围内声明了一个变量.
该变量声明没有作用域的概念(哪哪都能用).
弊端: 由于没有作用域的规定,导致变量使用混乱.

3.5.2 let 关键字

说明: 从新版本的JS开始,兼容支持let.该关键字的用法与var一样.但是有作用域的范围.更加的通用.

3.5.3 const关键字

说明: 该关键字用来标识常量, 该数据不变.3.6 关于Ajax总结

 

3.6 关于Ajax总结
 

Ajax 是局部刷新,异步访问.
Ajax异步的核心在于 Ajax引擎(代理).
Ajax请求调用时,无论是否成功,都通过回调函数的方式进行. success/error
Ajax参数传递写法 2种 1.对象写法 {key:value,key2:value2}
2.字符串拼接 key=value&key2=value2
for循环方式 1.常规方式循环 2. in 3.of
模版字符串用法 ``号 取值 ${key}
定义变量用let 定义常量用const

4. 跨域说明

4.1 同源策略

4.1.1 同源策略介绍

规定: 如果浏览器的网址与Ajax请求网址必须满足同源策略.则浏览器才能解析Ajax,执行正确的请求.

什么是同源策略:
规定要求 请求协议://域名:端口号
1.如果3者都满足,则符合同源策略.浏览器可以正确解析.
2.反之(有一个不满足)不满足同源策略.称之为跨域请求. 则浏览器不能正常解析Ajax请求.

4.1.2 关于同源策略练习 

浏览器地址: http://localhost:8090/userList.html
Ajax请求地址: http://localhost:8090/abc/b 满足同源策略

浏览器地址: http://localhost:80/userList.html
Ajax请求地址: http://localhost:8090/abc/b 端口不同 跨域请求

浏览器地址: http://localhost:8090/userList.html
Ajax请求地址: https://localhost:8090/abc/b 协议不同,跨域请求

manage.jt.com 对应的IP假设为10.6.6.8
浏览器地址: http://manage.jt.com/userList.html
Ajax请求地址: http://10.6.6.8/abc/b 跨域请求 域名不同(即使映射也是跨域)

浏览器地址: http://manage.jt.com:/userList.html http协议默认端口80
Ajax请求地址: http://manage.jt.com:80/aaa/bbb 同域请求
 

4.2 CORS介绍

4.2.1 介绍

CORS是一个W3C标准，全称是**“跨域资源共享”**（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
如果实现跨域资源共享,则需要单独配置服务端即可. 只需要将允许访问的页面的网址,通过响应头的形式进行设定.则可以实现跨域请求.

4.2.2 不允许跨域说明
 

在这里插入图片描述

4.2.3 跨域流程图

在这里插入图片描述
响应头信息:
在这里插入图片描述

 

 

 

 

 

LX_XN
关注
项目部署之多项目war配置同一个Tomcat利用不同端口访问项目(省略项目名/projectName 直接http://localhost:8090/)
u014476019的博客
06-22 7677
1.配置server.xml 如图 2.这句在上面配置中用unpackWARs="false"指定项目部署启动时不会解压war包， 不然会在webapps2目录下生成ROOT和myPro文件夹 但是此时项目访问的还是myPro里面的内容（貌似ROOT存放的也是myPro.war解压后的内容） 3.根据上面 我们需要在webapps同级目录下新建webapps2 如图 4.在D:\d
将字典类型（Dictionary）类型数据序列化为json数据及拼接为key1=value1&key2=value2的两种方法
热门推荐
Enetaunt的博客
03-09 1万+
一、序列化为Json字符串 当需要将对象转为{ &amp;quot;street&amp;quot;: &amp;quot;科技园路.&amp;quot;, &amp;quot;city&amp;quot;: &amp;quot;江苏苏州&amp;quot;, &amp;quot;country&amp;quot;: &amp;quot;中国&amp;quot;}这种格式时使用序列化（不引入外部dll的方式）
Day05
yzy980611的博客
08-25 4036
1.Spring MVC参数传递 1.1简单参数接受 1.1.1 需求分析 根据id查询用户信息 http://localhost:8090/findUserById?id=1 使用@GetMapper（“”）代替@RequestMapping(“”) controller层 @GetMapping("findUserById") //只允许接受get类型 public User findUserById(Integer id){ return userSe...
服务器http://localhost:8080要求用户输入用户名和密码并提示XDB？
Alex的博客
07-19 3390
地址栏中输入http://localhost:8080/ ，系统弹框提示“XDB的服务器localhost要求用户输入用户名和密码”，上网查了资料后才发现原来是因为tomcat的8080端口被另一个web服务占用的原因，具体产生原因是：最新项目中用到Oracle，所以就安装了一个，Oracle的管理端占用了8080端口 问题： 解决方法： 1.修改Tomcat安装目录下的文件夹conf...
java 拼接字符串的方法
花生日记
04-20 3516
假设有一个字符串的长度为a，将其拆分成两个字符串a和b，再将a和b拼接起来： 通过上面的代码可以看出，使用 replace方法只能将一个字符串分成两部分，无法将两个字符串拼接起来。运行代码后，我们会得到一个数组的值： 注意到我们在循环中使用了一个 for循环来遍历字符串： 这里使用 for循环进行遍历字符串的代码就是上面这个： 代码中， for循环分为两个阶段：第一阶段是将字符串进行一次遍历，然后将遍历到的结果存储到一个变量中。1.拼接字符串的方法，先要将字符串转化为数字类型，再根据需要拼接。
Day04
03-12
"Day04"的主题可能涵盖了JavaScript的基础概念、语法特性以及在实际开发中的应用。JavaScript是一种广泛使用的脚本语言，尤其在网络前端开发中扮演着核心角色。它允许我们实现动态网页，交互式用户界面，以及丰富的...
struts2_day04讲义.pdf
11-30
传智2016框架视频配套讲义----struts2_day04讲义.pdf ，需要的下载了
Tomcat服务端口8080被占用解决方法
qq_52256473的博客
02-13 2928
Tomcat Tomcat为Apache组织下开源服务器软件，官网：Tomcat 8080端口被占用解决方法 打开Tomcat目录文件下conf文件夹，然后找到server.xml 使用记事本打开server.xml，找到Connect port = “8080” 将8080改为其他未占用端口即可，例如"8090"，然后保存配置文件即可 重启Tomcat服务，浏览器访问“http://localhost:8090”，访问成功即表示服务开启成功
.Net将集合M内非空参数值的参数按照参数名ASCII码从小到大排序（字典序），并使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串stringA...
dfj66154的博客
07-02 2024
前言： 　　 前段时间因为项目进度比较繁重所以一直都没有时间更新博客，内心深深的负重感，没有履行年初立下的flag。不过这个月会把上个月没有完成的任务补上来，咱们可不是喜欢拖欠任务的攻城狮。哈哈，废话不多说，接下来是要总结下关于对接支付时我们经常会遇到的将对应集合中的参数按照ASCII码按照从小到大排序，并使用URL键值对的格式（即key1=value1&key2=value2...
关于liferay启动界面(在浏览器里录入http://localhost:8080后打开的界面)的定制
fycghy0803的专栏
05-12 4367
      搞了有8天的liferay研究,今天终于有了一点进展,在网上搜索的关于界面定制的全部均是要修改portal-impl.jar里的portal.porterties的对应节点的值或新建一个portal-ext.porterties,在里面写对应的节点及节点值然后放在web-inf/classes目录(portal-ext.porterties里的节点会覆盖portal.portertie
Can‘t read swagger JSON from http://localhost:8090/v2/api-docs?group=xxxxxx
HKkkkkSky的博客
04-19 808
springboot+swagger报错： Can't read swagger JSON from http://localhost:8090/v2/api-docs?group=微信支付案例接口文 档： 问题描述 swagger配置的groupName中带有中文，或者特殊符号，空格造成的： 解决方案： groupName为有中文时，会不能读取，改成纯英文就行了： ...
http://localhost:8080/struts-blank/的流程
qsxucsdn的专栏
10-12 1260
1。web.xml定义默认页面              index.jsp      2。index.jsp重定向        3。struts-config.xml    1）先从全局转向定义小节找到名为welcome的forward                                        name="welcome"            path="/Welcome
localhost可以访问 ip不能访问_如何解决域名可以访问80端口但访问不了其他端口的问题...
weixin_39592240的博客
12-03 2566
新买了域名和云服务器，如：http://www.aaa.com 对应IP 152.143.11.23 服务器，默认80端口是开放的，telnet测试也能正常通过 telnet 152.143.11.23 80但想在项目中装个nginx，然后配置个端口如：8090 来访问别的项目配置完后是可以通过 localhost:8090 访问成功，但通过 http://www.aaa.com:8090 就不行...
Proxy error: Could not proxy request /login from localhost:8090 to http://:8089. See https://nodejs.
d347091231的博客
11-23 8375
Proxy error: Could not proxy request /login from localhost:8090 to http://:8089. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ENOTFOUND). 检查vue.config.js文件 修改target:标签 devServer: { port: 8090, // host:
Tomcat测试“http://localhost:8080”失败解决方法
张拭心的博客 shixinzhang
01-21 7525
昨天安装后测试还是好的，今天测试却怎么也不行，重启tomcat、更改端口号都试过了，都没能解决。 后来一个高手指点我： 比如tomcat6.0和jdk1.8配合的时候，可能就会出现问题。解决这个问题的方法：copy jdk1.8的lib/tools.jar到tomcat的lib/tools.jar，覆盖掉原有文件就可以 试了一下果然成功！！ 还没有弄明白为什么，搞懂后再更。
火狐 http://localhost:8080自动跳转到http://www.localhost.com:8080
weixin_30407613的博客
12-19 2877
用火狐调试PHP时 偶尔会出现连接被重置的情况：http://localhost:8080自动跳转到http://www.localhost.com:8080 解决方案1： 打开网络-属性，往下拉找到Internet协议版本6然后点击属性。然后换成自动获得地址 同样找到Internet协议版本4然后点击属性。然后换成自动获得地址。 解决方案2： 浏览器的话。重装浏览器...
关于tomcat点击startup.bat出现闪退，输入http://localhost:8080网页打不开的解决方法
weixin_44967580的博客
09-12 2363
问题一：点击startup.bat出现闪退 打开startup.bat,在第一行加入 注意：不是bin目录路径 SET JAVA_HOME=D:\jdk\jdk1.8.0_121【jdk路径】 SET TOMCAT_HOME=D:\tomcat\apache-tomcat-8.0.50【tomcat路径】 这时startup.bat就会成功打开 成功打开startup.bat后（打开浏览器时不能关闭），打开浏览器输入http:localhost:8080,出现以下界面就成功了： 问题二：浏览器输入ht
苍穹外卖day04报错
最新发布
01-06
### 苍穹外卖 Day04 错误解决方案 #### 一：Nginx 运行环境配置不当 当 Nginx 出现无法正常工作的情况时，需确认其安装路径是否为全英文目录。如果存在中文或其他特殊字符，则可能导致 Nginx 启动失败或行为异常[^4...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值