首页 / VUE / Vue+Koa2+mongoose写一个像素绘板的实现方法

Vue+Koa2+mongoose写一个像素绘板的实现方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue+Koa2+mongoose写一个像素绘板的实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10422字，纯文字阅读大概需要15分钟。

内容图文

前言

GitHub： server | 前端

为什么是绘板：v2ex

作为一名前端，总会有意无意接触到 NodeJS 、有意无意会去看文档、有意无意会注意到框架，但真当需要我们需要在工作中善用它时，多半还是要感叹一句“纸上得来终觉浅”。所以一周前我决定进行一个实践尝试，希望能把以往无意中学到的知识融汇贯通，最终选择把以前的一个画板 Demo 重写并添加 server 端。

技术栈

[vue + vuex + vue-router] 页面渲染 + 数据共享 + 路由跳转
[axios] 以 Promise 的方式使用 HTTP 请求
[stylus] CSS 预处理
[element-ui] UI 库
[Webpack] 打包上面这些东西
[koa 2 & koa-generator] NodeJS 框架和框架脚手架
[mongodb & mongoose] 数据库和操作数据库的库
[node-canvas] 服务端数据副本记录
[Socket.io] 实时推送
[pm2] Node 服务部署
[nginx] 部署静态资源访问服务（HTTPS），代理请求
[letsencrypt] 生成免费的 HTTPS 证书

Webpack 之所以也被列出来，是因为本项目作为项目 luwuer.com 的一个模块，需要 webpack 来实现独立打包

node-canvas

安装

node-canvas 是我目前遇到过最难安装的依赖，以至于我根本不想在 Windows 下安装他，它的功能依赖很多系统下默认不存在的包，在 Github 上也能看到很多 issue 的标签是 installation help。以 CentOS 7 纯净版为例，在安装它之前你需要安装以下这些依赖，值得注意的是 npm 文档上提供的命令没有 cairo 。

# centos 前置条件
sudo yum install gcc-c++ cairo cairo-devel pango-devel libjpeg-turbo-devel giflib-devel
# 安装本体
yarn add canvas -D

还有一个不明所以的坑，如果前置条件准备就绪后，安装本体仍然一直卡取包这一步（不报错），此时需要单独更新一下 npm

使用示例

参考文档很容易就能掌握基本用法，下方例子中先取到像素点数据生成 ImageData ，然后通过 putImageData 把历史数据画到 canvas 。

const {
 createCanvas,
 createImageData
} = require('canvas')

const canvas = createCanvas(canvasWidth, canvasHeight)
const ctx = canvas.getContext('2d')

// 初始化
const init = callback => {
 Dot.queryDots().then(data => {
  let imgData = new createImageData(
   Uint8ClampedArray.from(data),
   canvasWidth,
   canvasHeight
  )

  // 移除 Smooth
  ctx.mozImageSmoothingEnabled = false
  ctx.webkitImageSmoothingEnabled = false
  ctx.msImageSmoothingEnabled = false
  ctx.imageSmoothingEnabled = false
  ctx.putImageData(imgData, 0, 0, 0, 0, canvasWidth, canvasHeight)

  successLog('canvas render complete !')

  callback()
 })
}

Socket.io

本项目在设计上有两个必须用到推送的地方，一是其他用户的建点信息，二是所有用户发送的聊天消息。

client

// socket.io init
// transports: [ 'websocket' ]
window.socket = io.connect(window.location.origin.replace(/https/, 'wss'))

// 接收图片
window.socket.on('dataUrl', data => {
 this.imageObject.src = data.url
 this.loadInfo.push('渲染图像...')

 this.init()
})

// 接收其他用户建点
window.socket.on('newDot', data => {
 this.saveDot(
  {
   x: data.index % this.width,
   y: Math.floor(data.index / this.width),
   color: data.color
  },
  false
 )
})

// 接收所有人的最新推送消息
window.socket.on('newChat', data => {
 if (this.msgs.length === 50) {
  this.msgs.shift()
 }

 this.msgs.push(data)
})

