满天鑫

1、Ajax快速入门1.1、AJAX介绍 AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。 一般的网页如果需要更新内容，必需重新加载个页面。 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。 ​ ​ 1.2、原生JS实现AJAX 代码实现 import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebSe ...

Node 第 7 天1. 学习目标◆ 完成登录功能的开发 ◆ 能够获取用户的信息并重置密码和头像 2. 登录功能2.1 实现步骤 检测表单数据是否合法 根据用户名查询用户的数据 判断用户输入的密码是否正确 生成 JWT 的 Token 字符串 2.2 检测表单数据是否合法 将 /router/user.js 中 登录 的路由代码修改进行修改 // 注册新用户router.post('/reguser', expressJoi(reg_login_schema), userHandle.regUser)// 登录功能router.post('/login', expressJoi(reg_login_schema), userHandle.login) 2.3 根据用户名查询用户的数据 接收表单的数据 // 接收表单传递过来的数据const userInfo = req.body 定义 sql 语句 // 定义 sql 语句const sql = `select * from ev_users ...

Node 第 8 天1.  学习目标◆ 完成获取文章分类列表的功能◆ 完成新增文章分类的功能◆ 完成根据 ID 删除文章分类的功能◆ 完成根据 ID 获取文章分类的功能◆ 完成根据 ID 更新文章分类的功能◆ 完成发布新文章的功能 2. 新建 ev_article_cate 数据表2.1 创建表结构 2.2 新增两条初始化的数据 3. 获取文章分类列表3.1 实现步骤 初始化路由模块 初始化路由处理函数模块 获取文章分类列表数据 3.2 初始化路由模块 创建  /router/artcate.js 路由模块，并初始化如下的代码结构 // // 导入 expressconst express = require('express')// 创建路由对象const router = express.Router()// 获取文章分类的列表数据router.get('/cates', (req, res) => { res.send('ok')})// 向外共享路由对象module.exports = ...

Node 第 6 天1. 学习目标◆ 前后端的身份认证 ◆ 能够了解 Session 的实现原理 ◆ 能够了解 JWT 的实现原理 ◆ 大事件项目初始化 ◆ 大事件注册新用户功能 2. web 开发模式2.1 主流的两种开发模式 基于服务端渲染的传统 Web 开发模式 基于前后端分离的新型 Web 开发模式 2.2 了解服务端渲染的概念以及优缺点 服务端渲染的概念：服务器发送给客户端的 HTML 页面，是在服务器通过字符串的拼接动态生成的。因此，客户端不需要使用 Ajax 这样的技术额外请求页面的数据 服务端渲染的优点 前端耗时少。因为服务器端负责动态生成 HTML 内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电 有利于SEO。因为服务器端响应的是完整的 HTML 页面内容，所以爬虫更容易爬取获得信息，更有利于SEO 服务端渲染的缺点 占用服务器端资源。即服务器端完成 HTML 页面内容的拼接，如果请求较多，会对服务器造成一定的访问压力 不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，尤其对于前端复杂度 ...

Node 第 5 天1. 学习目标◆ 能够知道如何配置 MySQL 数据库环境 ◆ 能够认识并使用常见的 SQL 语句操作数据库 ◆ 能够在项目中操作 MySQL 数据库 2. 数据库的基本概念2.1 什么是数据库 数据库（database）是用来组织、存储和管理数据的仓库 为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、查询、更新、删除等操作 2.2 常见的数据库以及分类 常见的数据库分类下面几种 MySQL 数据库（目前使用最广泛、流行度最高的开源免费数据库；Community + Enterprise） Oracle 数据库（收费） SQL Server 数据库（收费） Mongodb 数据库 (Community + Enterprise) 数据库分类 传统数据库(关系型数据库或SQL数据库) MySQL、Oracle、SQL Server，这三者的设计理念相同，用法比较类似 新型数据库(非关系数据库或NoSQL数据库) Mongodb，它在一定程度上弥补了传统型数据库的缺陷 2.3 ...

Node 第 4 天1. 学习目标◆ 能够熟练 express 路由的使用 ◆ 掌握中间件的使用方式 ◆ 能够说出中间件分为哪几类 ◆ 了解如何自定义中间件 ◆ 能够基于 exprss 写接口 ◆ 能够说出解决跨域问题的方法 cors ◆ 掌握如何实现 JSONP 接口 2. Express 路由2.1 路由的概念 路由就是映射关系 根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 <img src="https://note-1259153703.cos.ap-nanjing.myqcloud.com/images/20211119195825.png" style="zoom:67%;" /> 2.2 Express 中的路由 在 Express 中，路由指的是客户端的请求与服务器处理函数之间的映射关系 Express 中的路由分 3 部分组成，分别是请求的类型、请求的 URL 地址、处理函数 Express 中的路由的例子 ...

Canvas概述<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 创建Canvas<canvas>会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。 <canvas id="canvas" width="200" height="200"></canvas> 其中width和height并不是指canvas的真正尺寸，而是指canvas的精度，即将整个画布平分为200*200个像素点，真正指定canvas尺寸大小可以由CSS指定 #canvas { width: 500px; height: 500px;} 渲染上下文let canvas = document.getElementById('canvas') // ...

PM2一键部署http://pm2.keymetrics.io/ PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。 好处 无需通过手工或是ftp的方式把本地代码拷贝到服务器上 无需手工启动或是重启远程服务器的Node服务 项目的升级及迭代非常方便 具有负载均衡功能 pm2安装npm i pm2 -g 指令# 启动pm2 start xxx# 停止pm2 stop xxx# 重启pm2 restart xxx# 查看列表pm2 list...其它参考:http://pm2.keymetrics.io/docs/usage/quick-start/#cheatsheet 前提 购买阿里云服务器，生成CentOS7.x的系统 在CentOS7.x中安装必要的软件 Node、MongoDB、Apache、MySQL、FTPServer… 参考:https://github.com/Duanzihuang/linuxtutorial 本地和服务器安装pm2全局包 对阿里云服务器的安全组规则进行配置 ...

1 网络状态我们可以通过window.navigator.onLine来检测，用户当前的网络状况，返回一个布尔值， 但是不同浏览器会存在差异 所以HTML5 给我们提供了2个事件 online 和 offline online用户网络连接时被调用 offline用户网络断开时被调用 他们监听的对象都是window 2 全屏HTML5规范允许用户自定义网页上任一元素全屏显示。 1、Node.requestFullScreen() 开启全屏显示 2、Node.cancelFullScreen() 关闭全屏显示 由于其兼容性原因，不同浏览器需要添加前缀如： webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。 Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。 ms 微软 msRequestFullscreen 3、document.fullScreen检测当前是否处于全屏 不同浏览器需要添加前缀 document.w ...

Gulp–基于流的自动化构建工具基本概念官网: https://gulpjs.com/中文网址: https://www.gulpjs.com.cn/Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目。 工作原理以流的形式，去执行构建项目的构建工作 作用 文件压缩 文件合并 文件指纹 … 优点 易于使用 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。 构建快速 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 易于学习 通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。 使用步骤1、在项目根目录创建一个 gulpfile.js的配置文件2、安装构建所需要的包 npm i @babel/core @babel/preset-env gulp gulp-babel gulp-clean ...

学习目标: 能够说出fullpage插件的使用基本思路 能写出购物案例屏幕滚动效果及其侧边栏制作 能写出第一屏布局及其动画效果 能写出第二屏布局及其动画效果 能写出第三屏布局及其动画效果 能写出第四、五、六、七屏布局及其动画效果 能写出第八屏布局及其动画效果 能写出添加键盘滚动以及重新开始播放动画 购物网站宣传页面 案例目的： 复习—复习前面学过的HTML5+CSS3 综合—综合运用jquery完成案例 拓展—可以做宣传页面或者个人简历 fullpage 全屏插件全屏滚动效果，原生js也很好实现，主要是用 mousewheel 鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理及比较麻烦啦！（了解一下，有兴趣的同学可以研究一下） fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。 github 官网 https://github.com/alvarotrigo/fullPage.js 中文演示地址 http://www. ...

Node 第 3 天1. 学习目标◆ 能够说出 pageage.json 文件中属性的含义 ◆ 知道怎么解决包下载慢的问题 ◆ 了解如何开发包 ◆ 了解如何发布包 ◆ 熟练模块的加载机制 ◆ 熟练 express基本操作 2. 包管理配置2.1 包管理配置的概念npm 规定，在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件，用来记录与项目有关的一些配置信息，例如： 项目的名称、版本号、描述等 项目中都用到了哪些包 哪些包只会在开发期间会用到 哪些包在开发和部署时都需要用到 2.2 理解 package.json 配置文件的作用2.2.1 多人协作的问题 包的体积 整个项目的体积是 30.4M 第三方包的体积是 28.8M 项目源代码的体积 1.6M 遇到的问题 第三方包的体积过大，不方便团队成员之间共享项目源代码 解决方案 共享时剔除node_modules 2.2.2 如何记录项目中安装了哪些包 在项目根目录中，创建一个叫做 **package.json**的配置文件，即可用来记录项目中安装了哪些包。从而方 ...