【Springboot+Vue】做一个权限管理后台（三）：从登录开始

前言

本篇会学习第一个demo，做一个简单的登录，可以帮助大家理解前后端分离的概念，以及掌握Element-UI的安装与使用使我们的界面更加美观。

Vue第一个界面

• 初识Vue

我们知道，所有的网页界面都是由Html构成的，Vue中也是如此，我们可以看到Vue项目结构中有一个index.html：

它是所有你写的所有Vue页面的根，我们发现它只嵌套了一个<div id="app"></div>
这个App就是项目结构中的App.Vue：

一个vue的文件包含三部分：
<template></template>：写基本的标签与内容
<script><script>：写JavaSctipt函数，其中包含了Vue的生命周期钩子函数
<style></style>：对标签渲染的样式

所以我们可以看到App.vue包含了一张图片的样式以及一个routerView。

• 那这个router-view是干嘛的呢?
  routerView就是路由视图，让所有该组件下的子路由都通过routerView表现出来（例如App.vue下的子路由在App.vue中表现，而App.vue又是所有组件的根组件，所有无论你在Vue中写任何组件，都是通过App.vue的routerView表现的）。
  大家可以看到/router/index.js下引入了一个HelloWorld组件：
  HelloWorld组件借助与App.vue进行表现。
  
  以下为整个项目的页面：
  

• 创建登录界面
  我们在components文件夹下创建Login.vue文件，没配置vue文件模板的同学戳——Vue模板一键生成配置
  在新文件中输入vue，模板<template></template>中写两个输入框与一个按钮

  <template>
    <div>
        用户名:<input v-model="username"><br>
        密码:<input type="password" v-model="password"><br>
        <button @click="login">登录</button>
    </div>
  </template>
  

  那么我们怎么看到我们的界面呢？
  在/router/index.js下引入我们的组件，并在路由中配置路径：

  import Vue from 'vue'
  import Router from 'vue-router'
  import Login from '@/components/Login'
  Vue.use(Router)
  
  export default new Router({
       
    routes: [
      {
       
        path:'/login',
        name:'login',
        component:Login
      }
    ]
  })
  

保存后，在页面地址后输入/login，就可以访问到我们的界面啦。

• axios的引入
  那么如何与后端的服务器进行登录验证呢，目前主流的是ajax与axios为主，我们用较为简单的axios进行通讯。在项目的终端里输入：npm install axios
  
  安装完成后，在main.js中声明引用：
  

• 完成登录按钮的点击事件

  <script>
  import axios from 'axios'
  export default {
       
    data () {
       
      return {
       
          username:'',
          password:''
      };
    },
    methods:{
       
        login(){
       
            var params = {