Vue练手项目技术总结

Vue练手项目技术总结

源码已上传到gitee，如果感到对你有帮助，欢迎star一下~

通过css3实现的反转盒子登陆、注册界面

效果展示

首先定义一个父盒子，两个子盒子，设置相同的尺寸、位置，使之重叠。

然后将登录盒子默认设置在上层，并将注册盒子沿y轴旋转90度

然后定义父盒子的透视属性，以及动画效果。

再定义一个vue中的数据isRotate，使其初始数据为false。

再定义一个旋转的css属性，使整个盒子沿y轴旋转负90度，并将其是否生效绑定给isRotate

最后再定义一个方法，使isRotate=！isRotate，将这个方法绑定在旋转按钮上，设置点击触发即可。

使用vuex保存登录状态

首先使用 npm install vuex --save-dev 全局安装vuex，定义一个store.js文件，在其中定义token，email，phone，name等属性以其读取和写入的方法，并将store.js引入main.js中，之后即可在组件中使用啦。

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.Store({
    state:{
      // 自定义的全局变量
        token:"",
        user_name:"",
        user_phone:"",
        user_email:""
    },
    getters:{
      // 通过计算属性的方式，取得变量
        getToken(state){
           return state.token;
        },
        getName(state){
            return state.user_name;
        },
        getPhone(state){
          return state.user_phone;
        },
        getEmail(state){
          return state.user_email;
        }

    },
    mutations:{
      // 方法，设置各种全局变量
        setToken(state,currToken){
            state.token = currToken;
        },
        setName(state,currUserName){
            state.user_name = currUserName;
        },
        setEmail(state,currEmailNumber){
            state.user_email = currEmailNumber;
        },
        setPhone(state,currPhoneNumber){
            state.user_phone = currPhoneNumber;
        },
        clear(state){
          state.token = "";
          state.user_name = "";
          state.user_password = "";
          state.user_phone = "";
          state.user_email = "";
        }
      }
})

常见使用方法：在登陆成功后，将后台返回的数据保存在store中。

login: function () {
     if(this.loginVerify() == false) return;
      axios.post("/WebApps/loginServlet",this.loginForm)
        .then(response => {
            if(response.data.code !== 200) {
                //console.log(response);
                this.$message.error('登陆失败！');
                return;
            }
            this.$message.success("登陆成功！");
            this.$store.commit('setName',this.loginForm.userName);
            this.$store.commit('setPhone',response.data.data.phone);
            this.$store.commit('setEmail',response.data.data.email);
            this.$store.commit('setToken',response.data.data.token);
            this.$router.push('/detail');
            if(this.keepLogin != false){
              sessionStorage.setItem('store', JSON.stringify(this.$store.state));
            }
          },
          function(err) {
            console.log(err);
          }
        );
    },

解决跨域拦截

修改config文件夹下的index.js中的proxyTable属性，使用代理即可。

proxyTable: {
    // 每当识别到javaweb时，会自动将其解析成http://123.57.143.40:8080/javaweb
      '/javaweb':{
        target:"http://123.57.143.40:8080/",
        changeOrigin: true,
      },
      '/WebApps':{
        target:"http://39.103.225.4:8080/",
        changeOrigin: true,
      }
    },

大坑：在浏览器的开发者模式中，不能识别代理属性，浏览器会将’/javaweb’解析成’localhost:8088/WebAppps’,但实际代理访问的是’http://39.103.225.4:8080//WebAppps’，只不过浏览器不能识别而已，整整坑了我两天

前端md5加密

前端md5加密

axios请求拦截器

每次使用axios发送请求前，都先判断store中是存有token，如果有的话，则先讲token写入请求头中。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
    if (store.state.token) {
        config.headers.Authorization["token"] = store.state.token;
    }
    // console.log(store.state.token);
　　return config
}, function (error) {
　　// 对请求错误做些什么
    return Promise.reject(error)
});

导航守卫

当用户想要跳转到登录界面以外的界面时，先验证store中是否存有用户的token，如果有则允许跳转，否则，跳转到登陆页面。

// 导航守卫
router.beforeEach((to,from,next) => {
  // console.log(to);
  // console.log(store.getters.gettoken());
  // console.log(next);
  // 如果有token值，放行
  if(store.getters.gettoken() || to.path === '/'){
    next();
  }else{
    // 如果没有token，则跳转到登陆页面
    next({
      path:'',
    })
  }
  next();
})

后端接口使用

一般json、text返回值接口的使用

// 基本用法：
	axios.get(地址,key=value&key2=value2)
    .then(response => {
        console.log(response);// 对response执行相应操作
    },err => {
        console.log(err);// 输出错误码
    })
	axios.post(地址,{key:value,key2:value2})
    .then(response =>{
        console.log(response);
    },err => {
        console.log(response);
    })

当此类接口调用返回错误500时，一般是传入数据的json字段命名与后端获取的字段命名不相同。

验证码的接口使用

// 直接将img的src绑定到接口上
<img :src="WebApps/getCode" alt="验证码" title="点击图片切换验证码"
     width="120px" height="50px" @click="getCheckCode"/>
// 图片切换函数
getCheckCode: function () {
	const num = Math.ceil(Math.random()*10);
    this.checkNodeNet = "WebApps/getCode" + "?" + num;
}

表格接口的使用

基本思路是：先定义一个与表格传给数据相同的空数组，然后将response的值赋给数组即可

  data() {
    return {
      netData:[{
        email:"",
        id:"",
        phone:"",
        userName:""
      }],
  },
   methods: {
    //得到表格里的所有数据
    getData:function () {
      var that = this;
      axios.post("WebApps/allInformation",{
        token :that.$store.state.token
      }).then(
        function (response) {
          that.netData = response.data.data;
        },
        function (err) {
          console.log(err);
        }
      );
    },

常用正则表达式

在线正则表达式测试工具

• ip地址：/^\b((25[0-5]))|2[0-4]\d|[01]?\d\d)\.{3}(25[0-5])|[0-4]\d|[01]?\d\d?)\b$/
• 手机号：/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
• 邮箱：/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9-.]+$/
• 用户名：/^[\u4e00-\u9fa5a-zA-Z0-9]{5,30}$/(5-30位中文、英文和数字字符)

其实根本用不到手写，elementUI自带强大的表单验证