【前端】项目总结

最近在跟着朋友一起写了一个项目，我主要负责的是前端，虽然说是这样说，但是因为前一版的东西刚完成不久，所以前端的人员就有点划水的感觉？

项目用到的：

前端：vue+element-ui

后端：java（spring boot）

服务器配置，暂时还不知道

因为我接触的是前端，所以我就来说说前端的任务

首先，先搭框架，用的直接是脚手架搭了一个项目，然后就是引入依赖之类的，这个引入依赖，看项目需求吧。我前几天写的已经引入的几个比较基本的，具体看这https://blog.csdn.net/yangluxin763730141/article/details/98034153 其他的有需要再去引入吧。

现阶段我还是直接把路由什么的写到了一个单独的router文件里边。

主要我就想留下来几个我觉得比较想记录下来的东西

一、

一个是main.js里边配置的一个关于axios请求的东西，用到了queryString，因为在向后台请求数据的时候，会向后台传参，但是因为在有的时候用post请求的时候，会存在数据传不过去的问题（实体类可以）所以，就要对数据先进行处理。然后我就写了一个这样的方法。

//引入qs，解决修改删除向后台传数据问题
import qs from 'querystring'
// Vue.use(qs);

Vue.prototype.$axios = function(method, url, values, callback) {
  let $this = this;
  if (method == "post") {
    axios
      .post(url, qs.stringify(values), {
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        withCredentials: true
      })
      .then(function(response) {
        console.log(response);
        if (response.data.code == 0) {
          $this.message(true, response.data.message, "success");
          callback(response);
        } else if (response.data.code == 1) {
          $this.$message.error(response.data.message);
          console.log(response);
        } else if (response.data.code == 2) {
          // $this.$router.push(response.data.data);
          $this.message(true, response.data.message, "error");
          self.$router.push("/v/login/");
          // $this.$message.warn(response.data.message);
        } else if (response.data.code == 3) {
          $this.$message.warn(response.data.message);
        } else if (response.data.code == 4) {
          $this.message(true, response.data.message, "error");
          callback(response);
        } else {
          callback(response);
        }
      })
      .catch(err => {
        console.log(err);
        //   if(err.response.status == 422){
        //       $this.$message.error(err.response.data.errors.email)
        //   }
      });
  }
  // else {
  //     throw 'Illegal Method is Given'
  // }
};

所以在调用的时候也要按照之前定义的模式进行调用

    updateIndex(returnRow) {
      this.$axios('post',"/index/updateIndex", {
          z_id: returnRow.id,
          name:this.updateName,
        },function(data){
          changeValue();
          this.updateDialogVisible = false;
        })
    },

二、路由拦截

router.beforeEach((to, from, next) => {
  let _this = this;
  var t = to.path.split("/")[2];
  var account = common.getCookie("userName");
  if (to.path == "/collegeLogin" || to.path == "/login") return next();

  console.log(account != null);
  if (account != null) {
    return next();
  }

  if (t == "college") {
    alert("请登录之后再进行操作");
    return next({ path: "/collegeLogin" });
  } else if (t == "root" || t == "department" || t == "president") {
    // return next();
    alert("请登录之后再进行操作");
    return next({ path: "/login" });
  }
});

先这样吧，以后再接着总结

虽然第一版是做完了，但是还会存在很多问题，我却很逃避的去看他们。