又一个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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template> <transition name=”fade-out”> … </transition> </template> <style> .fade-out-enter-active, .fade-out-leave-active { transition: all .5s } .fade-out-enter, .fade-out-leave-active { opacity: 0; transform: translateX(-400px); } </style> |
| 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
好了，溜了溜了。。。
</div> </div> </article> 文章来源: 一个Vue+Canvas的酷炫后台管理