server /bin/www

let http = require('http');
let io = require('socket.io')
let server = http.createServer(app.callback())
let ws = io.listen(server)
server.listen(port)

ws.on('connection', socket => {
 // 建立连接的 client 加入房间 chatroom ，为了下方可以广播
 socket.join('chatroom')

 socket.emit('dataUrl', {
  url: cv.getDataUrl()
 })

 socket.on('saveDot', async data => {
  // 推送给其他用户，即广播
  socket.broadcast.to('chatroom').emit('newDot', data)
  saveDotHandle(data)
 })

 socket.on('newChat', async data => {
  // 推送给所有用户
  ws.sockets.emit('newChat', data)
  newChatHandle(data)
 })
})

letsencrypt

申请证书

# 获得程序
git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
# 自动生成证书(环境安装完毕后会有两次确认),证书目录 /etc/letsencrypt/live/{输入的第一个域名} 我这里是 /etc/letsencrypt/live/www.luwuer.com/
./letsencrypt-auto certonly --standalone --email html6@foxmail.com -d www.luwuer.com -d luwuer.com

自动续期

# 进入定时任务编辑
crontab -e
# 提交申请，我这里设置每两月一次，过期时间为三月
* * * */2 * cd /root/certificate/letsencrypt && ./letsencrypt-auto certonly --renew

nginx

yum install -y nginx

/etc/nginx/config.d/https.conf

