vue项目总结,项目期间遇到的问题、难点等。【暂停更新】

2023-05-16

近期一直在做一个xxx中心的项目,先来吐槽下内心的想法,

要开发的项目需求很不明确,需求两周两周的更改,感觉每天并没有特别多实际的产出,总是感觉有点儿浪费时间。

虽然这样,但是作为开发,我们只能服从上级命令,好了,进入正题。

但是对我来说,感觉还好,需求的更改,对我来说又是新的开发,新的接触,同时也是在锻炼我的耐心和耐性。

------------正题----------分割线【1】2019-10-17 2019年10月17日15:00:10-----------

第一次使用vue开发实际的项目,虽然之前也有写过,但是都是自己练手的,并没有实际的后端接口,这次对我自己来说也算是个小小的锻炼。项目开发过程中遇到的坑,以及bug,以及自己不会的地方挺多的,下面我就一一列举下。

(下面所有的问题,在我博客里面都会有)

(1)axios请求中post请求的坑。刚开始的坑是,使用axios的post方法请求数据,数据被拦截,数据一直传不到后端那边。后来查文档才得知 axios对于post请求是有拦截功能的,需要自己判断,或者使用提请的 qs 方法,将传给后端的数据进行下处理。

(2)路由传参的功能的坑。之前一直使用路由传参,但是当本页面刷新的时候,页面上是没有参数的,因为参数是从上个页面传入进来的。   解决办法:使用了缓存,和vuex状态管理。但是由于项目并不是很大型的项目,所以使用最多的是缓存。

(3)页面缓存的坑。有个填写信息的页面,需要填写一部分信息,进入查新协议页面,返回的时候,页面上填写的信息还需要留存。  解决办法:使用vue提供的keep-alive,来完成页面的缓存的。

(4)vue组件动态加载的坑。由于首页的排版不确定,然后想着,让组件动态显示,根据后端传入的数据,传入那个组件的数据,就显示那个组件。解决办法:和后端商量好,做个标识。前端根据标识判断,动态显示组件。  使用到了vue中的<component :is=""></component>   , 刚开始想着是不是和原生js一样使用append直接可以插入进入呢,但是后来发现根本不可以,思路是可以的,但是实现起来是行不通的。因为append后面插入的必须是个节点,而不是组件。后来就去查阅vue文档。

但是现在还有个问题,首页是通过动态组件添加的,数据得从后端接口返回,但是接口请求也是需要时间,所以,刚开始进入页面的是,页面先会是空白,但是这样的体验并不友好,会让用户感觉到页面就是一片空白,但是好的解决办法现在暂时没有想出来。好的解决办法还在寻找ing。【师傅有建议添加个加载的gif图,但是,感觉。。。,我在找下看还有别的办法没,实在没有的话,就只能添加个gif图了。】

(5)解析后端返回的map格式数据的坑。 之前解析数据的时候,直接就可以拿去,然后直接渲染页面使用即可。但是这次遇到后端返回的是map格式的数据,这就得解析下了。  例如:body['1']  。根据返回的格式,自己解析成自己需要的数据格式。

(6)更新文件缓存的坑。每次打包好文件给后端更新的时候,用户手机上总会留下,上次版本的信息,而且每次都得清下缓存,才会显示最新版本的数据。后来,我师傅提了个建议,让后端返回一个更新版本的接口,前端每次更新版本的时候,都会给后端传入时间戳,然后后端接收后判断和库里的时间戳是否相同,相同的返回不需要更新,不相同的话,返回要更新,然后前端这边的处理方法是:需要更新的话,清除掉缓存,刷新页面即可。

虽然说给.js  .css文件后缀加上时间戳也是可以的,但是页面的入口index.html每次都是一样的,所以。。。就不会更新,,百度一些说在nginx服务器上,写上强制更新,但是由于公司服务器上的文件很多,万一操作失误那就麻烦了。

(7)h5页面打开调试日志。h5页面不像小程序那样,直接可以打开控制台,在手机上查看日志,得需要自己安装vConsole的插件来实现。 详见博客:【同微信小程序一样的移动端调试工具】移动端调试工具VConsole_柠檬不萌只是酸i的博客-CSDN博客_vconsole类似工具

(8)获取首页链接里面的参数问题。获取是可以获取到,只要不跳转出这个项目的页面,都是可以的,但是该项目链接了许多外链,所以,有时候返回的时候,页面就会显示空白,因为获取的参数出了问题。解决办法:将参数设置成了缓存,但是返回的速度快了,首页同样还是会出现拿不到参数,的问题。

