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

harriszh 发布于2019-08-20 15:17 / 2127人阅读

摘要：又一个酷炫的后台管理，依然前后端分离用打开，还没适配移动端。如果觉得还行，欢迎项目地址项目后台地址我的博客地址好了，溜了溜了。。。

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

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

技术栈

前台:

vue-cli

vue

vue-router

webpak

canvas

ajax

后台:


wamp

PHP(ThinkPHP)

mysql

功能说明

用户登录

管理员登录

用户注册

Canvas

流星滑过

星星闪闪

后台折线

折线跟着鼠标滑动

Vue

弹出框组件

路由切换动画

通过Ajax调用后台接口

留言板(时间轴)

添加房屋信息

出租求租

出售求购

个人信息修改

密码修改

......

1.登录注册模块，流星与星星为canvas，登录注册切换动画为vue transition

2.后台管理页面，背景为canvas(会动的折线+跟着鼠标滑动) 功能模块切换为vue transition

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

总结

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

如果觉得还行，欢迎star
项目地址： https://github.com/hzzly/canv...
项目后台(PHP)地址： https://github.com/hzzly/canv...

我的博客地址：https://hzzly.github.io/

好了，溜了溜了。。。

云服务器服务器托管后台封装一个json 一个asp网站后台管理后台后台管理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82131.html

HTML5 Canvas玩转酷炫大波浪进度图

摘要：所以首选大波浪进度图。基本的原理是利用绘制矢量图和图片素材合成出波浪特效。了解方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。在绘制完矢量图之后，设置，然后再绘制企鹅图片，绘制顺序不能搞错。未完待续预告大波浪刷新 showImg(http://images2015.cnblogs.com/blog/105416/201612/105416-20161213115104...

JasinYip 2019-08-05 10:31 评论0 收藏0
一个纯CSS3实现的酷炫翻书效果

摘要：的三维元素比正常大，而时则比正常小，大小程度由该属性的值决定属性指定了观察者与平面的距离，使具有三维位置变换的元素产生透视效果。 showImg(https://segmentfault.com/img/bVzAjp); 项目地址：https://github.com/BUPT-HJM/c...demo地址：https://bupt-hjm.github.io/cs...欢迎大家的st...

fizz 2019-08-29 11:04 评论0 收藏0
一个纯CSS3实现的酷炫翻书效果

摘要：的三维元素比正常大，而时则比正常小，大小程度由该属性的值决定属性指定了观察者与平面的距离，使具有三维位置变换的元素产生透视效果。 showImg(https://segmentfault.com/img/bVzAjp); 项目地址：https://github.com/BUPT-HJM/c...demo地址：https://bupt-hjm.github.io/cs...欢迎大家的st...

xfee 2019-08-01 15:29 评论0 收藏0
玩转你的图片，各种图片效果的Canvas实现

摘要：前阵子因业务需求，需要对图片进行一些特殊处理，例如反相，高亮，黑白等，都是使用来实现要实现上述所说的各种效果，最核心的事情便是对图片的对象进行改动。后两个代表的是图片的宽高，不用多说。前阵子因业务需求，需要对图片进行一些特殊处理，例如反相，高亮，黑白等，都是使用Canvas来实现 ImageData 要实现上述所说的各种效果，最核心的事情便是对图片的ImageData对象进行改动。 ...

alexnevsky 2019-08-22 15:25 评论0 收藏0
从零开始开发一款H5小游戏(一) 重温canvas的基础用法

摘要：初衷从萌发写一个小游戏的想法到完成游戏开发用了大概一周的业余时间。在这里打算写一个系列教程，讲述怎样从零开始开发一款小游戏。在开始介绍如何写游戏前有必要重温一下。敬请期待从零开始开发一款小游戏二创造游戏的世界，启动发动机。本系列文章对应游戏代码已开源 Sinuous game。初衷从萌发写一个小游戏的想法到完成游戏开发用了大概一周的业余时间。这个过程积累了一些经验，也算是参透了一...

Betta 2019-08-05 17:50 评论0 收藏0