Vue+Element 创建登录Demo
介绍了如何使用vue创建一个登录demo，但是点击登陆后只是提示了输入的值，那么现在就把这个demo完善下，去真正请求后台服务。

一、改造Vue前端

1.安装axios

作为一款http请求插件，axios在Vue2.0之后开始受到更多的欢迎了。其实axios也是对原生XHR的一种封装，不过是Promise实现版本。它是一个用于浏览器和 nodejs 的 HTTP 客户端，符合最新的ES规范。
命令：

npm i axios -S

结果：

2.使用axios

在main.js中引入axios，并设置默认请求地址

3.完善登录方法

这里只贴出了核心方法，完整代码可以结合 Vue+Element 创建登录Demo

增加dialog弹窗提示：

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="20%"
      center
    >
      <span>{{ dialogMsg }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

登录方法代码如下：

export default {
  name: "Login",
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      centerDialogVisible: false,
      dialogMsg: ""
    };
  },
  methods: {
    doLogin() {
      if (
        Object.keys(this.user.username).length === 0 ||
        Object.keys(this.user.password).length === 0
      ) {
        this.dialogMsg = "请输入用户名和密码";
        this.centerDialogVisible = true;
      } else this.verifyLogin();
    },
    verifyLogin() {
      this.$axios
        .post("/api/auth/login", {
          name: this.user.username,
          pwd: this.user.password
        })
        .then(successResponse => {
          if (successResponse.data.resultCode === 0)
            this.$router.replace({ path: "/home" });
          else {
            this.dialogMsg = successResponse.data.resultMsg;
            this.centerDialogVisible = true;
          }
        })
        .catch(failResponse => {
          console.log(failResponse);
        });
    }
  }
};

4.修改router

新增/login路由，并对根请求转发到login

5.配置跨域请求 $\color{red}{（重点）}$

既然前后端分离，那么跨域请求是必然的，要解决跨域有两种方案
A.使用nginx对前后端进行代理
B.设置devServer.proxy，将请求代理到后端服务器上
这里介绍下B方法：
由于基于vue-cli 3创建的项目默认没有vue.config.js，所以需要在package.json同级目录手动创建该文件

该文件的基础内容：

module.exports = {}
proxy 中的/api代表匹配api的路径，当命中请求中的url时进入这个代理，进行跨域请求；
target 代表想要跨域的目标url；
changeOrigin：true 代表允许跨域；
pathRewrite：代表当匹配到上面的路径/api时需要在target后面拼接什么路径;

完整配置：

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8082",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api"
        }
      }
    }
  }
};

二、创建后端

后端Controller处理请求的核心代码：

/**
 * 登录相关
 * @author mrche
 */
@RestController
@RequestMapping("/auth")
public class LoginController {
    @Autowired
    private UserService userService;

    @RequestMapping("/login")
    public Map doLogin(@RequestBody Map<String, Object> params){
        Map<String,Object> resultMap = new HashMap<>();
        resultMap.put("resultCode",0);
        resultMap.put("resultMsg","登录成功");

        String name = String.valueOf(params.get("name"));
        String pwd = String.valueOf(params.get("pwd"));
        UserEntity userEntity = userService.doLogin(name,pwd);
        if (userEntity == null){
            resultMap.put("resultCode",1);
            resultMap.put("resultMsg","用户名或密码错误");
        }else {
            resultMap.put("data",userEntity.toString());
        }
        return resultMap;
    }
}

避免一篇文章太冗长，具体后端应用程序得创建我就不写在这里了，详细步骤可以参照我的另一篇文章：使用Idea创建SpringBoot项目