智能家居>> zhszweb>> 返回
项目作者： FormatFa

项目描述 ：
基于Flask,Vue.js 2.0的 学生综合素质可视化系统前端项目
高级语言： Vue
项目地址: git://github.com/FormatFa/zhszweb.git
创建时间： 2019-12-05T01:25:53Z
项目社区：https://github.com/FormatFa/zhszweb
开源协议：MIT License
下载


typora-root-url: ./

学生综合素质可视化系统（前端）

使用Vue.js 2.0和ECharts.js 实现 的 学生综合素质数据可视化系统,后端使用Python web 框架 Flask实现

实现流程:
(前端)

  • 分析原始数据,列出所需的图表,需要什么图
  • 使用测试数据画图表，定义图表需要的数据的json格式

(后端)

  • 建立数据库表
  • 根据前端需要的数据的json格式，查询数据数据返回对应数据
    (最后)
    前端请求后端数据，图表显示后端的数据

后端项目地址:
Gitee: https://gitee.com/calfhead_admin/zhsz_backend
GitHub https://github.com/FormatFa/zhsz_backend

前端项目地址:
Gitee: https://gitee.com/old_tree/zhszweb
GitHub: https://github.com/FormatFa/zhszweb

前端项目预览地址:
http://blog.formatfa.top/zhsz/

前端技术栈

  1. Vue CLI
    快速搭建基于webpack的vue开发环境
    https://cli.vuejs.org/zh/
  2. Vue.js
    前端js框架，https://cn.vuejs.org/
  3. VueRouter
    vue官方支持的路由管理，用来实现页面跳转，参数传递
    https://router.vuejs.org/zh/
  4. Element-UI
    前端UI框架，基于Vue 2.0的桌面端组件库
    https://element.eleme.cn/2.0/#/zh-CN/guide/design
  5. vue-echarts
    基于EChart封装的Vue组件,在Vue里使用起来很方便
    https://github.com/ecomfe/vue-echarts/blob/master/README.zh_CN.md
  6. Axios
    基于Promise的HTTP库，用来发送ajax请求和后台交互,支持请求和响应拦截
    http://www.axios-js.com/docs/
    https://www.jb51.net/article/145341.htm
  7. EventBus
    顶部导航组件和学院，班级等组件订阅事件和发布事件,
    https://www.w3cplus.com/vue/managing-state-in-vue-js.html?utm_source=tuicool&utm_medium=referral

实现功能

  • 登录注册
  • 上传数据
  • 可视化图表界面(学院，班级，个人)

安装使用

  • IDE (推荐VSCode)
  • 安装Node.js环境
  • npm 设置源为淘宝源(加快下载依赖速度)

vscode 插件安装

  • Vetur
    .vue文件代码高亮
  • REST Client(可选)
    http api测试
  • Debugger for Chrome(可选)
    chrome里调试vue项目

修改配置

  • 修改代理服务器
    打开vue.config.js,修改proxy下面的target字段为后端服务器的地址

运行项目

在工程根目录运行下面的命令

  • 安装依赖
    1. npm install
    2. 运行调试
    3. npm run serve
  • 打包项目
    1. npm run build

运行截图

后台管理

college

class

login

register

工程结构

目录树

  1. 📦src
  2.  ┣ 📂api                    api封装和每个页面测试数据
  3.  ┃ ┣ 📜api.js
  4.  ┃ ┣ 📜dataApi.js
  5.  ┃ ┣ 📜http.js
  6.  ┃ ┣ 📜navdata.js
  7.  ┃ ┣ 📜testclassdata.js
  8.  ┃ ┣ 📜testdata.js
  9.  ┃ ┗ 📜teststudent.js
  10.  ┣ 📂assets
  11.  ┃ ┗ 📜logo.png
  12.  ┣ 📂components             组件
  13.  ┃ ┗ 📜Logo.vue            首页导航组件
  14.  ┣ 📂images
  15.  ┣ 📂utils                  
  16.  ┃ ┗ 📜tools.js             工具类
  17.  ┣ 📂views-------------------子视图
  18.  ┃ ┣ 📜Class.vue------------班级界面路由
  19.  ┃ ┣ 📜College.vue----------学院界面路由
  20.  ┃ ┣ 📜Data.vue-------------数据管理界面
  21.  ┃ ┣ 📜Login.vue------------登录界面
  22.  ┃ ┣ 📜Register.vue---------注册界面
  23.  ┃ ┗ 📜Student.vue----------学生个人界面
  24.  ┣ 📜App.vue-----------------首页
  25.  ┣ 📜event-bus.js------------event-bus封装
  26.  ┣ 📜main.js-----------------入口
  27.  ┣ 📜router.js---------------路由配置
  28.  ┗ 📜store.js----------------全局存储

整体架构

开发者

Gitee