一个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.登录注册模块

2.后台管理页面

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

目录结构

|——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转换动画

<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

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

好了，溜了溜了。。。