饭搭难点亮点

文章目录

难点
亮点

难点

不同请求响应头设置

大部分的请求头都是'Content-Type'：'application/json'

但也有少数请求需要的是'multipart/form-data'，例如图片上传

这时候就要在request.js文件里面统一配置，在发送请求前判断属于哪一种请求，对'Content-Type'进行配置

javascript 复制代码

// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  Toast.loading({
    msg: '请求中...',
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0
  })
  // console.log(config.url);
    // 根据请求的不同设置不同的请求头
    if(config.url.startsWith('/staff/window') || config.url.startsWith('/staff/dishIsshoucang') || config.url.startsWith('/staff/register') ){
      config.headers['Content-Type'] = 'application/json'
    }else if (config.url.startsWith('/user/upload') || config.url.startsWith('/post') || config.url.startsWith('/staff')   ) {
      config.headers['Content-Type'] = 'multipart/form-data'
    } else {
      config.headers['Content-Type'] = 'application/json'
    }
 
  return config
}

解决跨域问题

由于浏览器的同源策略，当本地服务器发请求到后端服务器接口时，通常会发生跨域问题

跨域可以由后端人员解决，通常解决方式时配置cors

前端也可以解决跨域，我用的vue脚手架开发，所以要解决跨域，需要在vue.config.js中配置

代理，通过代理服务器发送请求

javascript 复制代码

devServer: {
    proxy: {
      '/api': {// 匹配所有以 '/api'开头的请求路径
        target: 'http://10.102.250.138:9090',
        changeOrigin: true,
        pathRewrite: {'^/api': ''},
        ws:true,
      }
    },
  },

切换餐厅

在菜单页面，每个餐厅展示的菜品不一样，点击餐厅后，要切换成相对应的菜品，

后端返回的数据是这样的，由于缺乏实战经验，怎么做出来这个功能思考了很长时间。

最终想到用index的方式解决，每个餐厅对应一个index，当点击当前餐厅时，activeindex就是当前的餐厅index，然后再根据index在data中取值，例如data[index].hotDishList

javascript 复制代码

<ul>
            <li v-for="(item, index) in list" :key="item.canteenWindowId">
              <a :class="{ active: index === activeIndex }" @click="activeIndex = index" href="javascript:;">{{ item.canteenWindowName}}</a>
            </li>
          </ul>

javascript 复制代码

//存在就渲染出来
<div v-for="item in list[activeIndex]?.hotDishList" :key="item.hotDishId" class="text">

头像的更改

个人头像的修改是最大的难点，这个功能花费了两三天，因为做出来的要不是有bug，要不就是达不到理想效果，因为我用了vant ui，里面有图片上传的组件

但是这种有问题，基础用法只能展示图片，不能进行修改

文件预览版的可以展示，也可以进行修改，但是修改框始终存在着,而且有时候无法显示用户原本的头像

经过对<van-uploader中参数的研究，经过反复测试，最终得出理想效果

javascript 复制代码

<van-uploader v-model="fileList" multiple :max-count="1" :after-read="afterRead" />

 //获取个人信息
 getMyDate(){
        getMyDate(this.userInfo.userId)
        .then(res=>{
         this.touImg=res.data.userAvatar
         this.fileList.push({ url:  this.touImg,isImage: true  })
        })
    },

给van-uploader建立一个双向绑定 fileList，当获取到用户信息时候，把用户头像push到filelist中，由于uploader格式的限制，需要用这种方式进行push，this.fileList.push({ url: this.touImg,isImage: true })。

当用户修改时，只需要点击叉号，删除当前预览的照片，因为:max-count="1"，只能上传一张照片，当照片消失时，上传按钮会出现，点击上传，就能完成照片的修改

javascript 复制代码

 changeTouxiang(this.userInfo.userId,file.file).then((res)=>{
        // console.log(res);
      })

亮点

组件复用

有时候，一个页面的大致结构相似，例如主页的所有贴子，搜索出来的贴子等等，进行组件复用提高开发效率

懒加载

路由懒加载 & 异步组件，不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件

将路由文件中的代码改成以下样式：

javascript 复制代码

const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
const MyOrder = () => import('@/views/myorder')

mixins复用

多个页面需要一个功能时，用mixins进行复用，使代码简洁，提高开发效率

1 新建一个 mixin 文件 mixins/loginConfirm.js

javascript 复制代码

export default {
  methods: {
    // 是否需要弹登录确认框
    // (1) 需要，返回 true，并直接弹出登录确认框
    // (2) 不需要，返回 false
    loginConfirm () {
      if (!this.$store.getters.token) {
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时需要先登录才能继续操作哦',
          confirmButtonText: '去登陆',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            // 如果希望，跳转到登录 => 登录后能回跳回来，需要在跳转去携带参数 (当前的路径地址)
            // this.$route.fullPath (会包含查询参数)
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
              //route.fullPath 包含从基本URL后开始的路径，假设基本URL（base URL）为 /app，并且当前路由为 /app/home?a=1，那么route.path的值将是 /home?a=1；
            })
          })
          .catch(() => {})
        return true
      }
      return false
    }
  }
}

2 页面中导入，混入方法

javascript 复制代码

import loginConfirm from '@/mixins/loginConfirm'

export default {
  name: 'ProDetail',
  mixins: [loginConfirm],
  ...
}

用户交互体验

在首页和其他展示多个数据的页面，有时候下部的导航栏会挡住数据展示，影响用户使用，所以做了一个功能，当用户往下滑动时，底部导航栏隐藏

javascript 复制代码

   data（）{
   return {
      isNavbarVisible: true // 导航栏的显示状态
    };}
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const threshold = 100; // 滚动多少距离后隐藏导航栏，根据实际情况调整
      const scrollTop = window.scrollY;
      this.isNavbarVisible = scrollTop < threshold;
    }
  }