Wen阿杜
Wen阿杜

前端三剑客

三剑客

万维网联盟（ World Wide Web Consortium ），创建于1994年10月，主要工作是对 web 进行标准化。
​
该组织定义了网页的开发需要如下3门技术：
​
- HTML:定义网页的结构
- CSS: 定义网页的表现，样式
- JavaScript: 定义网页的行为

一、HTML

  ★ HTML（HyperText Markup Language）：超文本标记语言。
  ★ 超文本就是超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
  ★ 由标签构成的语言，HTML中的标签都是预定义好的。
  ★ 语法规则:
     标签分为两种：双标签和单标签 
 

     注释：Ctrl+/ （快捷键）

1、快速入门

第一步:创建一个名为HTML的文件夹
第二步：创建一个文本文件，然后修改文件名为hello.html
第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码:
★ html有固定的基本结构:


    
        网页的标题 
    
    
        
    


html是超文本标记语言，还能修饰超文本，所以我们可以通过;img;来引入图片，其中该标签的src属性，用来指定图片的地址，代码如下：

    
        HTML 快速入门
    
    
        
Hello HTML

2、基础语法

1.标签不区分大小写
2.语法松散，大部分标签可以不要结束标签，部分结构标签也不是必须的
3.标签属性单引号双引号皆可
4.文件后缀可以是.html也可以是.htm

★ 基础标签:

 ~ 
定义标题，h1最大，h6最小
 定义文本的字体，字体大小，字体颜色
 定义粗体文本
 定义斜体文本
 定义文本下划线
HTML 
   HTML 
   HTML 
   HTML


     

 定义文本居中

 定义段落

 定义折行

 定义水平线
音频标签
contrllos显示播放按钮的控件
autoplay
loop循环播放





    
    
    
    
    
    HTML-基础文本标签


    
标题1

    
标题2

    
标题3

    
标题4

    
标题5

    
标题6

    
    h0
    h7



    字体标签，修饰文本的颜色、大小、样式
      color ：设置文本的颜色
       size ：设置文本的大小，取值为1-7，其中1最小，7最大
       face ：用来设置字体。如 "楷体"、"宋体"等
       
★ color属性取值有3种，分别是：
● 英文单词：颜色的单词。
● rgb(值1，值2，值3)三原色表示法，取值范围为0-255之间
● #值1值2值3 还是三原色表示法，上述的简写方式，取值是16进制法，所以在00-FF之间

 
    我绿了
    我是24px的字体
    我是1号字体
    我的颜色是#FF00FF
    我是华文琥珀

   
HTML
居中标签


段落标签:

已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。


而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。

文本标签全部代码如下:
    



    
    
    
    
    
    HTML-基础文本标签


    
标题1

    
标题2

    
标题3

    
标题4

    
标题5

    
标题6

    
    
    HTML,基础标签
​
    

​
    
HTML

​
    

​
    HTML 

    HTML 

    HTML 

    HTML 

​
    

​
    已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。

​
    而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。
​
    

​
    
已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。

​
    
而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。

    

3、图片音频视频标签

在页面上引入图片的
    height:用来定义图片的高度
    width:用来定义图片的宽度
    src:规定显示图像的 url（统一资源定位符）

4、超链接标签

 定义超链接，用于连接到另一个资源
    href: 指定需要访问的资源的URL
    target: _self,默认值，在当前页面打开, _blank在空白页打开
定义表格
    broder:规定表格边框的粗细
    width:规定表格的宽度
    cellspacing:规定单元格之间的空白
  定义表格的行 
    align:定义表格行的内容对齐方式

  定义普通单元格
 定义表头单元格，会有加粗居中的效果

 


    
    
    
    HTML-超链接表格标签


​
    传智教育 

​
    黑马程序员
​

    
  
5、布局标签
 
  
 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面。
用来组合行内元素。一般用来展示文本
  



    
    
    
    HTML-布局标签


​
    
我是div1

    
我是div2

​
    我是span1
    我是span2
​


- div占据一整行，span仅仅占据文本部分
- div的高度想要高一点，可以通过css设置高度，此处我们不做演示。
 
  
6、表单标签
 
  
 定义表单的
    action:定义表单数据提交的服务器地址
    method:定义表单数据提交的方式，一般有get和post这2种
定义表单项，通过type属性控制输入形式,接受用户的信息
    type:定义input表单项的表现形式，例如：文本框，密码框等
  


     
     
     
       
      
       



​


 
  
 
  
二、CSS
 
  
1、css的引入方式
 
  
● 内联样式：在标签内使用style属性，属性值是css属性键值对；
● 内部样式：定义 -->
    
    


