一個Vue+Canvas的酷炫后臺管理

harriszh 發布于2019-08-20 15:17 / 2280人閱讀

摘要：又一個酷炫的后臺管理，依然前后端分離用打開，還沒適配移動端。如果覺得還行，歡迎項目地址項目后臺地址我的博客地址好了，溜了溜了。。。

又一個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網站后臺管理后臺后臺管理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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