解决办法还在寻找ing。

(9)h5里面的搜索。h5里面input实现在手机上按下“搜索”,“go”,“前往”等按钮的时候,同时会触发像PC端的Enter。 input标签需要设置属性:type="search"   。  详见博客 html5 里面的type=”search“ ,h5版,点击手机键盘上的 ‘搜索”,”前往“等按钮,进行搜索_柠檬不萌只是酸i的博客-CSDN博客

----------稍后再更新--------------分割线【2】 2019年10月17日18:33:59-------------

(10)登录接口bug。需要判断 errCode  10001状态的情况。如果出现 errCode出现 10001,则清空原来的session,重新请求该网络请求。

----------------------------  分割线【3】2019年10月18日14:55:55 ------------------------------

(11)封装的请求方法不需要在传入相同的参数。  封装的方法,每个方法里面都得传入sessoin,但是里面需要有个版本的方法不需要传入session,那么就得在封装的方法里面进行判断。详见博客:axios请求需要注意的,axios的get请求传入参数需要注意的_柠檬不萌只是酸i的博客-CSDN博客_axios发送get请求传参

(config.method == 'get') {
    console.log('config.params.version',config.params.version)
    if(config.params.version == 'v'){   // 在更新版本的接口里面会用到
      config.url = config.url
    }else{
      config.url = config.url + '?session='+localStorage.getItem('session');
    }
  }

(12)省份地区判断的话,尽量不使用name判断,会有bug的。通过市区匹配省份的话,使用areaCode,有些文件是不一样的。

(13)进来不在index.html文件里面引入公共的文件,因为每次更新版本的时候,index.html 都是相同的,如果修改了公共文件,是会有缓存,不会更新。因为该公共文件后面没有添加时间戳。

----------未结束。下次继续

待优化的:

  • 首页空白。【已解决】【添加了loading】
  • 页面更新版本缓存.  【已解决】(将获取连接的templateId写在Home页面)
