Java笔记 - 前端框架

最新推荐文章于 2024-06-30 15:50:08 发布
最新推荐文章于 2024-06-30 15:50:08 发布
阅读量512 收藏
点赞数
分类专栏： Java 学习笔记 文章标签： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41625367/article/details/93383729
版权

文章目录

BootStrap

框架：一个半成品软件，可以简化编码

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目

好处：

  1. 定义了很多css样式和js插件
  2. 响应式布局 手机端和桌面端分别适应，同一套页面可以兼容不同的设备

响应式布局

实现依赖于栅格系统 ，将一行均分为12个格子

实现步骤：

  1. 定义容器

    div class="container-fluid" 每一种设备都是100%宽度

    div class="container" 则是默认在两边留白

  2. 定义行 row

  3. 定义元素 col-设备代号-格子数目

注意：

  1. 栅格类设备向上兼容
  2. 如果一行中格子数目超过12，则超出部分自动换行
  3. 如果真实设备宽度小于了设置山各类属性的设备代码的最小值，会一个元素占满一整行

css样式和js插件

详见Bootstrap官网

全局css样式：

  1. 按钮 class=“btn btn-default”

  2. 图片

  3. <img src="image/ascii_dog.png" alt="..." class="img-circle"> 圆形
<img src="image/ascii_dog.png" alt="..." class="img-thumbnail"> 相框
<img src="image/ascii_dog.png" alt="..." class="img-responsive"> 自适应

  4. 表格

  5. 表单 class=“form-control”

组件：

  1. 导航条
  2. 分页条

插件：

  1. 轮播图

网站首页

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <![endif]-->
    <style>
        .paddtop {
            padding-top: 10px;
        }

        .search-input {
            float: left;
            border: 2px solid #1b6d85;
            width: 370px;
            height: 35px;
            padding: 5px;
            margin-top: 15px;
        }

        .search-btn {
            float: left;
            border: 2px solid #1b6d85;
            width: 70px;
            height: 35px;
            background: #1b6d85;
            margin-top: 15px;
        }

        .jx {
            border-bottom: 2px solid #2e6da4;
            padding: 5px;
        }

        .company {
            height: 40px;
            background: #2b669a;
            text-align: center;
            font-size: 15px;
            line-height: 40px;
            color: gainsboro;
        }
    </style>
</head>
<body>
<!--1.页眉-->
<header class="container-fluid">
    <div class="row">
        <img src="images/top_banner.jpg" class="img-responsive">
    </div>
    <div class="row paddtop">
        <div class="col-md-3">
            <img src="images/logo.jpg " class="img-responsive">
        </div>
        <div class="col-md-5">
            <input class="search-input" placeholder="请输入线路">
            <button class="search-btn" href="#">搜索</button>

        </div>
        <div class="col-md-4">
            <img src="images/hot_tel.jpg">
        </div>
    </div>

    <div class="row">
        <br>
        <!--        导航栏-->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">首页</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">精选线路<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">国内游</a></li>
                        <li><a href="#">亚洲</a></li>
                        <li><a href="#">欧洲</a></li>
                        <li><a href="#">美洲</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <div class="row">
        <!--        轮播图-->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/banner_1.jpg">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="images/banner_2.jpg">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="images/banner_3.jpg">
                    <div class="carousel-caption">
                    </div>
                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</header>
<br>
<!--2.主体部分-->
<div class="container">
    <div class="row jx">
        <img src="images/icon_5.jpg">
        <span>黑马精选</span>
    </div>
    <div class="row paddtop">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/jingxuan_2.jpg">
                <p>上海直飞日本</p>
                <font color="#ff4500">$999</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/jingxuan_2.jpg">
                <p>上海直飞日本</p>
                <font color="#ff4500">$999</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/jingxuan_2.jpg">
                <p>上海直飞日本</p>
                <font color="#ff4500">$999</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/jingxuan_2.jpg">
                <p>上海直飞日本</p>
                <font color="#ff4500">$999</font>
            </div>
        </div>
    </div>
    <div class="row jx">
        <img src="images/icon_5.jpg">
        <span>国内游精选</span>
    </div>
    <div>
        <div class="row">
            <div class="col-md-4 paddtop">
                <div class="thumbnail">
                    <img src="images/guonei_1.jpg">
                    <p>上海直飞日本</p>
                    <font color="#ff4500">$999</font>
                </div>
            </div>
            <div class="col-md-8 paddtop">
                <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="images/jingxuan_2.jpg">
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <font color="#ff4500">$999</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="images/jingxuan_2.jpg">
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <font color="#ff4500">$999</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="images/jingxuan_2.jpg">
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <font color="#ff4500">$999</font>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="images/jingxuan_2.jpg">
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <font color="#ff4500">$999</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="images/jingxuan_2.jpg">
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <font color="#ff4500">$999</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="images/jingxuan_2.jpg">
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <p>上海直飞日本</p>
                            <font color="#ff4500">$999</font>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<!--3.页脚部分-->
