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>
标签中写登录页面，接口发送数据，获得成功的响应后，页面跳转到 /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
