vue_element-admin整合SpringBoot实现登录

SpringBoot实现vue-admin-template登录接口

vue-admin-template

vue-admin-template是一个简化版的vue-element-admin的模板，
适合vue用来做项目的搭建，虽然官方文档以及花裤衩前端大佬
在博客中已经将大部分的疑难杂症解决了，但当完全自己搭建的
时候才发现多折腾

vue-admin-template登录接口请求详解

要想搞懂一个接口，最好的方式就是
1.去看接口的定义声明的参数
2.发送请求查看返回的数据格式

开始

1.先配置跨域等基础信息
在目录中找到.env.development文件修改BASE_URL

# just a flag
ENV = 'development'

# base api 此处修改为空
VUE_APP_BASE_API = ''

2.配置跨域
找到vue.config.js,在配置文件中修改端口等信息

 proxy: {
   
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
   
        target: `http://localhost:10000`,
        secure: false, // 如果是https接口，需要配置这个参数为true
        changeOrigin: true,	//必须为true，true表示跨域
        pathRewrite: {
   
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    //此处注释掉
    //before: require('./mock/mock-server.js')
  }

3.查看api中的user.js，查看登录、获取信息等信息
此处可以不用更改

import request from '@/utils/request'

export function login(data) {
   
  return request({
   
    url: '/user/login',
    method: 'post',
    params: {
    ...data }
  })
}

export function getInfo(token) {
   
  return request({
   
    url: '/user/info',
    method: 'get',
    params: {
    token }
  })
}

export function logout() {
   
  return request({
   
    url: '/user/logout',
    method: 'post'
  }