vue+axios实现登录注册 |
您所在的位置：网站首页 › 前端实现登录验证码检验插件怎么用 › vue+axios实现登录注册 |
vue+axios实现登录注册
|
vue+axios实现登录注册
安装配置axiosaxios入门axios发送登录请求axios完成注册
安装配置axios
安装axios npm install axiosaxios就是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= 在浏览器地址传入”陈奕迅“这个参数时候就会返回很多陈奕迅的歌曲 使用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用于网站拦截器功能。 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |