学习Vue两三周了。
首先学习制作一个简单登录界面,功能是输入账号及密码并上传至后端,根据返回值决定是否跳转另一个页面,同时将需要的返回值一并传给另一个页面(首页)。
在“首页”利用后端返回的参数画echarts。
首先用HTML、CSS写一个简陋的登录界面,样式代码就省略了,主题代码:
"background">
"img" src="~@/assets/title.png" />
"input">
"title">登录
"text1" placeholder="请输入用户名" v-model="account" />
"text2" placeholder="请输入密码" v-model="password" />
//按键由实例中的方法触发
效果大致这样:
Vue中的前后端交互使用axios较为便利,使用前需要安装依赖
以下为创建的实例:
import axios from "axios";
export default {
name: "LoginPage",
data () {
return {
account: "",
password: "", // 将账号密码数据双向绑定
userid: ""
};
},
methods: {
click () {
var that = this;
axios({ // Vue中前后端交互方法,比原生的ajax便利
method: "post", // 根据后端要求决定请求的方式
url: "http://hongxiu.thingcom.com/api/user/login", // 后段地址
params: {
account: this.account,
password: this.password // 将输入的账号密码一并上传
}
})
.then(function (response) {
if (response.data.errno === 0) { // 判断返回值,我这里errno为0代表正确
that.userid = response.data.data.userId; // 重新赋值方便再次传输
that.$router.push("/Home/" + that.userid); // 账号密码正确就跳转首页,并传返回的用户ID
} else {
alert("用户名或密码错误");
}
})
.catch(function (error) {
console.log(error);
});
}
}
};
axios请求方式有多种,get与post有一定区别,后端会给出。
路由跳转也有多种,push方式能够返回历史。
输入正确的账号密码后便能跳转到另一个页面。
登录界面地址:
跳转后地址,并通过拼接方法将userid传过去:
路由的设置例子很多,这里用的最基础的写法:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../views/Login.vue';
import Home from '../views/Home.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Login',
component: Login
{
path: '/home/:userid',
name: 'home',
component: Home
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;
由许多数据用图表的方式说明较为直白易懂,故echarts用的很多。
这里在上传多个参数时只需要只params里面写就行。
但是返回多个数组时如何将动态数据写入echarts内容中呢,如:
这时需要在前端初始化一个数组来存放返回的数组:
let arr = {
name: [],
value: []
};
for (let i = 0; i < res.length; i++) {
arr.name.push(res[i].city);
arr.value.push(res[i].devices);
}
再将数据放入对应代码里,这里画的是柱状图:
let option = {
textStyle: {
color: "white"
},
tooltip: {
formatter: "{b}: {c}"
},
grid: {
left: "5%",
right: "5%",
height: "70%",
bottom: "10%",
containLabel: true
},
xAxis: [
{
type: "category",
data: arr.name, // 这里是数组中X轴数据
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "设备城市分布",
itemStyle: {
normal: {
color: function (params) {
var colorList = [
"#FDFF4A",
"#FFAC4A",
"#FDFF4A",
"#FFAC4A",
"#FDFF4A"
];
return colorList[params.dataIndex];
}
}
},
lable: {
normal: {
show: true,
formatter: "{c}",
position: "top",
textStyle: {
color: "white",
fontSize: 20
}
}
},
type: "bar",
barWidth: "60%",
data: arr.value // 这里是数组中Y轴数据
}
]
};
myChart.setOption(option, (window.onresize = myChart.resize));