Vue的路由跳转、与后端交互

Vue相关的路由跳转、与后端交互

学习Vue两三周了。
首先学习制作一个简单登录界面，功能是输入账号及密码并上传至后端，根据返回值决定是否跳转另一个页面，同时将需要的返回值一并传给另一个页面（首页）。
在“首页”利用后端返回的参数画echarts。

1.简单的登录界面

首先用HTML、CSS写一个简陋的登录界面，样式代码就省略了，主题代码：

  <div class="background">
    <img class="img" src="~@/assets/title.png" />
    <div class="input">
      <div class="title">登录</div>
      <div>
        <input class="text1" placeholder="请输入用户名" v-model="account" />
        <input class="text2" placeholder="请输入密码" v-model="password" />
      </div>
      <button class="button" @click="click">登录</button> //按键由实例中的方法触发
    </div>
  </div>

效果大致这样：

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方式能够返回历史。
输入正确的账号密码后便能跳转到另一个页面。
登录界面地址：

http://localhost:8081/

跳转后地址，并通过拼接方法将userid传过去：

http://localhost:8081/Home/******（这里显示的是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;

2.将返回值数据用于echarts

由许多数据用图表的方式说明较为直白易懂，故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));

结果图大致如此：

-END-