vue做前端后续

1. node_modules包含了各种依赖，使用echarts，本来在一个全新的vue，移植到老项目报错，下载echarts各种报错，最后发现是在node_modules中已经存在这个依赖，不用再次下载，提示的错误也是不对应的，直接使用echarts就可以。

2. 之前后台日期都是一样的，而且存在一个缺陷就是2010-10-10 到2010-10-20 最终查到的日期是2010-10-11到2010-10-20，已改正

3. echarts从后台获取数据，所以在初始化时，

this.seven_option.series[0].data =[] this.seven_option.xAxis.data = [] this.seven_chart.setOption(this.seven_option)

4. 关于Vue实例的生命周期created和mounted的区别

5. Vue系列——在vue项目中使用echarts

6. 对于双大括号不起作用，误操作发现更改源码，vue自动重新编译执行，就会使mustache语法起作用。所以将对双大括号赋值更改位置到从后台获取数据，在前端画图的地方。

后台代码：

#-*-coding:UTF-8 -*-
import os,sys
import flask
from flask import Flask
import socket
from flask import request
from flask import redirect
from flask import make_response,render_template
app = Flask(__name__)
from flask import Flask, render_template, jsonify
from random import *

from dateutil.parser import parse
import random
import datetime
import time
import json
app = Flask(__name__,static_folder = "./dist/static",template_folder = "./dist")

from flask_cors import CORS
CORS(app, resources=r'/*')
@app.route('/test', methods=['POST', 'GET'])
def test():
id=request.json['id']
beg=request.json['beginTime']
#print(beg)
end=request.json['endTime']
#print(end)
selectContent=request.json['selectContent']
a = parse(end)
b = parse(beg)
#print(b)
c=(a-b).days
#print(c)
dic={}
dic['data']=[]
dict={}
dict['time']=b.strftime('%Y-%m-%d')
dict['num']=random.randint(60,100)
dic['data'].append(dict)
for i in range(c):
dict={}
b = b + datetime.timedelta(days = 1)
astr=b.strftime('%Y-%m-%d')
dict['time']=astr
dict['num']=random.randint(60,100)
dic['data'].append(dict)
#print(dic)
dic['selectContent']=selectContent
dic['id']=id
print(dic)
return json.dumps(dic)
if __name__ == "__main__":
hostname = socket.gethostname()
ip='0.0.0.0'
app.run( host=ip,port=5000,debug=False )
前端：

<template>
<div class="hello" ref="openText">
<div class="type-list" style="height:465.6px;" >
<ul id="nav" >
<li ><a href="#">1肝功能肾功能</a>
<ul>
<li ><a href="#" id="LiverAndKidneyInfoArray.SOD" name='超氧化歧化酶' @click='fn($event)' >1.1超氧化歧化酶</a>
</ul>
</li>
<li ><a href="#">2尿十项</a><i></i>
<ul >
<li><a href="#" id="UrinalysisInfoArray.SG" name='（干化学）比重' @click=' fn($event)'>2.1（干化学）比重</a></li>
</ul>
</li>
<li><a href="#">3血常规</a>
<ul>
<li><a href="#" id="BloodRoutineInfoArray.WBC1" @click='fn($event)'>3.1白细胞计数 (WBC) </a></li>
</ul>
</li>
<li><a href="#">4血脂</a>
<ul>
<li><a href="#" id="BloodLipidsInfoArray.Cho" @click='fn($event)'>4.1总胆固醇（Cho)（mmol/L)</a></li>
</ul>
</li>

<div class="type-main" style="height: 465.6px;">
<div align="center" class="type-main-banner">
注意：请务必认真填写!
</div>
<br/>
起始日期:
<input type="date" v-model="beginTime" id="time1" name="time" required="required" style="height: 22px;width: 145px;"/>
<br/>
截至日期:
<input type="date" v-model="endTime" id="time2" name="time" required="required" style="height: 22px;width: 145px;"/>

<div class="content">
<h2 class="prompt_p"> {{this.name}}变化趋势图</h2>
<div class="seven_echarts" id="seven">
</div>
</div>
</div>
</div>
</div>
</template>