server {
 # 使用 HTTP/2，需要 Nginx1.9.7 以上版本
 listen 443 ssl http2 default_server;

 # 开启HSTS，并设置有效期为“6307200秒”（6个月），包括子域名(根据情况可删掉)，预加载到浏览器缓存(根据情况可删掉)
 add_header Strict-Transport-Security "max-age=6307200; preload";
 # add_header Strict-Transport-Security "max-age=6307200; includeSubdomains; preload";
 # 禁止被嵌入框架
 add_header X-Frame-Options DENY;
 # 防止在IE9、Chrome和Safari中的MIME类型混淆攻击
 add_header X-Content-Type-Options nosniff;
 # ssl 证书
 ssl_certificate /etc/letsencrypt/live/www.luwuer.com/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/www.luwuer.com/privkey.pem;
 # OCSP Stapling 证书
 ssl_trusted_certificate /etc/letsencrypt/live/www.luwuer.com/chain.pem;
 # OCSP Stapling 开启，OCSP是用于在线查询证书吊销情况的服务，使用OCSP Stapling能将证书有效状态的信息缓存到服务器，提高TLS握手速度
 ssl_stapling_verify on;
 #OCSP Stapling 验证开启
 ssl_stapling on; 
 #用于查询OCSP服务器的DNS 
 resolver 8.8.8.8 8.8.4.4 valid=300s;
 # DH-Key交换密钥文件位置
 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
 # 指定协议 TLS
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
 # 加密套件,这里用了CloudFlare's Internet facing SSL cipher configuration
 ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
 # 由服务器协商最佳的加密算法
 ssl_prefer_server_ciphers on;

 server_name ~^(\w+\.)?(luwuer\.com)$; # $1 = 'blog.' || 'img.' || '' || 'www.' ; $2 = 'luwuer.com'
 set $pre $1;
 if ($pre = 'www.') {
  set $pre '';
 }
 set $next $2;
 
 root /root/apps/$pre$next;

 location / {
  try_files $uri $uri/ /index.html;
  index index.html;
 }

 location ^~ /api/ {
  proxy_pass http://43.226.147.135:3000/;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
 
 # socket代理配置
 location /socket.io/ {
  proxy_pass http://43.226.147.135:3000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
 }

 # location /weibo/ {
 #   proxy_pass https://api.weibo.com/;
 # }

 include /etc/nginx/utils/cache.conf;
}

server {
 listen 80;
 server_name www.luwuer.com;
 rewrite ^(.*)$ https://$server_name$request_uri;
}

附录

数据库存储结构思考历程

首先需求是画板可以作画实际大小为 { width: 1024px, height: 512px } ，这就意味着有 1024 * 512 = 524,288 个像素点，或则有 524,288 * 4 = 2,097,152 个表示颜色的数字，这些数据量在不做压缩的情况下，最小存储方式是后者剔除掉 rgba 中的 a ，也就是一个长度为 524,288 * 3 = 1,572,864 的数组，如果赋值给变量占用内存大概 1.5M （数据来源于 Chrome Memory）。为了存储以上结构，我首先分了两种类型的存储结构：

以点为对象存储，也就是说会有 524,288 条数据

颜色 rbga 存储，后优化为 rgb 存储
颜色 16 进制存储

整个画布数据当作一条数据存储

虽然看起来结构2有点蠢，但起初我确实思考过这样的结构，那时我还不清楚原来取数据最耗时的不是查询而是 IO 。
后来我分别测试 1.1 和 1.2 这两种结构，然后直接否定了结构 2，因为在测试中我发现了 IO 耗时占总耗时超过 98% ，而结构 2 无疑不能因为单条数据取得绝对的性能优势。

1.1

存储大小 10M
取出全部数据 8000+ms
全表查询 150ms （findOne 和 find 对比结果）
其余耗时 20ms （findOne 和 find 对比结果）

1.2

存储大小 10M
取出全部数据 7500+ms
全表查询
其余耗时

结构 2 如果取数据不是毫秒级，就是死刑，因为这种结构下单个像素变动就需要存储整个图片数据

老实讲这个测试结果让我有些难以接受，问了好几个认识的后端为什么性能这么差、有没有解决办法，但都没什么结果。更可怕的是，测试是在我 i7 CPU 的台式电脑上进行的，当我把测试环境放到单核服务器上时，取全表数据的耗时还要乘以 10 。好在只要想一个问题久了，即使有时只是想着这个问题发呆，也总能迸发出一些莫名的灵感。我想到了关键之一数据可以只在服务启动时取出放到内存中，像素发生改变时数据库和内存数据副本同步修改，于是得以继续开发下去。最终我选择了 1.1 的结构，选择原因和下文的“数据传输”有关。

const mongoose = require('mongoose')

let schema = new mongoose.Schema({
 index: {
  type: Number,
  index: true
 },
 r: Number,
 g: Number,
 b: Number
}, {
 collection: 'dots'
})

index 代替 x & y 以及移除 rgba 中的 a 在代码中再补上，都能显著降低 collection 的实际存储大小

在测试过程中其实还有个特别奇怪的问题，就是单核小霸王服务器上，我如果一次性取出所有数据存储到一个 Array 中，程序会在中途奔溃，没有任何报错信息。起初我以为是 CPU 满荷载久了导致的奔溃（top 查看硬件使用信息），所以还特意新租了一个服务器，想用一个群里的朋友提醒的“分布式”。再后面一段时间，我通过分页取数据，发现程序总是在取第二十万零几百条（一个固定数字）是陡然奔溃，所以为 CPU 证了清白。

PS：好在以前没分布式经验，不然一条路走到黑，可能现在都还以为是 CPU 的问题呢。

数据传输思考历程

上面有提到过，长度为 1,572,864 的颜色数组占用内存为 1.5M ，我猜想数据传输时也是这个大小。起初我想，我得把这个数据压缩压缩（不是指 gzip ），但由于不会，就想到了替代方案。前面已经为了避免取数时高额的 IO 消耗，会在内存中存储一个数据副本，我想到这个数据我可以通过拼接（1.1 的结构相对而言 CPU 消耗少得多）生成 ImageData 再通过 ctx.putImageData 画到 Canvas 上，这就是关键之二把数据副本画在服务器上的一个 canvas 上。

然后就好办了，可以通过 ctx.toDataURL || fs.writeFile('{path}', canvas.toBuffer('image/jpeg') 把数据以图片的方式推送给客户端，图片本身的算法帮助我们压缩了数据，不用自己捣鼓。事实上压缩率非常可观，前期画板上几乎都是重复颜色时，1.5M 数据甚至可以压缩到小于 10k，后期估计应该也在 300k 以内。

鉴于 DataURL 更方便，这里我采用的 DataURL 的方式传递图片数据。

工作记录

Day 1 把像素画板前端内容重构一遍，解决图像过大时放大视图卡顿的问题
Day 2 处理后端逻辑，由于数据库IO限制，尝试不同的存储结构，但性能都不理想
Day 3 继续问题研究，最后决定在服务端也同步一份 canvas 操作，而不是只存在库里，但流程还没走通，因为下午睡了一觉
Day 4 1核1G服务器在访问数据库取50w条数据时崩溃，后通过和朋友讨论，在无意中发现了实际问题，就有了解决方案(部分时间在新服务器配了套环境，不过由于问题解决又弃用了)
Day 5 增加公告、用户、聊天、像素点历史信息查询功能
Day 6/7 解决 socket.io https 问题，通宵两天最后发现是 CDN 加速问题，差点螺旋升天

Day 4 说的实际问题，我只能大概定位在 NodeJS 变量大小限制或对象个数限制，因为在我将 50w 长度 Array[Object] 转换为 200w 长度 Array[Number] 后问题消失了，知道具体原因的大佬望不吝赐教。

记录是从日记里复制过来的，Day 6/7 确实是最艰难的两天，其实代码从一开始就没什么错，有问题的是又拍云的 CDN 加速，可怖的是我根本没想到罪魁祸首是他。其实在两天的重复测试中，因为实在是无计可施，我也有两次怀疑 CDN 。第一次，我把域名解析到服务器 IP ，但测试结果仍然报错，之后就又恢复了加速。第二次是在第七天的早上五点，当时头很胀很难受就直接停了 CDN ，想着最后测试一下不行就去掉 CDN 的 https 证书用 http 访问。那时我才发现，在我 ping 域名确定解析已经改变后（修改解析后大概 10 分钟），域名又会间隙性被重新解析到 CDN （这个反复原因不知道为什么，阿里云的域名解析服务），第一次测试不准应该就是这个原因，稍长时间后就不再会了。解决后我有意恢复 CDN 加速测试，但始终没找出究竟是哪一个配置导致了问题，所以最终我也没能恢复加速。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的Vue+Koa2+mongoose写一个像素绘板的实现方法全部内容，希望文章能够帮你解决Vue+Koa2+mongoose写一个像素绘板的实现方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/329751.html

来源：【匿名】

【上一篇】vue实现抖音时间转盘【下一篇】php怎么返回数据给vue

更多 ►

【Vue+Koa2+mongoose写一个像素绘板的实现方法】教程文章相关的互联网学习教程文章

Vue中的验证登录状态的实现方法

Vue项目中实现用户登录及token验证先说一下我的实现步骤：使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后，拿到token，将token存储到sessionStorage中，并跳转到首页前端每次跳转时，就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面。注销后，就清除sessionStorage里的token信息并跳转到登录页面使用easy...

vue增加强缓存和版本号的实现方法【图】

强缓存：到底什么是强缓存？强在哪？其实强是强制的意思。当浏览器去请求某个文件的时候，服务端就在respone header里面对改文件做了缓存配置。缓存的时间、缓存类型都由服务端控制。强缓存实现： cache-control: max-age=315360000, public ,immutable客户端和代理服务器都可以缓存该资源，在315360000秒（10年）的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起...

vue.js通过自定义指令实现数据拉取更新的实现方法

前言这篇文章的代码片段位于 vue 的单文件组件中，即以 .vue 结尾的文件中，本文说明的只是一种实现方法，既不是唯一的方法也不是最好的方法，如果大家有更好的方法可以留言，大家进行讨论。第一步首先，一定要先定义变量：// app.vue <script>data () { return {// 定义 getDatagetData:{},// 定义自定义指令的绑定值ifUpdate:true} }第二步然后要使用 ajax 的话，要在 index.html 里引入 jquery，这样就可以全局使用了：// index...

Vue.js Ajax动态参数与列表显示实现方法

Vue.js简介 vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。一、动态参数显示 ajax异步请求后，接收到返回的data参数并显示在前端 1.1 引入js，也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript" src="/js/jquery-2.1.3.js"></script>1.2 html <div id="app"> <p>{{ message }}</p> <button v-on:click="showDat...

vue中页面逆传值简单实现方法分享【图】

本文我们主要和大家分享vue中页面逆传值简单实现方法，我们都知道vue是一个单页应用，轻量，并且不会重复下载数据。当它从一个页面跳转到另一个页面时，原来的页面的vue实例和相关数据已经销毁了，要实现逆传值就要找到操作的对象及它的一些属性，希望能帮助到大家。【需求】　　要实现的需求很简单，页面从A -> B，用户在B触发操作，将一些数据带回到A页面，在网上找了好久也只看到有人问，但总找不到很好答案。要实现的效果图如下...

vue嵌套路由与404重定向实现方法分析_vue.js【图】

这次给大家带来怎样使用vue嵌套路由，使用vue嵌套路由的注意事项有哪些，下面就是实战案例，一起来看一下。第一部分： vue嵌套路由嵌套路由是什么？嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。比如在vue中，我们如果不使用嵌套路由，那么只有一个<router-view>，但是如果使用，那么在一个组件中就还有<router-view>，这也就构成了嵌套。为什么要使用嵌套路由？就比如在一个页面中， ...

Vue项目数据动态过滤的实现方法

本篇文章给大家带来的内容是关于Vue项目数据动态过滤的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。这个问题是在下在做一个Vue项目中遇到的实际场景，这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好问题是这样的：页面从后台拿到的数据是由0、1之类的key，而这个key代表的value比如0-女、1-男的对应关系是要从另外一个数据字典接口拿到的；类似于这样的Api：{"SEX_TYPE": [...

Vue木桶布局的实现方法（附代码）

本篇文章给大家带来的内容是关于Vue木桶布局的实现方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。公司最近在重构，使用的是Vue框架。涉及到一个品牌的布局，因为品牌的字符长度不一致，所以导致每一个的品牌标签长短不一。多行布局下就会导致每行的品牌布局参差不齐，严重影响美观。于是就有了本篇的木桶布局插件。木桶布局的实现是这样分步骤的：1、首先对要填放的内容进行排序，筛选出每一行的...

vue组件之间相互传递数据的实现方法（代码）

本篇文章给大家带来的内容是关于php协成实现的详解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、子组件给父组件传递数据<body><div id="app">父组件：{{total}}<br><son-component v-bind:total="total"></son-component></div><script>Vue.component(son-component,{template:<div>子组件：{{total}}+{{num}}={{add}}</div>,props:{total:Number},data(){return {num:10}},computed:{add:funct...

Vue.js的组件异步加载的实现方法（代码）

本篇文章给大家带来的内容是关于Vue.js的组件异步加载的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。当项目中组件特别多的时候，通过webpack打包的组件非常多，如果在访问其中某一个路由对应的组件时，加载了所有组件的文件，对于性能的消耗是非常浪费的。此时，我们就需要使用组件异步加载，即进入对应的组件时，只加载核心组件、代码和对应的组件代码。通过vue-router和webpack实现需要...

Vue登录注册的实现方法（代码解析）

本篇文章给大家带来的内容是关于Vue登录注册的实现方法（代码解析），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。关于vue登录注册，并保持登录状态，是vue玩家必经之路，网上也有很多的解决方法，但是有一些太过于复杂，新手可能会看的一脸懵逼，现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法。项目中有一些路由是需要登录才可以进入的，比如首页，个人中心等等有一些路由是不需要登录就可以进...

VUE3D轮播图封装实现方法【图】

这篇文章主要为大家详细介绍了VUE 3D轮播图封装实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文为大家分享了VUE 3D轮播图封装的具体代码，供大家参考，具体内容如下一、体验地址VUE 3D轮播图二、实现功能点（1）、无缝轮播（2）、进入变大、离开缩小（类3d切换效果）三、js代码 <template></template><script type="text/ecmascript-6">import {swiper, swiperSlide} from vue-awesome-sw...

vue路由懒加载的实现方法

本篇文章主要介绍了vue路由懒加载的实现方法，现在分享给大家，也给大家做个参考。本文介绍了vue的路由懒加载，分享给大家，具体如下：我们可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。component可以是一个箭头函数，我们可以使用动态 import语法来定义代码分块点；如果想在network里面看到动态加载的组件名字，可以加webpackChunkName；同时要在webpack.base.conf.js里面的output里面的f...

vue-cli创建的项目,配置多页面的实现方法

下面我就为大家分享一篇vue-cli创建的项目,配置多页面的实现方法，具有很好的参考价值，希望对大家有所帮助。vue官方提供的命令行工具vue-cli，能够快速搭建单页应用。默认一个页面入口index.html，那么，如果我们需要多页面该如何配置，实际上也不复杂假设要新建的页面是rule，以下以rule为例创建新的html页面<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scal...

Vue授权登录实现方法

这次给大家带来Vue授权登录实现方法，Vue授权登录的注意事项有哪些，下面就是实战案例，一起来看一下。项目采用Vue作为开发框架，用户浏览页面时有两种情况：一种是需要用户先登录之后才能继续浏览；另一种是用户无需登录即可随意浏览。在无需用户登录的页面中，可能包含需要用户信息的操作，此时就需要用户登录之后方能进行后续操作。因此，需要对授权登录策略进行区分。思路1.一般而言，我们为微信开发的H5页面，进入页面的时候就...

VUE - 技术教程分类

Vue.js 教程 Vue.js 安装 Vue.js 目录结构 Vue.js 起步 Vue.js 模板语法 Vue.js 计算属性 Vue.js 监听属性 Vue.js 样式绑定 Vue.js 事件处理器 Vue.js 表单 Vue.js 组件 Vue.js 自定义指令 Vue.js 路由 Vue.js 过渡 & 动画 Vue.js 混入 Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js 实例 vue 全部

VUE - 最热教程

vue权限问题的完美解决方案通过使用vue制作滑动堆叠组件（详细教程...vue渲染页面后div的滚动条保持在最底部...vue中格式化时间戳 vue里面父组件修改子组件样式的方法 vue判断input输入内容全是空格的方法解决vue中对象属性改变视图不更新的问题微信小程序第三方框架对比之 wepy / m...在使用vue中打包项目后刷新碰到404的问...vue实现鼠标移入移出事件代码实例

首页 / VUE / Vue+Koa2+mongoose写一个像素绘板的实现方法

Vue+Koa2+mongoose写一个像素绘板的实现方法

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue+Koa2+mongoose写一个像素绘板的实现方法】教程文章相关的互联网学习教程文章

Vue中的验证登录状态的实现方法

vue增加强缓存和版本号的实现方法【图】

vue.js通过自定义指令实现数据拉取更新的实现方法

Vue.js Ajax动态参数与列表显示实现方法

vue中页面逆传值简单实现方法分享【图】

vue嵌套路由与404重定向实现方法分析_vue.js【图】

Vue项目数据动态过滤的实现方法

Vue木桶布局的实现方法（附代码）

vue组件之间相互传递数据的实现方法（代码）

Vue.js的组件异步加载的实现方法（代码）

Vue登录注册的实现方法（代码解析）

VUE3D轮播图封装实现方法【图】

vue路由懒加载的实现方法

vue-cli创建的项目,配置多页面的实现方法

Vue授权登录实现方法

VUE - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程