IVAn

代码地址: Gitee 坐标拾取工具 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519 ...

Egg.js 从入门到放弃-3Egg-Sequelize 前面的章节中，我们介绍了如何在框架中通过 egg-mysql 插件来访问数据库。而在一些较为复杂的应用中，我们可能会需要一个 ORM 框架来帮助我们管理数据层的代码。而在 Node.js 社区中，sequelize 是一个广泛使用的 ORM 框架，它支持 MySQL、PostgreSQL、SQLite 和 MSSQL 等多个数据源。本章节我们会通过开发一个对 MySQL 中 users 表的数据做 CURD 的例子来一步步介绍如何在 egg 项目中使用 sequelize。 初始化项目通过 npm 初始化一个项目: 123$ mkdir sequelize-project && cd sequelize-project$ npm init egg --type=simple$ npm i 安装并配置 egg-sequelize 插件（它会辅助我们将定义好的 Model 对象加载到 app 和 ctx 上）和 mysql2 模块： 安装1npm install --save egg-sequelize mys ...

Egg.js 从入门到放弃-2 上文说到 快速创建、启动项目 请求接口 拿到数据。本章我们来学习 Egg.js 连接数据库 Egg-Mysql 在 Web 应用方面 MySQL 是最常见，最好的关系型数据库之一。非常多网站都选择 MySQL 作为网站数据库。框架提供了 egg-mysql 插件来访问 MySQL 数据库。这个插件既可以访问普通的 MySQL 数据库，也可以访问基于 MySQL 协议的在线数据库服务。 安装与配置安装对应的插件 egg-mysql ： 1npm i --save egg-mysql 开启插件： 12345// config/plugin.jsexports.mysql = { enable: true, package: 'egg-mysql',}; 在 config/config.${env}.js 配置各个环境的数据库连接信息。 单数据源如果我们的应用只需要访问一个 MySQL 数据库实例，可以如下配置： 1234567891011121314151617181920// conf ...

Egg.js 从入门到放弃-1Egg.js 是什么? Egg.js 是 nodejs 的一个框架，它是基于 koa 框架的基础之上的上层框架，它继承了 koa 的，它可以帮助开发人员提高开发效率和维护成本。 Egg 约定了一些规则，在开发中，我们可以按照一套统一的约定进行应用开发，团队内部使用这种方式开发可以减少开发人员的学习成本。 Express 也是 Node.js 的一个框架，express 简单且扩展性强，但是 express 框架缺少了一些约定，不同的开发者会写出不同的代码，适合做个人项目，不太适合团队开发，而 Egg 它约定了一些规则，对整个团队开发效率会提高。 官网对 Egg 有如下特性 可以基于 Egg 定制上层框架的能力。 高度可扩展的插件机制。 内置多进程管理。 基于 koa 开发的，性能好。 框架稳定，测试覆盖了高。 渐进性开发。 快速入门环境准备 操作系统：支持 macOS，Linux，Windows 运行环境：建议选择 LTS 版本，最低要求 8.x。 快速初始化我们推荐直接使用脚手架，只需几条简单指令，即可快速生成项目（npm >= ...

CDN 如何通过 HTTP 头配置跨域资源共享（CORS） 登录 CDN 控制台。 在域名管理页面，选择需要配置 CORS 功能域名右侧的管理。 单击缓存配置，选择自定义 HTTP 响应头，单击添加。 进入 自定义 HTTP 响应头 页面，请按照以下内容进行选择，设置指定允许的跨域请求的来源，然后单击确定保存配置 参数 示例 响应头操作 增加 自定义响应头参数 Access-Control-Allow-Methods 响应头值 GET,POST,PUT (说明：如果您需要同时添加 POST、GET、PUT，请使用英文逗号（,）隔开。) 是否允许重复 不允许 允许表示允许重复，即源站返回的头会保留，同时会加上一个同名的头 不允许表示不允许重复，即源站返回的头会被新配置的同名头覆盖。 本文以不允许重复为例，现场可根据实际环境而定。 | 更多信息 以下为配置跨域资源共享（CORS）的更多说明： 目前仅支持配置一条白名单域名。 若使用 OSS 作为源站，OSS 与 CDN 控制台同时配置 CORS，CDN 的配置将覆盖 OSS。 若源站为本地服务器 ...

CentOS7.5 Nginx 反向代理 部署 Nuxt.js1. 安装 NodeJS 确认服务器有 nodejs 编译及依赖相关软件，如果没有可通过运行以下命令安装。 1yum -y install gcc gcc-c++ openssl-devel 下载 NodeJS 源码包并解压 进入要存放下载资源的目录，本文存放在/usr/local/src/目录下。然后执行命令下载源码包 1wget https://nodejs.org/dist/v10.14.2/node-v10.14.2-linux-x64.tar.xz 解压 12xz -d node-v10.14.2-linux-x64.tar.xztar -xf node-v10.14.2-linux-x64.tar 为安装的包添加软连接（这样就可以在全局使用了） 12ln -s ~/node-v10.14.2-linux-x64/bin/node /usr/bin/nodeln -s ~/node-v10.14.2-linux-x64/bin/npm /usr/bin/npm 测试是否安装成 ...

Vue 组件间通信的 6 种方式前言组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 组件间通信的几种方式，如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners 和 provide/inject，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助 1. props/$emit父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。 父组件向子组件传值接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App ...

Nuxt.js 是什么？ Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个 开源 的框架，让 web 开发变得简单而强大。 1. 原理图 2. nuxt.js 的优势 基于 Vue.js 自动代码分层 服务端渲染 SSR 强大的路由功能，支持异步数据 静态文件服务 ES6/ES7 语法支持 打包和压缩 JS 和 CSS HTML 头部标签管理 本地开发支持热加载 集成 ESLint 支持各种样式预处理器： SASS、LESS、 Stylus 等 SSR 从图中可以看出，（这两种渲染方式的）区别主要在于出现首屏渲染的时机。对于 SSR 来说，服务器返回的是（结构相对完整的）HTML 文件，（通过解析 HTML 文件），浏览器就能渲染出页面。而对 CSR 来说，浏览器拿到的只是包含 JavaScript 代码 ...

img 对象，file 对象，base64，canvas 对象相互转换以及图片压缩先上一张图 该图片是 js 几乎所有图片类型的转换方式了。接下来讲讲几种常用的类型转换： urltoImage(url,fn) 会通过一个 url 加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个 Image 对象的参数，代码如下：1234567function urltoImage (url,fn){ var img = new Image(); img.src = url; img.onload = function(){ fn(img); }}; imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个 Image 对象，代码如下：12345678function imagetoCanvas(image){ var cvs = document.createElement("canvas"); ...

Vue 开发前端，向后台 springboot 传递数组，springboot 接收数组方式无法使用– @RequestParam(“ids[]”) String [] ids – 然后抛出以下异常，经过多轮验证发现@RequestParam(“ids[]”) 失效，无法使用 Resolved [org.springframework.web.bind.MissingServletRequestParameterException]  Required String[] parameter ‘ids[]’ is not present] 解决方案 后端使用 @RequestParam(value=”ids[]” String [] ids) 12345678qs.stringify({ids: [1, 2, 3]}, { indices: false })//形式： ids=1&ids=2&id=3qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ...