前端框架技术

最新推荐文章于 2024-05-16 20:30:06 发布

天下粮库

最新推荐文章于 2024-05-16 20:30:06 发布

阅读量2.3k

点赞数 2

文章标签：前端框架 html 前端 vue node.js

本文链接：https://blog.csdn.net/ljy_13141314/article/details/122009190

版权

一网页技术HTML

1.概念

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

2.结构

1.文档声明，用来声明HTML文档所遵循的HTML规范。

2.头部分<head>，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。

<title>编辑网页的标题<title>

3.体部分<body>，用来存放网页要显示的数据。

4.声明网页标题

用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

2.1常用嵌套关系：

1.<HTML>

<head></head>

<body></body>

</HTML>

2.<table>

<tr>

<td></td>

</tr>

</table>

3.<form>

<input/>

<select>

<option>下拉选项</option> 配合select使用

</select>

</form>

4. <ol>或<ul>

<li> 只能在<ol>或<ul>中使用

</li>

</ol>或</ul>

3.语法

3.1HTML标签是什么

HTML是一门标记语言，标签分为开始标签和结束标签，如<a></a>。

如果开始和结束中间没有内容，可以合并成一个自闭标签

3.2HTML属性

HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来

如：<a href="" target="" name="" id=""> </a>

属性声明格式：<标签名属性名=属性值 ...属性名N=属性值N>标签内容</>

属性的特性：

属性必须要声明在标签的开始标签的<>内，不能独立存在

一个标签可以声明多个属性，属性与属性之间必须使用空格隔开。

属性的值可以使用双引号或单引号隔开。

3.3注释：

特性：不会被浏览器解析的信息。

作用： 为代码添加解释信息

注释暂时不需要执行的代码。

3.4空格和换行：

换行：<br/>

空格：

英文空格：&nbsp；

中文空格：&emsp;

3.5各种标签

<br/>：自闭换行符

<h1>：标题标签独占一行共6级标签

<ul> ：声明范围内是无序列表unorder list 独占一行

<ol> ：声明范围内是有序列表order list 独占一行

<li>：与<ul> <ol>搭配使用每个标签代表一行

<img src="图片路径" width="600px" height="400px " />：

图片标签，可以设置成自闭标签

<a>:跳转到其它网页或在同一网页的其它部分:

<a href="http://www.baidu.com" target="_blank"> 百度一下 </a>：

超链接标签 a 属性名=属性值属性名固定为href（点击）属性值为链接目标路径 target="_blank" 跳转目标为新窗口，文字可替换为图片等其他。

<a name="top">我是顶部</a> <a href="#top">我是顶部</a>：

锚定，回到顶部一对a name角标和一对a href角标构成

< input type=" ">:

双引号内属性值代表框的特性,可以有

登录按钮：

登录按钮：

提交按钮：

提交按钮：

选择框：

选择颜色框：

年月日框：

输入时间框：

选择本地时间框：

邮箱：

传文件：

隐藏框：

图片框：

选择到月：

输入数字的框：

输入密码的框：

单选框：

<input type="radio" />：<input type="radio" name="sex" value="1"/>男

<input type="radio" name="sex" value="0"/>女

各个单选框中name属性值一样才能进行单选。

进度条：

重置框：

查找框：

输入电话框：

文本框：

选择时间框（小时：分钟）：

链接框：

选择第几周框：

<table >：

表格标签一对table为一个表格,格式为

<table>

<tr>

<td align="center">： align属性代表位置可选择居中

<textarea>请输入描述信息 </textarea>：一对<textarea>为文本域，域可手动调整大小

<select>：获取标签，与<option>搭配使用，<option>内为下拉菜单内容

</select>

</td>

</tr>

</table>

一对tr为一行，一对td为一列一对th为一列表头，角标内可以设置属性border="2px" 边框等于2像素 width="800px" 宽800像素 bgcolor背景色 bordercolor边框色 cellspacing="1px" 单元格间距。

在行列角标内设置： rowspan 合并行 colspan 合并列

<form>：

带form标签的可以提交数据给java处理，

要使用submit作为提交按钮，

提交的数据要使用name指定的变量接收值。

<iframe>标签:

作用：实现画中画功能

重要属性：src:url

用于指定嵌套在该标签内部的网页的url.

<div>:

块级元素，各个标签内容独占一行，包裹大量文字，行间距小

