zhszweb

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 26 Open GitHub ↗

基于Flask,Vue.js 2.0的学生综合素质可视化系统前端项目

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

---

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
6. 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
```

### 运行截图

![后台管理](https://raw.githubusercontent.com/FormatFa/zhszweb/dev/preview/admin.PNG)

![college](https://raw.githubusercontent.com/FormatFa/zhszweb/dev/preview/college.PNG)

![class](https://raw.githubusercontent.com/FormatFa/zhszweb/dev/preview/class.PNG)

![login](https://raw.githubusercontent.com/FormatFa/zhszweb/dev/preview/login.PNG)

![register](https://raw.githubusercontent.com/FormatFa/zhszweb/dev/preview/register.PNG)

## 工程结构

### 目录树

```
📦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----------------全局存储

```

## 整体架构

![](https://raw.githubusercontent.com/FormatFa/zhszweb/dev/preview/项目架构.png)

### 开发者

Gitee

- [Gitee@old_tree](https://gitee.com/old_tree)
- [Gitee@calfhead_admin](https://gitee.com/calfhead_admin)
- [Gitee@BigdataZW](https://gitee.com/BigdataZW)
- [Gitee@FormatFa](https://gitee.com/FormatFa)
- 
GitHub

- [GitHub@FormatFa](https://github.com/FormatFa)
- [GitHub@CattleHome](https://github.com/CattleHome)
- [GitHub@old_tree](https://github.com/old-tree)
- [GitHub@peterparker-bot](https://github.com/peterparker-bot)

zhszweb

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README