vue+axios实现登录注册
vue+axios实现登录注册安装配置axiosaxios发送登录请求安装配置axios安装axiosnpm install axios在mian.js中配置axios,用prototype挂载就可以在别的vue组件使用就可以使用this.$axios来发送axios请求var axios = require('axios')//引用axiosaxios.defaults.baseURL = 'h
vue+axios实现登录注册
安装配置axios
安装axios
npm install axios
axios就是vue因为不推荐操作dom,自己写的一个和ajax差不多的功能。
推荐用es6的语法async去解决回调地狱,可以参考我的另一篇博客。
在mian.js中配置axios,用prototype挂载就可以在别的vue组件使用就可以使用this.$axios来发送axios请求
var axios = require('axios')//引用axios
axios.defaults.baseURL = 'https://adny.utools.club/api'//设置一个基础请求地址
Vue.prototype.$axios = axios// 全局注册,之后可在其他组件中通过 this.$axios 发送数据
axios入门
下面是一个很简单的axios带参数的请求方式,get后面的网址是请求地址,params则是请求参数。
this.$axios
.get("http://localhost:8080/api/", {//地址是get请求地址
params: {
name: this.name
}
})
.then(function(res) {//当请求完成时候执行then回调函数
console.log(res);
})
.catch(resp => {//除了请求失败的情况
console.log("请求失败:" + resp.status + "," + resp.statusText);
});
还有一种请求方式是用get在请求地址后面加一个”?“问号来传递参数拿一个简单的音乐接口来举例
async serchMusic() {
var that = this;
// console.log(this);//结果为vue实例
// console.log(that);//结果为vue实例
try{
let response = await axios.get("https://autumnfish.cn/search?keywords=" + this.query)//请求一个在线音乐播放器地址,这里问好后面的keywords就是歌曲名一个参数
// console.log(this);//结果为vue实例
// console.log(that);//结果为vue实例
this.musiclist = response.data.result.songs;
console.log(response.data.result.songs);
}catch (err){//处理错误或者不存在的请求
console.error(err);
}
},
我们打开这个网址看一下https://autumnfish.cn/search?keywords=
在浏览器地址传入”陈奕迅“这个参数时候就会返回很多陈奕迅的歌曲
axios发送登录请求
使用this.$axios的post方法传递用户名和密码。在回调函数.then中当处理后端传过来的状态码
this.$axios//用this.$axios就代表main.js中的Vue.prototype.$axios = axios的axios
.post('/login', {//用post方法传 输入框输入的用户名和密码
username: this.loginForm.username,
password: this.loginForm.password,
})
.then((successResponse) => {//回调函数当post成功后执行
if (successResponse.data.code === 200) {//如果后端返回的状态码是200
this.open1();//调用第一个弹窗方法表示登录成功
this.$router.replace({//路由替换为index
path: '/index'
});
}
if (successResponse.data.code === 400 ) {}
})
.catch((failResponse) => {
this.open2();
});
},
后端controller层写前端的接口,完成post请求。
@PostMapping(value = "/api/login")//给前端写请求接口
@ResponseBody//RequestParam接收的是key-value里面的参数,所以它会被切面进行处理从而可以用普通元素、数组、集合、对象等接收
public Result login(@RequestBody User requestUser) {//RequestBody 接收的是请求体里面的数据.接受axios前端post的
String username = requestUser.getUsername();
username = HtmlUtils.htmlEscape(username);
User user = userService.get(username, requestUser.getPassword());//将用户名和密码传给service层处理业务逻辑,service层调用dao层写的数据库语句判断用户名和密码是否正确
if (null == user) {
return new Result(400);
} else {
return new Result(200);
}
}
现在已经完成基本的前后端连接了,接下来是后端处理业务逻辑返回状态码给前端,前端通过状态码判断用户名和密码是否和数据库一致完成登录
axios完成注册
注册功能就是往数据库写入数据,用正则表达式判断非法字符,并在dao层查询是否有重复的用户名,返回状态码给前端。时间有限但我没完成所有的功能。
regist() {
this.$axios.post('/regist', {
username: this.registForm.username,
password: this.registForm.password,
}),
setTimeout(() => {
this.$router.replace({
path: '/login'
});
}, 3000);
},
后端dao层写入数据库核心代码
public interface registDAO {
@Insert("insert into user values(#{id},#{username},#{password})")
//加入该注解可以保存对象后,查看对象插入id
@Options(useGeneratedKeys = true,keyProperty = "id",keyColumn = "id")
void regist(User user);
}
通过这个小项目就可以完成基本的登录注册,后面会加上token用于网站拦截器功能。
更多推荐
所有评论(0)