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

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

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

又一个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/

好了，溜了溜了。。。

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

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

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

一个纯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