​
    
    
    
CSS 引入方式

    
CSS 引入方式



 
  
2、选择器和属性
 
  
选择器是选取需设置样式的元素（标签）。
● 选择器通用语法如下：
选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
}
★ 1.元素（标签）选择器：
- 选择器的名字必须是标签的名字
- 作用：选择器中的样式会作用于所有同名的标签上
元素名称 {
    css样式名:css样式值；
}
 div{
     color: red;
 }
★ 2.id选择器:
- 选择器的名字前面需要加上#
- 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签。
#id属性值 {
    css样式名:css样式值；
}
#did{
    color: blue;
}
★ 3.类选择器：
- 选择器的名字前面需要加上.
- 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个。
.class属性值 {
    css样式名:css样式值；
}
.cls{
     color: aqua;
 }
/****************************************************************************/



    
    
    
    CSS-选择器
    


    
Hello CSS

    
Hello CSS id

    
Hello CSS class



 
  
 
  
三、JavaScript
 
  
1、js引入方式
 
  
★ 第一种方式：内部脚本，将JS代码定义在HTML页面中
 - JavaScript代码必须位于标签之间
 - 在HTML文档中，可以在任意地方，放置任意数量的
★ 第二种方式：外部脚本将JS代码定义在外部 JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含




    
    
    
    JS-引入方式
    
    
​
    
    




 
  
2、基础语法
 
  
★ 语法规则如下：
- 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无
- 大括号表示代码块
- 注释：
  - 单行注释：// 注释内容
  - 多行注释：/* 注释内容 */
★ js中3种输出语句，来演示书写语法
window.alert()//警告框
document.write()//在HTML 输出内容
console.log()//写入浏览器控制台
//**************************************************************



    
    
    
    JS-基本语法


    



 
  
3、变量
 
  
★ js中主要通过如下3个关键字来声明变量的：
● var:早期ECMAScript5中用于变量声明的关键字，可以重复声明
● let:ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效，并且不能重复声明
● const声明常量的，常量一旦声明，不能修改
注意:
   - JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
  - 变量名需要遵循如下规则：
  - 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
  - 数字不能开头
  - 建议使用驼峰命名




    
    
    
    JS-基础语法


    



 
  
4、数据类型
 
  
js是弱数据类型的语言，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型：
■ number ：数字（整数、小数、NaN(Not a Number)）
■ string ：字符串，单双引皆可
■ boolean：布尔。true，false
■ object：对象类型，null也是object
■ undefined：当声明的变量未初始化时，该变量的默认值是 undefined。
■ 使用typeof函数可以返回变量的数据类型




    
    
    
    JS-数据类型


​




● 算术运算符: + , - , * , / , % , ++ , --
● 赋值运算符: = , += , -= , *= , /= , %=
● 比较运算符: > , < , >= , <= , != , ==,=== 
 注意: == 会进行类型转换，=== 不会进行类型转换
● 逻辑运算符: && , || , !
● 三元运算符条件表达式 ? true_value: false_value
 注意：
   ● ==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较
   ● ===：不光比较值，还要比较类型，如果类型不一致，直接返回false




    
    
    
    JS-运算符


    



 
  
5、函数
 
  
JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。
★ 第一种定义格式:
function 函数名(参数1,参数2..){
    要执行的代码
}
注意：
- 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
- 返回值也不需要声明类型，直接return即可。
- 函数需要被调用才能执行！
function add(a, b){
    return a + b;
}
let result = add(10,20);
alert(result);
定义的add函数有返回值，所以我们可以接受返回值。
★ 第二种定义格式
var functionName = function (参数1,参数2..){   
    //要执行的代码
}

调用add函数时，再添加2个参数
var result = add(10,20,30,40);
浏览器打开，发现没有错误，并且依然弹出30，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。
​
 
  
6、对象
 
  
大体分页3大类：
      第一类：基本对象,我们主要学习Array和JSON和String
      第二类：BOM对象,主要是和浏览器相关的几个对象。 
      第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象。
基本对象：
● Array对象时用来定义数组的。常用语法格式有如下2种：
  ■ var 变量名 = new Array(元素列表); 
  ■ var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）
  ■ var 变量名 = [ 元素列表 ]; 
  ■ var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）
● 通过索引来获取数组中的值
  ■ arr[索引] = 值;


特点：
     JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。
Array的属性和方法：
length：设置或返回数组中元素的数量。

方法：
forEach()：遍历数组中的每个有值得元素，并调用一次传入的函数 
//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})
​
push()：将新元素添加到数组的末尾，并返回新的长度
   //push: 添加元素到数组末尾
    arr.push(7,8,9);
    console.log(arr);
