学堂在线部分网课笔记---Web设计与应用

学堂在线部分网课笔记

Web设计与应用

第六章敏捷的前端框架

6.2.1 bootstrap响应式布局（一）

容器

非固定宽度固定宽度 Viewport

viewport的作用是什么？width:height：user-scalable：initial-scale：maxium-scale：minimun-scale：栅格布局 6.2.2 bootstrap响应式布局（二）6.3 bootstrap常用样式—表单

from-group（表单组）from-control（作用于input、textarea、select）水平显示：基本按钮和默认按钮的实现方式： 6.4 Bootstrap常用样式—导航栏

标签形导航：胶囊式（pills）导航：自适应导航：面包屑导航： 6.5 bookstrap常用样式—轮播插件

容器元素：幻灯片：轮播指标：轮播控件：第七章动态网站开发利器—Spring MVC

7.1 欲善其事—MVC之Java语言简介

程序中定义类（Class）包（package）：注解 7.2 Web开发环境介绍

基于Spring MVC的动态网站开发：Maven： 7.3 动态网站的原理和开发技术

服务器端动态页面：客户端动态页面：HTTP：URL： 7.4 Spring MVC编程模型

请求处理流程： 7.5 Spring MVC开发技术7.6 后台数据库技术

Web设计与应用第六章敏捷的前端框架 6.2.1 bootstrap响应式布局（一）

Sublime Text是一个代码编辑器。

容器

在页面中添加布局容器是使用bootstrap栅格系统的的基本前提。

非固定宽度

.container-fluid：全屏（100%宽度），占据全部viewport的容器

...

固定宽度

.container：用于固定宽度并支持响应式布局的容器，元素居中显示

...

Viewport

viewport是用户网页的可视区域，翻译为中文可以叫做“视区”。通俗的讲，移动设备上的viewport就是设备屏幕上用来显示我们网页的那一块区域。

viewport的作用是什么？

这个标签的主要作用是使网页的显示效果针对移动设备进行优化。

width:

控制viewport的大小，可以指定一个值，如600，或者特殊的值，如device-width（代表设备的宽度，单位是缩放为100%时的css像素）。
device-width：屏幕宽度，表示视区宽度与屏幕实际宽度相同。

height：

和width相对应，指定高度。

user-scalable：

用户是否可以手动缩放。

initial-scale：

初始缩放比例，即当页面第一次load时缩放的比例。

maxium-scale：

允许用户缩放到的最大比例。

minimun-scale：

允许用户缩放到的最小比例。（0.25-10.0）

栅格布局

Bootstrap提供了一套响应式、移动设备优先的流式栅格布局，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

行（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过行（row）在水平方向上创建一组列（column）。

你的内容应当放置于列（column）内，并且，只有列（column）可以作为行（row）的直接子元素。

栅格系统中的列十通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-lg-4来创建。

6.2.2 bootstrap响应式布局（二）

使用.col-md-offset-类可以将列向右侧偏移

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm- 元素到已经存在的 .col-sm-* 元素内

6.3 bootstrap常用样式—表单 from-group（表单组）

表单中的逻辑结构单元在使用响应式布局时，表单组会发挥类似于网格系统中“row”的作用 from-control（作用于input、textarea、select）

宽度变成了100%设置了一个浅灰色的圆角边框为控件设置了设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化设置了placeholder的颜色水平显示：

表单默认显示风格为垂直显示

在< form>元素是使用类名“form-horizontal”。配合Bootstrap框架的栅格系统。基本按钮和默认按钮的实现方式：




标签

强烈建议尽可能使用< button>元素来获得在各个浏览器上相匹配的绘制效果。

在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现，在使用过程中，开发者只需要选择不同的类名即可。

6.4 Bootstrap常用样式—导航栏

Bootstrap框架中制作导航条主要通过“.nav”样式。“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。

标签形导航：

标签形导航，也称选项卡导航。

标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名。

.active：默认选中。

.disable：禁用导航的某些部分。

胶囊式（pills）导航：

外形看起来像胶囊。

实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”。

制作垂直堆导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可。

自适应导航：

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元一样自适应宽度。

在制作自适应导航时更换了另一个类名“nav-justified”。当然需要和“nav-tabs”或者“nav-pills”配合在一起使用。

面包屑导航：

面包屑（Breadcrumb）一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。

6.5 bookstrap常用样式—轮播插件

在bookstrap中我们使用Carousel组件来实现轮播效果，一个标准的轮播插件由三部分来构成。

第七章动态网站开发利器—Spring MVC 7.1 欲善其事—MVC之Java语言简介

java是一种面向对象的编程语言

面向对象：一种把数据和操作汇集于对象的编程范式。

java也是一个平台

源程序编译成字节码文件后，在JVM（Java虚拟机）上运行宣称跨平台特性：一次编写，到处运行。

java平台=JVM + API

java平台有多个版本： Java SE，Java EE，Java ME等。

程序中定义类（Class）

类用来描述同类事物共同的属性和行为。类是对象的模板，对象是类的实例。

定义类中的成员变量和成员方法等。

成员变量：保存对象的状态数据。

