导航
导航
文章目录
  1. 技术栈
  2. 功能说明
  3. 目录结构
  4. 技术点
  5. 总结

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

又一个Vue+Cnavas酷炫的后台管理,依然前后端分离(用PC打开,还没适配移动端)。

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

技术栈

前台:

  • vue-cli
  • vue
  • vue-router
  • webpack
  • canvas
  • ajax

后台:

  • wamp
  • PHP(ThinkPHP)
  • mysql

功能说明

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

1.登录注册模块

canvas-login

2.后台管理页面

admin

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

msgboard

目录结构

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
<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>
  • 登录注册星星与流星–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

好了,溜了溜了。。。