系列文章目录

Python搭建自己的基金查看管理Web项目(一)
Python搭建自己的基金查看管理Web项目(二)
Python搭建自己的基金查看管理Web项目(添加预览历史数据功能)

文章目录

系列文章目录
前言
一、前端Vue框架的搭建
- 1. 安装vue-cli然后使用vue-cli初始化一个vue项目
- 2. 安装一些必要的库，便于后续使用
- 3. 配置main.js
- 4. 配置API调用方法
- 5. API调用示例
二、后端API改造
- 1.统计接口
- 2.修改返回方式
三、前端细节完善
- 1. 主页面添加
- 2. 重置图表功能
- 3. 剥离添加基金功能到新页面
- 4. 重写主页面标签过滤功能与数据统计功能
结果
- 总结

前言

之前一直用python dganjo 自带的视图模板来开发前端页面，但是当功能慢慢复杂起来之后，就感觉这个用起不来不是很舒服，所以正好也拿当前热门的前后端分离的理念来练练手，我们这次就用vue来作为前端的框架然后python dganjo 只提供rest full 服务

一、前端Vue框架的搭建

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue官方文档

1. 安装vue-cli然后使用vue-cli初始化一个vue项目

npm install -g @vue/cli
vue create web-app

接下来的一些选项中，选择vue3， router(history model)

2. 安装一些必要的库，便于后续使用

npm install --save axios
npm install --save chart.js
npm install --save element-plus
npm install --save vue-luxon
npm install --save vue3-chart-v2

