本文介绍如何使用Vue和Python搭建基金查看管理Web项目，包括前端Vue框架搭建、后端API改造及前端细节完善等内容。
系列文章目录
Python搭建自己的基金查看管理Web项目(一)
Python搭建自己的基金查看管理Web项目(二)
Python搭建自己的基金查看管理Web项目(添加预览历史数据功能)
文章目录
前言
之前一直用python dganjo 自带的视图模板来开发前端页面，但是当功能慢慢复杂起来之后，就感觉这个用起不来不是很舒服，所以正好也拿当前热门的前后端分离的理念来练练手，我们这次就用vue来作为前端的框架然后python dganjo 只提供rest full 服务
一、前端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_url
timeout: 100000 // request timeout
});
// request interceptor
service.interceptors.request.use(
config => {
console.log(process.env)
return config;
},
error => {
// Do something with request error
console.log(error); // for debug
Promise.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 debug
return 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的认知，下一章计划实现基金高低点提醒，可以一目了然的了解那些基金已经到达了历史最低和最高点
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
