昵称2-20个字符-CSDN博客

搜索框内容自动提示获取搜索框并为其添加用户输入事件获取用户输入关键字向服务器端发送请求并携带关键字作为请求参数将响应数据显示在搜索框底部demo使用技术html、css、JavaScriptnodejs、art-template模板引擎、ajax源码：node app.js// 引入express框架const express = require('express');// 路径处理模块const path = require('path');const formida

2020-08-10 12:30:52 800

原创原生ajax封装

function ajax (options) { // 默认值 var defaults = { type: 'get', url: '', async: true, data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function () {}, error: function () {} } // 使用用户传递的参数替换默认值参数 Obj

2020-08-10 12:25:46 277

转载 nodejs package.json和package-lock.json文件的功能

package-lock.json文件是为了让项目执行 npm install 时，下载pakcage.json中依赖库的固定版本，而不是范围允许内的更新版本，避免依赖包版本不同导致bug。详解：package.json文件记录你项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新（最新版本的nod

2020-08-10 12:17:22 320

原创 art-template 模板引擎(客户端)

art-template作用:使用模板引擎提供的模板语法，可以将数据和HTML拼接起来官方地址：https://aui.github.io/art-template/zh-cn/index.html使用步骤：下载art-template模板引擎文件并在HTML页面中引入库文件<script src='./js/template-web.js'></script>准备art-template模板<script id=‘tp1’ type='text/htm

2020-08-10 11:59:03 355 1

原创 ajax低版本IE浏览器的缓存问题

在低版本的IE浏览器钟，Ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。...

2020-08-06 19:05:36 128

原创 AJAX

什么是 AJAX ？AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。创建 XMLHttpRequest 对象XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据

2020-07-20 18:31:03 157

原创 express简述

Express框架是什么Express是一个基于Node平台的web应用开发框架，它提供了一些列的强大特性，帮助你创建各种Web应用。我们可以使用npm install express命令进行下载。Express框架特性提供了方便简洁的路由定义方式对获取HTTP请求参数进行了简化处理对模板引擎支持程度高，方便渲染动态HTML页面提供了中间件机制有效控制HTTP请求拥有大量第三方中间件对功能进行扩展原生Node.js与Express框架对比之路由原生Node.js与Express框架对

2020-07-15 11:15:01 469

原创箭头函数

箭头函数箭头函数是用来简化函数定义语法的const fn=()=>{ console.log(123123131)}fn();函数题中只有一句代码且代码的执行结果就是返回值，可以省略大括号；const sum=(n1,n2)=>{ return n1+n2;}sum(1,2);//3const sum=(n1,n2)=> n1+n2;sum(1,2);//33.在箭头函数中，如果形参只有一个形参外侧的小括号也是可以省略的const fn=v=&

2020-07-14 18:07:23 102

原创 nodejs router 路由模块儿

router 路由功能：实现路由下载命令： npm install router使用步骤：1. 获取路由对象2.调用路由对象提供的方法创建路由3.启用路由，使路由生效const getRouter=require('router');//引入router模块const router=getRouter();//获取路由对象router.get('./add',(req,res)=>{//处理get请求 (地址，处理方法(请求对象响应对象)) res.end('hello w

2020-07-11 19:26:36 570

原创 node 创建服务器链接数据库

// 1.配置服务器// 2.链接数据库下载mongoose模块命令:npm install mongoose// 引入 http模块const http=require('http');const mongoose =require('mongoose'); // 链接数据库mongoose.connect('mongodb://localhost/students',{ useNewUrlParser: true,useUnifiedTopology:true }) .then

2020-07-11 15:54:44 192

原创 art-template 模板引擎(服务器端)

art-template 模板引擎template 方法是用来拼接字符串的template()参数一模板路径绝对路径template()参数二要在模板中显示的数据对象类型//js代码const views=path.join(__dirname,'views','index.art');const html=template(views,{ name:'张狗蛋', age:22});// 模板语法{{name}}{{age}}1.模板语法art-tem

2020-07-11 15:52:21 343

原创 vscode 后缀为.art文件识别为html文件

快捷键 Ctrl + Shift + p输入’setting’找到 “Open Settings (JSON)”，回车选择打开用户自定义JSON文件。在files.associations对象中添加上 "*.art":"html"没有files.associations对象的可以自行添加一个"files.associations": { "*.art": "html"}...

2020-07-08 11:41:20 671

原创 nodejs url模块

url字符串是一个结构化的字符串，由好几个有意义部分组成。我们在工作中不可避免的会用到其中的某个部分，最原始的通过字符串截取和正则匹配的方法难免用起来会不太方便和美观，所以在我们的nodejs中提供了一个处理和解析url的模块url，该模块提供了一些实用的函数使我们解析起来更加的方便快捷，那接下里我们来分析一下它提供的常用的函数的用法引入url模块const url = require("url");1、parse(urlStr,queryString,AnalysisHost)Node.js.

2020-07-07 13:08:25 699

原创 nodejs 静态资源访问

const http=require('http');//引入http模块const url=require('url');//引入url模块const path=require('path');//引入路径处理模块儿const fs=require('fs');//引入处理文件的模块const mime=require('mime');//引入mime模块const app=http.createServer();//定义服务器app.on('request',(req,res)=>{

2020-07-04 22:31:52 1258

原创 Node是什么 Node环境安装失败解决办法

1.Node是什么Node是一个基于Chrome V8引擎的JavaScript代码运行环境。运行环境浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境2. Node运行环境搭建2.1 Node.js运行环境安装官网：https://nodejs.org/en/LTS = Long Term Support 长期支持版稳定版Current 拥有

2020-07-03 18:37:12 986

原创正则表达式

1.正则表达式概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。1.2 正则表达式的特点灵活性、逻辑性和功能性非常的强。可

2020-07-02 23:47:50 753

原创高阶函数闭包递归遍历数据斐波那契数列求1~n的阶乘

高阶函数高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。此时fn 就是一个高阶函数函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。同理函数也可以作为返回值传递回来闭包1.变量的作用域变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕，本作用域内的局部变量会销毁。2.什么是闭包闭包（closure）指有权访问另一个函数作用域中变量的函数。简单

2020-07-02 20:25:13 350

原创使用js实现多个video，一个播放其他暂停

html <div class="videoContent"> <div class="videoMod"> <h3>海贼王：路飞成功收编小弟，草帽海贼团全员都在聆听他的誓言！</h3> <video src="./video/video1.mp4" controls >您的浏览器不支持 video 标签。</video> </div> <div class="videoMod"&

2020-06-29 19:11:06 2821

原创严格模式

严格模式1.什么是严格模式JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改：1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。2.消除代码运行的一些不安全之处，保证代码运行的安全。3.提高

2020-06-27 21:22:11 245

原创函数内部的this指向改变this指向 call() apply() bind()

1.函数内部的this指向this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同；一般指向我们的调用者：2.改变函数内部 this 指向2.1call()改变this指向call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向应用场景: 经常做继承；//call可以调用函数//call可以改变函数内部的this指向//使用call方法传递参数使用逗号隔开//call方法一般应用于继承var o = { name:

2020-06-27 21:08:19 307

原创 javascript 函数定义方式总结函数的调用方式总结

函数的定义方式总结方式一：函数声明方式 function 关键字 (命名函数)；function fn(){}方式二：函数表达式 (匿名函数)；var fn = function(){}方式三：new Function(‘参数1’，‘参数2’，‘函数体’)，参数和函数体一定要使用字符串包裹；在开发过程中我们使用前两种方式比较多，方式三书写繁琐，指向效率较低，使用频率较少；函数也是属于对象；var f = new Function('a', 'b', 'console.log

2020-06-27 20:35:20 267 1

原创面向对象 tab tab的增删改

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&

2020-06-23 17:40:58 257

原创 es6 面向过程与面向对象类

1.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。1.2面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3面向过程与面向对象对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于

2020-06-21 22:55:52 124

原创 vue 购物车demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; /*background-color: light

2020-06-20 17:37:09 131

原创 vue 兄弟组件间传数据 $on() $emit() $off() $once() 实例方法/事件

vm.$on( event, callback )vue API用法：监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$on('test', function (msg) { console.log(msg)})vm.$emit('test', 'hi')// => "hi"vm.$once( event, callback ) vue API用法：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被

2020-06-18 20:29:35 1906

原创 vue prop 向子组件传递数据

通过 Prop 向子组件传递数据Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。//一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：<blog-post title="My journey with Vue"></blog-post><blog-post title="Blogging with Vue"

2020-06-18 16:36:51 310

原创 vue 组件注册组件命名

组件注册在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一个参数。组件名大小写使用 kebab-caseVue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab

2020-06-18 15:35:53 1511

原创 vue图书管理 demo

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table {

2020-06-17 17:46:17 489

原创 vue数组变异方法非变异方法

Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。变异方法Vue 包含一组观察数组的变异方法，它们将会触发视图更新，包含以下方法：变异方法:改变原数组,使视图更新push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项shift() 移除数组中的第一个项并返回该项，同时数组的长度减1unshift() 在数组前端添加任意个项并返回新数组长度.

2020-06-16 23:51:06 1052

原创 vue filter过滤器时间过滤器

html结构：<body> <div id="app"> // 对date数据进行过过滤调用时将时间形式传参给过滤器 <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text

2020-06-16 21:16:39 952

原创 vue watch侦听器案例验证内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div> <span>用户名：</span> <span> /

2020-06-16 21:02:28 272

翻译 vue 自定义指令

自定义指令vue教程除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

2020-06-16 20:11:07 199

MI 2-1.rar

空空如也