最后所有的依赖如下所示：

  "dependencies": {"@j-t-mcc/vue3-chartjs": "^1.2.0","axios": "^0.24.0","chart.js": "^3.7.0","core-js": "^3.6.5","element-plus": "^1.2.0-beta.6","vue": "^3.0.0","vue-luxon": "^0.10.0","vue-router": "^4.0.12","vue3-chart-v2": "^0.8.3","vuex": "^4.0.2"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0"}

3. 配置main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const { DateTime } = require("luxon");const app = createApp(App)
// 绘制图表相关的配置
app.config.globalProperties.$luxonDateTime = DateTime;app.use(router)
app.use(ElementPlus)
app.mount('#app')

4. 配置API调用方法

因为我们需要调用python的restfull接口，所以我们这边要编写一个用来调用API接口的方法，这边使用的是axios，但是也要简单的封装一下，所以我们新建一个 utils/request.js

import axios from "axios";// create an axios instance
const service = axios.create({baseURL: process.env.VUE_APP_BASEAPI, // api的base_urltimeout: 100000 // request timeout
});// request interceptor
service.interceptors.request.use(config => {console.log(process.env)return config;},error => {// Do something with request errorconsole.log(error); // for debugPromise.reject(error);}
);// respone interceptor
service.interceptors.response.use(response => {let res = response.data;if (res.errno == 0 || res.errno == 200) {return response.data;} else if (res.errno == 401) {console.log("err" + res); // for debug} else {return response.data;}},error => {console.log("err" + error); // for debugreturn Promise.reject(error);}
);export default service;

5. API调用示例

我们这边把所有的API接口都放到同一个模块里面，新建 apis/funds.js

import request from '@/utils/request'
export function getAllData() {return request({url: `/funds`,method: 'get'})
}

这样的话，一个简单的前端就搭建好了接下来我们修改下后端的接口，因为之前是直接返回渲染视图，所以我们要把那些方法都改造一下，改成API接口的形式

二、后端API改造

后端改造比较简单，因为我们之前是直接把数据构造完以后，然后render到对应的页面，但是我们后端没有页面了，所以我们直接返回数据就可以(json格式)

1.统计接口

我们先统计下我们一共需要多少接口

第一次加载页面的时候获取所有的基金数据的接口 - /funds
添加一个新的基金的接口 - /funds/add
删除基金的接口 - /funds/delete
更新基金数据的接口 - /funds/update
刷新每日数据的基金接口 - /funds/refresh

2.修改返回方式

之前我们是直接render到对应的页面，这次我们直接返回json数据，python已经有一些内置的方法给我们使用

代码如下：

return HttpResponse(json.dumps(context))

三、前端细节完善

现在我们前端框架已经搭建完成后端API接口也准备完毕，接下来我们之前实现的那些功能都迁移到新的前端框架

1. 主页面添加

新建views/Home.vue然后我们主要使用element-ui来进行页面的编写

<template><div class="container"><h2>{{ cur_date }}</h2><div class="head-opt-box "><div><el-button v-for="item in filters" :key="item.name" @click="handleFilterData(item.name)">{{ item.name }}</el-button></div><div><el-button type="primary" @click="goAdd">add fund</el-button><el-button type="primary" @click="handleRefreshData">refresh</el-button></div></div><div v-if="funds.length > 0"><el-table :data="funds" style="width: 100%" v-loading="dataLoading"><el-table-column type="expand"><template #default="props"><FundBaseChart v-bind:fundObj="props.row"></FundBaseChart></template></el-table-column><el-table-column prop="fund_id" label="ID" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="tag" label="Tag"><template #default="scope"><span v-if="!scope.row.edit" @dblclick="scope.row.edit = true">{{scope.row.tag}}</span><el-input v-else v-model="scope.row.tag" /></template></el-table-column><el-table-column prop="dwjz" label="当日净值" /><el-table-column prop="gsz" label="估算净值" /><el-table-column prop="gszzl" label="估涨(%)"><template #default="scope"><el-tag :type="scope.row.gszzl > 0 ? 'danger' : 'info'">{{scope.row.gszzl}}</el-tag></template></el-table-column><el-table-column prop="amount" label="Amount"><template #default="scope"><span v-if="!scope.row.edit" @dblclick="scope.row.edit = true">{{scope.row.amount}}</span><el-input v-else v-model="scope.row.amount" /></template></el-table-column><el-table-column prop="address" label="OPT"><template #default="scope"><el-button type="text" size="small" @click="refreshHistoryData(scope.row.fund_id)">refresh</el-button><el-button type="text" size="small" @click="updateFund(scope.row)">update</el-button><el-button type="text" size="small" @click="deleteFund(scope.row.fund_id)">del</el-button></template></el-table-column></el-table><div class="total-amt"><span>Total: </span> {{ totalAmt }}</div></div></div>
</template>

数据处理

<script>
// @ is an alias to /src
import {getAllData,refreshData,updateFunds,deleteFund,
} from "@/apis/funds";
import { defineComponent } from "vue";
export default defineComponent({name: "home",components: {},data() {return {dataLoading: false,cur_date: new Date(),funds: [],cachedFunds: [],totalAmt: 0,filters: [{ name: "白酒", key: "bj" },{ name: "医药", key: "yy" },{ name: "制造", key: "zz" },{ name: "其他", key: "qt" },{ name: "清除", key: "cc" },],};},created() {this.initData();},methods: {async initData() {this.dataLoading = true;let data = await getAllData();this.funds = data.funds;this.cachedFunds = data.funds;this.funds.forEach((item) => {item["chartData"] = { labels: [], data: [] };item["edit"] = false;});this.totalAmt = this.funds.map((a) => a.amount).reduce((a, b) => Number(a) + Number(b), 0);this.dataLoading = false;},async handleRefreshData() {let res = await refreshData();this.initData();},async updateFund(item) {this.$confirm("确定修改当前内容？", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {let data = {fund_id: item.fund_id,tag: item.tag,amount: item.amount,};updateFunds(data).then(() => {this.initData();});}).catch(() => {});},async deleteFund(id) {this.$confirm("确定刷新全部历史数据？", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {deleteFund(id).then(() => {this.initData();});});},enableEditValue(item) {item.edit = true;}},
});
</script>

2. 重置图表功能

之前我们使用的chart.js现在迁移到vue之后我们继续使用chart.js但是用法是不一样的

我们首先新建一个展示图表的组件，新建 /components/FundBaseChart.vue,这个组件接受一个fund对象(id,name),然后再启动渲染的时候会调用获取数据的API接口，然后拿到数据画出图表，同时也提供了时间段的可选（1个月，3个月，6个月，3年）默认3个月

<template><el-row style=""><el-col :span="20" class="col-10"><vue3-chart-js :id="doughnutChart.id" :type="doughnutChart.type" :data="doughnutChart.data" @before-render="beforeRenderLogic":options="doughnutChart.options" ref="chartRef" height="70"></vue3-chart-js></el-col><el-col :span="4" class="chartOptBox"><el-row><el-button type="success" @click="updateChart('m1')" plain>Last 1 month</el-button></el-row><el-row><el-button type="success" @click="updateChart('m3')" plain>Last 3 month</el-button></el-row><el-row><el-button type="success" @click="updateChart('m6')" plain>Last 6 month</el-button></el-row><el-row><el-button type="success" @click="updateChart('m9')" plain>Last 9 month</el-button></el-row><el-row><el-button type="success" @click="updateChart('y3')" plain>Last 3 Year</el-button></el-row></el-col></el-row>
</template><script>
function addZero(m) {return m < 10 ? "0" + m : m;
}
function transformTime(timestamp) {if (timestamp) {var time = new Date(timestamp);var y = time.getFullYear();var M = time.getMonth() + 1;var d = time.getDate();var h = time.getHours();var m = time.getMinutes();var s = time.getSeconds();return y + "-" + addZero(M) + "-" + addZero(d);} else {return "";}
}
import { getHistoryByFundId } from "@/apis/funds";
import { defineComponent } from "vue";
import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";
import "../../static/js/chartjs-adapter-date-fns.bundle.min.js";
import { ref } from "vue";
export default defineComponent({name: "FundBaseChart",components: {Vue3ChartJs,},props: {fundObj: {type: Object,required: true,},},data() {return {doughnutChart: {},chartRef: ref(null),cachedFundData: [],};},created() {this.doughnutChart = {id: "doughnut",type: "line",data: {labels: [],datasets: [{label: "My First Dataset",backgroundColor: ["#41B883"],data: [],},],},options: {plugins: {title: {display: true,text: "累计净值走势",},legend: {position: "right",},},},};this.init();},methods: {async init() {let fundRates = await getHistoryByFundId(this.fundObj.fund_id);this.cachedFundData = fundRates;let labels = [];let data = [];let curTimeStamp = Date.parse(new Date());let lastM3TimeStamp = curTimeStamp - 3 * 30 * 24 * 3600 * 1000;fundRates.filter((item) => item.date > lastM3TimeStamp).forEach((item) => {if (item.date && item.value) {// labels.push(transformTime(item.date));labels.push(this.$luxonDateTime.fromMillis(item.date).toJSDate());data.push(item.value);}});let opts = {x: {type: "time",display: true,offset: true,time: {unit: "week",},},};this.doughnutChart.data.labels = labels;this.doughnutChart.data.datasets[0].data = data;this.doughnutChart.data.datasets[0].label = this.fundObj.name;this.doughnutChart.options["scales"] = opts;this.$refs.chartRef.update();},beforeRenderLogic() {},updateChart(filter) {let labels = [];let data = [];let curTimeStamp = Date.parse(new Date());let lastM3TimeStamp = 0;let unit = "week";if (filter == "m1") {lastM3TimeStamp = curTimeStamp - 1 * 30 * 24 * 3600 * 1000;unit = "day";} else if (filter == "m3") {lastM3TimeStamp = curTimeStamp - 3 * 30 * 24 * 3600 * 1000;} else if (filter == "m6") {lastM3TimeStamp = curTimeStamp - 6 * 30 * 24 * 3600 * 1000;} else if (filter == "m9") {lastM3TimeStamp = curTimeStamp - 9 * 30 * 24 * 3600 * 1000;unit = "month"} else {lastM3TimeStamp = curTimeStamp - 3 * 12 * 30 * 24 * 3600 * 1000;unit = "month";}this.cachedFundData.filter((item) => item.date > lastM3TimeStamp).forEach((item) => {if (item.date && item.value) {labels.push(this.$luxonDateTime.fromMillis(item.date).toJSDate());data.push(item.value);}});let opts = {x: {type: "time",display: true,offset: true,time: {unit: unit,},},};this.doughnutChart.data.labels = labels;this.doughnutChart.data.datasets[0].data = data;this.doughnutChart.options["scales"] = opts;this.$refs.chartRef.update();},},
});
</script>
<style lang="css" scoped>
.chartOptBox {padding-top: 65px;padding-left: 10px;
}.chartOptBox button {margin : 3px;
}
</style>

然后我们把这个组件引入到Home页面

import FundBaseChart from "@/components/FundBaseChart";components: {FundBaseChart,}

主页面图表引入

  <el-table-column type="expand"><template #default="props"><FundBaseChart v-bind:fundObj="props.row"></FundBaseChart></template></el-table-column>

结果展示

3. 剥离添加基金功能到新页面

因为后来我发现添加基金其实是个低频操作，所以我觉得把他移到一个新的页面，新建 views/Add.vue然后使用el-form新建一个提交表单

<template><div class="form-wrapper"><div class="title"><span>ADD NEW FUND</span></div><el-form ref="form" :model="form" label-width="120px"><el-form-item label="Fund Id"><el-input v-model="form.fund_id"></el-input></el-form-item><el-form-item label="Fund Tag"><el-input v-model="form.tag"></el-input></el-form-item><el-form-item label="Init Amount"><el-input v-model="form.amount"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">Submit</el-button><el-button @click="goHome">Back to home</el-button></el-form-item></el-form></div>
</template><script>
import { addFund } from "@/apis/funds";
export default {data() {return {form: {fund_id: "",tag: "",amount: "",},};},methods: {async onSubmit() {await addFund(this.form);this.$alert("Add fund Success", "Title", {confirmButtonText: "OK",});},goHome() {this.$router.push("/");},},
};
</script>
<style lang="css" scoped>
.form-wrapper {width: 40%;margin: 0 auto;
}.title {font-size: 23px;font-weight: 800;margin: 80px 0px;
}
</style>

4. 重写主页面标签过滤功能与数据统计功能

之前标签过滤功能是在后端实现的，那样的话每次点击标签都要重新请求数据，这样设计一是会拖慢网页的响应速度，而来是感觉这样也不是很合理，所以我把过滤功能移到前端实现

后端API删除过滤功能的代码
前端页面添加标签按钮

    <div><el-button v-for="item in filters" :key="item.name" @click="handleFilterData(item.name)">{{ item.name }}</el-button></div>

具体实现逻辑

 handleFilterData(key) {if (key == "清除") {this.funds = this.cachedFunds;this.totalAmt = this.funds.map((a) => a.amount).reduce((a, b) => Number(a) + Number(b), 0);return;}let fixedList = ["白酒", "医药", "医疗", "制造"];if (fixedList.indexOf(key) > -1) {this.funds = this.cachedFunds.filter((item) => item.tag.indexOf(key) > -1);this.totalAmt = this.funds.map((a) => a.amount).reduce((a, b) => Number(a) + Number(b), 0);return;}if ("其他" == key) {this.funds = this.cachedFunds.filter((item) => {for (let i = 0; i < fixedList.length; i++) {let obj = fixedList[i];if (item.tag.indexOf(obj) > -1) {return false;}}return true;});this.totalAmt = this.funds.map((a) => a.amount).reduce((a, b) => Number(a) + Number(b), 0);}},

结果

总结

把UI从后端分离出来以后，前端的实现感觉就更加自由有很多功能都可以很容易的实现，而且以后扩展也来也很方便，而且也加固了一些自己对新版Vue和element-ui的认知，下一章计划实现基金高低点提醒，可以一目了然的了解那些基金已经到达了历史最低和最高点

Python搭建自己的基金查看管理Web项目（实现前后端分离）相关推荐

springBoot 搭建web项目（前后端分离，附项目源代码地址）
2019独角兽企业重金招聘Python工程师标准>>> 概述该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端 ...
java开源springboot项目_springBoot 搭建web项目（前后端分离，附项目源代码地址）...
概述该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端分离,利用ajax交互. springBoot-example-ui 注意 ...
（2022）Springboot+vue3项目开发前后端分离书法图书管理Coun
项目地址:https://github.com/KKJava1/Coun Coun是基于Springboot+vue3 项目采用了前后端分离技术:后端采用 springBoot 基本框架,数据库连接池 ...
酒店管理|基于Springboot+Vue前后端分离实现酒店管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.毕业设计.简历模板.学习资料.面试题库.技术互助 ...
Django个人博客搭建教程---用Vue写你的第一个前后端分离页面
一.构建Vue.js前端项目 npm install vue-cli -g npm install webpack -g 在项目根目录下(和你的app目录平级) vue init webpack my ...
java短视频开发技术_看Java学员如何用前后端分离技术搭建短视频健身APP
知了堂在教学过程中一直十分注重学员的实践能力,每阶段结束必有项目考核,全面检验分析学员学习效果.为更好的进行下一阶段的课程学习,本周一Java32班学员迎来了第二阶段的项目考核. 让我们来看看此次考核 ...
京东上千页面搭建基石——CMS前后端分离演进史
声明:本文来自京东张开涛的微信公众号(kaitao-1234567),授权CSDN转载,如需转载请联系作者. 作者:于林坤,2012年加入京东,网站移动研发部频道业务技术负责人,先后多次主导京东商城首 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
Python Web前后端分离框架Django+Vue搭建
Python Web前后端分离框架Django+Vue搭建对前面所学知识的归纳整理,感兴趣的可以看看,欢迎指正. 一.前后端分离框架介绍本项目基于 Python 的 Web 框架开发,采用前后端分 ...

Python搭建自己的基金查看管理Web项目（实现前后端分离）