一个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.co

barnettyj

17806人浏览 · 2017-04-06 09:16:13

barnettyj · 2017-04-06 09:16:13 发布

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

canvas-login

2.后台管理页面

admin

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

msgboard

目录结构

     
     
      
      |——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

好了，溜了溜了。。。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^