​
splice()：从数组中删除元素
参数1：表示从哪个索引位置删除
参数2：表示删除元素的个数
//splice: 删除元素
arr.splice(2,2);
console.log(arr);




    
    
    
    JS-对象-Array


    



 ★ String对象
创建方式有2种：
var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二
new String创建的是引用类型，直接引号的是值类型不仅console能看出区别，typeof也能看出区别

String对象的属性和方法：
length：字符串的长度。
方法：
charAt()：返回在指定位置的字符。
indexOf()：检索字符串。
trim()：去除字符串两边的空格
substring()：提取字符串中两个指定的索引号之间的字符。




    
    
    
    JS-对象-String


   



★ JS对象:
自定义对象格式:
 var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表){}
};
调用方法：
      对象名.属性名
类似Java的创建方式（不常用）：
      var 对象名 = new Object();
      对象名.属性名="1";
      对象名.属性名="2";
或者自定义构造函数的方式（不常用）：
function Person(name, age){
    this.name = name
    this.age = age
}
var p1 = new Person('Tom',18)



 
  
7、BOM对象
 
  
BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。
★ BOM中提供了如下5个对象：
  ● Window: 浏览器窗口对象
  ● Navigator:浏览器对象
  ● Screen: 屏幕对象
  ● History:历史记录对象
  ● Location:地址栏对象
5个对象，我们重点学习的是Window对象、Location对象这2个。
 
  
1.window对象
 
  
window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.
window.alert('hello');可以简写为：alert('hello')
​
★ window对象提供了获取其他BOM对象的属性：
● history：用于获取history对象
● location：用于获取location对象
● Navigator：用于获取Navigator对象
● Screen：用于获取Screen对象
★ window常用的函数：
● alert()：显示带有一段消息和一个确认按钮的警告框。
● comfirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
● setInterval(fn,毫秒值)：按照指定的周期（以毫秒计）来调用函数或计算表达式。fn:函数，需要周期性执行的功能代码。毫秒值：间隔时间
​
//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);
​
● setTimeout(fn,毫秒值)：在指定的毫秒数后调用函数或计算表达式。只会在一段时间后执行一次功能。
//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
    alert("JS");
},3000);
 
  
2.Location对象
 
  
location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息。
  //获取浏览器地址栏信息
  alert(location.href);
  //设置浏览器地址栏信息
  location.href = "https://www.itcast.cn";  

    


    
    
    
    JS-对象-BOM


    



 
  
8、DOM对象
 
  
DOM：Document Object Model 文档对象模型。
JavaScript 将 HTML 文档的各个组成部分封装为对象。
HTML文档的封装对象为：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
DOM技术主要作用：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
​

获取DOM中的元素对象。HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api
● document.getElementById() //根据id属性值获取，返回单个Element对象
● document.getElementsByTagName()//根据标签名称获取，返回Element对象数组
● document.getElementsByName()//根据name属性值获取，返回Element对象数组
● document.getElementsByClassName()//根据class属性值获取，返回Element对象数组




    
    
    
    JS-对象-DOM

​

      


​
    
传智教育
   

    
黑马程序员
  

​
     电影
     旅游
     游戏



 
  
四、JavaScript事件
 
  
什么是事件呢？
- 按钮被点击
- 鼠标移到元素上
- 输入框失去焦点
- ........
我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。JavaScript事件是js非常重要的一部分。主要围绕2点来学习：
- 事件绑定
- 常用事件
 
  
1、事件绑定
 
  
JavaScript对于事件的绑定提供了2种方式：
★ - 方式1：通过html标签中的事件属性进行绑定,可以借助标签的onclick属性，属性值指向一个函数。

● 创建on函数

★ - 方式2：通过DOM中Element元素的事件属性进行绑定
● 依据DOM的知识点可以知道html中的标签会被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。

● 通过id属性获取按钮对象，操作对象的onclick属性来绑定事件
document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}
■ 注意：事件绑定的函数，只有在事件被触发时，函数才会被调用。




    
    
    
    JS-事件-事件绑定

​

    
    

​


 
  
2、常用事件
 
  
★ 常用的事件属性：
onclick：鼠标单击事件
onblur：元素失去焦点。失去焦点事件，前提是输入框获取焦点的状态下，在输入框之外的地方点击，光标从输入框中消失了，这就是失去焦点。
onfocus：元素获得焦点。获取焦点事件，鼠标点击输入框，输入框中光标一闪一闪的，就是输入框获取焦点了。
onload：某个页面或图像被完成加载
onsubmit：当表单提交时触发该事件
onmouseover：鼠标被移到某元素之上
onmouseout：鼠标从某元素移开