<footer class="container-fluid">
    <div class="row">
        <img src="images/top_banner.jpg" class="img-responsive">
    </div>
    <div class="row company">
        版权所有
    </div>
</footer>
<br><br>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

XML

概念

XML 指可扩展标记语言（eXtensible Markup Language）。

XML 被设计用来传输和存储数据。HTML 被设计用来显示数据。

XML 是独立于软件和硬件的信息传输工具。

XMLHTML
语法严格语法松散
自定义标签预定义标签
存储数据展示数据

语法

<?xml version='1.0'?>  文档声明一定要顶格写
<users> 	有且仅有一个根标签
    <user id='1'>	引号单双皆可 (IDEA 默认给的是双引号)
        <name>zhangsan</name>
        <age>18</age>
        <gender>male</gender>
        <br/>		可以使用自闭和标签 xml标签区分大小写
      					在 XML 中，省略关闭标签是非法的。所有元素都必须有关闭标签
    </user>

    <user id='2'>
        <name>lisi</name>
        <age>19</age>
        <gender>female</gender>
    </user>
</users>

XML组成部分

  1. 文档声明

    1. <?xml version='1.0' encoding='utf-8' standalone='yes'?>
    2. version 版本号
    3. encoding 编码方式
    4. standalone 是否独立 yes 是依赖于其他文件 no是独立

  2. 指令

    1. 可以结合CSS使用

  3. 标签

    1. 名称是自定义的
    2. 不能以数字和标点开头/不能包含空格

  4. 属性

    1. id属性值唯一

  5. 文本

    1. CDATA区，在该区域以原样展示

      XML 文档中的所有文本均会被解析器解析。只有 CDATA 区段中的文本会被解析器忽略

约束

规定了xml文档的书写规则

  1. 能够在xml中引入约束文档
  2. 能够简单的读懂约束文档
