前后端之间通过 RESTful API 传递 JSON 数据进行交流。
采用swagger2进行接口文档管理。
Login.vue
<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'}) } }) .catch(failResponse => { }) } } } </script>
AppIndex.vue
<template> <div> Hello World! </div> </template> <script> export default { name: 'AppIndex' } </script> <style scoped> </style>
设置反向代理
修改 src\main.js
代码如下:
import Vue from 'vue' import App from './App' import router from './router' // 设置反向代理,前端请求默认发送到 http://localhost:8443/api var axios = require('axios') axios.defaults.baseURL = 'http://localhost:8443/api' // 全局注册,之后可在其他组件中通过 this.$axios 发送数据 Vue.prototype.$axios = axios Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
因为使用了新的模块 axios
,所以需要进入到项目文件夹中,执行 npm install --save axios
,以安装这个模块。个人喜欢使用yarn进行安装。
配置页面路由
修改 src\router\index.js
代码如下
import Vue from 'vue'
import Router from 'vue-router'
// 导入刚才编写的组件
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
routes: [
// 下面都是固定的写法
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/index',
name: 'AppIndex',
component: AppIndex
}
]
})
根据具体情况进行跨域配置
为了让后端能够访问到前端的资源,需要配置跨域支持。
在 config\index.js
中,找到 proxyTable 位置,修改为以下内容
proxyTable: {
'/api': {
target: 'http://localhost:8443',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
后端如何接收这个 JS 对象呢?我们很自然地想到在需要创建一个形式上一致的 Java 类。
打开我们的后端项目 wj
,首先在 src\main\java\com\evan\wj
文件夹(就是你自己的 web 项目的包)下,新建一个 pojo
包(package),然后新建 User
类,代码如下
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类,后期会优化
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 public class LoginController { @CrossOrigin @PostMapping(value = "api/login") @ResponseBody public Result login(@RequestBody User requestUser) { // 对 html 标签进行转义,防止 XSS 攻击 String username = requestUser.getUsername(); username = HtmlUtils.htmlEscape(username); if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) { String message = "账号密码错误"; System.out.println("test"); return new Result(400); } else { return new Result(200); } } }
这里我们设定账号是 admin
,密码是 123456
,分别与接收到的 User
类的 username
和 password
进行比较,根据结果返回不同的 Result,即不同的响应码。
测试项目
同时运行前端和后端项目,访问 localhost:8080/#/login
,输入用户名 admin
,密码 123456
可能有什么遗忘,或者缺少什么,如果有问题欢迎留言