当前位置: 首页 > 后端技术 > Node.js

秘选分享(第一版)

时间:2023-04-03 20:42:46 Node.js

针对顶级XXX男装店、其摊位、供应商的沟通痛点,解决选品、上架、沟通等问题。主要功能供应商编辑产品发送给经销商特权选择人员及协同管理经销商GOODPASS选择产品图片下载管理淘宝天猫上架操作流程供应链APP上报产品-->暗选供应商编辑发送暗选-->暗选直接上淘宝天猫科技选择框架UI框架:reactUI组件库:AntDesignHTTP库:AxiosAPP状态管理:Redux代码风格:ESLintPrettiercss预处理:Less打包工具:webpack第三方插件七牛图片上传:qiniu-jsreact添加多个classNames:classNames复制函数:剪贴板文件下载保存:file-saver文件压缩:jszip时间处理:moment...业务插件淘宝天猫上架:mx-quick-shelf项目文件结构项目目录├──/config/#配置相关:devServer配置,env多环境配置,项目文件夹绝对路径,antd自定义主题├──/dist/#输出目录├──/public/#html模板图标文件├──/scripts/#构建配置├──/src/#业务逻辑代码│├──/assets/#项目静态资源文件│├──/common/#路由表和页面组件加载器&菜单管理│├──/components/#UI组件和UI相关方法││├──/Authorized/#权限组件&权限管理│├──/global/#全局状态管理│├──/layouts/#Items布局组件│├──/pages/#项目页面组件│├──/styles/#全局样式│├──/utils/#效用函数│├──App.js#项目入口组件│├──index.js#项目入口文件,挂载组件,初始化│├──reducers.js#mergecombinereducers│└──store.js#composemiddlewares&createstore├──.gitignore#git配置├──.babelrc#babel-loader配置├──.eslintrc#Eslint配置├──.prettierrc#Prettierrc配置└──package.json#项目信息页面目录├──/pages/#项目页面组件│├──/Home/#主页││├──/components/#页面私有组件││├──/view/#视图组件││├──/index.js#dom和control│││├──/index.less#style││├──/actions.js#reduex动作││├──/actionTypes.js#reduex动作类型││├──/index.js#entry││├──/reducer.js#reduexreducer││└──/service.js#http请求版本控制和发布流程版本控制管理分支规范(git)特性:新功能产区测试问题处理区develop:测试最新运行的代码,迭代下一个版本master:最新正式运行的代码fix:快速解决官方问题release:processcommitmessagespecification(git)featforacertainversion:newfunctionfix:修改bugdocs:文件更新样式:格式(css)refactor:重构(更改秘密选择选项卡)test:测试代码chore:更改构建过程或辅助工具发布上线过程合并需要上线的代码developdevelop分支代码build,release到测试服务器,移交测试,验收产品。bug解决后,会进行测试,产品会再次被接受。develop合并master然后构建,发布到官方服务器,提交测试和产品使用。官方紧急bug,fix直接修改测试,然后和master合并,小版本上线。不重要的下个版本会处理写入版本日志记录,master提交代码,加上git版本标签,方便追溯。版本日志记录##[3.1.0]-2019-09-19###新增-淘宝上架###变更-供应商标题和方案标题代码整合###修复-搜索调用界面多次触发###Removed-删除图片缩放功能###Deprecated-不推荐,以后会删除###Security-安全相关的bug部分功能展示和说明页面状态保留页面描述选择页面状态,选择子分类,刷新页面保留代码说明//进入页面获取分发者组componentDidMount(){this.getSendList({redirect:true})}//重新渲染时调用,将路由中的值赋值给statestaticgetDerivedStateFromProps(nextProps,prevState){const{match}=nextPropsconst{queryType,dayCollectId}=match.paramsif(prevState.queryType!==Number(queryType)){return{...prevState,queryType:Number(queryType||0)}}if(prevState.dayCollectId!==dayCollectId){返回{...prevState,dayCollectId:dayCollectId||''}}returnnull}//执行异步componentDidUpdate(prevProps,prevState){const{dayCollectId,queryType}=this.state//重新获取分发者组if(queryType!==prevState.queryType){this.getSendList({redirect:true//是否重定向})}//if(dayCollectId!==prevState.dayCollectId&&dayCollectId){this.setSendInfo({redirect:false})this.getSendItemInfo()}}//获取经销商组asyncgetSendList(option){const{pageNum,pageSize,queryType,vagueSearch}=this.stateawaitgetSendList({vagueSearch,pageNum,pageSize,queryType}).then(json=>{const{success,data:sendList}=jsonif(success){this.setState({sendList},()=>{this.setSendInfo(选项)})}})}//设置经销商详情setSendInfo(option){const{history}=this.propsconst{sendList,queryType,dayCollectId}=this.stateoption=Object.assign({redirect:false,resume:true},option||{})if(sendList.length<1){return}constexisted=sendList.find(item=>{returnitem.id===dayCollectId})constselectSendItem=option.resume&&existed?存在:sendList[0]this.setState({spuItem:selectSendItem,sendItemList:[]})option.redirect&&history.replace(`/goods/distributors_sent/${queryType}/${selectSendItem.id}`)}//获取经销商详情getSendItemInfo(){//...}店铺授权类目页面描述代码展示//CategoryModal.js{categoryData.map((item,index)=>({handleCategorChoose(item,index)}}/>

))}//CategoryItem.jsfunctionCategoryItem({loading=false,categorys,onChoose}){const[categorysList,setCategorysList]=useState([])const[selected,setSelected]=useState('')//在加载以后处理类目useEffect(()=>{if(!loading){setSelected('')setCategorysList(categorys)}else{setCategorysList([])}},[loading])//选择中类目consthandleChoose=item=>{setSelected(item.cid)onChoose(item)}//搜索consthandleChange=e=>{const{value}=e.targetdelay(()=>{constfilterList=categorys.filter(item=>item.name.indexOf(value)>=0)setCategorysList(filterList)},800)}return(
{类别List&&categoriesList.length>0&&(
    {categorysList.map(item=>(handleChoose(item)}>{item.name}{item.isParent?:null}))}
)}
)}踩过的坑mx-quick-shelf业务插件引入问题mx-quick-嘘elf?[mx-quick-shelf]npmlinksecret-goods-pc?[secret-goods-pc]npmlinkmx-quick-shelf原则上这一步没问题,但需要:?[mx-quick-shelf]npmlink。./../work/secret-goods-pc/node_modules/react?[mx-quick-shelf]npmlink../../work/secret-goods-pc/node_modules/react-dom现在解决webpack别名:{react:utils.resolve('./node_modules/react')}antdform表单问题{getFieldDecorator(`${_attributes.id}`,{rules:_rules,initialValue:_value,validateFirst:true})(formItemDom())}实现内部和外部验证的最佳方式是表单嵌套开头的方法theform:form标签不能嵌套,form标签不能包裹在子组件外面。尴尬的表单传递给子组件,id使用XXX.[x].xxx方法:有时候需要整合验证一些数据来优化改进点击添加前端日志记录,方便在线bug追踪和部署自动化以防止项目启动错误