JAVA EE项目：（5）前端

最新推荐文章于 2024-05-01 18:59:24 发布

风_痕

最新推荐文章于 2024-05-01 18:59:24 发布

阅读量945

点赞数 3

文章标签：前端 java-ee json

本文链接：https://blog.csdn.net/qq_45915040/article/details/122278388

版权

五、前端发送请求、获取后端传的数据并显示(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>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            共<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

例：

风_痕

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JAVA EE项目：（5）前端

一、java中前端传输数据到后端的方法①form表单优点：数据是表单类型，不需要代码处理，并且form是浏览器的功能，可以直接使用缺点：form表单提供会放弃当前页，向后端发送请求，然后根据返回的结果创建一个新页面，及时提交后显示的是与之前一样的页面也需要重新加载②Ajax：不是编程语言而是一种数据传输方法，它包括了HTML、CSS、JS、XML等东西优点：使用异步请求，只进行局部数据刷新，不需要刷新整个网页缺点：必须用js来实现，不使用js的浏览器无法使用注：...
复制链接

扫一扫