第三次大作业总结

2023/8/14

第一次开始写博客，也是为了总结一下这第三次大作业，前两次大作业不是纯静态就是只有简单js所以就不做过多解释，发这篇作为开头也是学了vue之后第一次和别人合作完成一个简易项目（学习通学生版）

刚开始的时候听到没后端一起还是有点遗憾的，毕竟前端的数据请求也是一个很重要的知识点，但想到之前比赛写前后端接口的经历后还是算了吧，有点痛苦，先从简单的开始

那开头也是想从第一眼开始，就是登入界面，以前不管写些什么遇到输入账号密码这类都是不管正则的，这次遇到的第一个难题就是正则了，以前在霞客上课的时候有讲，不过我没听...，这次去学了一下还挺麻烦，看着一连串符号也是头皮发麻，不过最后在网上多找了几个例子之后再看着定义也差不多明白了，下面是我写的过程中比较常用的

const phone = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ //手机号
const pass = /^(?:(?=.*[A-Za-z])(?=.*\d)|(?=.*[A-Za-z])(?=.*[!@#$%^&*])|(?=.*\d)(?=.*[!@#$%^&*]))[A-Za-z\d!@#$%^&*]{8,16}$/ //密码（密码要求8-16位，至少包含数字，字母，字符两种元素）

不过除去接口那登录界面好像...不对还是有难点的，扫码登入和验证码识别功能，之前以为后端发验证码会顺带把其码也一起发过来，现在看来...学习还是任重道远啊，这两个功能没后端暂时也只能先搁置，后面队友说他的路由写好了我们交流了一下，发现有点样式有点问题所以我改了一下，但可能逼近敲得时间不算长，不同电脑的宽高适配没处理好，还有布局问题，虽然样子是都达到了，但如果后期再加的话可能有点麻烦，总不能全部用绝对定位和浮动吧，这些都是后话了

后来进军主界面和队友开始分工写模块，发现也不是很简单，要写搜索，写增删改查，不过倒还好，课程只是单层，所以数据结构很简单，用vuex写写还是很快的，过程中也是学了过滤器搜索等一些实用的技术，这不比看片来学得快？还得是大作业啊！

然后又遇到了一个问题，以前在html写代码在js找html中一个特定元素我懂，那在vue中该咋搞？应为我要写一个点击除特定盒子外得地方要隐藏该盒子的功能，那怎么找这一个盒子和其相关功能就成了问题?上网搜了一下也大概知道了怎么写，就是用ref挂载dom节点，这样就可以在js中用this.refs.xxx来指向我想要的元素了

  beforeUnmount() {
    document.removeEventListener('click', this.handleClickOutside)// 在删除页面前消除
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside)// handleClickOutside就是点击后执行的函数
  }

    handleClickOutside (event) {// 只被上面的mounted调用
      const phoneList = this.$refs.phoneList// 赋值以便简化改元素
      if (phoneList !== event.target && this.showList === true) {// 当点击的对象不是ref挂载的对象且该对象本来就没有显示的时候，执行下面操作
        this.showList = false// 隐藏盒子
      }
    },

过程总体算是顺利，解决了课程后来到了创作专题，流程看着和课程差不多也是差不多的增删改查，但后来我发现，这文件夹是可以嵌套的，但也还好，也能解决，无非就是把数据写在父文件夹里，形成一棵树，但在前面写的过程中我懂了一个道理，遇到一个页面，先看再想然后才写，然后我又看了看其他的部分，发现搜索框搜索结果是全局的，管你文件在哪一级，都能找出来，那我该咋找树状结构啊...我不会啊，后来没办法还是全部写在同一级用index来判断父子关系，（ps：幸好提前看了预想一下怎么写，不然写完树状后再写搜索就完了，全部重写）。然后又注意到点进去后页面变化但不刷新，这就说明我不可能为了每一个文件夹都去写一个页面，而且主页面和子页面相似度高，我就想到之前学的时候路径也可以传参，所以我又学了一下query传参，也是顺利的解决了，后再写一下垃圾桶功能，全选功能，索性我用单层数据，不然真不知道怎么一下给那些数据的属性改值，光挨个找就很麻烦，但我知道，树状搜索我未来可能还是要学的...

写完垃圾桶后时间差不多也快截止了，就想摆烂，队友写的页面很多功能不会写，但我也不想写了，让他跟之前一样搞静态就行了，不然一个项目也就登入前的准备和主界面的两个页面有功能也说不过去，所以开摆！让MAA休息一会，我自己来操作，看着他完游戏真的是心机梗塞，还是自己完比较好。

摆了一天，突然发现，完了，我那页面还有一个部分没写完，创作专题是一个单独的功能，我点进去后发现还好，不难，正好这个页面也是从队友那边继承过来的静态页面，改改就好了，但是我发现我太单纯了，这还藏着一个修改封面的功能，用户可以自己选择本地图片，并可以更改大小和拖动图片，我一看好家伙都不会，只能赶紧赶进度，剩下时间不多了，兴许还能留个一两天继续摆烂，就疯狂上网查资料问度娘和chat，最后搞得差不多了，就是一个保存盒内元素并形成一个新图片和其地址我解决不了，其余还算顺利...吧

      start(e){
        //这四行代码特别重要，要不然图片会出现鼠标长按时不能拖动
        if (e.stopPropagation) e.stopPropagation();
        if (e.preventDefault) e.preventDefault();
          e.cancelBubble = true;
          e.returnValue = false;
        if(e.button==0){
          this.canDrag=true;// 点击的时候修改为可以拖动
          this.x0=e.clientX;//记录点击的位置
          this.y0=e.clientY;//记录点击的位置
        }
      },
      stop(e){
        this.canDrag=false;
      },
      move(e){
        if(this.canDrag==true){
          const img = this.$refs.mychooseimg
          const styleimg = this.$refs.styleimg
          const imgWidth = img.offsetWidth
          const imgHeight = img.offsetHeight
          const styleimgWidth = styleimg.offsetWidth
          const styleimgHeight = styleimg.offsetHeight
          this.x1=e.clientX;
          this.y1=e.clientY;
          this.x+=this.x1-this.x0;// 一定是加等于，不然图片的位置就相当于你拖动的速度，样子就是你一移动然后图片又回去了，因为他的位置就是你移动的速度的大小...
          this.y+=this.y1-this.y0;// 一定是加等于，不然图片的位置就相当于你拖动的速度，样子就是你一移动然后图片又回去了，因为他的位置就是你移动的速度的大小...
          this.x0=this.x1;//重新设置位置
          this.y0=this.y1;//重新设置位置
          img.style.transform = `translate(${this.x/imgWidth*imgWidth}px, ${this.y/imgHeight*imgHeight}px)`// 移动的百分比
        }
      },

至少是能说明我是在学的（试图通过说服自己来避免尴尬）

      tirggerFile (event) {
        let file = event.target.files[0]
        let that = this
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          that.imgSrc = this.result
        }
      },

然后继续摆...

审评当天的早上，我把之前学的防抖和节流也加进了我的搜索栏

thr: function () {// 主要流程就是通过截取上次执行的时间和这次点击的时间判断间隔有没有超出要求
  let now = Date.now()
  if (now - this.lastTime > 500 || !this.lastTime) {
    console.log(this.lastTime);
    this.lastTime = Date.now()
    this.tosearch//执行函数
  }
}

deb: function () {//当输入的时候计时器会不断刷新为一定时间的计时器，时间到了之后会执行函数并清楚计时器
  if (debTime) {
    clearTimeout(debTime)// 当debTime为undefined时，清除计时器，重新计时，在1秒内下面的定时器还没运行完的时候
  }
  debTime = setTimeout(() => {// 因为计时器的this指向的是window，无法访问data，所以要用箭头函数
    this.SEARCH = this.search// 赋值，并同步查询
    debTime = undefined// 重新清除
  }, 1000)//
}

好了，结束了，虽然不是特别满意，毕竟没写完而且还有些格式没搞好页面几乎都放在一起我看着难受，但没办法，第一次和别人合作开发也不是什么都能按着自己的要求来，我好像也没那资格要求别人一定要这么来...

但通过这次大作业还是学到了很多东西，巩固了之前学的知识，并学了一些平时看片学不到的，希望以后多来几次大作业，毕竟我一直看片也是真学不了什么东西，也记不牢，学习周报写得狗看了都摇头

就这样吧，以后还有什么有意思的经历还是会继续写的，再见！