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

灰太狼 2021-09-15 12:30 425阅读 0赞

> 又一个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][https_github.com_hzzly_canvas-vue]  
demo地址： [http://hjingren.cn/curriculum-design/][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转换动画

>  *  登录注册星星与流星–canvas

<table> 
 <tbody> 
  <tr> 
   <td> <pre></pre> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> </td> 
   <td> <pre></pre> 
    <div> 
     <span>let</span> canvas = 
     <span>document</span>.getElementById( 
     <span>‘canvas’</span>), 
    </div> 
    <div>
      ctx = canvas.getContext( 
     <span>‘2d’</span>), 
    </div> 
    <div>
      width = 
     <span>window</span>.innerWidth, 
    </div> 
    <div>
      height = 
     <span>window</span>.innerHeight, 
    </div> 
    <div> 
     <span>//实例化月亮和星星。流星是随机时间生成，所以只初始化数组</span> 
    </div> 
    <div>
      moon = 
     <span>new</span> Moon(ctx, width, height), 
    </div> 
    <div>
      stars = 
     <span>new</span> Stars(ctx, width, height, 
     <span>200</span>), 
    </div> 
    <div>
      meteors = [], 
    </div> 
    <div>
      count = 
     <span>0</span> 
    </div> 
    <div></div> 
    <div>
      canvas.width = width; 
    </div> 
    <div>
      canvas.height = height; 
    </div> 
    <div></div> 
    <div> 
     <span>const</span> meteorGenerator = 
     <span><span>()</span>=&gt;</span> { 
    </div> 
    <div> 
     <span>//x位置偏移，以免经过月亮</span> 
    </div> 
    <div> 
     <span>let</span> x = 
     <span>Math</span>.random() * width + 
     <span>800</span> 
    </div> 
    <div>
      meteors.push( 
     <span>new</span> Meteor(ctx, x, height)) 
    </div> 
    <div></div> 
    <div> 
     <span>//每隔随机时间，生成新流星</span> 
    </div> 
    <div>
      setTimeout( 
     <span><span>()</span>=&gt;</span> { 
    </div> 
    <div>
      meteorGenerator() 
    </div> 
    <div>
      }, 
     <span>Math</span>.random() * 
     <span>2000</span>) 
    </div> 
    <div>
      } 
    </div> 
    <div></div> 
    <div> 
     <span>const</span> frame = 
     <span><span>()</span>=&gt;</span>{ 
    </div> 
    <div>
      count++ 
    </div> 
    <div>
      count % 
     <span>10</span> == 
     <span>0</span> &amp;&amp; stars.blink() 
    </div> 
    <div>
      moon.draw() 
    </div> 
    <div>
      stars.draw() 
    </div> 
    <div></div> 
    <div>
      meteors.forEach( 
     <span>(<span>meteor, index, arr</span>)=&gt;</span> { 
    </div> 
    <div> 
     <span>//如果流星离开视野之内，销毁流星实例，回收内存</span> 
    </div> 
    <div> 
     <span>if</span> (meteor.flow()) { 
    </div> 
    <div>
      meteor.draw() 
    </div> 
    <div>
      } 
     <span>else</span> { 
    </div> 
    <div>
      arr.splice(index, 
     <span>1</span>) 
    </div> 
    <div>
      } 
    </div> 
    <div>
      }) 
    </div> 
    <div>
      requestAnimationFrame(frame) 
    </div> 
    <div>
      } 
    </div> 
    <div>
      meteorGenerator() 
    </div> 
    <div>
      frame() 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

### 总结 ###

这个项目还没有完成，后期将不定期更新，敬请期待。。

如果觉得还行，欢迎star  
项目地址： [https://github.com/hzzly/canvas-vue][https_github.com_hzzly_canvas-vue]  
项目后台(PHP)地址： [https://github.com/hzzly/canvas-vue-backstage][https_github.com_hzzly_canvas-vue-backstage]

好了，溜了溜了。。。

</div>
                </div>
            </article>

[https_github.com_hzzly_canvas-vue]: https://github.com/hzzly/canvas-vue
[http_hjingren.cn_curriculum-design]: http://hjingren.cn/curriculum-design/
[canvas-login]: http://omt3u4bph.bkt.clouddn.com/canvas-login.gif
[admin]: http://omt3u4bph.bkt.clouddn.com/admin.gif
[msgboard]: http://omt3u4bph.bkt.clouddn.com/msgboard.gif
[https_github.com_hzzly_canvas-vue-backstage]: https://github.com/hzzly/canvas-vue-backstage