cropper基本用法
1. 基本使用步骤
在 <head> 中导入 cropper.css 样式表：
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：
<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
在卡片的 layui-card-body 主体区域中，定义如下的 HTML 结构：
<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
<!-- 图片裁剪区域 -->
<div class="croppe ...
大事件项目day01
0. 资源地址
线上 DEMO 项目地址：http://www.escook.cn:8086/
项目的 API 接口地址： https://www.showdoc.cc/escook?page_id=3707158761215217
1. 项目前期的准备工作1.1 初始化项目结构
将 素材 目录下的 assets 和 home 文件夹，拷贝到 code 目录下
在 code 目录下新建 login.html 和 index.html 页面
1.2 使用GitHub管理大事件的项目
在 code 目录中运行 git init 命令
在 code 目录中运行 git add . 命令
在 code 目录下运行 git commit -m "init project" 命令
新建 Github 仓库 web_bigevent
将本地仓库和Github仓库建立关联关系
将本地仓库的代码推送到Github仓库中
运行 git checkout -b login 命令，创建并切换到 login 分支
1.3 安装VSCode的Live Server插件辅助开发
在插件市场，搜索 Live S ...
大事件项目day02
1. 后台主页1.1 获取用户的基本信息
导入需要的脚本：
<!-- 导入 jQuery -->
<script src="/assets/lib/jquery.js"></script>
<!-- 导入自己封装的 baseAPI -->
<script src="/assets/js/baseAPI.js"></script>
<!-- 导入自己的 js 文件 -->
<script src="/assets/js/index.js"></script>
定义 getUserInfo 函数：
// 获取用户的基本信息
function getUserInfo() {
$.ajax({
method: 'GET',
url: '/my/userinfo',
// headers 就是请求头配置对象
headers: {
Authorization: localStorage.getItem('token') || ''
} ...
大事件项目day03
1. 文章类别1.1 点击编辑按钮展示修改文章分类的弹出层
为编辑按钮添加 btn-edit 类名如下：
<button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="{{$value.Id}}">编辑</button>
定义 修改分类 的弹出层：
<script type="text/html" id="dialog-edit">
<form class="layui-form" id="form-edit" lay-filter="form-edit">
<!-- 隐藏域，保存 Id 的值 -->
<input type="hidden" name="Id">
<div class="layui-form-item">
<label class="layui-form-label">分类名称</label>
<div class="lay ...
Node 第 1 天笔记
Node 第 1 天1. 学习目标◆ 能够知道什么是 Node.js◆ 能够知道 Node.js 可以做什么◆ 能够说出 Node.js 中的 JavaScript 的组成部分◆ 能够使用 fs 模块读写操作文件◆ 能够使用 path 模块处理路径◆ 能够使用 http 模块写一个基本的 web 服务器
2. 回顾和思考2.1 为什么 JavaScript 可以在浏览器中执行2.1.1 已经掌握了哪些技术
2.1.2 浏览器中的 JavaScript 的组成部分
2.1.3 为什么 JavaScript 可以在浏览器中被执行
2.2 JavaScript 可以操作 DOM 和 BOM
每个浏览器都内置了 DOM、BOM 这样的 API 函数，因此，浏览器中的 JavaScript 才可以调用它们。
2.3 浏览器中的 JavaScript 运行环境运行环境是指代码正常运行所需的必要环境
总结：
V8 引擎负责解析和执行 JavaScript 代码
内置 API 是由运行环境提供的特殊接口，只能在所属的运行环境中被调用
2.4 JavaScri ...
Echarts
DAY01-可视化项目01-项目介绍 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。
该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …
02-使用技术完成该项目需要具备以下知识：
div + css 布局
flex 布局
css3动画
css3渐变
css3边框图片
原生js + jquery 使用
rem适配
echarts基础
粗略代码统计：
css 580行
html 450行
js 400行 (有效)
03-Echarts-介绍
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性 ...
ES6语法
ES6语法目标
能够说出使用let关键字声明变量的特点
能够使用解构赋值从数组中提取值
能够说出箭头函数拥有的特性
能够使用剩余参数接收剩余的函数参数
能够使用拓展运算符拆分数组
能够说出模板字符串拥有的特性
ES6相关概念（★★）什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
变量提升特性增加了程序运行时的不可预测性
语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
ES6新增语法let（★★★）ES6中新增了用于声明变量的关键字
let声明的变量只在所处于的块级有效 if (true) {
let a = 10;
}
console.log(a) // a is not defined
注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。
不存在变量提升console.log(a); // a is not def ...
JavaScript高级第04天笔记
JavaScript高级第04天笔记1.正则表达式概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。
其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表单验证。
1.2 正则表达式的特点
灵活性、逻辑性和功能性非常的强。
可以迅速地用极简单的方式达到字符串的复杂控制。
对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式. 比如用户名: /^[a-z0-9_-]{3,16}$/
2.正则表达式在j ...
JavaScript高级第03天笔记
JavaScript高级第03天笔记1.函数的定义和调用1.1函数的定义方式
方式1 函数声明方式 function 关键字 (命名函数)
function fn(){}
方式2 函数表达式(匿名函数)
var fn = function(){}
方式3 new Function()
var f = new Function('a', 'b', 'console.log(a + b)');
f(1, 2);
var fn = new Function('参数1','参数2'..., '函数体')
注意
/*Function 里面参数都必须是字符串格式
第三种方式执行效率低，也不方便书写，因此较少使用
所有函数都是 Function 的实例(对象)
函数也属于对象
*/
1.2函数的调用/* 1. 普通函数 */
function fn() {
console.log('人生的巅峰');
}
fn();
/* 2. 对象的方法 */
var o = {
sayHi: function() {
console.log('人生的巅峰');
}
}
o.sa ...
JavaScript高级第02天笔记
JavaScript高级第02天笔记1.构造函数和原型1.1对象的三种创建方式—复习
字面量方式
var obj = {};
new关键字
var obj = new Object();
构造函数方式
function Person(name,age){
this.name = name;
this.age = age;
}
var obj = new Person('zs',12);
1.2静态成员和实例成员1.2.1实例成员实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问
function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华', 18);
console.log(ldh.uname);//实例成员只能通过 ...
JavaScript高级第01天笔记
JavaScript高级第01天笔记1.面向过程与面向对象1.1面向过程
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
1.2面向对象
面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
1.3面向过程与面向对象对比
面向过程
面向对象
优点
性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。
易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护
缺点
不易维护、不易复用、不易扩展
性能比面向过程低
2.对象与类2.1对象对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
2.1.1创建对象//以下代码是对对象的复习
//字面量创建对象
var ldh = {
name: '刘德华',
age: 18
}
console.log(ldh); ...
day07 - Web APIs
day07 - Web APIs
学习目标:
能够写出移动端触屏事件能够写出常见的移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效能够写出 sessionStorage 数据的存储以及获取能够写出 localStorage 数据的存储以及获取能够说出它们两者的区别
1.1. 触屏事件1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件如下：
1.1.2 触摸事件对象（TouchEvent）TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
touchstart、touchmove、touchend 三个事件都会各自有 ...