<p>:

块级元素，各个标签内容独占一行，包裹大量文字，代表段落，行间距比<div>更大

<span>:

行级元素，各个标签内容在一行，包裹大量文字

<audio controls =”contrlis”> : 向网页中添加音频

controls属性：添加控件。

<source src=”音频链接”>

</source>

</audio>

<video controls =”contrlis”>:向网页中添加视频

controls属性：添加控件。

<source src=”视频链接”>

</source>

</video>

3.6 html标签分类

3.6.1块级标签：

表现形式：标签独占一行，可指定宽、高。

特性：能够识别宽高

margin和padding的上下左右均对其有效

可以自动换行

多个块状元素标签写在一起，默认排列方式为从上至下

可以使用margin:0 auto居中对齐

常用的块状元素有：

3.6.2内联(行级)标签：

表现形式：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。

特性：无法设置宽高

margin上下无效，只有左右有效果，padding都有效果，会撑大空间；box-sizing:border-box;无效，因为该属性针对盒模型。

不会自动换行

常用的内联元素有：

3.6.3内联块状标签（inline-block）：

表现形式：就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

特性：

不会自动换行

能够设置宽高

默认排列方式为从左到右

以使用text-align:center使内容相对于父盒子水平居中对齐，例如img标签，可以使用text-align:center，相对父盒子居中对齐、margin:0 auto无效

水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。

常用的内联块状元素有：<img>、<input>

HTML标签类型是可以转换的：

display:inline;转换为行内元素

display:linline-block;转换为行内块元素

display:block;转换为块级元素

3.7<form>提交数据的两种方式：get、post

get:被拼接在地址栏，方便看，但不安全，且最多2000个字符。

post：不方便看，但是安全

method属性:用来指定数据的提交方式，默认是get

method修改：<form method=”post”>

action 属性:用来指定数据提交给哪个程序。

action修改：<form action =”目标程序ip地址+端口号+ Mapping()中的规则>

4. 前端学习网站：

www.w3school.com.cn、www.runoob.com

5.创建网页的思路

5.1 构思页面

5.1.1 页面布局

用户界面

详情页面

后台页面

二网页技术CSS技术

1.什么是CSS

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

2.为什么使用CSS:

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高CSS代码的复用性,更改html属性时直接调用CSS即可。

3.怎么用

3.1 语法：

3.1.1 css代码位置：

行内用法： <标签名 style="Css代码"> 只作用于本标签
内部用法：可置于<head> 或<body>中

<style>

/*CSS全局语法1：标签选择器*/

div{ text-align: center; } 选中所有div添加属性

h1{ text-align: center; } 选中所有h1添加属性

/* CSS全局语法2：class选择器*/

p角标中标记class属性：

.a{ text-align: center; }选中所有class=”a” 值添加属性

p角标中标记class属性：

.b{ text-align: center; } 选中所有class=”b”值添加属性

/*CSS全局语法3：ID选择器*/

根据ID属性的值选中元素，要求ID的值不能相同，优先级最高，效率最高。

步骤：给元素添加ID属性然后在<style>中通过#值设属性。

#a{ text-align: center; } 选中所有id=”a” 值添加属性

/*CSS全局语法4：分组选择器*/

.a，.b,#a { text-align: center; }

/*CSS全局语法5：属性选择器*/

标签名[ 属性名 ]{ font-size: 30px; }

标签名[属性条件]{ font-size: 30px;background-color: aqua; opacity: 0.1; } 设置透明度为0.1

标签名[属性条件]:hover{ font-size: 30px;background-color: aqua; opacity: 1; } 设置鼠标放置后透明度为1

</style>

外部用法 ：把CSS代码和html代码分离，在Html中引入CSS文件，引入样式：

<head>

</head>

class属性：<p class=”a b c”>

3.1.2要求： css代码不可出现中文

3.1.3选择器：标签名

{属性名1：属性值1：;属性名2：属性值2：....}

4.盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

4.1margin（外边距）

盒子间的距离，可以设置上下左右边距

<input type="text" style="margin-left: 105px;"/> 设置左边距为105像素

4.2 border（边框）

盒子的边框，可以设置宽度，颜色，样式

4.3 padding（内边距）

盒子里的内容和盒子的边框的距离,可以设置左边距,右,上,下

4.4 内容

可以设置 width 和 height

