- 博客(33)
- 收藏
- 关注
原创 Node.js第七天
Node.js第七天一.Express请求处理3.1 构建模块化路由构建模块化路由的基础代码// 引入express框架const express = require('express');// 创建网站服务器const app = express();// 创建路由对象const home = express.Router();// 为路由对象匹配请求路径app.use('/home', home);// 创建二级路由home.get('/index', (req, res)
2021-07-03 15:36:58 143
原创 Node.js第六天
Node.js第六天一. Express框架简介及初体验1.1 Express框架是什么Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性,帮助你创建各种Web应用。1.2 Express框架特性●提供了方便简洁的路由定义方式●对获取HTTP请求参数进行了简化处理.●对模板引擎支持程度高,方便渲染动态HTML页面●提供了中间件机制有效控制HTTP请求●拥有大量第三方中间件对功能进行扩展1.3 框架入门// 引入express框架const expres
2021-07-03 14:05:07 148
原创 Node.js第五天
Node.js第五天一.模板引擎的基础概念1.1模板引擎.模板引擎是第三方模块。让开发者以更好的方式拼接字符串,使项目代码更加清晰、更加易于维护。1.2 art-template模板引擎1.在命令行工具中使用 npm install art-template 命令进行下载2.使用 const .template = require (‘art-template’)引入模板引擎3.告诉模板引擎要拼接的数据和模板位置 const html = template( '模板路径’ , 数据);
2021-07-02 11:04:33 117
原创 Node.js第四天
Node.js第四天一.数据库概述及环境搭建1.1为什么要使用数据库● 动态网站中的数据都是 存储在数据库中的● 数据库可以用来持久存储客户端通过表单收集的用户信息● 数据库软件本身可以对数据进行高效的管理1.2什么是数据库,数据库即存储数据的仓库,可以将数据进行有序的分门]别类的存储。它是独立于语言之外的软件,可以通过API去操作它。常见的数据库软件有: mysq|、mongoDB、 oracle....
2021-06-10 21:33:21 128
原创 Node.js第三天
Node.js第三天1.服务器端基础概念1.1网站的组成网站应用程序主要分为两大部分:客户端和服务器端。客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、 JavaScript构建。服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。1.2 Node网站服务器能够提供网站访问服务的机器就是网站服务器,它能够接收客户端的请求,能够对请求做出响应.1.3 IP地址互联网中设备的唯一标识。IP是Internet Protocol Address的简
2021-06-05 20:47:45 250 1
原创 Node.js第二天
Node.js第二天一.第三方模块Gulp基于node平台开发的前端构建具将机械化操作编写成任务,想要执行机械化操作时执行个命令行命令 任务就能自动执行了用机器代替手工,提开发效率。4.6 Gulp能做什么● 项目上线,HTML、CSS、JS文件压缩合并● 语法转换(es6、 less …● 公共文件抽离● 修改文件浏览器自动刷新4.7 Gulp使用1.使用npm install gulp下载gulp库文件2.在项目根目录下建立gulpfile.js文件3.重构项目的文件夹结构src
2021-06-04 13:37:38 125
原创 Node.js第一天
Node.js第一天一.Node开发概述1.1为什么要学习服务器端开发基础● 能够和后端程序员更加紧密的配合● 网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax)● 扩宽知识视野,能够站在更高的角度审视整个项目。1.2服务器端开发要做的事情● 实现网站的业务逻辑● 数据的增删改查1.3为什么选择Node● 使用JavaScript语法开发后端应用● 一些公司要求前端工程师掌握Node开发● 生态系统活跃,有大量开源库可以使用● 前端开发工具大多基于Node开发1.4 No
2021-05-31 22:41:13 101
原创 Ajax第三天
Ajax第三天一.同源政策(续)1.1CORS跨域资源共享CORS:全称为Cross- origin resource sharing,即跨域资源共享,它允许浏览器向跨域服务器发送Ajax请求,克服了Ajax只能同源使用的限制。 服务器端代码app.use((req, res, next) => { // 1.允许哪些客户端访问我 // * 代表允许所有的客户端访问我 // 注意:如果跨域请求中涉及到cookie信息传递,值不可以为*号 比如是具体的域名信息 res.hea
2021-05-29 21:32:03 72
原创 Ajax第二天
Ajax第二天一.模板引擎1.1模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来。官网网址:https://aui.github.io/art-template/zh-cn/index.html1.2使用步骤下载art-template模板弓|擎库文件并在HTML页面中引入库文件 <script src="./js/template-web.js"></script>准备art-template模板<script
2021-05-27 21:22:14 93
原创 Ajax第一天
Ajax第一天一.Ajax基础1.1Ajax概述Ajax是浏览器提供的一方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。1.2Ajax应用场景页面上拉加载更B数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字下拉洌表主要运用在不刷新页面的情况下,向服务器端发送请求,和服务器端进行交互,从而更改客户端页面中的数据或者状态。1.3Ajax运行原理Ajax相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏页面的情况下,局部更新页面数据,从而提高用户体验。
2021-05-25 19:48:23 79
原创 ES7-10
#ES7一.ECMASript 7 新特性1.1.Array.prototype.includesIncludes 方法用来检测数组中是否包含某个元素,返回布尔类型值const teams = ['nets', 'rockets', 'suns']; console.log(teams.includes('nets'));//true console.log(teams.includes('lakers'));//false1.2指数操作符在 ES7 中引入指数
2021-05-22 16:23:19 118
原创 ES6第三天
ES6第三天一.setES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 iterator 接口,所以可以使用扩展运算符和for…of…进行遍历.集合的属性和方法: size 返回集合的元素个数add 增加一个新元素,返回当前集合 delete 删除元素,返回 boolean 值 has 检测集合中是否包含某个元素,返回 boolean 值clear 清空集合,返回 undefined//创建一个空集合let s = new Set();
2021-05-21 20:29:53 151
原创 ES6第二天
ES6第二天一.参数默认值1.1.形参初始值具有默认值的参数,一般位置要靠后(潜规则)function add(a,b,c=10) {return a+b+c;let result = add(1,2);console. log(result);//结果为13
2021-05-20 16:03:45 83
原创 ES6第一天
ES6第一天—— ECMASript 6 新特性(上)一.let 关键字let 关键字用来声明变量,使用 let 声明的变量有几个特点:2.1 不允许重复声明let animal ='小狗'let animal ='小猪';//会报错 因为重复声明了变量animal//改用var不会报错2.2块儿级作用域 (包括 全局,函数,eval)...
2021-05-17 22:19:00 99
原创 JS高级第五天
JS高级第五天一.ES6什么是ES6 ?ES的全称是ECMAScript ,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。为什么使用ES6 ?每一次标准的诞生都意味着语言的完善,功能的加强。 JavaScript语言本身也有一 些令人不满意的地方。●变量提升特性增加了程序运行时的不可预测性●语法过于松散, 实现相同的功能,不同的人可能会写出不同的代码...
2021-05-16 09:43:31 90
原创 JS高级第四天
JS高级第四天1.正则表达式概述1.1什么是正则表达式 正则表达式( Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换) ,或从字符串中获取我们想要的特定部分(提取)等。1.2正则表达式的特点1.灵活性、逻辑性和功能性非常
2021-05-13 15:22:23 152
原创 JS高级第三天
JS高级第三天1.函数的定义和调用1.1函数的定义方式函数声明方式function关键字(命名函数)函数表达式(匿名函数)new Function()var fn = new Function('参数1', '参数2'..., ' 函数体')●Function 里面参数都必须是字符串格式●第三种方式执行效率低,也不方便书写,因此较少使用●所有函数都是Function的实例(对象)●函数也属于对象...
2021-05-10 21:43:15 170
原创 JS高级第二天
JS高级第二天一.构造函数和原型1.1概述在典型的OOP的语言中(如Java) , 都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没用引入类的概念。ES6,全称ECMAScript6.0 , 205.06发版。但是目前浏览器的JavaScript是ES5版本,大多数高版本的浏览器也支持ES6 ,不过只实现了ES6的部分特性和功能。在ES6之前, 对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征。创建对象可以通过以下三种方式:对象字面量
2021-05-08 10:32:11 99
原创 JS高级第一天
JS高级第一天1.面向对象编程介绍1.1两大编程思想●面向过程●面向对象1.2面向过程编程POP(Process-oriented programming)面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现 ,使用的时候再一个一个的依次调用就可以了。面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。1.3面向对象编程O0P (Object Oriented Programming)面向对象是把事务分解成为-个个对象,然后由对象之间分工与合作。面向对象是以对象功
2021-05-03 08:18:25 108
原创 jQuery第四天
jQuery第四天一. jQuery事件注册1.1单个事件注册语法:element .事件( function() {})$ ("div") .click (function() {事件处理程序 })其他事件和原生基本一致。比如mouseover、mouseout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll等二. jQuery事件处理2.1事件处理on()绑定事件on()方法在匹配元素上绑定一个或多 个事件的事件处理函数语
2021-04-26 12:48:29 68
原创 jQuery第三天
jQuery第三天一.jQuery属性操作1.1设置或获取元素固有属性值prop()所谓元素固有属性就是元素本身自带的属性,比如 a元素里面的href , 比如input元素里面的type。获取属性语法prop(“属性’”)设置属性语法prop(“属性”, ’ ‘属性值’ )5.2设置或获取元素自定义属性值attr()用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index=“1"。获取属性语法attr(“属性”) // 类似原生getAttribute()设
2021-04-24 11:14:39 85
原创 jQuery第二天
jQuery第二天一.jQuery样式操作1.1操作css方法jQuery可以使用Css方法来修改简单元素样式;也可以操作类,修改多个样式。参数只写属性名,则是返回属性值.$(this).css("color");参数是属性名,属性值,逗号分隔,是设置- -组样式,属性必须加引号,值如果是数字可以不用跟单位和引号.$(this),css("color", "red'");参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号.$(this).cs
2021-04-22 21:15:49 62
原创 jQuery第一天
jQuery第一天一.jQuary概述1.1 JavaScript库,JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中, 封装了很多预先定义好的函数在里面,比如动画animate、hide、 show ,比如获取元素等。简单理解:就是一一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如jQuepy ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。
2021-04-20 16:32:46 74
原创 JS第九天
JS第九天一.触屏事件1.1触屏事件概述移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。比如触屏事件touch (也称触摸事件) , Android和IOS都有。touch对象代表一个触摸点。触摸点可能是一根手指 ,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:...
2021-04-16 21:05:42 169
原创 JS第八天
JS第八天一.动画函数封装1.1动画实现原理核心原理:通过定时器setInterval0不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element. style.left1.2动画函数简单封装注意函数需要传递2个参数动画对象和移动到的距离。1.3缓动效果原理缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路:让盒子每次移动的距离慢慢变小,速度就会
2021-04-13 13:09:01 84
原创 JS第七天
JS第七天一.元素滚动scroll系列1.1元素scroll系列属性使用scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。1.2页面被卷去的头部如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。二.3个系列的比较主要用法:offset系列 经常用于获得元素位置offsetLeft offsetTopclient 经常用于获取元素大小clie
2021-04-11 15:47:44 63
原创 JS第六天
JS第六天一.元素偏移量offset系列1.1 offset概述offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。● 获得元素距离带有定位父元素的位置● 获得元素自身的大小(宽度高度)● 注意:返回的数值都不带单位offset系列常用属性:1.2 offset与style区别offset● offset可以得到任意样式表中的样式值● offset系列获得的数值是没有单位的● offsetWidth包含padding+ bor
2021-04-10 14:18:05 198
原创 JS第五天
1.JS执行机制4.1 JS是单线程JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门]脚本语言诞生的使命所致一-JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。4.2同步和异步为了解决这个问题,利用多核CPU的计算能力, HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是, JS中出现了同步和
2021-04-06 17:21:49 73
原创 JS第四天
1.BOM概述1.1什么是BOMBOM ( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。BOM由- -系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM缺乏标准, JavaScript语法的标准化组织是ECMA , DOM的标准化组织是W3C , BOM最初是Netscape浏览器标准的一部分。DOM●文档对象模型●DOM就是把「文档」当做 一个「对象」来看待●DOM的顶级对象是docum
2021-04-05 17:01:17 196 2
原创 JS第三天
JS第三天一.事件(绑定事件)1.1注册事件概述(1)传统注册方式●利用 on开头的事件onclick●< button οnclick=“ alert(“hi~)” > ●btn.onclick = function( ){}●特点:注册事件的唯一性●同一个元素同一 个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数(2)方法监听注册方式●w3c标准推荐方式●addEventListener() 它是一一个方法●IE9之前的IE不支持此方法,可使
2021-04-04 14:15:13 101
原创 JS第二天
JS核心第二天一.节点操作1.如何获取节点获取元素通常使用两种方式:1.利用DOM提供的方法获取元素●document.getElementByld(●document.getElementsByTagName●document.querySelector等缺点: 逻辑性不强、繁琐2.利用节点层级关系获取元素●利用父子兄节点关系获取元素●逻辑性强,但是兼容性稍差2.什么是节点网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。HTML
2021-04-03 13:12:30 267
原创 JS核心第一天
JS核心第一天一.API 和Web APIAPI是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。Web API -般都有输入和输出(函数的传参和返回值), Web API很多都是方法(函数)4.学习Web API可以结合前面学习内置对象方法的思路学习二.DOM简介1.1什么是DOM文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推
2021-04-01 16:37:23 209 3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人