- 博客(41)
- 收藏
- 关注
原创 什么是Redis
REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统。Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Hash), 列表(list), 集合(sets) 和 有序集合(sorted sets)等类型。Redis 简介Re
2020-09-07 23:07:04
160
原创 登录状态保持
前端开发登录状态的保持,主要有两种方法:cookie+session 和 token技术登录状态保持,起源于http的无状态,无记忆最早的时候,web的作用就是网页的浏览。 服务器只用提供简单的网页浏览器操作即可,不用记住刚刚谁发了请求,更没有登录,注册之类的操作http设计之初就是无状态的http无状态: http不会记住每一次的请求 就跟公交车司机不会记住乘客一样这段时间很嗨皮,业务逻辑非常简单。cookie+session实现登录状态保持随着交互型的网页的兴起,在线购物网站
2020-09-07 14:38:32
1325
原创 Fetch
fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。ajax使用步骤1.创建XmlHttpRequest对象2.调用open方法设置基本请求信息3.设置发送的数据,发送请求4.注册监听的回调函数5.拿到返回值,对页面进行更新//1.创建Ajax对象 if(window.XMLHttpRequest){ var oAja
2020-09-07 14:30:46
165
原创 什么是MongoDB
标题什么是MongoDB?MongoDB是一个基于分布式文件存储的数据库,由C++语言编写,皆在为WEB应用提供可扩展的高性能数据存储解决方案MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似于Json的bson 格式,因此可以存储比较复杂的数据类型,MongoDB最大的特点是它支持的查询语言方法非常强大,其语言的特点类似于面向对象的查询语言,几乎可以实现类似于关系数据库单表查询的绝大部分功能。而且支持对数据建立索
2020-09-07 14:12:22
315
原创 vue和element-ui实例
登陆界面<template> <div class="login-box fillconctain"> <section class="form-contianer"> <div class="login-header"> <h4>HXC后台管理系统</h4> </div> <el-form :model="ruleForm" s
2020-09-01 09:03:54
502
原创 框架学习小结
vueexport和export default在Es6中使用 export default 和 export 向外暴露成员module.exports 和 exports 暴露导出模块使用var 名称=require(‘模块标识符’) 引入模块export default{} 和 export 向外暴露成员import 模块名称 from ‘模块标识符’import ‘表示路径’注:1、在一个模块中, export default 只允许 向外 暴露.
2020-08-27 23:45:45
169
原创 vuex和koa2
vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。简单的说就是data中需要共用的属性。什么是“状态管理模式”?让我们从一个简单的 Vue 计数应用开始:new Vue({ // state data () {
2020-08-26 23:18:57
324
原创 webpack之vue项目知识补充
babelBabel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。在项目中安装npm install --save-dev babel-cli#查看是否安装成功babel --version配置.babelrcBabel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件,基本格式如下。{ "presets": [], "plugins"
2020-08-25 23:28:12
126
原创 Webpack基础操作
文章目录安装 WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用。安装 Webpack在安装 Webpack 前,你本地环境需要支持 node.js。通过npm下载:创建node项目 执行命令npm init -y 生成packg
2020-08-24 18:18:59
151
原创 vue基础知识梳理
一、基本代码 和 MVVM 之间的对应关系Model:模型层,这里表示JavaScript对象View:视图层,表示DOM(HTML操作的元素)View Model: 连接视图和数据的中间件,Vue.js就是MVVM中的View Model层的实现在MVVM模式中,是不允许数据和视图直接通信的,只能通过View Model来通信,而View Model就是定义了要给Observer观察者View Model能观察到数据的变化,并对视图对应的内容实时更新View Model能监听到视图的变化,
2020-08-21 23:25:50
196
原创 vue中refs属性和router路由
Vue 中 $refs 的使用vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取添加ref属性<div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho"></hello> <button @click="getref">获取H1元素</
2020-08-21 22:48:18
1372
原创 Vue.js 过渡 & 动画和组件
过渡& 动画Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。语法格式<transition name = "nameoftransition"> <div></div></transition>实例:<style> .fade-enter-active, .fade-leave-active { t
2020-08-20 23:17:40
815
原创 vue之过滤器、自定义指令和生命周期
文章目录Vue.js 自定义指令注册或获取全局指令Vue.directive( id, [definition] )Vue.js 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。注册或获取全局指令Vue.directive( id, [definition] )实例<div id="app1"> <input v-focus type="text" name="" id=""> <h3 v-st
2020-08-19 23:24:58
324
1
原创 Vue.js基础
文章目录什么是Vue.jsVue.js 基本代码 和 MVVM 之间的对应关系Vue之 - 基本的代码结构和插值表达式、v-cloakVue指令之v-text和v-htmlVue指令之v-bind和v-onVue指令之v-model和双向数据绑定Vue指令之v-for和key属性Vue指令之v-show和v-if什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助
2020-08-19 00:18:38
112
原创 Git基础应用
这里写自定义目录标题Git简介三个区主要的几个命令git refloggit addgit checkoutgit checkout切换分支git checkout 回退修改git revert删除分支Git简介Git是Linux之父Linus的第二个伟大的作品,它最早是在Linux上开发的,被用来管理Linux核心的源代码。后来慢慢地有人将其移植到了Unix、Windows、Max OS等操作系统中。Git是一个分布式的版本控制系统,与集中式的版本控制系统不同的是,每个人都工作在通过克隆建立的本地版
2020-08-17 22:03:32
90
原创 图书管理前后台小项目分析
文章目录项目搭建前后台业务分析一、渲染首页面后台前台二、添加图书后台前台三、删除图书后台前台四、修改图书后台前台五、查询图书前台项目描述:后台连接数据库实现增删改查等接口。前台ajax调用接口将图书渲染到页面,并实现增删改查。项目搭建创建文件1.1、 建立项目文件,并在文件中创建index.js入口文件1.2 、public静态资源1.3 、model数据库操作1.4、 route路由逻辑处理1.5、 views模板1.6 、server业务逻辑处理项目初始化npm init
2020-08-17 15:40:12
236
原创 简单的图书管理系统
node.js 后台渲染 开发图书管理系统项目搭建项目搭建结构需要依赖下载的模块"dependencies": { "art-template": "^4.13.2", //模板引擎需要的模块 "body-parser": "^1.19.0", //HTTP请求体解析的中间件 "express": "^4.17.1", //Node.js 平台的极简应用开发框架 "express-art-template": "^1.0.1", //更好的兼容express框
2020-08-14 01:06:08
415
原创 node.js连接MySQL数据库
文章目录环境搭建node.js驱动程序基本操作语句增删改查添加数据删除数据修改数据查找数据环境搭建1.首先项目用要有一个主入口文件index.js2.项目初始化:通过npm init -y 下载依赖包3.这是通过npm注册表提供的Node.js模块使用以下npm install命令完成安装 :npm mysql --save安装成功后再代码块中引入:node.js驱动程序const mysql = require('mysql');const mysql = require('m
2020-08-13 19:42:52
295
原创 Express中间件
Express是一个路由和中间件Web框架,其自身的功能很少:Express应用程序本质上是一系列中间件函数调用。中间件功能是可以访问请求对象 (req),响应对象(res)和应用程序的请求-响应周期中的下一个中间件功能的功能。下一个中间件功能通常由名为的变量表示next。中间件功能可以执行以下任务:执行任何代码。更改请求和响应对象。结束请求-响应周期。调用堆栈中的下一个中间件函数。如果当前的中间件功能没有结束请求-响应周期,则必须调用next()将控制权传递给下一个中间件功能。否则,该请
2020-08-12 00:22:27
141
原创 Express框架
文章目录简介安装 Expressres.send和res.end的区别分发路由几种常见的请求方式GETPOSTPUTDelete简介基于 Node.js 平台,快速、开放、极简的 Web 开发框架是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。Express 框架核心特性:可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。
2020-08-10 23:26:28
171
原创 fs 文件读取和写入
文章目录fs (文件系统)同步文件写入异步文件写入fs (文件系统)在 Node 中,与文件系统的交互是非常重要的,服务器的本质就将本地的文件发送给远程的客户端。Node 通过 fs 模块来和文件系统进行交互。该模块提供了一些标准文件访问 API 来打开、 读取、写入文件,以及与其交互。要使用 fs 模块,首先需要对其进行加载。const fs = require(“fs”); // 加载fs文件系统模块同步和异步调用fs 模块中所有的操作都有两种形式可供选择同步和异步。同步文
2020-08-09 22:39:35
3065
原创 学习ES6
文章目录ES6 let 与 constlet 命令const 命令ES6 解构赋值解构模型数组模型的解构(Array)对象模型的解构(Object)ES6 字符串箭头函数Class 类Map 与 SetMap 对象ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES
2020-08-07 22:41:04
108
原创 认识node.js
文章目录什么是node.jsNode.js 与浏览器的区别V8 JavaScript 引擎基本操作从命令行运行 Node.js 脚本如何从 Node.js 程序退出使用控制台模块的基础输出什么是node.jsNode.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具!Node.js 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使 Node.js表现得非常出色。Node.js 应用程序运行于单个进程
2020-08-06 17:51:32
421
原创 初识MySQL数据库
什么是数据库?数据库(Database)是按照数据结构来组织、存储和管理数据的仓库。每个数据库都有一个或多个不同的 API 用于创建,访问,管理,搜索和复制所保存的数据。我们也可以将数据存储在文件中,但是在文件中读写数据速度相对较慢。所以,现在我们使用关系型数据库管理系统(RDBMS)来存储和管理大数据量。所谓的关系型数据库,是建立在关系模型基础上的数据库,借助于集合代数等数学概念和方法来处理数据库中的数据。RDBMS 即关系数据库管理系统(Relational Database Manageme
2020-08-04 19:21:50
186
原创 Ajax跨域请求jsonp
什么是jsonpJsonp(JSON with Padding) 是 json的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。JSONP 应用案例://jsonp.php 文件代码<?phpheader('Content-type: ap
2020-08-04 19:06:24
181
原创 ajax请求xml、json和txt文件
1.ajax请求xml//xml代码<?xml version='1.0' encoding="utf-8"?><中国> <陕西省> <西安市>这座城市很nice</西安市> <宝鸡市>这座城市之前叫 陈仓</宝鸡市> </陕西省> <甘肃省> <兰州市></兰州市> </甘肃省> <四川省> &
2020-08-01 09:57:54
276
原创 http ajax请求
简介AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。应用场景:当我们在百度中输入一个“传”字后,会马上出现一个下拉列表!列表中显示的是包含“传”字的10个关键字。有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网、
2020-08-01 01:54:50
544
原创 GET和POST的区别,表单中请求php文件
文章目录get和post常见的区别get和post误区表单中请求php文件get和post常见的区别http协议最常见的两种方法GET和POST请求缓存:GET 会被缓存,而post不会收藏书签:GET可以,而POST不能保留浏览器历史记录:GET可以,而POST不能用处:get常用于取回数据,post用于提交数据安全性:post比get安全请求参数:querystring 是url的一部分get、post都可以带上。get的querystring(仅支持urlencode编码),post
2020-08-01 01:02:54
330
原创 php基础知识
PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。1、php语法格式php文件是以.php为后缀的文件php脚本以开头 <?php "中间为php代码" 结尾是?><?php //"中间为php代码" ?>2、PHP 中的注释<?php// 这是 PHP 单行注释/*这是PHP 多行注释*/?>3、PHP 变量变量是用于存储信息的"容器":与代数类似,可以给 PHP 变量赋予某个值(x=5)或者表达式(
2020-07-30 23:48:36
245
1
原创 bootstrap常用组件的使用
bootstrap是什么?Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。bootstrap环境搭建1、CDN引入方式Bootstrap 中文网 为 Bootstrap 专门构建了免费的 CDN 加速服务<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="sty
2020-07-30 23:24:50
571
原创 jQuery元素节点操作
append()append()向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似//在div中追加了一个p标签$("#div1").append($("<p>"));appendTo()把所有匹配的元素追加到另一个指定的元素元素集合中,实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中//把标签p追加到div中$("<p>").appendTo(
2020-07-24 19:19:36
216
原创 jQuery事件冒泡
事件冒泡当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。 #div1{ width: 800px; height: 800px; background: #0000FF; } #div1>ul{ width: 500px; height: 700px; background: #DCDCDC; } #div1>ul>li{ width: 100px; height
2020-07-24 18:02:51
108
原创 jQuery事件
jQuery 事件处理方法是 jQuery 中的核心函数事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用通常会把 jQuery 代码放到 部分的事件处理方法中on()在选择元素上绑定一个或多个事件的事件处理函数事件绑定有多种方法on()是比较常用的一种//用on绑定两个事件$("#div1").on("click mouseout",function(){ alert("点击事件/鼠标离开");});off()解除绑定事件$("
2020-07-24 17:36:59
117
原创 jquery循环
each()以每一个匹配的元素作为上下文来执行一个函数每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)参数each(callback)参数callback对于每
2020-07-23 23:03:50
618
原创 jQuery获取元素相对页面和相对父元素的位置
获取元素相对父元素的偏移position()获取匹配元素相对父元素的偏移,返回的对象包含两个整型属性:top 和 left,为精确计算结果,请在补白、边框和填充属性上使用像素单位,此方法只对可见元素有效var position = $(div).position();//返回的对象包含两个整型属性:top 和 leftconsole.log(position.left + "," + position.top)//单独获取属性top和left值获取元素相对页面的偏移offset()获取匹配元素在
2020-07-23 22:23:37
1908
原创 jquery属性操作
html()html() 取得第一个匹配元素的html内容,这个函数不能用于XML文档,但可以用于XHTML文档参数html([val|fn])无参数时返回当前元素的内容,其内容为一个字符串参数val用于设定HTML内容的值参数fn为一个函数,此函数返回一个HTML字符串,接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('&
2020-07-23 21:48:23
246
原创 jQuery获取盒子尺寸
height()height() 取得匹配元素当前计算的高度值(px)参数height([val|fn])设定CSS中 ‘height’ 的值,方法中有一个参数,可以是字符串或者数字,还可以是一个函数当参数为函数时,函数接受两个参数,第一个参数是元素在原先集合中的索引位置,第二个参数为原先的高度//height()中没有参数时则获取该元素的height值var div1 = $("div").height();console.log(div1);//输出div的height//heig
2020-07-23 19:18:29
949
原创 jQuery动画
jQuery动画 animate()animate() 用于创建自定义动画的函数这个函数的关键在于指定动画形式及结果样式属性对象这个对象中每个属性都表示一个可以变化的数值的样式属性(如“height”、“top”或“opacity”)注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left参数animate(p,[s],[e],[fn])params:一组包含作为动画属性和终值的样式属性和及其值的集合speed:三种预定速度之一的字符串(“slow”,“n
2020-07-23 17:54:19
57
原创 jQuery实现选项卡
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ margin-left: 100px; margin-top: 100px; } ul{
2020-07-22 23:35:36
106
原创 jQuery点击事件和特效
jQuery添加点击事件/*给按钮button绑定点击事件*///方法一$("button").click(function(){ alert("我是点击事件里的弹窗");});//方法二$("button").on("click",function(){ alert("我是第二个点击事件里的弹窗");});/*方法二中用on方法绑定click事件on()方法 提供绑定事件处理程序所需的所有功能on()可在选择元素上绑定一个或多个事件的事件处理函数*//
2020-07-22 19:43:25
364
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人