又一个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
|
<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
好了，溜了溜了。。。
</div>
</div>
</article>