案例要求：
1. 点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡
2. 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
3. 点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。



    
    
    
    JS-事件-案例


​
     

​
     
    
    
    
 

    
    
 

​
     电影
     旅游
     游戏
    

     
    



 
  
五、Vue框架
 
  
1、Vue概述
 
  
为了提高前端的开发效率就需要我们使用DOM操作，通过这种开发流程就引入了：MVVM:其实是Model-View-ViewModel的前端开发思想;
- Model: 数据模型，特指前端中通过请求从后台获取的数据。
- View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据。
- ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上。
★ 使用ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，会让数据展示到视图的代码开发变得更加的简单。
★ Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计，Vue 的核心库只关注视图层而且容易与其它库或已有项目整合。
★ Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 
​
 
  
2、使用方法
 
  
★ 第一步：在VS Code中创建名为12. Vue-快速入门.html的文件，并且在html文件同级创建js目录，将资料/vue.js文件目录下得vue.js拷贝到js目录。
★ 第二步：然后编写标签来引入vue.js文件
    
★ 第三步：在js代码区域定义vue对象，最好写在body下方，否则vue对象会找不到app这个元素。

Vue几个常用的属性： 
   - el:  用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
   - data: 用来定义数据模型
   - methods: 用来定义函数。这个我们在后面就会用到
★ 第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的。

    

        
        {{message}}
    






    
    
    
    Vue-快速入门
    


​
    

        
        {{message}}
    

​



​
 
  
3、vue指令
 
  

★ Vue指令:
   HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

v-bind: //为HTML标签绑定属性值，如设置  href , css样式等
v-model: //在表单元素上创建双向数据绑定
v-on: //为HTML标签绑定事件
v-if: //条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else:
v-else-if:
v-show: //根据条件展示某元素，区别在于切换的是display属性的值
v-for: //列表渲染，遍历容器的元素或者对象的属性

 
  
v-bind和v-model
 
  
v-bind: 当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。



    
    
    
    Vue-指令-v-bind
    


    

        链接1
        链接2
        
    




我们需要给标签的href属性赋值，并且值应该来自于vue对象的数据模型中的url变量。
    链接1
 注意：html属性前面有:表示采用的vue的属性绑定！
    
★ v-model： 在表单元素上创建双向数据绑定.
★ 双向绑定：
    -  vue对象的data属性中的数据变化，视图展示会一起变化。
    -  视图数据发生变化，vue对象的data属性中的数据也会随着变化。
    -  只有表单项标签！所以双向绑定一定是使用在表单项标签上的
    
★ 双向绑定的作用：可以获取表单的数据的值，然后提交给服务器
  
 


    
    
    
    Vue-指令-v-bind
    


    

​
        链接1
        链接2
​
        
​
    



   
 
  
 
  
v-on
 
  
v-on: 用来给html标签绑定事件的。需要注意的是如下2点：
- v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数。
- v-on语法绑定事件时，事件名相比较js中的事件名，没有on。

vue中，事件绑定demo函数





    
    
    
    Vue-指令-v-on
    


    

​
        
        
​
    




在vue对象的methods属性中定义事件绑定时需要的handle()函数
 methods: {
        handle: function(){
           alert("你点我了一下...");
        }
}
给第一个按钮，通过v-on指令绑定单击事件
 
v-on也存在简写方式，即v-on: 可以替换成@所以第二个按钮绑定单击事件的代码如下：

​
 
  
v-if和v-show
 
  

v-if: //条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else:
v-else-if:
v-show: //根据条件展示某元素，区别在于切换的是display属性的值
★ 
年龄经判定,为:
年轻人(35及以下)
中年人(35-60)
老年人(60及以上)
★ v-show和v-if的作用效果是一样的，只是原理不一样。
年龄经判定,为:
年轻人(35及以下)
中年人(35-60)
老年人(60及以上)
★ 两者的区别：v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。




    
    
    
    Vue-指令-v-if与v-show
    


    

        
        年龄经判定,为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)
​
        


​
        年龄经判定,为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)
​
    




 
  
 
  
v-for
 
  
v-for:这个指令是用来遍历的
格式如下： 
<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}

注意：需要循环那个标签，v-for 指令就写在那个标签上。
使用索引：
<标签 v-for="(变量名,索引变量) in 集合模型数据">
    
   {{索引变量 + 1}} {{变量名}}





    
    
    
    Vue-指令-v-for
    


    


    




