4 Star 2 Fork 0

千年老树/zhszweb

Create your Gitee Account
Explore and code with more than 13.5 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
6 years ago
6 years ago
Loading...
README
MIT
typora-root-url
./

学生综合素质可视化系统(前端)

使用Vue.js 2.0ECharts.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字段为后端服务器的地址

运行项目

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

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

运行截图

后台管理

college

class

login

register

工程结构

目录树

📦src
 ┣ 📂api                    api封装和每个页面测试数据
 ┃ ┣ 📜api.js
 ┃ ┣ 📜dataApi.js
 ┃ ┣ 📜http.js
 ┃ ┣ 📜navdata.js
 ┃ ┣ 📜testclassdata.js
 ┃ ┣ 📜testdata.js
 ┃ ┗ 📜teststudent.js
 ┣ 📂assets
 ┃ ┗ 📜logo.png
 ┣ 📂components             组件
 ┃ ┗ 📜Logo.vue            首页导航组件
 ┣ 📂images
 ┣ 📂utils                  
 ┃ ┗ 📜tools.js             工具类
 ┣ 📂views-------------------子视图
 ┃ ┣ 📜Class.vue------------班级界面路由
 ┃ ┣ 📜College.vue----------学院界面路由
 ┃ ┣ 📜Data.vue-------------数据管理界面
 ┃ ┣ 📜Login.vue------------登录界面
 ┃ ┣ 📜Register.vue---------注册界面
 ┃ ┗ 📜Student.vue----------学生个人界面
 ┣ 📜App.vue-----------------首页
 ┣ 📜event-bus.js------------event-bus封装
 ┣ 📜main.js-----------------入口
 ┣ 📜router.js---------------路由配置
 ┗ 📜store.js----------------全局存储

整体架构

开发者

Gitee

GitHub

MIT License Copyright (c) 2019 FormatFa and old_tree and calfhead_admin and zw Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Cancel

Releases

No release

Contributors (2)

All

Activities

Pushed new commit to master branch almost 6 years ago, 2ad10c4...df410aa
Pushed new commit to master branch almost 6 years ago, c696ba6...2ad10c4
Pushed new commit to dev branch almost 6 years ago, c36c043...0005ad4
Pushed new commit to master branch almost 6 years ago, ef61728...c696ba6
Pushed new commit to dev branch almost 6 years ago, 539ecb5...c36c043
Load More
can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/old_tree/zhszweb.git
git@gitee.com:old_tree/zhszweb.git
old_tree
zhszweb
zhszweb
master

Search