饭搭难点亮点

难点

不同请求响应头设置

大部分的请求头都是’Content-Type’：‘application/json’
但也有少数请求需要的是’multipart/form-data’，例如图片上传
这时候就要在request.js文件内里统一配置，在发送请求前判断属于哪一种请求，对’Content-Type’进行配置

1. // 添加请求拦截器
2. request.interceptors.request.use(function (config) {
3.   // 在发送请求之前做些什么
4.   Toast.loading({
5.     msg: '请求中...',
6.     forbidClick: true,
7.     loadingType: 'spinner',
8.     duration: 0
9.   })
10.   // console.log(config.url);
11.     // 根据请求的不同设置不同的请求头
12.     if(config.url.startsWith('/staff/window') || config.url.startsWith('/staff/dishIsshoucang') || config.url.startsWith('/staff/register') ){
13.       config.headers['Content-Type'] = 'application/json'
14.     }else if (config.url.startsWith('/user/upload') || config.url.startsWith('/post') || config.url.startsWith('/staff')   ) {
15.       config.headers['Content-Type'] = 'multipart/form-data'
16.     } else {
17.       config.headers['Content-Type'] = 'application/json'
18.     }
20.   return config
21. }

复制代码

解决跨域问题

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

跨域可以由后端职员解决，通常解决方式时配置cors
前端也可以解决跨域，我用的vue脚手架开发，所以要解决跨域，需要在vue.config.js中配置
代理，通过代理服务器发送请求

1. devServer: {
2.     proxy: {
3.       '/api': {// 匹配所有以 '/api'开头的请求路径
4.         target: 'http://10.102.250.138:9090',
5.         changeOrigin: true,
6.         pathRewrite: {'^/api': ''},
7.         ws:true,
8.       }
9.     },
10.   },

复制代码

切换餐厅

在菜单页面，每个餐厅展示的菜品不一样，点击餐厅后，要切换成相对应的菜品，
后端返回的数据是如许的，由于缺乏实战经验，怎么做出来这个功能思考了很长时间。
最终想到用index的方式解决，每个餐厅对应一个index，当点击当前餐厅时，activeindex就是当前的餐厅index，然后再根据index在data中取值，例如data[index].hotDishList

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

复制代码

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

复制代码

头像的更改

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

但是这种有问题，基础用法只能展示图片，不能进行修改
文件预览版的可以展示，也可以进行修改，但是修改框始终存在着,而且有时候无法显示用户原本的头像
经过对<van-uploader中参数的研究，经过反复测试，最终得出理想结果

1. <van-uploader v-model="fileList" multiple :max-count="1" :after-read="afterRead" />
3. //获取个人信息
4. getMyDate(){
5.         getMyDate(this.userInfo.userId)
6.         .then(res=>{
7.          this.touImg=res.data.userAvatar
8.          this.fileList.push({ url:  this.touImg,isImage: true  })
9.         })
10.     },

复制代码

给van-uploader创建一个双向绑定 fileList，当获取到用户信息时候，把用户头像push到filelist中，由于uploader格式的限定，需要用这种方式进行push，this.fileList.push({ url: this.touImg,isImage: true })。
当用户修改时，只需要点击叉号，删除当前预览的照片，因为:max-count=“1”，只能上传一张照片，当照片消失时，上传按钮会出现，点击上传，就能完成照片的修改

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

复制代码

亮点

组件复用

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

懒加载

路由懒加载 & 异步组件， 不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件
将路由文件中的代码改成以下样式：

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

复制代码

mixins复用

多个页面需要一个功能时，用mixins进行复用，使代码简洁，提高开发效率
1 新建一个 mixin 文件 mixins/loginConfirm.js

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

复制代码

2 页面中导入，混入方法

1. import loginConfirm from '@/mixins/loginConfirm'
3. export default {
4.   name: 'ProDetail',
5.   mixins: [loginConfirm],
6.   ...
7. }

复制代码

用户交互体验

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

1.    data（）{
2.    return {
3.       isNavbarVisible: true // 导航栏的显示状态
4.     };}
5.   },
6.   mounted() {
7.     window.addEventListener('scroll', this.handleScroll);
8.   },
9.   beforeDestroy() {
10.     window.removeEventListener('scroll', this.handleScroll);
11.   },
12.   methods: {
13.     handleScroll() {
14.       const threshold = 100; // 滚动多少距离后隐藏导航栏，根据实际情况调整
15.       const scrollTop = window.scrollY;
16.       this.isNavbarVisible = scrollTop < threshold;
17.     }
18.   }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。