编写2种遍历语法，来遍历数组，展示数据，代码如下：

 

     
{{addr}}

     

     
{{index + 1}} : {{addr}}


 
  
4、生命周期
 
  
vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
beforeCreate  创建前 
created  创建后
beforeMount 挂载前
mounted  挂载完成
beforeUpdate  更新前
updated  更新后
beforeDestroy  销毁前
destroyed   销毁后
重点关注的是mounted。
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后一般用于页面初始化自动的ajax请求后台数据。
创建名为18. Vue-生命周期.html的文件编写代码来演示效果。




    
    
    
    Vue-指令-v-for
    


    

​
    




我们编写mounted声明周期的钩子函数，与methods同级，代码如下：

运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。
 
  
六、Ajax异步交互
 
  
★ Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。
★ Ajax作用：
   ● 与服务器进行数据交互；前端通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上。
   ● 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。如：搜索联想、用户名是否可用的校验等等。
■ 原生Ajax
jax请求是基于客户端发送请求，服务器响应数据的技术。需要提供服服务器端和编写客户端。
- 服务器端
   后台服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
   备用地址：http://api.hhyp58.com/mock/92/emp/list
上述地址可以直接通过浏览器来访问；
- 客户端
★ 客户端的Ajax请求代码有如下4步：
● 第一步：首先我们再VS Code中创建AJAX的文件夹，并且创建名为01. Ajax-原生方式.html的文件，提供如下代码，主要是按钮绑定单击事件，我们希望点击按钮，来发送ajax请求




    
    
    
    原生Ajax


    
    





● 第二步：创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，提供了各种方法。
//1. 创建XMLHttpRequest 
var xmlHttpRequest  = new XMLHttpRequest();
​
● 第三步：调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用send()方法向服务器发送请求。
//2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求
■ 补充:如果是GET方式，请求参数就跟在URL后面
如果是POST方式，请求参数是在调用send方法的时候传递
xmlHttpRequest.send("fname=Bill&lname=Gates");
● 第四步：我们通过绑定事件的方式，来获取服务器响应的数据。
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
    //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
    }
}
readyState的取值含义：
1 (载入)：已经调用open() 方法，但尚未发送请求；
2 (载入完成)： 请求已经发送完成；
3 (交互)：可以接收到部分响应数据；
4 (完成)：已经接收到了全部数据，并且连接已经关闭。
 
  
1、Axios技术
 
  
原生的Ajax请求的代码编写起来还是比较繁琐的,Axios是简单的发送Ajax请求的技术，它是对原生的AJAX进行封装，简化书写。
Axios官网是：https://www.axios-http.cn
★ Axios的基本使用，主要分为2步：
● 引入Axios文件

使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种。
 
  
发送 get 请求:
axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})
发送 get 请求:
axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});
​
axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：
- method属性：用来设置请求方式的。取值为 get 或者 post。
- url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为：url?参数名=参数值&参数名2=参数值2。
- data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。
回调函数就是一个被作为参数传递的函数
 
  
2、Axios快速入门
 
  
后端实现：
    查询所有员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list 
    根据员工id删除员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById
前端实现：
    首先在VS Code中创建js文件夹，与html同级，然后将资料/axios-0.18.0.js 文件拷贝到js目录下，然后创建名为02. Ajax-Axios.html的文件。
    在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发送ajax请求:




    
    
    
    Ajax-Axios
    


    
    



Axios还针对不同的请求方法的别名：
方法：
axios.get(url [, config]) //发送get请求
axios.delete(url [, config])//发送delete请求
axios.post(url [, data[, config]])//发送post请求
axios.put(url [, data[, config]])//发送put请求
可以将get请求代码改写成如下：
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})
post请求改写成如下：
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})
 
  
3、案例
 
  
需求：基于Vue及Axios完成数据的动态加载展示。
其中数据是来自于后台程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
​
步骤：
1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
3. 拿到数据，数据需要绑定给vue的data属性
4. 在<tr>标签上通过v-for指令遍历数据，展示数据
代码实现：
1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入




    
    
    
    Ajax-Axios-案例
    
    


    

        
            
                
                
                
                
                
                
                
            
​
            
                
                
                
                
                
                
                
            
        
编号姓名图像性别职位入职日期最后操作时间
{{index + 1}}{{emp.name}}
                    
                
                    男
                    女
                {{emp.job}}{{emp.entrydate}}{{emp.updatetime}}

    




 
  
七、前台分离开发
 
  
★前端开发有2种方式：前后台混合开发和前后台分离开发。
    ● 前后台混合开发，顾名思义就是前台后台代码混在一起开发。