DTD：简单约束
<!ELEMENT students (student*)>
<!-- *号 代表出现0次或多次-->
<!ELEMENT student (name,age,sex)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT sex (#PCDATA)>
<!ATTLIST student number ID #REQUIRED>

<!--这是一个本地约束-->

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE students SYSTEM "student.dtd">

<!--遵守dtd约束中的约束，根目录已经定义好了是students-->
<students>
    <student number="s001">
        <name>cat</name>
        <age>18</age>
        <sex>female</sex>
    </student>

    <student number="s002">
        <name>dog</name>
        <age>18</age>
        <sex>male</sex>
    </student>
</students>
Schema ：复杂约束

XML Schema 的作用是定义 XML 文档的合法构建模块，类似 DTD

  • 定义可出现在文档中的元素
  • 定义可出现在文档中的属性
  • 定义哪个元素是子元素
  • 定义子元素的次序
  • 定义子元素的数目
  • 定义元素是否为空，或者是否可包含文本
  • 定义元素和属性的数据类型
  • 定义元素和属性的默认值以及固定值

解析

解析：操作XML文档，将文档中的数据读到内存中

写入：将内存中的数据保存在XML文档中

解析方式：

DOMSAX
将标记语言一次性加载进内存中，形成DOM树逐行加载，基于事件驱动
操作方便，可对文档进行CRUD只能读取
占内存，一般适用于服务器不占内存，适用于手机

解析器

  1. JAXP 支持dom和sax两种思想

  2. DOM4J

  3. Jsoup (学习重点)

  4. PULL 安卓系统的内置解析 支持sax

Jsoup

对象的使用
  1. Jsoup 工具类，可以通过.parse方法解析XML和HTML 返回Document
    1. 通过外部路径获得 Document document = Jsoup.parse(new File(path), "utf-8");
    2. 通过内部获得
    3. 通过网络获得
  2. Document 文档对象 ，代表内存中的dom树
  3. Elements 元素对象的集合
  4. Element
    1. 获取属性值 attr(String key)
    2. 获取文本内容 text
  5. Node 节点对象 是Document和Element的父类
快捷查询方式
  1. selector 选择器
    1. Elements select2 = document.select("student[number =\"s001\"] > age");
    2. 在student 标签中查找number = s001 的那个，并且找到他的age属性
  2. XPath
    1. 这是XML 的路径语言，XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。
    2. 使用前需要导包
    3. 具体语法参考
ECNU第一菜鸡
关注
专栏目录
java前端框架有哪些_web前端框架有哪些
weixin_42697609的博客
02-15 3402
前端开发并不难，但是要想做得优雅、健壮并不容易，使用一个好的前端框架能够帮你很多忙。本文列举了20个优秀的前端框架，供选择使用。1. Twitter BootStrap (Apache v2.0；响应式)(推荐学习：PHP视频教程)时髦、直观并且强大的前端框架，让Web开发变得更加容易。2. Foundation (MIT；响应式)最先进的响应式前端框架。3. 960gs(GPL&MIT；...
java前端框架源码
06-19
基于js+css+html的前端框架源码，以json数据格式进行数据交互
javaex 前端框架
09-10
Javaex最简单易用的前端框架由java程序员以后端开发者的使用角度而设计并开发的前端框架,不修改原生html、js语法,不创造新的语
Java Web 前端到后台常用框架介绍
公众号：Java后端
09-11 677
1 SpringMVC参考博文：http://blog.csdn.net/evankaka/article/details/45501811基本原理流程，3个线程以及之间...
Java与前端框架集成开发指南
最新发布
微赚淘客开发者博客
06-30 415
在当今互联网应用开发中，Java作为一种强大的后端语言，通常需要与各种前端框架集成，以实现动态、交互丰富的用户界面。通过合理的架构设计和技术选型，开发者可以构建出安全、高效的现代化应用系统，满足用户和业务的需求。在Java后端开发中，RESTful风格的API设计是与前端框架集成的基础。为了防止常见的安全漏洞，如SQL注入和跨站脚本攻击，Java后端应用应实施严格的输入验证和防御性编程。考虑使用微服务架构来实现前后端分离，每个微服务专注于一个特定的业务功能，提升系统的灵活性和扩展性。
java前端框架总结
zhangweibin123的博客
11-27 1474
1、flex   优点：别人看不了你源码，兼容任意浏览器。 缺点：开发工具不完善，每次改代码后，需要清理、运行耗费大量时间。 前景：目前已有浏览器开始不支持flex！将来前途很迷茫！ 2、extjs ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 优
springmvc学习笔记-前端控制器、上传、异常、开发心得小结等.zip
05-10
本学习笔记将涵盖前端控制器、文件上传、异常处理以及开发过程中的心得小结。 1. **前端控制器（DispatcherServlet）** 前端控制器是SpringMVC的核心组件，负责接收所有HTTP请求，然后根据请求的类型和映射规则...
笔记记录分享-笔记记录分享网站-笔记记录分享网站源码-笔记记录分享网站java代码-基于springboot的笔记记录分享网站
02-01
笔记记录分享-笔记记录分享网站-笔记记录分享网站源码-笔记记录分享网站java代码-笔记记录分享网站设计与实现-基于springboot的笔记记录分享网站-基于Web的笔记记录分享网站设计与实现-笔记记录分享项目-笔记记录...
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于ssm的云的学习笔记系统-ssm-java代码
04-16
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
java基础笔记+前端+SSM框架
10-12
SSM框架笔记是指Spring、Struts和MyBatis这三大Java web开发框架的综合学习。Spring是一个全面的后端应用框架，提供了依赖注入（DI）和面向切面编程（AOP）等特性，以及对其他框架的集成支持，如数据访问、缓存、...
java前端框架_Java Web UI框架
weixin_35051143的博客
02-12 892
1.AliceuiAliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。2.AmazeuiAmaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。3.suiSUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。...
基于Java语言完整的前台框架
06-30
本代码是一套完整的前台框架代码，框架语言是标准的html
java框架练习前端页面
03-05
公众号前端页面。练习java框架，ssh或者ssm都可以练习，数据库自己建立
基于Java的国产前台框架
05-13
国产DWZ 可以拿来学习 将连接数据库的配置文件修改，sql语句在doc文件中
介绍10款web前端框架.zip_javaweb开发框架
01-07
介绍10款web前端框架.zip aliceui Amaze UI Fronzen UI h-ui layui ...
2018年java web前端（总结）前端要求和流行几个框架
热门推荐
List_dong 前端技术共享平台
08-12 3万+
Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript!HTML甚至不是一门语言，仅仅是简单的标记语言!CSS只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。Javascript的基础部分相对来说不难，入手还算快。                             掌握技术 1. 掌握各种修图软件，如PSFireworksAI，不...
JAVA 开发平台的技术和框架（一）Web前端
zlq的专栏
03-20 1806
Web前端:Ext js,JQuery UI,JQuery Mini UI,JQuery EasyUI，DWZ,YU
推荐一个java程序员简单易用的前端框架
Cici$的博客
07-11 573
JavaEx框架 作者：陈霓清 文档地址：http://doc.javaex.cn/javaex/index.html
Javaweb重要知识点总结（六）常见的前端框架
zhulin1028的博客
07-01 2147
目录 1. EasyUI 2. MiniUI 3. jQueryUI 4. Vue.js 5. AngularJS 6. AngularJS 1. EasyUI EasyUI 是一种基于 jQuery 的用户界面插件集合。easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能。使用 easyui 你不需要写很多代码，你只需要通过编写一些简单 HTML 标记，就可以定义用户界面。优势：开源免费，页面也还说的过去。 2. MiniUI 基于 jquery 的框架，开
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值