创建vue-cli项目
- 安装基础工具:Node.js,下载网站:http://nodejs.cn/download/
- IDEA安装vue.js插件
- IDEA创建vue-cli项目
Step1:
进入new project界面,选择JavaScript中的Vue.js,点击Next
Step2:
上面Next的下一个页面,给项目命名,最后Finish即可,等待项目创建成功。
Step3:
测试,在Terminal中输入命令npm run serve
,访问http://localhost:8080/,出现下面的页面就表示创建好了。
附项目创建完结构图
创建SpringBoot项目
- 进入IDEA中new project的界面:选择Spring Initializr,可以选择官网或者阿里云镜像,然后Next
- 进入Next页面:
- 进入Next页面:选择web依赖即可,最后Finish,创建成功。
Vue-cli:登录页面
- 需要使用到的框架时ElementUI,官网:https://element.eleme.cn/
- vue-cli项目中需要下载ElementUI,在Terminal中输入命令:
npm i element-ui -S
- 在main.js中全局引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
- 安装路由:
npm install --save vue-router
,并在main.js中引入:
import router from './router'
new Vue({
render: h => h(App),
router,
}).$mount('#app')
- 下载异步通信
axois
:官网:http://www.axios-js.com/
,下载命令:npm install --save axios vue-axios
在main.js引入
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
- 根据框架,做好登录页面
<template>
<div>
<el-form ref="loginForm" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="loginForm.username" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="loginForm.password" />
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="login" >登录</el-button>
</el-form-item>
</el-form>
</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.push("/main");
}
});
}
}
}
</script>
<style scoped>
.login-box{
border: 1px solid #DCDFE6;
width: 350px;
margin:180px auto;
padding:35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow:0 0 25px #909399;
}
.login-title{
text-align:center;
margin:0 auto 40px auto;
color:#303133;
}
</style>
- 配置好路由:/router/index.js
import Vue from 'vue'
//安装vue-router后导入进来
import VueRouter from 'vue-router'
//导入组件
import Main from '../components/Main'
import Login from '../components/Login'
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
mode: 'history',
routes: [
{
//路由路径
path: '/main',
name: 'Main',
//跳转的组件
component: Main
},
{
path: '/login',
name: 'Login',
component: Login
}
]
});
- 访问http://localhost:8080/login页面
SpringBoot登录验证
- 实体类User.java
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
@ToString
public class User {
private int id;
private String username;
private String password;
}
- 登录验证:当前端访问后端端口时,进行验证
@Controller
public class LoginController {
@CrossOrigin
@PostMapping("/api/login")
@ResponseBody
public ResultCode 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(message);
return new ResultCode(400);
} else {
return new ResultCode(200);
}
}
}
ResultCode.java
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
@ToString
public class ResultCode {
//响应码
private int code;
}
Vue-cli实现登录登录验证
后端端口已经写好验证,前端如何访问到后端。
- 配置axios的baseURL为我们的后端端口:在main.js中配置
axios.defaults.baseURL = 'http://localhost:8181/api';
- 配置跨域支持:在config下的index.js下,如果没有config文件夹,可以在项目的根目录下新建一个vue.config.js文件,下面就是第二种方式。
module.exports = {
devServer: {
proxy: {
'/api': {// 匹配所有以 '/api'开头的请求路径
target: 'http://localhost:8181',// 代理目标的基础路径
ws: true,// 支持跨域
changeOrigin: true,
pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
'^/api': ''
}
}
}
}
}
- 看到前面的登录页面中的methods:
methods: {
login () {
this.axios
//post提交到:http://localhost:8181/api/login,携带下面两个参数
.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(successResponse => {
//后端返回码为200时,跳转到main页面
if (successResponse.data.code === 200) {
this.$router.push("/main");
}
});
}
}
- 测试
小结
- 前端把数据传到后端,后端再验证数据,后端根据验证结果返回一个结果给前端。
- 前端是怎样把数据传到后端的:利用
axios
- 首先配置axois的baseURL在main.js中
- 然后配置前端的跨域支持,在config/index.js下,没有config的项目,需要自己在根目录下新建一个vue.config.js进行配置
- 后端怎样收到数据,接受前端信息的方法需要添加
@CrossOrigin
跨域请求接口,使用@ResponseBody
返回一个响应码,根据响应码前端做出反应。 - 后端登录验证采用的是固定的数据,可更换成数据库的。