★ 这种开发模式有如下缺点：
- 沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用
- 分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
- 不便管理：所有的代码都在一个工程中
- 不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。
★ 目前基本都是采用的前后台分离开发方式：
    ● 将原先的工程分为前端工程和后端工程这2个工程，然后前端工程交给专业的前端人员开发，后端工程交给专业的后端人员开发。
★ 接口文档：规范前后端的数据交流的规范统一性。
    ● 前后端开发人员必须通过接口文档统一指定一套规范数据格式，这样下来就可以实现前后端数据交流。
★ 后台开发者开发一个功能的具体流程：
1. 需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
2. 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
3. 前后台并行开发：各自按照接口文档进行开发，实现需求
4. 测试：前后台开发完了，各自按照接口文档进行测试
5. 前后段联调测试：前段工程请求后端工程，测试功能
 
  
1、YAPI
 
  
YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
- API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
- Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。
首先我们登录YAPI的官网，然后使用github或者百度账号登录，没有的话去注册一个
登录进去后，在个人空间中，选择项目列表->添加测试项目。
然后点击创建的项目，进入到项目中，紧接着先添加接口的分类。
登录进去后，在个人空间中，选择项目列表->添加测试项目。
然后点击创建的项目，进入到项目中，紧接着先添加接口的分类。
 
  
2、前端工程化
 
  
我们目前的前端开发中，当我们需要使用一些资源时,vue.js，和axios.js文件，都是直接再工程中导入的,但是上述开发模式存在如下问题：
- 每次开发都是从零开始，比较麻烦
- 多个页面中的组件共用性不好
- js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护。
​
现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点:
- 模块化：将js和css等，做成一个个可复用模块
- 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
- 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
- 自动化：项目的构建，测试，部署全部都是自动完成
企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。
 
  
前端工程化入门
 
  
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。
Vue-cli主要功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
NodeJS安装和Vue-cli安装网上看。
NodeJS：NodeJS 是基于Chrome V8引擎的 JavaScript 运行环境。NodeJS使用事件驱动，非阻塞型I/O。NodeJS的包管理生态是 NPM，是现在世界上最大的开源程序包库。
/************************************************************/
前端工程化的一些常见特点和实践包括：
1. 构建工具：使用构建工具如Webpack、Gulp、Grunt等来自动化处理前端资源的打包、压缩、编译等任务，以提高开发效率。
2. 模块化：采用模块化的开发方式，使用模块化标准（如ES6的import/export、CommonJS等）将代码拆分成独立模块，并使用工具进行模块依赖管理，以提高代码的可维护性和复用性。
3. 自动化测试：编写自动化测试脚本，对前端代码进行单元测试、集成测试等，以确保代码质量和功能的稳定性。
4. 版本控制：使用版本控制系统（如Git）对代码进行管理，实现多人协作开发、版本回退、代码分支等功能，以提高团队协作效率。
5. 代码规范和静态检查：制定前端代码规范，使用工具（如ESLint、Prettier等）进行代码风格检查和静态代码分析，以提高代码质量和可读性。
6. 性能优化：通过代码压缩、图片优化、资源懒加载、缓存策略等手段，优化前端性能，提升网页加载速度和用户体验。
通过前端工程化的实践，可以提高前端开发的效率，并确保项目的质量和稳定性，同时促进团队协作和知识共享。
 
  
3、创建vue项目
 
  
首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面,然后再当前目录下，直接输入命令`vue ui`进入到vue的图形化界面，点击项目管理器,然后我门选择创建按钮，在vue文件夹下创建项目，选择包管理器为npm,最下面的git不打开，然后预设模板选择手动，然后再配置页面选择语言版本和语法检查规范，选择2.0版本，语法检查规范选择ESLint with error prevention only然后创建项目。最后我们只需要等待片刻，即可进入到创建创建成功的界面。
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(JAVA学习之路,前端,web,java)

        

            

                
    
                    
  • 理解Gunicorn：Python WSGI服务器的基石
                        范范0825
ipythonlinux运维
                        
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
    
                    
    • 
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • LocalDateTime 转 String
                        igotyback
java开发语言
                        
    importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
    
                    
    • 
                    
  • Linux下QT开发的动态库界面弹出操作（SDL2）
                        13jjyao
QT类qt开发语言sdl2linux
                        
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
    
                    
    • 
                    
  • Google earth studio 简介
                        陟彼高冈yu
旅游
                        
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
    
                    
    • 
                    
  • PHP环境搭建详细教程
                        好看资源平台
前端php
                        
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team
                        若博豆
