跳至主要內容
项目总结篇

从开始项目到现在也快 40 天了,在这个过程中不得不说,交流真的很重要,要是交流多一点,项目估计早就完成了,找 bug 也找的差不多了,项目现在还有些功能不太完善,学分认证系统功能应该朝着实用性,和安全性出发,这是最重要的,还有交互体验很重要,能够简单明了的一眼看出网站的使用规则,而不是功能隐藏起来,轻松上手,快速使用。

项目 bug 正在修复,代码嵌入,功能失效·······啥的,正在改,还有交互体验上,各种信息的提示需要做出来,给用户足够的反馈信息。明白咋回事,

学习方面,主要还是项目经验吧,还有各种第三方工具的使用,接下来继续努力,加油


ZiHao...小于 1 分钟记录项目考核
项目继续进行

这次的考核内容的完善项目,我准备把项目进行进一步的完善,改一改 bug,这次新加的内容全部使用原生 JS,除了 ajax 用 JQ 其他的都使用原生的,本次后端使用了 spring boot 这就要求我们要使用 th 前几天我对 th 进行了学习,现在项目到了后期阶段,想要全换成 th 是不太可能的,再写的内容尽量使用 th,我会吸取上次的教训,把学长们提出的问题进行修复,使得页面看起来更加合理,各种内容的分页处理,增删改查,美食网站,我尽量让它看起来像美食网站,


ZiHao...小于 1 分钟记录项目考核
项目最后总结

这次项目就快要结束了,项目希望这几天能够做完,做好,保质保量, 最后会进行 bug 测试,尽量使得项目能够像一个正常的网站能够正常使用,在这一周的的过程中,发现项目还是有点不够人性化,希望让用户用着舒服,不追求功能多么厉害,但是要好用,评论还差点,希望我能够顺利完成,之后会进行拓展功能的实现,后台希望能够尽快与网页主体实现正常功能。

其他也没什么说的

把我项目的工具库函数发出来吧

