栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

JAVA EE项目:(5)前端

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/693935.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号