java算法华为javascript
                        
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
    
                    
    • 
                    
  • 【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • git - Webhook让部署自动化
                        大猪大猪

                        
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
    
                    
    • 
                    
  • webpack图片等资源的处理
                        dmengmeng

                        
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • Java 重写(Override)与重载(Overload)
                        叨唧唧的

                        
    Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio
    
                    
    • 
                    
  • 简单了解 JVM
                        记得开心一点啊
jvm
                        
    目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
    
                    
    • 
                    
  • 1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven
                        Energet!c
开发语言
                        
    1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
    
                    
    • 
                    
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验
                        张风捷特烈
iderust开发语言后端
                        
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
    
                    
    • 
                    
  • Java企业面试题3
                        马龙强_
java
                        
    1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
    
                    
    • 
                    
  • JVM、JRE和 JDK：理解Java开发的三大核心组件
                        Y雨何时停T
Javajava
                        
    Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
    
                    
    • 
                    
  • Java面试题精选：消息队列(二)
                        芒果不是芒
Java面试题精选javakafka
                        
    一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
    
                    
    • 
                    
  • 白骑士的Java教学基础篇 2.5 控制流语句
                        白骑士所长
Java教学java开发语言
                        
    欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
    
                    
    • 
                    
  • python语法——三目运算符
                        HappyRocking
pythonpython三目运算符
                        
    在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。
    
                    
    • 
                    
  • ArrayList 源码解析
                        程序猿进阶
Java基础ArrayListListjava面试性能优化架构设计idea
                        
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
    
                    
    • 
                    
  • Python神器！WEB自动化测试集成工具 DrissionPage
                        亚丁号
python开发语言
                        
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
    
                    
    • 
                    
  • Java爬虫框架（一）--架构设计
                        狼图腾-狼之传说
java框架java任务html解析器存储电子商务
                        
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
    
                    
    • 
                    
  • Java：爬虫框架
                        dingcho
Javajava爬虫
                        
    一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
    
                    
    • 
                    
  • MongoDB知识概括
                        GeorgeLin98
持久层mongodb
                        
    MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
    
                    
    • 
                    
  • python怎么将png转为tif_png转tif
                        weixin_39977276

                        
    发国外的文章要求图片是tif，cmyk色彩空间的。大小尺寸还有要求。比如网上大神多，找到了一段代码，感谢！https://www.jianshu.com/p/ec2af4311f56https://github.com/KevinZc007/image2Tifimportjava.awt.image.BufferedImage;importjava.io.File;importjava.io.Fi
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                                
  • 算法 单链的创建与删除
                                    换个号韩国红果果
c算法
                                    
    
先创建结构体
struct student {
	int data;
	//int tag;//标记这是第几个
	struct student *next;
};
//  addone 用于将一个数插入已从小到大排好序的链中
struct student *addone(struct student *h,int x){
		if(h==NULL)  //??????
			
    
                                
    • 
                                
  • 《大型网站系统与Java中间件实践》第2章读后感
                                    白糖_
java中间件
                                    
           断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。 
  
       看完整章内容，
    
                                
    • 
                                
  • zeus持久层spring事务单元测试
                                    deng520159
javaDAOspringjdbc
                                    
    今天把zeus事务单元测试放出来,让大家指出他的毛病, 
1.ZeusTransactionTest.java 单元测试 
  
package com.dengliang.zeus.webdemo.test;

import java.util.ArrayList;
import java.util.List;

import org.junit.Test;
import 
    
                                
    • 
                                
  • Rss 订阅 开发
                                    周凡杨
htmlxml订阅rss规范
                                    
      
              RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。 
  
RSS
    
                                
    • 
                                
  • 分页查询实现
                                    g21121
分页查询
                                    
    在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。 
按实现形式分前台分页和服务器分页： 
前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。 
服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据
    
                                
    • 
                                
  • spring jms异步消息处理
                                    510888780
jms
                                    
    spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下： 
    
                                
    • 
                                
  • highCharts柱状图
                                    布衣凌宇
hightCharts柱图
                                    
    第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller 
  
@Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController {  private UserServi
    
                                
    • 
                                
  • 我的spring学习笔记2-IoC（反向控制 依赖注入）
                                    aijuans
springmvcSpring 教程spring3 教程Spring 入门
                                    
    IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 
IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 
如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
    
                                
    • 
                                
  • TLS java简单实现
                                    antlove
javasslkeystoretlssecure
                                    
      
1. SSLServer.java 
package ssl;

import java.io.FileInputStream;
import java.io.InputStream;
import java.net.ServerSocket;
import java.net.Socket;
import java.security.KeyStore;
import 
    
                                
    • 
                                
  • Zip解压压缩文件
                                    百合不是茶
Zip格式解压Zip流的使用文件解压
                                    
      
 ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; 
ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName)); 
  
  
&n
    
                                
    • 
                                
  • underscore.js 学习（一）
                                    bijian1013