function getStyle(obj, name) {
  if (window.getComputedStyle) {
    return getComputedStyle(obj, null)[name];
  } else {
    return obj.currentStyle[name];
  }
}
function imgup(obj) {
  let file = obj.files[0];
  let reader = new FileReader();
  let name1 = obj.parentNode.children[0];
  reader.readAsDataURL(file);
  reader.onload = function (ev) {
    /*  $(name).attr("src", ev.target.result); */
    name1.setAttribute("src", ev.target.result);
  };
}
function outdifficulty(obj) {
  let text = obj.innerText;
  $(".pr-inner-xz:eq(0)").attr("value", text);
}
function outdifficulty2(obj) {
  let text = obj.innerText;
  $(".pr-inner-xz:eq(1)").attr("value", text);
}
//删除功能
function del(obj) {
  let a = obj.parentNode;
  a.parentNode.removeChild(a);
}
function del1(obj) {
  let a = obj.parentNode.parentNode;
  a.parentNode.removeChild(a);
}
function userkouweitext(obj) {
  let text = obj.innerText;
  console.log(text);
  $(".kouweiinput").val(text);
  $(".kouweilist").fadeOut(200);
}
function pushcode(obj) {
  $.ajax({
    async: true,
    dataType: "json",
    type: "get",
    url: "http://localhost:8080/user/getSession",
    success: function (date) {
      if (date.data == null) {
        console.log("未登录");
      } else {
        obj.src =
          "http://localhost:8080/recipe/getCode?id=" +
          date.data.id +
          "&" +
          Math.random();
      }
    },
  });
}
function pushcode2(obj) {
  $.ajax({
    async: true,
    dataType: "json",
    type: "get",
    url: "http://localhost:8080/user/getSession",
    success: function (date) {
      if (date.data == null) {
        console.log("未登录");
      } else {
        obj.src =
          "http://localhost:8080/menu/getCode?id=" +
          date.data.id +
          "&" +
          Math.random();
      }
    },
  });
}
function outlogin() {
  let userimgtab = document.getElementsByClassName("userimgmodel")[0];
  let longin = document.getElementsByClassName("longin")[0];
  userimgtab.style.display = "none";
  longin.style.display = "block";
  $.get("http://localhost:8080/user/exist", {}, function () {});
  window.location.assign("./home-page.html");
}
function logintest() {
  let userimgtab = document.getElementsByClassName("userimgmodel")[0];
  let admin = document.getElementsByClassName("userimgtab")[0];
  let longin = document.getElementsByClassName("longin")[0];
  $.ajax({
    async: true,
    dataType: "json",
    type: "get",
    url: "http://localhost:8080/user/getSession",
    success: function (date) {
      if (date.data == null) {
        console.log("未登录");
        userimgtab.style.display = "none";
        longin.style.display = "block";
      } else {
        userimgtab.style.display = "block";
        longin.style.display = "none";
      }
      if (date.data.sign == 1) {
        $(admin.children[0]).append(
          `<li><a href="./back-html/background.html">进入后台</a></li>`
        );
      } else {
        console.log("普通用户");
      }
    },
  });
}
function upmsg(param) {
  $.ajax({
    async: true,
    dataType: "json",
    type: "get",
    url: "http://localhost:8080/user/getSession",
    success: function (date) {
      if (date.data == null) {
      } else {
        $.get(
          "http://localhost:8080/user/getUser",
          {
            id: date.data.id,
          },
          function (date) {
            let userimgmodel =
              document.getElementsByClassName("userimgmodel")[0];
            $(userimgmodel.children[0].children[0]).attr(
              "src",
              date.data.userInfo.photo
            );
          }
        );
      }
    },
  });
}
//获取URL传递的参数
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
}
function getQueryVariable2(variable, url) {
  var query = url.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
}
function hasclass(obj, join) {
  var reg = new RegExp("\\b" + join + "\\b");
  return reg.test(obj.className);
}
function addClass(obj, join) {
  if (!hasclass(obj, join)) {
    obj.className += " " + join;
  }
}
function deleteclass(obj, join) {
  var reg = new RegExp("\\b" + join + "\\b");
  obj.className = obj.className.replace(reg, "");
}
function statuswitch(i) {
  let type1 = document.getElementsByClassName("type-head")[0];
  for (let i = 0; i < 3; i++) {
    deleteclass(type1.children[i], "active");
    $(".state:eq(" + (i + 2) + ")").css("color", "#020202");
  }
  $(".state:eq(" + (i + 2) + ")").css("color", "rgb(255,197,82)");
  addClass(type1.children[i], "active");
  $(".content2").empty();
  //清空后用根据选择的项目进行ajax请求获取对应数据
  //-------------------------------------------------------
  //收藏内部的加载
  if (i == 2) {
    $(".recipe-head").css("display", "block");
    $(".content2").empty();
    //ajax请求收藏菜谱的数据!!
  } else {
    $(".recipe-head").css("display", "none");
  }
}
function search(param) {
  let tabsearchcontent = document.getElementsByClassName("tabsearchcontent")[0];
  console.log(tabsearchcontent.value);
  window.location.assign(`searchpage.html?name=${tabsearchcontent.value}`);
}
function zuiresousuo(obj) {
  let url = encodeURI(`searchpage.html?name=${obj.children[0].innerText}`);
  window.location.assign(url);
}
function search1(param) {
  let tabsearchcontent = document.getElementsByClassName("tabsearchcontent")[0];
  console.log(tabsearchcontent.value);
  window.location.assign(`../searchpage.html?name=${tabsearchcontent.value}`);
}
function fenlei(obj) {
  let url = encodeURI(`../searchpage.html?name=${obj.innerText}`);
  window.location.assign(url);
}
function fenlei1(obj) {
  let url = encodeURI(`./searchpage.html?name=${obj.innerText}`);
  window.location.assign(url);
}
function textnums(obj) {
  console.log(obj.value);
  if (200 - obj.value.lenght <= 0) {
    obj.value.lenght = 200;
  }
  $(".talknums").text(`还可以输入${200 - obj.value.length}`);
}
function zitinums(obj) {
  let obj1 = obj.parentNode;
  let kuang = obj1.children[1].children[0];
  if (200 - obj.value.lenght <= 0) {
    obj.value.lenght = 200;
  }
  $(kuang).text(`还可以输入${200 - obj.value.length}`);
}

ZiHao...大约 3 分钟记录项目考核
周总结关于项目

这周静态页面基本已经完工,没剩几个页面了,

在交互方面实现了,用户的登录注册,账户信息的修改,菜谱步骤的上传(实现了一半),这周的交互我发现前后端传收数据,需要确定好发送的格式,需要与后端讨论好如何去存储一些信息,此次的图片上传中,学会了使用 JS 原生的 FormData 来传输文件,传输文件时要使用$.ajax 而不能直接使用$.post 因为需要调整一些参数的类型,

如下是一个例子

我使用$.ajax 传输一个图片文件

其中把

contentType 设置成了 false

processData 设置成了 false


ZiHao...大约 1 分钟记录项目考核
前端考核感想

这次前端考核时间很充裕但是我并没有好好利用做的时候有点莽,刚开始先写的整体框架内容填完之后,而且动画还有特效都做好了,才发现一缩小布局是乱的,虽然下边没有出现滚动条,但是我的内容全部都被压缩了,我的内容区的盒子宽度是按照百分比写的,而且使用的是绝对定位,没有响应式布局,直到了最后一天,我才进行改动把所有内容区的宽度改成了固定像素值,并且设置了媒体查询,缩小的页面进行布局。把本来变形的布局改了回来,当然这也不能改变大框架的弄错带来的问题,以后再写就明白怎么去写了,先想明白再去动手不然之后再去修改会很麻烦,总体来说前端做出来的效果事可以看到的,成就感比较强,自己脑海中所想的能够做出来,


ZiHao...大约 1 分钟记录项目考核