诺娜是一家在当时成立不久的软件公司,在该公司分为三阶段,第一阶段做客户项目, 第二阶段做甲方客户项目,第三阶段做自己的产品项目,详细介绍如下; 一、第一阶段 1.noona-mpa (Vue2 + Webpack + HTML5 打包的多页面项目) 简单的介绍一下这个项目,诺娜公司有个新闻咨询APP,类似趣头条,收益来源是广告流推广,赌球等(公司注册地在菲律宾在他们那是合法的) 项目场景: 在他们的原生APP,iOS和安卓环境增加几个功能配置 项目需求: 增加几个模块,如:猜涨跌,分享得金币实物,优惠券商城,支付,个人信息>修改,运维有配置关闭 || 开启(当时写的HTML5单页,后来考虑把Vue路由拿掉,每个文件都是一个页面用Webpack) 亮点:拿掉Vue路由,用Webpack做多页面打包,配合中间件JSBridge做回响,写一个native.js注册回响方法,再与原生APP开发两个老哥约定好回调方法调用 2.noona-ssr (Vue2 +nuxt) 简单的介绍一下这个项目,针对诺娜公司APP推广、分享(推特、Facebook、微信等),因为vue的seo短板,所以用到了nuxt做动态head设置,就是欺骗分享爬虫捕获,该项目用node 做一个轻服务长连接 亮点:动态设置Head解决了分享、seo痛点,这个项目主要作为新闻咨询的详情页,类似于淘宝商品详情页 3.noona-console (Vue2 + Element UI-admin) 简单的介绍一下这个项目,主要是为了多页面项目(noona-mpa)的商品配置支持,游戏设置等 二、第二阶段 1.食安先管理系统 这个项目是这做诺娜自己的项目之前公司维护的客户项目 简单的介绍一下这个项目 食安先管理系统 vue2后台管理系统 猪肉粮油分销 例如:1吨粮食分到200-500克多级分销 例如:一头猪分成到里脊肉、五花肉等 这是一个基于Vue2+Webpack脚手架 + Element UI 自己第一个独立完成的vue项目,亮点全局分销添加组件类似于如下功能 父类信息; 表格 类别名 数量 父类 商品名称 进货日期 等 全局组件:[类别名输入框,数量输入框,父类选择,商品名称输入框,进货日期时间选择器 ] 全局组件:[类别名输入框,数量输入框,父类选择,商品名称输入框,进货日期时间选择器 ] 全局组件:[类别名输入框,数量输入框,父类选择,商品名称输入框,进货日期时间选择器 ] 确定 取消 2.BOSS贷款项目(外包牛BOSS贷款项目) 项目介绍,整个流程,资产方(公司进行资料填写,授信核实,审批),到微商银行方这边看到审批通过,开通一个中间件网上银行账户 资金方进行授信、征信收集,拨款打到那个网商银行,剩余由资金方进行后续管理 该项目由4个子项目组成分别是 资金方(网商银行)web响应式网站:征信审核,贷款授权,核实,贷款异常明细(贷款中,逾期,待还款等)(技术用到是jQuery+class名UI) 资产方(公司)web响应式网站:个人信息,授信信息,贷款金额,贷款信息(贷款中,逾期,待还款等)(技术用到是jQuery+class名UI) 资产方手持(H5)操作:如上方便资产方手机操作,整理 资产方(公司)web需求写的一个简化版H5 (技术用到是Vue2+VUXUI) 资产方小程序:如上方便资产方手机操作,整理 资产方(公司)web需求写的一个简化版小程序 (技术用到是Vue2+WeUI) 亮点:图片压缩处理,在线签字canvas在线盖章,提交审核,文件转成PDF格式预览(iOS和安卓文件查看的兼容性问题) 三、第三阶段 客户介绍:客户一家做棉花生意的2B电商公司,买家客户通过介绍或者宣传等,在客户官网注册,进行棉花筛选,添加购物车进行询盘操作,客户官网分两类用户,一类是棉花供应商卖家,一类是客户买家,询盘后会被卖家通知短信,登录操作,如多个客户看中同一批次,就可以进行竞价,竞价有最高限制,等一系列询盘完成,因为棉花一批次就是几十万,所以不支持线上支付,需要客户那边的客户经理把询盘单据,合同等找到客户先付多少,然后找到卖家给资料,就直接把该订单批次发物流给到客户,客户检测没问题交付尾款(总的来说好像是卖房子的销售,只是卖棉花比较复杂,并不能卖家和买家直接购买),一版提交给客户那边,后面结束客户那边自己维护更新自己的项目 一个企业对企业的电子商务交易系统,分为四个部分 1.cotton-admin Java前后台不分离的公司官网后台系统,复杂的ERP数据操作 用到技术:jsp+html+jQuery页面 2.cotton-web (不分离)客户的官网 在客户官网注册,进行棉花筛选,添加购物车进行询盘操作,客户官网分两类用户,一类是棉花供应商卖家,一类是客户买家,询盘后会被卖家通知短信,登录操作,如多个客户看中同一批次,就可以进行竞价,竞价有最高限制,等一系列询盘完成 这个项目也是要改vue分离,部分做vue模块数据渲染处理 亮点:在项目做Vue模块数据渲染会出现ES6不向下兼容问题,增加了babel.min.js作用把ES6语法转换ES5 可以在 cotton-web\src\main\webapp\WEB-INF\common\top.jsp 文件中看到 3.h5web (Vue2项目) 客户官网的公众号H5简化版查找、筛选、添加购物车、进行询盘 亮点:一个手写比较复杂的Form不限类型的表单,在每笔询盘订单数据监控,大概逻辑是,写一个类似watch监听多个form,通过操作改变修改源数据,然后回传接口 4.xiaochengxu (IView) 客户官网的公众号H5简化版查找、筛选、添加购物车、进行询盘,后客户遗弃公众号H5项目,主攻小程序电商