成员方法：实现对象行为。

在成员方法中根据程序的需要书写各种语句。

main()方法是程序的入口，包含该方法的类称为主类。

方法体内可以有变量声明语句、表达式、返回语句、……等多种语句。

表达式是由操作数和运算符构成的式子，具有特定计算的意义。

.eg. 1+2 、Math.PI 、new Circle() 、c1.area()

方法体内的语句默认是顺序执行的——顺序结构，使用if或for语句能够带来选择结构和循环结构。

包（package）：

包是用于组织类型的容器，类型属于一个包。类似于目录中可以包括子目录和文件，包中可以有子包和类型。

包名通常用逆序点分域名的形式，例如com.abc

创建一个包：用package语句作为源代码的第一条语句，例如“package com.abc;”

类型的简单名称和完成限定名（FQN）

System和java.lang.System

除java.lang外的外部包中的类型，用FQN，或者用import语句后使用简单名称。

.eg. import java.util.List;

import java.util.*;

注解

注解提供“元数据”支持

metadata：data that provides information about other data

注解能够给类、方法、参数等增加描述性的属性

注解能在编译或运行时被提取和使用

例如，下面的注解在编译时会使用：

@Deprecated：类或方法具有该注释则表示已经过时建议不要使用。

@Override：用在方法上，编译器会检查该方法是否真的是覆盖父类的方法或者实现接口的方法，如果不是，则会报告编译错误。

7.2 Web开发环境介绍基于Spring MVC的动态网站开发：

JDK—提供Java编译语言/平台eclipse—开发动态网站项目的IDEMaven—项目管理Spring MVC，Spring Boot，…… Maven：

项目管理工具，可以简化项目管理

最重要特性：项目依赖，项目构造。

项目依赖：直接或间接地使用其他组件。

项目构建：构建绝不仅仅是编译。

7.3 动态网站的原理和开发技术

服务器端动态页面：

通常是由服务器端运行的脚本语言所创建的动态页面。

客户端动态页面：

通常是在客户端运行的脚本语言对页面内容的修改。

HTTP：

HTTP（Hypertext Transfer Protocol），超文本传输协议——浏览器和服务器间无状态的请求/响应协议

URL：

URL：Uniform Resource Locator 统一资源定位符

URL：Uniform Resource Identifier 统一资源描述符

多个查询参数用&间隔

例如：a=123&b=456

7.4 Spring MVC编程模型

http：Web的奠基石，规范Web的应用层协议

Servlet：生成动态内容的Java Web组件，使用Java语言面向Web编程，HttpServlet抽象类，doGet/doPost等方法。

Spring Web MVC：一个Java Web开发框架，以DispatcgerServlet为核心，将请求分发（dispatch）到处理器（Handler），根据处理器的返回结果解析视图、渲染视图并得到回复。

请求处理流程：

Spring Boot启动

Mapped “{{/hi}}” onto public String DynamicWeb.sayHi(…)

使用浏览器访问

http://localhost:8080/hi?username=Jack

DispatcherServlet通过HandlerMapping得知调用sayHi()方法

username参数值为Jack，model参数值为一个隐含的模型对象。

sayHi()方法向模型中加入数据

model.addAttribute()加入username属性，值为Jack

sayHi()方法返回逻辑视图名称sayHi

ViewResolver在template目录中定位sayHi.ftl文件，返回视图

视图渲染，把$(username)替换为Jack，渲染结果为HTML

渲染的HTML文档作为回复返回浏览器

核心：控制器和视图模板的编程

由控制器准备模型数据。

在视图模板中使用模型数据

控制器编程要点：

控制器类上使用@Controller注解

处理方法上使用@RequestMapping注解

处理方法的方法签名非常灵活

7.5 Spring MVC开发技术

数据绑定是框架自动从请求中提取文本类型的参数并自动转换为请求处理方法的强类型参数的处理。

如何遍历包含多个元素的列表

7.6 后台数据库技术

（1）数据库技术是信息化的重要基础，结构化程度高、冗余度低、共享性高

（2）关系型数据库在表中保存数据。表由字段构成。字段有名称、数据类型等属性。

（3）关系型数据库产品众多典型的有Oracle，MySQL等轻量级的嵌入式数据库H2等。

（4）SQL—关系数据库的标准语言

Database、DataSource——数据库、数据源

Connection——到数据库的连接

Statement和ResultSet——SQL语句和结果集

先打开到数据库的连接。然后创建Statement（代表了SQL语句）对象，准备好语句后，执行语句，访问结果集。关闭结果集，关闭语句，关闭连接。

配置使用嵌入式的H2数据库，数据库名称为testdb，相应的JDBC URL为“jdbc:h2:mem:testdb”。配置一个DataSource组件代表内存数据库testdb。配置一个JdbcTemplate组件，连接到数据库。

在启动Spring Boot应用程序时，自动执行类路径下的schema.sql和data.sql脚本，可用于数据库初始化。

schema.sql一般包括DDL，例如创建表。

data.sql一般包括DML，例如向表中插入一些记录。

——The End

学堂在线部分网课笔记---Web设计与应用

Java相关栏目本月热门文章