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用于网站拦截器功能。