目录
五、前端发送请求、获取后端传的数据并显示(JQery的使用)
一、HTTP请求类型以及数据格式
①Get:参数都在url中
②Post:
⑴json:一种轻量级的数据交换格式,本质是一串字符串
例:“{“name”:“john”,“age”:18,“address”:{“country”:“china”,“zip-code”:“1000”},“num”:[1,2,3]}”
⑵表单:键值对的数据格式,例:a=1&b=2&c=3
⑶xml:太老了。
二、java中前端发送请求到后端的方法
①form表单
优点:数据是表单类型,不需要代码处理,并且form是浏览器的功能,可以直接使用
缺点:form表单提供会放弃当前页,向后端发送请求,然后根据返回的结果创建一个新页面,及时提交后显示的是与之前一样的页面也需要重新加载
注:
⑴这里的form表单是一种数据传输方式,而上面介绍的表单是一种数据格式,它们不是同一种东西
⑵form默认使用表单作为数据格式,当然也可以修改为使用json数据格式
②Ajax:不是编程语言而是一种数据传输方法,它包括了HTML、CSS、JS、XML等东西
优点:使用异步请求,只进行局部数据刷新,不需要刷新整个网页
缺点:必须用js来实现,不使用js的浏览器无法使用
注:
⑴默认使用异步请求,但是也可以修改为同步请求。
⑵用js直接进行ajax请求,写代码很麻烦,可以使用JQuery封装的ajax请求
③具体实现
⑴form
<body>
<div align="center">
<form action="/ind" method="post">
标题:<input type="text" name="title" placeholder="请输入标题"><br/>
<input type="submit" value="查找新闻">
</form>
</div>
</body>
注:form中action属性规定向何处发送表单数据(控制器的url),method属性表示使用哪种HTTP请求
⑵JQuery的ajax
<script>
$.ajax({
type:"post",
url:"url",
data:data, //数据
success:success //回调函数
})
</script>
一般常用的是下面这个(POST方法)
<script>
jQuery.post(url,data,success(),dataType){
......
}
</script>
三、Bootstrap和JQuery
需要自己到官网下载
①Jquey:js代码的函数库,封装了大量有用的功能
②Bootstrap:组件库,有很多精美又实用的前端组件(下拉菜单、轮播图、模态框)、样式(颜色、结构)、UI模板(登录界面、数据查看界面)以及自定义功能
如何使用bootstrap:在bootstrap官网中找到想要使用的组件,然后复制代码到html文件中就可以直接使用
因为使用了大量的JQuery插件来制作前端组件,所以要使用Bootstrap必须先引入JQuery
四、HTML编写
Spring里面没有我们之前常规web开发的WebContent(WebApp),它只有src目录
在src/main/resources下面有两个文件夹,static和templates,其中static中放静态页面,而templates中放动态页面
具体见此:Springboot的static和templates
①在resources文件夹下创建static文件夹→将下载好的jquery和bootstrap放入文件夹中→创建html文件
②在html中添加jquery和bootstrap的依赖
创建html文件→找到jquery→jquery -xxx.min.js、bootstrap-xxx→css→bootstrap.css→bootstarp.min.css和bootstrap→js→bootstarp.js→bootstrap.min.js选中该文件,直接拖到html编程界面,会自动导入
注:⑴jquery文件的引入必须在bootstrap.js的前面
⑵在static中添加内容后,可能出现不识别的情况,重新编译然后再运行即可
③编写:
HTML和CSS的具体标签的用法自己去网上查
④注:
⑴HTML文件可以在idea的代码界面右上点击浏览器图标,来浏览编写的页面(不过不能看数据库数据)
⑵如何运行写的html文件:首先找到xxxxApplication启动类,启动 Spring服务器,然后打开浏览器访问localhost:8090/SSM_demo(项目名)/index.html(html文件名),就可以看到默认的输出了。为什么端口是 8080 呢?你回去看下启动日志的截图,会发现项目用了 Tomcat 的 Web 服务器,HTTP 的初始化端口是 8080。
五、前端发送请求、获取后端传的数据并显示(JQery的使用)
1、例:
功能:将数据库中的数据全部列出(不包括删除、编辑、批量删除功能)
mapper
controller
package com.example.demo3.controller;
import com.example.demo3.entity.News;
import com.example.demo3.service.NewsService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("news")
public class NewsController {
@Resource
private NewsService newsService;
@RequestMapping("find")
public List<News> find(){
return newsService.findAll();
}
}
service等 略
news.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#top{
/*位置设置 上,id=top */
padding: 10px 20px;
text-align: right;
}
#page_div #left{
/*位置设置 左,id=left */
float: left;
}
#page_div #right{
/*位置设置 右,id=right */
float: right;
}
</style>
<!-- 导入jquery和bootstrap-->
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="container">
<div id="top">
<!-- id=top,上面的位置设置-->
<button type="button" class="btn btn-danger btn-lg">增加</button>
</div>
<div id="bottom">
<table class="table table-bordered table-hover table-striped">
<!-- 表头-->
<thead>
<tr>
<td>标题</td>
<td>内容</td>
<td>日期</td>
</tr>
</thead>
<!-- 表内容,具体实现在下面的<script>中-->
<tbody id="data">
</tbody>
<!-- 表尾-->
<tfoot>
<tr>
<td colspan="6">
<div id="page_div">
<div id="left">
<!-- id=left,上面的位置设定-->
<span id="pageNum"></span>/<span id="pages"></span>
共<span id="totals"></span>条
</div>
<div id="right">
<!-- id=right,上面的位置设定-->
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
function init() {
jQuery.post("news/find",function (rst) {
var trs='';
for(var i=0;i<rst.length;i++)
{
//获取一组的数据
var u=rst[i];
//循环一次,在页面中产生一行数据
//使用反引号,用于定义模板
trs+=`
<tr>
<td>${u.title}</td>
<td>${u.content}</td>
<td>${u.date}</td>
<td>
<a href="#">删除</a>
<a href="#">编辑</a>
</td>
</tr>
`;
}
//把构建的tr添加到表格中,其中data指向上面的<tbody id="data">,该操作才是真正将数据显示到前端
jQuery("#data").html(trs);
//一共有多少条数据显示到前端,与表尾中的<span id="totals">相关联
jQuery("#totals").html(rst.length);
})
}
//页面加载完毕执行init方法
jQuery(function () {
init();
});
</script>
</body>
</html>
2、注:
①运行服务器后,查看前端,如果后端传输的数据或操作没有正常显示或执行的话:
F12→控制台→刷新一下网页→查看前端HTTP请求是否出错
②报错处理:
⑴上面的报错是404,即找不到资源,查找后发现,我将html文件放在static目录下的一个新建的html目录下,将html放到static目录下bug修正
修改前: 修改后:
⑵500是服务器内部错误,得去idea的控制台中找报错
③可以在application.properties中添加:
logging.level.com.upc.oa.mapper=debug
设置日志,在控制台中查看项目信息,不过如果项目有bug,项目没运行起来就不会显示
④可以在script中使用alert函数来输出变量的值,用来排查错误像是println
例: