目录
前言:前端位于整个项目首要要开发的内容,直接和用户打交道,实现页面的展现和交互功能,所以在分类上俗称为前端。随着软件技术的日趋成熟,前端内容也呈现爆炸式的增长,和革命性的变革,前端借鉴后端的发展经验,也开始应用分层体系,也开始术有专攻,解决一个专项的问题,也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单,不亚于后端开发,甚至难度超越了后端开发。简单来说,前端技术栈包括以下一些部分。
1、前端技术栈介绍
1.1、前端技术简介
HTML超文本标记语言实现页面展现,形成静态网页
CSS层叠样式表实现页面美化
JS javascript脚本语言实现页面前端和后端的数据交互,形成动态网页
React facebook出品前端、移动端JavaScript框架
Angular google 出品基于TypeScript的开源 Web 应用框架
Vue 国人出品,阿里收购构建用户界面的渐进式框架,自底向上开发
NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境
1.2、 前端调试工具
1.2.1、HBuilder
简介:HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby,本身主体是由Java编写。
特点:快,是HBuilder的最大优势,通过完整的语法提示和代码块模板等,大幅提升HTML、js、css的开发效率。
安装
官网:https://www.dcloud.io/hbuilderx.html
1.2.2、webstorm
下载地址; WebStorm:JetBrains 出品的智能 JavaScript IDE
说明:webstorm是和idea相似的一款开发工具,支持代码补全和调试功能
1.2.3、vscode
下载地址:Download Visual Studio Code - Mac, Linux, Windows
说明:VSCode是一款轻量且强大的开发工具,其支持各种不同类型的插件,并通过不同的插件实现代码编写、扫描,调试、提交等一系列的操作。
2. 静态页面HTML
2.1 概念
HTML(Hyper Text Markup Language)超文本标记语言,是做网站页面的最基础的开发语言,由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱,连脚本语言都算不上,是一门弱类型,主要用于网站开发。
我们可以通过w3Cschool来学习前端Html页面的搭建
地址:HTML 教程
2.2 结构
文档声明,用来声明HTML文档所遵循的HTML规范。
头部分,用来存放HTML文档的基本属性信息,比如网页标题、编码格式,这部分内容会被网页优先加载。
体部分,用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档,打开的方式一定要和保存文件时使用的编码一致,避免出现中文乱码问题。
2.3 语法
HTML标签
HTML是一门标记语言,标签分为开始标签和结束标签,如<a></a>。
如果开始和结束中间没有内容,可以合并成一个自闭标签
双标签:<h1></h1> .....<h6></h6> <span></span> <ul></ul><li></li> <ol></ol>
<p></p> <a></a> <table></table>
单标签: <img/> <input/>
HTML属性
HTML标签都可以具有属性,属性包括属性名和属性值,如果有多个属性,要以空格隔开。属性的值要用单引号或者双引号引起来。
HTML注释
格式:<!---->
空格和换行
换行:<br/>; 空格: 在HTML中,多个空格会被当成一个空格来显示。
2.4 常用标签
标题标签 <h1>..<h6>
列表标签 <ol>有序 <ul>无序
图片标签
<img />
超链接标签
<a href="#"> <a/>
Input标签
<input type="text" /> 普通文本框
<input type="password" /> 密码
<input type="radio"/>男 单选框
<input type="number" /> 数字值
<input type="week" /> 日历
<input type="checkbox" />杨幂 复选框
<input type="button" value="点我一下"/>
<input type="submit" value="提交数据"/>
表格标签
<table></table> <tr></tr> 行 <td></td>列
表单标签
<form></form>
其他标签
<p> 段落标签 <span></sapn> 行级元素
3、 CSS简述
3.1、 CSS简介
CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门技术,增强网页的展示能力。
主要是使用CSS属性来实现,最终可以将css代码和HTML网页代码进行分离,也可以提高css代码的复用性。
3.2、 CSS的用法
body中:
<tr align="center"><!-- css方式1 -->
<td >你好1</td>
<td >你好2</td>
</tr>
<tr style="text-align:center;"><!-- css方式2 -->
<td >你好3</td>
<td >你好4</td>
</tr>
head中:
<!-- css方式4 实现css与HTML代码的分离,提高css代码的复用性-->
<link href="demo.css" rel="stylesheet"/>
<!-- css方式3 -->
<style>
td{
text-align: center;
}
</style>
3.3、 选择器
所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。
class选择器
说明:class选择器是较为常用的选择器
<p class="a">123</p>
<style>
.a{
background-color: cornflowerblue; /*背景颜色*/
color:red; /*字体颜色*/
}
</style>
id选择器
说明:id选择器是适用于特殊单一选项的页面渲染
<p id="p1">123</p>
/* 使用id选中元素 */
<style>
#p1{
text-indent: 200px; /* 首行缩进*/
}
</style>
分组选择器
说明:将多个选择器选中的元素组合在一起,统一设置样式
/* 分组选择器,将多个选择器选中的元素组合在一起,统一设置样式 */
.a,.b,#p1{
background-color: #000000;
}
属性选择器
说明:选中指定的元素,设置样式
<style type="text/css">
/* 选中指定的元素 */
input[type='text']{
background-color: #6495ED;
}
</style>
3.4、盒子模型
指的是将HTML中所有元素都看成一个盒子,盒子与盒子之间的距离,包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
相关参数:
margin(外边距)
border(边框)
padding(内边距)
4、javascript语法概述
4.1 静态网页和动态网页
传统的html网页是通过html编写的,我们可以使用html超文本标记语言实现了网站页面展现,展现文字、表格、图片、超链接等,使用ss样式表实现了页面的美化,这些技术实现了静态网页。
再加入javascript后,网页就能实现页面和后台系统的交互,实现用户信息的注册,实现用户的登录,实现个性化的数据展现,功能强大不老少。业界把这样的网页称为动态网页,把这样的网站称为动态网站。
4.2 javascript简介
JavaScript 是 web 前端开发者必学的三种语言之一:
JavaScript遵循ECMA国际组织颁布的ECMAScript标准。2015年6月17日,ECMA国际组织发布了ECMAScript 的第六版,简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。很多js相关技术都遵循这个标准,如目前最受欢迎的Vue。
JS是一门 基于对象 和 事件驱动 的 脚本语言 ,通常用来提高网页与用户的交互性。
4.2.1.基本特性
名词解释
基于对象:它不仅可以创建对象,也能使用现有的对象。JS没有类的概念,也没有编译的过程。是一边解释一边执行。
事件驱动:在JS中,大部分情况下都是通过事件触发驱动函数执行的,从而实现特定的功能。(比如点击div将内容替换为时间、当鼠标滑过元素,元素就有翻转的动态。)
脚本语言:在网络前端开发环境下,用于嵌入在客户端浏览器中的一段小程序。
特点
(1)、JS是一门直译式的语言,直接执行的就是源代码.是一边解释一边执行,没有编译的过程(不像Java需要提前编译为class文件再运行).
(2)、JS是一门弱类型的语言,没有严格的数据类型.
优势
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)只要有浏览器的地方都能执行JS
4.2.2 、js引入方式
通过script标签引入JS代码
<head>
<meta charset="utf-8"/>
<script>/* JS代码 */
function fn(){
alert("JS的第1种引入方式");
}
</script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
通过script标签引入外部的JS文件
<head>
<meta charset="utf-8"/>
<script src="1.js"> </script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
注意:不要同时通过一个script标签引入JS代码和JS文件,会导致代码不会执行!比如:
4.3 js语法
注释
单行注释: //注释内容
多行注释: /* 注释内容 */
数据类型
基本数据类型
包括:number/string/boolean/null/undefined
复杂数据类型
函数、数组、对象(自定义对象、内置对象、DOM对象、BOM对象…)
JS的变量
js是弱类型语言,所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型,如java的变量类型是编译期就确定的;而它采用了动态类型,也就是说在编译期类型不确定,运行时会动态根据变量的赋值来决定它的类型,这点比较灵活。这也是双刃剑,编译期就难以检查出其赋值的错误。
JS的运算符
JS中的运算符和Java中的运算符大致相同
不同之处在于!=和==在js中表示为!==和===,以及类型运算符的不同
JS语句
JS中的语句和Java中的语句用法也大致相同
if…else语句
if(a == true && b == true ){
alter("wo是第一个判断语句的内容")
}else if(a != true && b == true ){
alter("wo是第二个判断语句的内容")
}else if(a != true && b != true){
alter("wo是第三个判断语句的内容")
}
switch…case语句
Switch
循环语句
for (var j = 0; j < panel.Size(); j++) {
alter("我是第"+j+"次循环");
}
JS数组
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如:数值、字符串、布尔值、undefined、null、对象、函数等
JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块,前面使用了关键词 function
方式一:通过function关键字声明函数
方式二:通过函数直接量声明函数
JS对象
利用function关键字声明对象,用new关键字创建对象。
内置对象
自定义对象
DOM树结构
DOM 是一项 W3C (World Wide Web Consortium) 标准,DOM(Document Object Model)文档对象模型为JS操作html文档所提供的一套API,通过这套API可以很方便的对html元素进行访问及增删改查操作。
js对象总结
获取页面元素的4种方式:
getElementsByTagName 标签名称,得到数组
getElementsByName name属性,得到数组
getElementsByClassName class属性,得到数组
getElementById id属性,单个值
注:dom树在描述标签时除id方式,其它都是以数组形式体现,哪怕是一个元素。
5 Ajax 异步访问技术
5.1 json概念
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON(JavaScript Object Notation,JS 对象简谱) 是一种轻量级的数据交换格式。它基ECMAScript (js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言,它是xml的终结者,也成为了网页主流开发方式(ajax异步请求,json返回)。
作用:JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时,这些数据只能是文本。JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式,我们能够把数据作为 JavaScript 对象来处理,无需复杂的解析和转译。
语法:
JSON数据: var a =' "firstName" : "John" '
JSON 对象: var a = '{ "firstName":"John" , "lastName":"Doe" }'
JSON 数组:
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName"}}
5.2 Ajax概述
简介:
Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax是 客户端 的技术,它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
原理:
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
5.3 入门案例
5.3.1、创建表单,设置参数
<form method="get">
<table align="center" border="2px" bgcolor="#aaaa7f">
<tr><td>
<h3 align="center"
style="color: #7FFFD4;;">学生信息管理系统MIS</h3>
</td></tr>
<tr><td>姓名:</td></tr>
<tr><td><input type="text" placeholder="请输入姓名" name="name"></td></tr>
<tr><td>年龄:</td></tr>
<tr><td><input type="text" placeholder="请输入年龄" name="age"></td></tr>
<tr><td>性别:(单选框)
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女</td></tr>
<tr><td>爱好:(多选)
<input type="checkbox" name="hobby" value="1"/>乒乓球
<input type="checkbox" name="hobby" value="2"checked="checked"/>爬山
input type="checkbox" name="hobby" value="3"/>唱歌</td></tr>
<tr><td>学历:(下拉框)
<select name="class">
<option value="1">大学本科</option>
<option value="4">专科</option>
<option value="2">硕士</option>
<option value="3">高中以下</option>
</select>
</td></tr>
<tr><td>入学日期:</td></tr>
<tr><td><input type="date" name="resigndata"></td></tr>
<tr><td align="center">
<button id=b1 type="submit" value="提交" v-on:click.prevent="submi"> 提交</button>
<button id=b2 type="reset" value="取消">取消</button>
</td></tr>
</table>
</form>
5.3.2、.创建ajax方法,引用到技术栈中
<script>
function change(){
// 1. 创建xhr对象,用于同幕后服务器交换数据
var xhr = new XMLHttpRequest();
// 2. 定义当 readyState 属性发生变化时被调用的函数
xhr.onreadystatechange=function(){
//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
if(this.status==200 && this.readyState==4){
// document.getElementById("d1").innerHTML="hi ajax";
//5.以字符串返回响应数据,并展示
// document.getElementById("d1").innerHTML=this.responseText;
console.log(this.responseText);
}
}
//3.规定请求的类型(请求方式,文件位置,异步)
//xhr.open('get','1.json',true); //请求本地的json文件
//xhr.open('get','http://localhost:8080/car/get',true); //请求本地的服务器程序
// xhr.send(); //发送get请求
xhr.open('post','http://localhost:8080/stu/add',true);
//4.xhr将请求发送到服务器
var formdata=new FormData( document.getElementById("form") );
xhr.send(formdata); //发送post请求
}
</script>