vue+springboot项目练习（二、前后端交互Login页面测试）

前面已经完成Vue的demo构建，接下来就是前后端结合测试的登录是否可跳转页面（无数据库情况下）

一、后端项目创建

使用idea新建spring boot项目，选择 Spring Initializr，点击 Next

继续Next进行命名和选择 项目服务（web和DevTools（热部署））


启动项目访问 http://localhost:8888 出现错误页面表示项目启动成功

二、登录页面开发

1、了解Nginx

前端用Nginx，后端用Tomcat
当我开发前端内容的时候，可以把前端的请求通过前端服务器转发给后端（称为反向代理）

2、前端页面开发

前端页面测试新建内容

App.vue

在div里必须加 路由配置

login.vue

首先我们开发登录页面组件，在 src下新建views文件夹，New -> views，命名为Login 代码如下：

<template>
  <div>
    用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
    <br><br>
    密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
    <br><br>
    <button v-on:click="login">登录</button>
  </div>
</template>

<script>
export default {
  name: "Login",
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: []
    }
  },
  methods: {
    login () {
      this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          // eslint-disable-next-line no-unused-vars
          .catch(failResponse => {
          })
    }
  }
}
</script>

<style scoped>

</style>

<template> 标签中写登录页面，<methods>中定义了登录按钮的点击方法，即向后端 </login>接口发送数据，获得成功的响应后，页面跳转到 /index

AppIndex.vue

在 src下新建views文件夹，New -> views，命名为Appindex ，然后设为点击登录跳转页面------hello word代码如下：

<template>
<div>hello word</div>
</template>

<script>
export default {
  name: "AppIndex"
}
</script>

<style scoped>

</style>

3、前端相关配置

设置反向代理

修改src\main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router"
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

因为使用了新的模块 axios，所以需要进入到项目文件夹中，执行npm install --save axios ，以安装这个模块。

跨域支持之一：axios.defaults.baseURL = ‘http://localhost:8888/api’

配置页面路由

在src下新建 router.js

import Vue from "vue";
import Router from "vue-router";


import AppIndex from "@/views/AppIndex";
import Login from "@/views/Login";
Vue.use(Router);

export default new Router({
    routes: [

        {
            path: "/login",
            component:Login
        },
        {
            path: "/index",
            component: AppIndex
        }
    ]
});

运行项目

执行 npm run serve
注意地址是 localhost:8080/#/login，中间有这个 # 是因为 Vue 的路由使用了 Hash 模式，是单页面应用的经典用法，后面可以使用路由配置去掉

4、后端开发

后端项目所需新建内容

User类

在Login.vue中，前端发送数据的代码段为

打开我们的后端项目新建pojo包，然后新建User类

package com.example.wei.pojo;

public class User {
    int id;
    String username;
    String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

Result类

Result 类是为了构造 response，主要是响应码。新建 result包，创建Result 类

package com.example.wei.result;

public class Result {
    private int code;
    public Result(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }
}

LoginController类

Controller是对应数据处理的部分。这里我们设定账号是 admin ，密码是 123456 ，分别与接收到的 User 类的 username 和 password 进行比较，根据结果返回不同的 Result，即不同的响应码。前端如果接收到成功的响应码（200），则跳转到 /index 页面。
新建 controller 包，新建 LoginController 类

package com.example.wei.controller;

import com.example.wei.pojo.User;
import com.example.wei.result.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;

import java.util.Objects;

@Controller
public class LoginController {
    @Autowired
    LoginController loginController;
    @PostMapping(value = "/api/login")
    @ResponseBody
    @CrossOrigin
    public Result login(@RequestBody User requsetUser){
        String username = requsetUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if (!Objects.equals("admin",username) || !Objects.equals("123456", requsetUser.getPassword())){
           String message= "账号密码错误";
            System.out.println("test");
            return new Result(400);
        }else{
            return new Result(200);
        }
    }
}

演示前后端的交互过程，controller的逻辑太多，应封装在service里

@CrossOrigin解决------前端浏览器报错
打开页面提交空白F12判断错误
解决前端跨域问题博客

在 src\main\resources 文件夹下找到 application.properties 文件配置端口，加上 server.port=8888（很重要 对应axios的端口号！！！）

5、测试项目

同时运行前端和后端项目，访问localhost:8080/#/login ，输入用户名 admin，密码 123456

点击登录，成功进入localhost:8080/#/index 并输出hello word