name: 'Shopcar',
data() {
return {

name:'',
id11:'',
seven_chart: null,
month_chart: null,
seven_option: {
title: {
x: 'left',
align: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高值',]
},
grid: {
left: '20%',
right: '2%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
//magicType: {type: ['line', 'bar']},//柱状图和西和折线图切换
restore: {},//刷新
//saveAsImage: {},//将图表以折线图的形式展现
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
name: "含量",
nameLocation: 'end',
type: 'value',
axisLabel: {
formatter: '{value} '
}
},
series: [
{
name: '最高值',
type: 'line',
data: [],
lineStyle: {//设置折线色颜色
color: 'green'
},
itemStyle: {//设置折线折点的颜色
normal: {
color: 'green'
}
}
},

],
},

}
},
mounted: function () {
this.get_echarts();
},
getTypeMain(item) {
for (var i = 0; i < this.typeList1.length; i++) {
this.typeList[i].active = false;
}
item.active = !item.active;
//console.log(item.name.substring(0, 1));
this.hwdata.hwindex = item.name.substring(0, 1);

methods: {
get_echarts: function () {

this.seven_chart = this.echarts.init(document.getElementById("seven"));

//把配置和数据放这里
this.seven_option.series[0].data =[]
this.seven_option.xAxis.data = []
this.seven_chart.setOption(this.seven_option)

},
fn(event) {
this.id11 = event.currentTarget.id; // event.currentTarget获取当前点击元素DOM
this.name11=event.currentTarget.name;
alert(event.currentTarget.id);
},

gettest() {
var b = this.beginTime.toString().replace(/-/g,"/")
var e = this.endTime.toString().replace(/-/g,"/")
if (this.beginTime === '' || this.endTime === ''||this.id11==='' ) {
alert('请将选项补全')
} else if(b>=e){
alert("请输入正确的日期")
}else if(parseInt((new Date(e).getTime() - new Date(b).getTime()) / 1000 / 60 / 60 /24)>90){
alert("查询日期范围为三个月！")
}else {
const path = 'http://xxxx:5000/test'
var dat = {'id': localStorage.getItem('ms_username'), 'beginTime': this.beginTime, 'endTime': this.endTime, 'selectContent': this.id11}
axios.post(path, dat)
.then(res => {
this.name=this.name11;
for (var i=0;i<res.data.data.length;i++)
{
this.seven_option.series[0].data[i] = res.data.data[i].num;
this.seven_option.xAxis.data[i] = res.data.data[i].time;
}
this.seven_chart.setOption(this.seven_option)
})
.catch(error => {
alert(error)
})
}
}
},

beforeDestroy() {
if (!this.seven_chart) { return }
this.seven_chart.dispose();
this.seven_chart = null;
},

props: {
msg: String
}
}

</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

<style scoped>

.content{
width: 80%;
position:center
}
.content p{
margin-top: 1rem;
font-size: 0.4rem;
color: #666666;
}
.seven_echarts{
height: 16rem;
width: 80%;
position: absolute;
}

*{margin:0;padding:0;border:0;}
body {
font-family: arial, serif; font-size:12px;
}
element.style {
}
body {
background-color: #f7f8fd;
}
body {
line-height: 1.6;
font-family: -apple-system-font,Helvetica Neue,sans-serif;
}
* {
margin: 0;
padding: 0;
}
user agent stylesheet
body {
display: block;
margin: 8px;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.type-list {
width: 20%;
height: auto;
float: left;
background-color: #fff;
text-align: center;
overflow-y: scroll;
overflow-x: hidden;
   font-size:14px;
   ul{
           width: 100%;
           height: auto;
           li{
               width: 100%;
               height: auto;
               min-height: 68px;
               display: flex;
               justify-content: center;
               align-items: center;
               position: relative;
               color: @color999;
               font-size: 14px;
               >i{
                   width: 26px;
                   height: 0px;
                   position: absolute;
                   bottom: 0px;
                   left: 50%;
                   margin-left: -13px;
                   border-bottom: 1px solid #e5e5e5;
               }
           }
           li:last-of-type{
               >i{
                   border: none;
               }
           }
           li.active{
               color: #393A3F;
               span{
                   position:relative;
                   i{
                       width: 18px;
                       height: 0px;
                       position: absolute;
                       bottom: -6px;
                       left: 50%;
                       margin-left: -9px;
                       border-bottom: 2px solid #393A3F;
                   }
               }
           }
       }

}

#nav {
line-height: 24px; list-style-type: none; background:#FFFFFF; width:80px;

}
#nav a {
display: block; width: 26px; text-align:center;
   border-bottom:1px solid #e5e5e5;
}
#nav i{
   width: 26px;
   height: 0px;
   position: absolute;
   bottom: 0px;
   left: 50%;
   margin-left: -13px;
   border-bottom: 1px solid #e5e5e5;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
width: 180px; background:@color999;min-height: 50px;
}
#nav li a{
width: 50px; text-align:left;padding-left:20px;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px;display:none;
min-height: 50px;
}
#nav li ul li{
float: left;
width: 180px;
background: #F6F6F6;
}

#nav li ul a{
display: block; width: 50px;width: 56px;text-align:left;padding-left:4px;
}
#nav ul li ul li.active {
color: #393a3f;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}

#nav li:hover ul {
left: auto;
display:block;
}
#nav li.sfhover ul {
left: auto;
}
#nav li.sfhover a {
float:left;
color : #00FF00;
}
#mrc {
clear: left;
}

-->
.type-main {
width: 80%;
float: left;
box-sizing: border-box;
padding: 0 20px;
overflow-y: scroll;
overflow-x: hidden;
}
div {
display: block;
}
body {
line-height: 1.6;
font-family: -apple-system-font,Helvetica Neue,sans-serif;
}

element.style {
}
.type-main .type-main-banner {
width: 80%;
height: 40px;
margin-top: 13px;
border-radius: 6px;
overflow: hidden;
color: #fff;
background: green;
}

#nav li.active {
color: #393a3f;
}

.Button{
width: 45px;
height: 34px;
color: #fff;
background: green;
}
</style>

vue做前端 后续

猜你喜欢