一个Vue+Canvas的酷炫后台管理

又一个Vue+Cnavas酷炫的后台管理，依然前后端分离（用PC打开，还没适配移动端）。https://hzzly.github.io/2017/03/21/%E4%B8%80%E4%B8%AAVue-Canvas%E7%9A%84%E9%85%B7%E7%82%AB%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86/

项目地址： https://github.com/hzzly/canvas-vue
demo地址： http://hjingren.cn/curriculum-design/
账号：hzzly 密码：123456
欢迎大家的star啦~

技术栈

前台:

> 1. vue-cli
> 2. vue
> 3. vue-router
> 4. webpak
> 5. canvas
> 6. ajax

后台:

> 1. wamp
> 2. PHP(ThinkPHP)
> 3. mysql

功能说明

• 登录
  • 用户登录
  • 管理员登录
• 注册
  • 用户注册
• Canvas
  • 流星滑过
  • 星星闪闪
  • 后台折线
  • 折线跟着鼠标滑动
• Vue
  • 弹出框组件
  • 路由切换动画
  • 通过Ajax调用后台接口
• 留言板(时间轴)
• 添加房屋信息
• 出租 求租
• 出售 求购
• 个人信息修改
• 密码修改
• ……

1.登录注册模块

2.后台管理页面

3.留言板(时间轴特效)

目录结构

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

|——canvas-vue/ | |——build/ | |——confg/ | |——node_modules/ | |——src/ | | |——assets/ //静态文件 | | |——components/ //页面组件 | | | |——Menu.vue //登录注册加载页面 | | | |——Home.vue //后台首页 | | | |——Login.vue //登录页面 | | | |——Regist.vue //注册页面 | | | |——Navbar.vue //我的发布 | | | |——Messageboard.vue //留言板页面 | | | |——... //等等 | | |——router/ | | | |——index.js //页面路由 | | |——App.vue //父组件 | | |——main.js //入口文件 | |——static/ | |——.babelrc | |——.editorconfig | |——.gitgnore | |——index.html | |——package.json | |——README.md

技术点

• 登录注册切换动画–vue的transition转换动画

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

• 登录注册星星与流星–canvas

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

let canvas = document.getElementById( 'canvas'), ctx = canvas.getContext( '2d'), width = window.innerWidth, height = window.innerHeight, //实例化月亮和星星。流星是随机时间生成，所以只初始化数组 moon = new Moon(ctx, width, height), stars = new Stars(ctx, width, height, 200), meteors = [], count = 0 canvas.width = width; canvas.height = height; const meteorGenerator = ()=> { //x位置偏移，以免经过月亮 let x = Math.random() * width + 800 meteors.push( new Meteor(ctx, x, height)) //每隔随机时间，生成新流星 setTimeout( ()=> { meteorGenerator() }, Math.random() * 2000) } const frame = ()=>{ count++ count % 10 == 0 && stars.blink() moon.draw() stars.draw() meteors.forEach( (meteor, index, arr)=> { //如果流星离开视野之内，销毁流星实例，回收内存 if (meteor.flow()) { meteor.draw() } else { arr.splice(index, 1) } }) requestAnimationFrame(frame) } meteorGenerator() frame()

总结

这个项目还没有完成，后期将不定期更新，敬请期待。。

如果觉得还行，欢迎star
项目地址： https://github.com/hzzly/canvas-vue
项目后台(PHP)地址： https://github.com/hzzly/canvas-vue-backstage

好了，溜了溜了。。。