1. 首页

离职后才搞懂 vue 项目开发流程中的疑惑点

在离职的最后一个月,帮两位同事申请加薪,确切的说,申请加薪是导火索,我被扣上了哄抬同事工资以提高自己工资的帽子,在推动前后端分离工作中处处碰壁,点燃了压抑许久的离职冲动,领导培养自己四五年,不让声张,答应悄悄离开。

离开时原来公司项目里剩下很多问题没有解决,现在自己还在做vue和动画的项目,现在或许之前的问题已经解决了,但我还是把思路写下来,也算对的起自己悄悄离职的事情了,看到你们获得优秀团队奖的照片了,很棒,祝福你们👍👏👏👏。

自动部署

这边用的是gitLab做git服务器,可以配置commit的钩子函数,实现自动部署和线上发布,就相当服务器监听你的提交,在你commit之后,服务器自动执行了一下npm run build,放到对应的测试服务器目录,配置文件在根目录下有.gitlab-ci.yml文件,起作用的是下边一段代码,script是linux脚本,拷贝文件到指定的静态资源CDN目录和web服务器目录,这块知识点是gitlab-ci 持续集成,可以关注一下,svn应该也有类似的配置,让运维帮忙给配一下吧。


npm-build-test: image: cdn路径 stage: build cache: untracked: true paths: - node_modules/ before_script: - export BI_ENV="test" script: - "npm install --registry=http://代理地址 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/" - "npm run build" - "rsync -auvz dist/index.html ip::服务器开发分支目录/trunk/resources/views/index/" - "rsync -auvz dist/* 静态资源cdn目录/trunk/bi/" only: - master 分支名称

版本管理

以前咱们经常出现这种情况, v0.1的需求已经上线,v0.2的需求已经提测了,v0.3的需求在开发中,现在要修复一下v1.0的线上bug,用svn的话可能就是把修复后的文件更新到三个分支上继续开发,更新来更新去就lock了。

如果用git做版本管理,就方便很多,按照分支规范,常用4个分支, Develop持续开发分支,Release版本分支, Hotfix紧紧热修复分支,Master上线版本主分支, 可以看看GitFlow工作流方面的资料,真的比svn的分支好用太多了。

离职后才搞懂 vue 项目开发流程中的疑惑点

脚手架升级与优化

我们目前在用webpack 4.0 和 vue-cli3.0,编译很快,建议升级,记得之前项目用vue-cli2.0编译和打包时间很长。

Ajax全局设置

原来项目里用的是jQuery.ajax方法,其实也可以其实也可以全局设置拦截,我们用的是axios,在main.js中引用,设置根路径、状态码、token、超时时间等全局设置,代码如下:


// 引入axios import axios from 'axios' // axios配置 Vue.prototype.$http = axios // 配置默认axios参数 axios.defaults.baseURL = '/' axios.defaults.timeout = 1000000 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 添加请求拦截器 axios.interceptors.request.use(function (config) { let token = localStorage.getItem('token') if(token== null && router.currentRoute.path == '/login'){// 本地无token,不为登录 跳转至登录页面 router.push('/login') }else{ if(config.data==undefined){ config.data = { "token":token } }else{ Object.assign(config.data,{"token":token}) } } return config }, function (error) { iView.Message.error('请求失败') return Promise.reject(error) }) // 返回结果拦截 axios.interceptors.response.use(function (response) { if(response.hasOwnProperty("data") && typeof response.data == "object"){ if(response.data.code === 998){// 登录超时 跳转至登录页面 iView.Message.error(response.data.msg) router.push('/login') return Promise.reject(response) }else if (response.data.code === 1000) {// 成功 return Promise.resolve(response) } } else { return Promise.resolve(response) } }, function (error) { // 请求取消 不弹出 if(error.message != '0000'){ iView.Message.error('请求失败') } // 请求错误时做些事 return Promise.reject(error) })

异步操作与数据遍历

原来的项目是保险项目,大家没有前后端分离的业务系统经验,都是最基础的接口,一个一个接口都是从数据字典中取出,业务逻辑往前端移,导致前端有很多的串行、并行的异步操作,请求各种接口,然后遍历合并各种数据,串行并行我们用promise写,异步操作的问题就解决了,数据的操作我们用lodash.js,效率比手写快,这两块可以加深一下。


initializationTab(obj){ let This = this return new Promise((resolve, reject) => { This.$http .post('/api/show/ograde-header',obj) .then(function(response) { return resolve(response.data.datas) }) .catch(function(error) { //数据丢失的状态 This.isContent=false //是否展示加载后内容 This.isLoading=false //是否展示loading This.isContentError=true This.isReady = false //是否展示数据准备中状态 reject(error) }); }) }

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

登录

原来项目登录是跳转到jsp登录页面,然后再跳回静态页面,sessionID就存到cookie里了,建立会话,也可以Form提交做登录, 正常走接口,也会在cookie里存上sessionID建立会话。

当然前后端分离最好用JWT方案,把生成的token放在redis里,建立事务,token过期后自动删除,如有提前退出,则给改token打上标识,不通过该token通过即可续签也好解决,在如果token在到期5分钟前访问,则生成新token返回给前端,给即将过期的token打上标识,到期后自动删除。

H5动画

我们H5动画做了很多尝试,民生银行的蓝精灵主题、租房分期、招聘3D、消消乐等,在适配、时间轴、精灵图、动画性能等方面有了一定积累,笔记夭折在我的MWeb编辑器里,如果后边有时间再更新出来吧。

之前蓝精灵动画需求用的TweenMax.jsgka生成的css帧动画做了那么复杂的一个效果,性能不是特别好,毕竟操作的是DOM,如果动画需求还多,就多熟悉熟悉PIXI.js+TweenMax.js两个工具吧,我刚用它们做了一个需求,PIXI.js有加载器、精灵图、滤镜、物理引擎、音视频等好多辅助工具,基本可以实现大部分我们在朋友圈看到的H5效果,PIXI.js支持canvaswebGL两种渲染。

离职后才搞懂 vue 项目开发流程中的疑惑点

离职后才搞懂 vue 项目开发流程中的疑惑点

通读API

最新的项目是自己搭建的vue架子,功能和场景也慢慢复杂起来,还是要多看api和文档,多了解原理,才能游刃有余的使用这些工具,高效的完成开发任务,比如vue的组件递归、缓存、强制刷新、混入、过滤器,Axios的默认配置、CancelToken等等,最近的项目笔记总结还没有写完,先把目录贴出来,期望进步吧。

离职后才搞懂 vue 项目开发流程中的疑惑点

如果你们还在从事前端,相忘于江湖吧🤣😂。

作者:
链接:https://juejin.im/post/5c488a3cf265da615705cc2a

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:离职后才搞懂 vue 项目开发流程中的疑惑点

链接:https://www.javascriptc.com/2863.html

« 今天一定要把 cookie 聊清楚
带你理解 JS 容易出错的坑和细节»
Flutter 中文教程资源

相关推荐

QR code