JavaScriptunderscore
                                    
            工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。       学
    
                                
    • 
                                
  • java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)
                                    bijian1013
javajvmjstatd
                                    
    1.介绍 
        jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。 
        jstatd是基于RMI的，所以在运行jstatd的服务
    
                                
    • 
                                
  • 【Spring框架三】Spring常用注解之Transactional
                                    bit1129
transactional
                                    
    Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义： 
  
/*
 * Copyright 2002-2010 the original author or authors.
 *
 * Licensed under the Apache License, Version 
    
                                
    • 
                                
  • 我(程序员)的前进方向
                                    bitray
程序员
                                    
    作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....
    
                                
    • 
                                
  • nginx lua开发经验总结
                                    ronin47

                                    
    使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下  1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa
    
                                
    • 
                                
  • java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶
                                    bylijinnan
java
                                    
    
import java.util.Stack;

public class ReverseStackRecursive {

	/**
	 * Q 66.颠倒栈。
	 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。
	 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。
	 *1. Pop the top element
	 *2. Revers
    
                                
    • 
                                
  • 正确理解Linux内存占用过高的问题
                                    cfyme
linux
                                    
    Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： 
Mem:   3889836k total,  3341868k used,   547968k free,   286044k buffers 
Swap:  6127608k total,&nb
    
                                
    • 
                                
  • [JWFD开源工作流]当前流程引擎设计的一个急需解决的问题
                                    comsci
工作流
                                    
     
 
     当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。 
 
      而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。
    
                                
    • 
                                
  • 自定义类的equals函数
                                    dai_lm
equals
                                    
    仅作笔记使用 
 

public class VectorQueue {

	private final Vector<VectorItem> queue;

	private class VectorItem {
		private final Object item;
		private final int quantity;

		public VectorI
    
                                
    • 
                                
  • Linux下安装R语言
                                    datageek
R语言 linux
                                    
    命令如下：sudo gedit  /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke
    
                                
    • 
                                
  • 如何修改mysql 并发数(连接数)最大值
                                    dcj3sjt126com
mysql
                                    
    MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了 
  
方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可 
　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass
    
                                
    • 
                                
  • 单一功能原则
                                    dcj3sjt126com
面向对象的程序设计软件设计编程原则
                                    
    单一功能原则[
编辑]            
SOLID    原则    
 
 单一功能原则 
 开闭原则 
 Liskov代换原则 
 接口隔离原则 
 依赖反转原则 
      
 
 查   
 论   
 编 
      
在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有
    
                                
    • 
                                
  • POJO、VO和JavaBean区别和联系
                                    fanmingxing
VOPOJOjavabean
                                    
    POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被
    
                                
    • 
                                
  • SpringSecurity3.X--LDAP：AD配置
                                    hanqunfeng
SpringSecurity
                                    
    前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。 
  
将配置文件中的如下部分删除： 
  <!-- 认证管理器，使用自定义的UserDetailsService，并对密码采用md5加密-->  
  
    
                                
    • 
                                
  • mac mysql 修改密码
                                    IXHONG
mysql
                                    
    $ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-
    
                                
    • 
                                
  • 设计模式--抽象工厂模式
                                    kerryg
设计模式
                                    
    抽象工厂模式： 
 
    工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。 
 
    总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，
    
                                
    • 
                                
  • 评"高中女生军训期跳楼”
                                    nannan408

                                    
       首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。 
   孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军
    
                                
    • 
                                
  • scala如何读取和写入文件内容？
                                    qindongliang1922
javajvmscala
                                    
    直接看如下代码： 
 
package file

import java.io.RandomAccessFile
import java.nio.charset.Charset

import scala.io.Source
import scala.reflect.io.{File, Path}

/**
 * Created by qindongliang on 2015/
    
                                
    • 
                                
  • C语言算法之百元买百鸡
                                    qiufeihu
c算法
                                    
    中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？ 
代码如下： 
#include <stdio.h>
int main()
{
	int cock,hen,chick;                               /*定义变量为基本整型*/
	for(coc
    
                                
    • 
                                
  • Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode
                                    wyz2009107220
NameNode
                                    
    正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 
1. Secondary NameNode 
原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 
优点：Hadoop较早的版本都自带，
    
                                
    •