三．网页技术JavaScript

1. JS概述

1.1什么是JS：动态网页

JS是一门 基于对象和事件驱动的 脚本语言，通常用来提高网页与用户的交互性。

1.1.1JavaScript 是 web 前端开发者必学的三种语言之一：

HTML 定义网页的内容 H5

CSS 规定网页的布局 CSS3

JavaScript 实现网站的交互 ES6

1.1.2来历

因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。实际上Java和JavaScript根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。

1.1.3现状

JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。

1.2 名词解释

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

1.3 特点和优势

1.3.1特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

(3) JS跟java一样严格区分大小写

1.3.2优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS

2.怎么用

2.1位置

与CSS一样有行内、内部、外部，CSS通过<style>设置属性，JS通过<script>编制函数

行内时通过onclick等调用预编译或自编译的函数。

function 方法名(参数){ 方法体 } //JS自编译方法结构

</script>

2.2基本数据类型

2.2.1 数据类型：

number：number类型可以直接赋值不需要像JAVA指定short,int,long一样指定number

string：双引号，单引号引起来的都是string类型

boolean：ture,false

null: 意思是无值

undefined: 意思是未声明的

2.2.2运算符

算术运算符: +，-，*，/，%，++，–

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ==，!=, =，!, > ，< ，>=，<=，===（比较值和类型）

位运算符: & ， |

逻辑运算符: &&，||

前置逻辑运算符: ! (not)

三元运算符: a?b :c

2.3变量

2.3.1变量必须以字母开头。

2.3.2变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）。

2.3.3变量名称对大小写敏感（y 和 Y 是不同的变量）。

2.2.4声明变量关键字

var:可以声明任何数据，且没有作用域，原因是底层做了提升，声明后自动提升到顶层

方法内，出了方法不可用。

let:区别于var。let是有作用域的，出了声明的代码块就不可用

const:与final类似声明常量

2.4数组

1、var arr1 = new Array();//声明一个空数组

2、var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组

alert(arr2.length);//3

3、var arr4 = [];//声明一个空数组

alert(arr4.length);//0

arr4 = ["abc", "hello", true];//声明一个具有初始值的数组

alert(arr4);

(1) JS数组中可以存放任意的数据类型

(2) JS中的数组长度随时可以被改变

2.5函数

document.write("<h1>这是一个标题</h1>"); //直接输出字符流到网页，提示尽量不要用

console.log(typeof a+b); //console.log()输出到网页控制台 ,typeof判断后面是什么类型

var n=prompt('请输入分数'); //获取网页弹窗输入的内容，且内容都是字符串类型。

document.write() //动态向页面写入内容

document.getElementById(id) //获得指定id值的元素

document.getElementsByName(name) //获得指定Name值的元素

var n=document.getElementById('n1').value*1; // 搜索n1，因为从<input id=’n1’> 中获取的值是String类型，所以需要强转为数字，方法1:(number)value 方法2:value*1

οnclick="num()"//通过onclick(点击) 获取num()

alert( ‘1’ ) // 弹窗输出1

οnmοuseenter="alert('来了')"//通过鼠标滑入获取弹窗alert(‘来了’)

2.6自定义函数

2.6.1 作用：具有功能的代码块, 可以反复调用

2.6.2声明关键词 function：

定义函数方式一：function 函数名称([参数列表]){ 函数体 }

定义函数方式二：var函数名称=new function([参数列表]){ 函数体 }

定义函数方式三：匿名函数（自调用）：function( 参数 ){ 函数体 }

调用方式：（function(name,addr){statement})("刘德华","中国香港");

定义函数方式四：Lambda表达式：(参数)=>{函数体}

$(()=>{
                $("#sidebar-menu").on("click","#menuPerson,#menuAdmini",changeIcon)
               let elem = document.getElementById("menuAdmini");
               $("#sidebar-menu").data("elem", elem);
             $("#loadInfo").click(loadEmpInfo)
    $("#contentMain").html("<div style='text-align: center'><h2>公司介绍</h2></div>")
                         })

2.7调用:

调用内部：函数名称([参数列表]);

调用外部js： <script src="测试json.js"></script>

2.8内置对象

window.document网页文本框：

-获取对象: window.document

--调用方法:

getElementById("元素的id的属性的值")--返回1个元素

getElementsByName("元素的name属性的值")--返回多个元素(标签名)(用数组)

getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)

getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)

write()--向文档写 HTML 表达式或 JavaScript 代码

title--返回网页的标题

id--设置或返回元素的id

innerHTML--设置或返回元素(网页)的内容

innerText--设置或返回元素(网页)的内容

window.alert('100'); //弹出框

window.confirm('确认框'); //确认框

window.prompt('输入框'); //输入框

2.9自定义对象

(1)方式一：

声明对象：function Person(){}

创建对象：var p1 = new Person();

设置属性：p1.name = "张飞"; p1.age = 18;

设置方法(与第二种定义函数一样)：p1.run = function(){ alert(this.name+" : "+this.age); }

访问p1对象：

( 2)方式二:

创建对象同时声明了对象，可以同时设置属性和方法，属性方法间用逗号隔开。调用同方法一相同。

var p2 ={

“pname” ： "赵云"，

“page” ：19，

“psay”：function( ){ console.log ( this.pname+this.page ) }

}

2.10 DOM

通过js操作DOM对象实现对html页面的操作.

DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。

window.document网页文本框对象

2.11 JSON

存储和交换文本信息的语法,将JS、JSON 相互转换，本质上就是一个字符串。

给服务器（后端）发送数据: JS对象=> JSON字符串 JSON.stringify( Js对象)

接受服务器（后端）的数据: JSON字符串=>JS对象 JSON.parse("json字符串")

四．网页技术Vue 框架

1. 概念

Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建，封装了JS的功能，提供了一套由适用于JS开发的API，需要遵守JS的语法。

渐进式：

就是我们可以由浅入深，由简单到复杂的方式使用vue.js进行开发。比如：我们可以在html文档中引入vue.js完成简单的前端页面的开发。同时，还可以使用vue.js特有的单文件组件和路由等复杂功能，实现当下流行的单页富应用的前端项目。

可以只使用核心vue.js

可以只使用核心vue.js + components组件

可以只使用核心vue.js + components组件 + router路由

可以只使用核心vue.js + components组件 + router路由 + vuex状态管理

构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

2. MVVM框架

2.1 解释：

将vue自有或通过特有机制获取的数据，通过vue特有机制传递给页面展示。

M：数据层，代表大数据

V：视图层

VM：提供渲染，不用再手动刷新渲染,通过虚拟DOM把后台内存数据实时传给页面

3.怎么用

3.1 调用：

方式一：引入本地下载好的vue.js文件

vue.js粘贴至目录下，vue框架本身是由js语言编写而成，所以引入方式为JS语言引入方式： <script src="vue.js"></script>

方式二：从cdn上加载vue.js

不需要预先下载拷贝vue.js文档，但是运行效率差

3.2 vue入门案例

3.3基础语法

3.3.1 viewModel 对象区

el（element）： 可以是单一id属性“#app” 可以是多个class属性“.app”

data：方式一：data : 数据区对象名

方式二：data:{ 数据区对象名，

数据属性名1：属性值，

对象名：{

数据属性名3：属性值，

数据属性名4：属性值，

}}

方式三：data(){ return{数据属性名：属性值} }

3.3.2 Model数据区（可直接在对象区声明数据）

a : { 数据 }

3.3.3 view展示区

通过插值表达式将数据展现在页面

3.3.1运算符 operator

<p> 加法:{{2+3}} </p>

<p> 减法:{{2-3}} </p>

<p> 乘法:{{2*3}} </p>

<p> 除法:{{3/2}} </p>

<p> 取余:{{10%2}} </p>

<p> 三元表达式: {{age>10?'yes':'no'}}</p>

字符串操作: <p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}} </p>

3.4高级用法：v-命令

3.4.1 v-model :

双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。

3.4.2 v-on:

某种操作触发事件，可缩写为@

3.4.3 v-if:

将根据表达式的值( true 或 false )来决定是否插入 p 元素，满足条件加载，不满足不加载，逻辑同JAVA

3.4.4 v-show

将根据表达式的值( true 或 false )来决定是否插入 p 元素，无论满不满足都加载，只是如果不满足条件则被隐藏不运行。

3.4.5 v-for:

循环语句，遍历数组，V-for : “数据 in 数组”，或V-for : “数据,下标 in 数组”

3.4.6 v-cloak:

使用css隐藏插值表达式,加v-cloak属性的标签内的插值表达式都将被隐藏，v-cloak 在 CSS中设置为。

