JAVA EE项目：（5）前端

JAVA EE项目：（5）前端 一、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

注：form中action属性规定向何处发送表单数据（控制器的url）,method属性表示使用哪种HTTP请求

⑵JQuery的ajax

一般常用的是下面这个（POST方法）

三、Bootstrap和JQuery

①Jquey：js代码的函数库，封装了大量有用的功能

②Bootstrap:组件库，有很多精美又实用的前端组件（下拉菜单、轮播图、模态框）、样式（颜色、结构）、UI模板（登录界面、数据查看界面）以及自定义功能

如何使用bootstrap：在bootstrap官网中找到想要使用的组件，然后复制代码到html文件中就可以直接使用

因为使用了大量的JQuery插件来制作前端组件，所以要使用Bootstrap必须先引入JQuery

四、HTML

①在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(项目名)/html(目录名)/index.html(html文件名)，就可以看到默认的输出了。为什么端口是 8080 呢？你回去看下启动日志的截图，会发现项目用了 Tomcat 的 Web 服务器，HTTP 的初始化端口是 8080。

五、前端获取后端传输的数据并显示

SpringMVC返回数据到页面的方法

8-22下午 项目10