springboot+Vue从零开始到乐意购商城系统搭建（二）之前后端分离跨域——简单登陆功能实现

前言

springboot+Vue从零开始到乐意购商城系统搭建，第二篇完整实现简单登陆功能。目的为了让大家能通过我这个小登陆功能，可以少走很多弯路，同时也方便提前理解整个前后端及跨域的开发流程。

（一）登陆功能技术栈描述：

前端技术栈：

开发工具： Visual Studio Code
开发框架：vue+axios
包管理工具：npm
打包工具：webpack
编程语言：html5,js,css

后端技术栈：

开发工具：最新版IDEA2019.3.1
开发框架：springboot+mybatis-plus
包管理工具：gradle构建工具下的maven资源库
打包工具：gradle
编程语言：java

（二）登陆开发流程详情：

前端开发内容

安装node.js并初始化Vue项目
可以看我上篇专门写的（springboot+Vue从零开始到乐意购商城系统搭建（一）之前端_Vue.js环境搭建）https://blog.csdn.net/weixin_43982794/article/details/103840067，按步骤操作即可。
使用axios前先执行cd D:\mywork\vue-webpack\lyg-vue 进入Vue项目目录下，执行命令cnpm install axios

开发登陆页面组件

src/components/login/LoginPage.vue

<template>
  <div>
    <blog-header></blog-header>
    <hr/>
    <div>
      用户名:<input type="text" v-model="loginInfoVo.username" placeholder="请输入用户名" />
      <br/>
      密码：<input type="password" v-model="loginInfoVo.password" placeholder="请输入密码" />
      <br/>
      <button v-on:click="login">登录</button>
      <br/>
      登录验证情况：<textarea cols="30" rows="10" v-model="responseResult"></textarea>
    </div>
    <hr/>
    <blog-footer></blog-footer>
  </div>
</template>

export default {
   
  name: 'login',
  data () {
   
    return {
   
      loginInfoVo: {
    username: '', password: '' },
      responseResult: []
    }
  },
  methods: {
   
    login () {
   
      this.$axios
        .post('/login', {
   
          username: this.loginInfoVo.username,
          password: this.loginInfoVo.password
        })
        .then(successResponse => {
   
          this.responseResult = JSON.stringify(successResponse.data)
          if (successResponse.data.code === 200) {
   
            this.$router.replace({
   path: '/index'})
          }
        })
        .catch(failResponse => {
   })
    }
  }
}
</script>

开发首页页面组件

src/components/login/IndexPage.vue

<template>
  <div>
    <hr/>
    <div>
      进入乐意购首页
    </div>
    <hr/>
  </div>
</template>

<script>
export default {
   
    name:'IndexPage'