if (templateId) {
    this.$store.commit('updateTemplatedId',templateId);
    window.localStorage.setItem('templateId', templateId);
    console.log('store===templateId',this.$store.state.templateId)
}else{
    setTimeout(function() {
        window.location.reload()
    }, 1500);
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue项目总结,项目期间遇到的问题、难点等。【暂停更新】 的相关文章

  • vue3.0删除node_modules 无用的依赖

    安装插件 npm i depcheck 查看无用的插件 npx depcheck 对应删除 npm uninstall kd layout
  • vue3使用import.meta.env在vite.config.ts下使用env环境变量的方法

    vue3使用import meta env在vite config ts下使用env环境变量的方法 编程一枚的博客 CSDN博客
  • Vue 组件化

    什么是组件化 任何一个人处理信息的逻辑能力都是有限的 所以 当面对一个非常复杂的问题时 我们不太可能一次性搞定一大堆的内容 但是 我们人有一种天生的能力 就是将问题进行拆解 如果将一个复杂的问题 拆分成很多个可以处理的小问题 再将其放在整体
  • vue父子组件通信方式哪几种

    第一种 props和 emit parent vue
  • 上拉加载原理

    实现思路 之前写过一篇触底加载 经过一番苦学钻研 优化一下 样式方面 滚动区域是给固定高度 设置 overflow y auto 来实现 接下来看看js方面的实现 其实也很简单 触发的条件是 可视高度 滚动距离 gt 实际高度 例子我会使用
  • 前端大屏常用的适配方案

    假设我们正在开发一个可视化拖拽的搭建平台 可以拖拽生成工作台或可视化大屏 或者直接就是开发一个大屏 首先必须要考虑的一个问题就是页面如何适应屏幕 因为我们在搭建或开发时一般都会基于一个固定的宽高 但是实际的屏幕可能大小不一 接下来我们就尝试
  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac
  • vue-lazyload基础实例(基于vue2.0和vue-router2.0)

    首先引入依赖 import Vue from vue import Router from vue router import VueLazyload from vue lazyload 配置vue lazyload Vue use Vue
  • Vue与TypeScript的完美结合

    前言 TypeScript 是 JS类型的超集 并支持了泛型 类型 命名空间 枚举等特性 弥补了 JS 在大型应用开发中的不足 在我们自己单独学习 TS时 时常感觉很多知识点还是比较好理解的 但要和框架结合的话 感觉就有点糟 因为我使用Vu
  • Vue项目的部署(服务器)

    Vue项目的部署 服务器 前几天帮朋友写了一个可以动态查看地点温度的前端项目 目前已经部署上线了 访问链接点这里 服务器是朋友的 倒时候打不开会很正常 说不定又使用服务器玩大数据项目去了 效果图 图一 图二 当然 温度也都是实时跟新的 而且
  • 基于SpringCloud的分布式网上购物商城

    末尾获取源码 开发语言 Java Java开发工具 JDK1 8 后端 SpringCloud 前端 Vue HTML 数据库 MySQL5 7和Navicat管理工具结合 服务器 Tomcat8 5 开发软件 IDEA Eclipse 是
  • uni-app项目中使用scss语法

    最近正在学习uni app开发 我先把文档浅略翻了遍 发现组件和接口几乎都是按照微信小程序走 但是视图层上的语法又是按照vue的语法走的 所以开发过程一定要注意这点 然后我想在uni app项目中使用scss语法 但是具体怎么安装呢 历经曲
  • vue element select下拉框树形多选

    components 文件下新建 SelectTree文件 index vue SelectTree index vue
  • vue实现批量打印

  • 【vue3】elementplus日期组件英文转中文

    vue3 elementplus日期组件英文转中文 1 在main js或者main ts中加入 即可解决 import ElementPlus from element plus import element plus dist inde
  • vue_域名部署无法访问后端

    前言 目前部署的比较另类 因为服务器为 windows 目前还不是很会 nginx 所以现在就只能在服务器上安装 nodejs 然后直接使用 npm run dev 命令行的方式运行项目 遇到的坑 使用ip访问前端的时候 就可以访问 但是通
  • 大数据毕业设计之前端03:logo、menu的折叠展开实现

    关键字 BuildAdmin pinia logo aside menu 菜单折叠 Vue ElementUI 前言 上一篇文章中 借助aside的实现讲了一些开发的小技巧 以及css的解读 本篇文章主要写一下如何填充aside的内容 as
  • [黑马程序员TypeScript笔记]------一篇就够了

    文章目录 1 TypeScript 介绍 TypeScript 是什么 TypeScript 为什么要为 JS 添加类型支持 TypeScript 相比 JS 的优势 2 TypeScript 初体验 安装编译 TS 的工具包
  • 【vue】$bus 跨组件调用方法

    1 新建bus js import Vue from vue 使用 Event Bus const bus new Vue export default bus 2 main js引用 import bus from libs bus Vu
  • (vue)el-popover鼠标移入提示效果

    vue el popover鼠标移入提示效果 效果 代码

随机推荐

  • ARM 内联汇编 加速 算法

    首推移动端arm cpu优化学习笔记第4弹 内联汇编入门 xff0c 但是其只给出了代码 xff0c 很多人还不知道怎么在手机上跑起来 xff0c 其实只需要一个CMakeLists txt就可以了 cmake minimum requir
  • centos7.3环境编译安装pktgen-dpdk,dpdk工具

    概述编译环境编译DPDK编译Pktgen dpdkDebug 概述 DPDK xff08 Date Plane Development Kit xff09 主要基于Linux系统运行 xff0c 用于快速数据包处理的函数库与驱动集合 xff
  • 捷联惯导算法心得

    1 四个概念 xff1a 地理 坐标系 机体 坐标系 他们之间换算公式 换算公式用的系数 地理坐标系 xff1a 东 北 天 xff0c 以下简称 地理 在这个坐标系里有重力永远是 xff08 0 0 1g xff09 xff0c 地磁永远
  • Java中的域,静态域,实例域

    域 所谓的域 xff0c 是field的翻译 xff0c 也就是我们常说的字段 xff0c 或者属性 比如类的字段 xff08 属性 xff09 xff0c 局部的 xff0c 全局的 静态域 也就是静态属性 xff0c 我们可以单独为它设
  • 【线程篇】线程间同步之信号量、互斥锁

    线程 xff1a 进程内部的一条执行路径 xff08 序列 xff09 什么是线程什么是进程 xff0c 进程和线程的区别 xff1f 进程是一个正在运行的程序 xff0c 是系统进程资源分配的基本单位 线程是进程内部的一条执行路径 xff
  • PL/SQL报错:无法解析指定的连接标识符

    在安装oracle的时候PL SQL报错 xff1a ORA 12154 TNS 无法解析指定的连接标识符 xff0c 在网上找了很多资料 xff0c 然后问题解决 其中下面的文章分析的过程很值得学习 xff0c 特地转载过来时刻告诫自己全
  • 【idm】idm突破cookie封锁 (解决http:1.1 403 forbidden)(附charles使用教程)

    文章目录 一 问题二 解决方法 xff08 1 xff09 在chrome中获得cookies xff08 2 xff09 安装配置charles 三 另外的方法参考 idm的使用教程参考 xff1a 一 问题 使用idm下载文件出现如下问
  • 四旋翼飞行器数学建模+轨迹跟踪控制

    数学模型 xff08 状态空间方程 xff09 xff1a 控制算法 有限时间 xff08 finite time control xff09 控制 xff0c 文献 1 xff1b 比例 微分 xff08 PD xff09 控制 xff0
  • 卡尔曼滤波算法总结

    自己学习整理卡尔曼滤波算法 xff0c 从放弃到精通 kaerman 滤波算法 卡尔曼滤波是非常经典的预测追踪算法 xff0c 是结合线性系统动态方程的维纳滤波 xff0c 其实质是线性最小均方差估计器 xff0c 能够在系统存在噪声和干扰
  • 做嵌入式驱动的前途何在

    做嵌入式驱动的前途何在 做嵌入式linux驱动的前途何在 xff1f 或者说 xff0c 怎么才能做好这一行 xff1f 我做嵌入式驱动开发已经一年多了 xff0c 感觉没学到多少东西 从网络驱动到CAN驱动 从dataflash驱动到NA
  • 串口通信的调试01

    在开发中 xff0c 我们经常遇到这种情况 xff0c 供应商给了一台仪器 xff0c 然后仪器配套有软件 我们通过点击按钮往仪器发送命令 xff0c 仪器返回数据 有些时候 xff0c 我们希望可以通过自己编写的软件来操作仪器 xff0c
  • Linux驱动程序开发之三----按键驱动(Tiny6410)

    在Linux驱动程序开发之三 按键驱动 xff08 Tiny6410 xff09 博文中讨论了使用中断来实现按键驱动 xff0c 毫无疑问 xff0c 中断方式效率相当高 xff0c 但是在此之前 xff0c CPU要想获知按键的状态都是通
  • 飞控信号SBUS信号解析为PWM信号输出

    飞控信号SBUS信号解析为PWM信号输出 1 修改STM32时钟频率 xff1a static void SetSysClockTo72 void IO uint32 t StartUpCounter 61 0 HSEStatus 61 0
  • GTSAM 的使用

    GTSAM 的使用 GTSAM 是一个在机器人领域和计算机视觉领域用于平滑 xff08 smoothing xff09 和建图 xff08 mapping xff09 的C 43 43 库 它与 g 2 o 不同的是 xff0c g 2 o
  • ROS智能车实现darknet_ros检测物体

    文章目录 一 搭建智能车环境1 下载包以及编译1 1 下载源码包1 2 编译1 3 错误解决 xff08 1 xff09 controllers相关 xff08 2 xff09 driver base相关 xff08 3 xff09 ack
  • 使用Vant完成DatetimePicker 日期的选择器

    效果展示 xff1a 代码展示 xff1a lt template gt lt div id 61 34 date time picker 34 gt lt van button plain type 61 34 primary 34 64
  • 拜访谭浩强老先生

    本月 22日 邀请各大高校计算机专业的院长 教授 xff08 谭浩强 王移芝 陈明 杨小平 王立柱 郑莉 等等 xff09 前来我校参观指导 xff0c 尤其是对我们的 信息技术提高班 进行深入的了解 得知前几天中国计算机界泰斗级人物谭浩强
  • 使用Vant完成各种Toast提示框

    效果展示 xff1a xff08 1 xff09 使用前的需要安装Vant奥 参考博客 xff08 2 xff09 在main js里面引入Toast import Toast from 39 vant 39 Vue use Toast x
  • 使用Vant完成底部弹出框 ActionSheet 上拉菜单

    效果图 xff1a 代码展示 xff1a xff08 ActionSheet 上拉菜单 xff09 lt template gt lt ActionSheet 上拉菜单 gt lt div id 61 34 action sheet 34
  • vue项目总结,项目期间遇到的问题、难点等。【暂停更新】

    近期一直在做一个xxx中心的项目 xff0c 先来吐槽下内心的想法 xff0c 要开发的项目需求很不明确 xff0c 需求两周两周的更改 xff0c 感觉每天并没有特别多实际的产出 xff0c 总是感觉有点儿浪费时间 虽然这样 xff0c