vue-admin-template模板、解决跨域问题

vue-admin-template

我们可以在github上进行下载，下载之后我们只需要把它放到我们自己所需要的文件。

在命令行进入当前文件夹 执行命令 去下载packjson中的依赖

npm install

下载完成之后 运行 就能成功访问

npm run dev

文件结构

跨域问题
产生 跨域的主要问题是 三者有一点不同就会产生跨域问题

协议 域名 端口号

我们通过刚才启动项目可以明显看到

http://localhost:9528/

现在我们要添加自己的后端 这样就会出现跨域问题

http://localhost:8001

修改前端
解决跨域的方法有很多我们这里只展示一种

首先我们先找到 .env.development文件，把默认的地址注释掉，添加自己后端的地址

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8001'

进入api>user.js 修改成自己的接口访问地址

import request from '@/utils/request'

export function login(data) {
  
  return request({
    url: '/eduService/user/login',
    // url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

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

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

会根据上面的地址走到 store>modules>user.js

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        console.log(response)
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { name, avatar } = data

        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

后端
我们需要在我们的后端中添加一个登录接口
@CrossOrigin这个注解能解决跨域问题。
我们登录成功的信息都是根据前端所需要的信息来进行添加的。

package online.k12code.server.controller;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import online.k12code.utils.RespBean;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

/**
 * @Author 阿威
 * @Date 2021/6/3
 */
@RestController
@Api(tags = "login")
@RequestMapping("/eduService/user")
@CrossOrigin//解决跨域问题
public class LoginController {

    @PostMapping("/login")
    @ApiOperation("登录")
    public RespBean toLogin(){
        Map<String, Object> hashMap = new HashMap<>();
          hashMap.put("token","admin");
      return RespBean.success("登录成功",hashMap);
    }

    @GetMapping("/info")
    @ApiOperation("信息")
    public RespBean info(){
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("roles","[admin]");
        hashMap.put("name","admin");
        hashMap.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        return RespBean.success("登录信息成功",hashMap);
    }
}

说一下这里的返回值，返回值最后对象Object 的变量名必须为data,因为我们在前端进行接收数据的时候使用解构进行取值会取不到。

package online.k12code.utils;

import lombok.Data;
import lombok.experimental.Accessors;

/**
 * @Author 阿威
 * @Date 2021/5/31
 */
@Data
@Accessors(chain = true)
public class RespBean {
    private long code;
    private String message;
    private Object data;

    public static RespBean success(String message) {
        final RespBean respBean = new RespBean();
        respBean.setCode(20000);
        respBean.setMessage(message);
        respBean.setData(null);
        return respBean;
    }

    public static RespBean success(String message, Object data) {
        final RespBean respBean = new RespBean();
        respBean.setCode(20000);
        respBean.setMessage(message);
        respBean.setData(data);
        return respBean;
    }

    public static RespBean error(String message) {
        final RespBean respBean = new RespBean();
        respBean.setCode(500);
        respBean.setMessage(message);
        respBean.setData(null);
        return respBean;
    }

    public static RespBean error(String message, Object data) {
        final RespBean respBean = new RespBean();
        respBean.setCode(500);
        respBean.setMessage(message);
        respBean.setData(data);
        return respBean;
    }
}