<styal>

[v-cloak]{

display: none;

}

</styal>

3.4.7 v-bind:

属性的值是变量而不是字符串时，通过v-bind进行标识，如 : href 冒号开头(省略了v-bind)就说明后面跟的href是变量。

3.5 Vue组件

3.5.1概述

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

可创建一个页面。

3.5.2 使用

注册一个全局组件(所有实例都能用)：Vue.component(组件或标签名, 配置选项)

<script>

Vue.component( 组件名, { template: 配置的选项(组件要展示的功能或内容) }) </script>

注册一个局部组件(只能本new Vue实例范围能用，一个对象可创建多个组件)：

new Vue({

el:'#app',

components:{

starter1:{ //组件名1

template:'组件要展示的功能或内容 '

}

starter2:{ //组件名2

template:'组件要展示的功能或内容 '

}

})

调用组件：<组件名> </组件名>

3.6 Vue的Ajax—>AXIOS

3.6.1 原有AJAX概述

Ajax 即Asynchronous Javascript And XML( 异步的 )

Ajax并不是一种新的编程语言，而是多种技术的综合应用

Ajax是 客户端 的技术，它可以实现 局部刷新 网页

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

3.6.2原有AJAX原理

1、AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

2、ajax 根据http和https协议将js对象转成json串传给后端。

3.后端发送json串使用 对象可以转化为json串@responseBody

后端接收json串使用 json串可以转为对象@requestBody

4. ajax的contentType：默认为application/x-www-form-urlencoded,这时发送post/put请求时，不需要使用@RequestBody注解描述形参

5. axios的contentType: 默认为application/json，因此必须使用@RequestBody注解描述形参。

3.6.3 AXIOS

1、Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）

2、使用步骤: 要使用一个单独的js文件,注意导入顺序

先导入 <script src="vue.js"></script>

再导入 <script src="axios.min.js"></script> 无min的为完整版。

使用后端程序资源（查询：get方法）最好把@requstmapping换成@getmapping

1. get简单使用：

axios.get("资源的url ","参数信息").then(res=>{console.log(res.data);})

本处res为get到的数据为其命的名，=> 后面对数据进行操作。

2.根据ID动态查询：id需要拼接到url后面

let id=1

let url2="http://localhost:8080/findUserById?id="+id

axios.get(url2).then(function(promise){console.log(promise.data)})

3.传递的参数是个对象(多参数查询) delete请求与之一致

let user3 ={age:18,sex:"女"} //封装对象，要传的参数

let url3="http://localhost:8080/findUserByAS" //url地址

axios.get ( url3 , { params:user3 } )

.then(function(promise){console.log(promise.data)})

4. 传递的参数是个对象

http协议是支持GET请求是带请求体的，后端也是可以接受GET请求中的请求体，但是web浏览器会限制GET请求不携带请求体。

2、 post简单使用：

发送资源给后端（新增：post方法）：后端接受参数使用注解@postmapping

post传递的参数是个对象(多参数查询) put请求与之一致

let user3 ={age:18,sex:"女"} //封装对象，要传的参数

let url3="http://localhost:8080/findUserByAS" //url地址

axios.get ( url3 , user3 ) 不用{ params: }

.then(function(promise){console.log(promise.data)})

3、delete简单使用：

发送资源给后端（删除：delete方法）：后端接受参数使用注解@deletemapping

4、put简单使用：

发送资源给后端（更新改：put方法）：后端接受参数使用注解@putmapping

5、map参数

后端接受map参数前端需要用put请求，后端使用put接收

public Result testget(@RequestBody Map map) { }

SprinMVC接收参数

@RestController @RequestMapping

3.6.4 AXIOS作用

axios作用发起请求(form请求有11种，常用4种，post\delete\put\ get

对应增删改查)，接受请求

请求：

1.常规方式：/user?key=value,key2=value2

2.post/put方式: data: js对象 后端使用@ RequestBody接收

3.restful风格：/url/arg1/arg2使用对象接受，每个参数，接收加 @PathVariable

3.6.5 跨域问题

浏览器解析ajax时，要求浏览器的网址，与ajax请求的网址必须满足三要素，如果有一项不满足则为跨域访问

1.协议相同

2.域名相同

3.端口号相同：http协议默认80，https协议默认443，所以不写也满足端口号相同

3.6.6跨域问题解决：

第一种：前端使用vue框架时修改vue.config.js配置文件信息：是对vue本身的配置

module.exports = {

lintOnSave: false,

devServer: {

proxy: {

'/api': { //*通过本url代理

target: 'http://127.0.0.1:8010', // 后端的地址

ws: true, / / webSocket协议:本协议常用于聊天工具

changeOrigin: true, // 允许跨域请求

pathRewrite: { // 路径重写

'^/api': '/'

}

第二种：后端加注解

在Controller类上加上@CrossOrigin

3.7 Vue路由router

接受浏览器的请求，根据不同的请求的方式找到匹配的组件（网页），页面跳转。

3.7.1 路由功能导入

3.7.2路由功能创建过程

//1,定义组件

let home = { template:"<h3>这是主页</h3>" }

let help = { template:"<h3>这是帮助页</h3>" }

//2,创建路由的实例VueRouter, routes指定每个路由映射的一个组件

let router =new VueRouter({ routes: [

{path:"/home 链接路径",component: 组件名home},

{path:"/help链接路径",component: 组件名help}

] })

//3,通过router注入路由,从而让整个应用都有路由功能

new Vue({ el:"#app" ,

// router:router 健值相同可简写为router

router })

3.7.3 路由功能使用

<div id="app">

<router-link to="/home">主页</router-link>

<router-link to="/help">帮助页</router-link>

<router-view></router-view>

</div>

3.7.4 路由三要素

路由配置：路由的创建过程

目标组件：路由要跳转的页面

路由出口：<router-view></router-view>展示的位置

3.7.5 http 请求三要素

请求方式：有11种，常用4种，get\post\put\delete

请求的url：统一资源定位器，它是WWW的统一资源定位标志，就是指网络地址。

请求时携带的参数：

4. Vue的生命周期

页面创建时，页面加载时，页面更新时，页面销毁时四个过程，每个过程都会触发一些方法（生命周期钩子函数/组件钩子）共8个，初始化4个（创建前后，加载前后各两个），运行（更新）前后两个，销毁前后两个。

五．nodejs

是一种javascript的运行环境，能够使得javascript脱离浏览器运行。

1. npm

1.1概念：

npm（node package manager）：nodejs的包管理器，Nodejs中包含了npm，用于node插件管理（包括安装、卸载、管理依赖等）。

它是世界上最大的软件注册表，包含超过 600000 个包（package）（即，代码模块）。

官网：

https://docs.npmjs.com/about-npm 英文官网

https://www.npmjs.cn/ 中文官网

修改npm的镜像(下载的快，下载各种包的路径) :

npm config set registry https://registry.npm.taobao.org

2 webpack 概念

前端自动化构建工具，它基于nodejs实现，可以帮助我们实现资源的合并、打包、压缩、混淆的诸多功能。

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。

3. vue-cli脚手架

3.1概念

vue-cli就是Vue的脚手架工具既vue的客户端，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。

它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成（vue+webpack）的项目模板，vue-cli和webpack是什么关系：vue-cli 里面包含了初始化webpack，配置webpack打包规则的方法。

3.2脚手架2.0怎么用

3.2.1下载安装脚手架

npm install vue-cli –g //需要安装完npm

3.2.2 创建vue工作空间

D:\workspace\vue

3.2.3生成vue项目

1.下载基于vue.js的官方webpack模板：D:\workspace\vue>vue init webpack jt01

2.配置项目文件：

3.2.4 启动项目 & 停止项目

cd jt01 //# 进入项目目录

npm run dev // # 自动启动服务，ctrl+c 停止,可能要等几分钟

3.2.5测试访问

注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，它会自动改变端口号，以其具体提示的端口信息为准。

3.2.6 HBuilderX管理Vue项目

可以在HbuilderX中打开Vue项目

组件需要引入到APP.VUE中注册才能正常使用，或将APP.vue交给main.js管理，main.js中import。

vue-cli 脚手架有现成模板

3.3.脚手架Vue CLI v4.5.14怎么用

3.3.1安装

npm i @vue/cli –g --force

3.3.2配置

安装完成后使用可视化页面配置vue-cli脚手架v4.5.14，默认端口号为8000

创建新项目

在工作空间下创建新项目>给新项目命名>预设最好选择手动>功能：补充点选router和使用配置文件>配置：pick a linter/formatter config 选择eslint+standard config 标准配置

配置>eslint configuration>保存时检查最好关闭否则频繁报错

插件>安装element-ui的1.0.1版本最好

依赖>安装axios的0.23.0版本

查看vue项目：

导入和操作旧版本项目需要把旧版本项目放到新版本工作空间下，但是不能展现完整内容

3.3.3与vue-cli脚手架2.0区别

1、2.0版本依赖于dos窗口使用dos命令安装和配置第三方插件，Vue CLI v4.5.14只需要在可视化界面安装即可。

2、2.0通过vue init webpack jt01创建结构完整的项目，3.0通过可视化界面创建项目

3、3.0以上版本比2.0版本项目结构中多了plugins（存放各种插件代码）和views（可存放各种以vue命名的template自定义组件，主要是用户要访问的页面）文件夹，而2.0版本只存放在node_modules文件夹和components中。

3.4 vue中蕴含的webpack打包的项目结构

view 就是用户要访问的页面都存放在这个目录下，如Index.vue

static中保存一些静态的资源，如jquery、css、图片等

src 目录是一个很大的目录，包罗万象

components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vue

router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。Router非常强大，老系统是url改变是在服务端进行刷新，而router支持在客户端刷新，就是url变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。此处不好理解，后期专门章节论述，不必心急，先记录下这个特点

重要文件说明：

Vue项目这么多文件，它们什么关系？写代码该从哪里下手呢？

常见操作: 1, 在components里写自定义组件 2, 在App.vue里注册自定义组件 3, 在main.js里引入第三方js

index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app

src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中

components：1、创建自定义组件的文件夹，结构是：

<template> <div></div></template> //HTML代码区，只能有一个div区

data(){return{}}//data区必须return}</script>// 提供一个支持导出的组件

App.vue：2、把自定义组件,引入到这个文件里

在<script> 导入区使用import export default{ component:{名与导入名一致}}

<template> <div> 此处使用component 中名标签</div></template>

main.js：3、引入elementui或ant design需要修改main.js 引入方式：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

4. 第三方插件的配置文件丢失：

如果没有node_modules library root（所有第三方插件的配置文件），可以在项目根目录下运行cmd然后使用npm install 安装所有需要的插件，前提是项目中还存在package.json和package—lock.json

六element-ui

是什么：

饿了么团队基于js开发的UI 设计语言，现已无人维护

2.vue-cli2.0版本中怎么用：

2.1安装（哪个工程就在哪个工程下下载安装）

访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南

在工程目录下,使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui –D // # 下载element资料,这可能要等几分钟

2.2修改 main.js,引入Element

你可以引入整个 Element，或是根据需要仅引入部分组件。

完整引入：

import ElementUI from 'element-ui'; //导入element

import 'element-ui/lib/theme-chalk/index.css'; //导入element的css

Vue.use(ElementUI);//使用element

2.3使用特点

element-ui中引入的标签名大多为el开头

<el-row>：行

<el-col>:列，默认24列

<el-col :span="8" >: 合并8列

2.4 自定义列模板

<el-table-column> 中插入template标签

<template slot-scope="scope"> 命名作用域插槽名

{{ scope .row.type ==A ? B : C }} 利用作用域插槽插入数据

</template>

</el-table-column>

2.5 点击某按钮，跳转到画中画页面

<el-dialog :visible.sync="addItemCatDialogVisible = false " > //会话框开关

2.6 点击新增按钮，跳转到新增页面

3.同类产品ant design

蚂蚁金服基于js开发的一套企业级 UI 设计语言和 React 组件库

浏览器向服务器发起请求：

get方法：

网页地址栏直接输入：

表单<form method=”get” > ：

post方法

put 方法

delete 方法

七．用户列表案例：

1.实现用户列表展现

1.1需求1：

用户访问页面（初始化）的时候，就要求访问后台服务器，发起ajax请求，实现用户列表页面的渲染。

beforecreate、created、beforemout、mouted四个初始化结束，在此之前的函数都可用。

mounted() {

/* 页面初始化完成之后mounted立刻调用findUserList()方法 */

this.findUserList() }

1.1需求2：用户新增（有input标签就要考虑双向绑定）

天下粮库

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
前端框架技术

一网页技术HTML1.概念HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。2.结构1.文档声明，用来声明HTML文档所遵循的HT
复制链接

扫一扫