vue+springboot实现天气预报查询功能

一、登录注册模块

注册模块信息校验

    // 限制输入特殊字符
    userNameLimit: function () {
      this.userName = this.userName.replace(/[ `~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '')
    },
    //只能输入英文、数字
    userPasswordLimit: function () {
      this.password = this.password.replace(/[^a-zA-Z0-9]/g, '')
    },
    //手机号及电话号
    userPhone: function () {
      const tel = /^0\d{2,3}-?\d{7,8}$/;
      const number =/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if(this.phone.length == 11){//手机号码
          if(number.test(this.phone)) {
            console.log(this.phone);
            this.ph = '手机号正确'
          }else {
            this.ph = '请输入有效的手机号'
          }
        }else if(this.phone.length == 13 || this.phone.indexOf("-") != -1 ){//电话号码
          if(tel.test(this.phone)) {
            this.ph = '电话号正确'
          }else {
            this.ph = '请输入有效的电话号'
          }
        }
        console.log('请输入有效的号码！');

    },

sessionStorage存储登录信息

• //存session
              sessionStorage.setItem('userName', res.data.userName);
              sessionStorage.setItem("userToken",res.data.userToken);
              ElMessage({
                    message: '登录成功!',
                    type: 'success',
                  });
  
              vm.$router.push({path:'/home'});

路由拦截

// 导航守卫，判断是否登录
router.beforeEach((to, from, next) => {
    console.log(to);
    if (to.meta.requireAuth) {
        if (sessionStorage.getItem("userToken") !== null) {
            next()
        }
        else {
            next(
                {
                    path: '/login',
                    query: {redirect: to.fullPath}
                },
                ElMessage({
                    // showClose: true,
                    message: '未登录或登录已过期,请重新登录！',
                    type: 'error',
                })
            )
        }
    } else {
        next()
    }

});

二、查询天气模块

本地天气查询

// 查询当地天气
    localWeather:function(){
      let that = this;
      console.log("这是自动搜索时的的城市"+this.user.address),
          console.log(this.city)
      this.$axios({
        url: "https://restapi.amap.com/v3/weather/weatherInfo",
        method: "GET",
        params: {
          key: "e0c48eb92615d1ab98b5ad25d3c6a044",
          city: this.user.address,
          extensions: 'all',
          // output: "JSON"
        },
      }).then(function(response){
        console.log("查询到的天气哪去了"+response.data)

        that.object = response.data;
        that.localWeathers = response.data;
        console.log(that.object);
      })
          .catch(function(error){
            alert("请求失败 " + error);
          })
    },

搜索城市天气展示

//   搜索城市天气
    searchWeather:function(){
      if(this.city.length == 0){
        alert("请输入城市");
        return;
      }
      let that = this;
      this.$axios({
        url: "https://restapi.amap.com/v3/weather/weatherInfo",
        method: "GET",
        params: {
          key: "e0c48eb92615d1ab98b5ad25d3c6a044",
          city: this.city,
          extensions: 'all',
          // output: "JSON"
        },
      }).then(function(response){
        console.log("查询到的天气哪去了"+response.data)

        that.object = response.data;
        console.log(that.object);
      })
          .catch(function(error){
            alert("请求失败 " + error);
          })
    },