一个Vue+Cnavas酷炫后台管理
Switch branches/tags
Nothing to show
Clone or download
Latest commit f98424c Jun 1, 2017
Permalink
Failed to load latest commit information.
build vue+canvas Mar 21, 2017
config vue+canvas Mar 21, 2017
src vue+canvas Mar 21, 2017
static vue+canvas Mar 21, 2017
.babelrc vue+canvas Mar 21, 2017
.editorconfig vue+canvas Mar 21, 2017
.gitignore vue+canvas Mar 21, 2017
.postcssrc.js vue+canvas Mar 21, 2017
README.md Update README.md Jun 1, 2017
index.html vue+canvas Mar 21, 2017
package.json vue+canvas Mar 21, 2017

README.md

canvas-vue

又一个Vue+Cnavas酷炫的后台管理,依然前后端分离。

项目地址: https://github.com/hzzly/canvas-vue

demo地址: http://hjingren.cn/curriculum-design/

欢迎大家的star啦~

(服务器被勒索病毒破坏,后台数据也被破坏,暂时预览不了了,抱歉,可以把本项目和后台项目clone下面运行)

技术栈

前台:

vue-cli vue vue-router webpak canvas ajax

后台:

wamp PHP(ThinkPHP) mysql

功能说明

  • 登录
    • 用户登录
    • 管理员登录
  • 注册
    • 用户注册
  • Canvas
    • 流星滑过
    • 星星闪闪
    • 后台折线
    • 折线跟着鼠标滑动
  • Vue
    • 弹出框组件
    • 路由切换动画
    • 通过Ajax调用后台接口
  • 留言板(时间轴)
  • 添加房屋信息
  • 出租 求租
  • 出售 求购
  • 个人信息修改
  • 密码修改
  • ......

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

canvas-login

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

admin

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

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

总结

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

如果觉得还行,欢迎star

项目地址: https://github.com/hzzly/canvas-vue

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

好了,溜了溜了。。。