仿天猫html(html5仿天猫移动端页面)

端午节期间，我们整理了仿天猫H5APP项目vue.js+expss+mongo效果

源码

源码太多，点击放到github上

遇到的问题

连接mongodb数据库多个集合

Mongodb与mysql数据库连接不同。SQL在定义查询语句时可以连接不同的表。Mongodb需要在开始时定义用于连接的表。module.exports={dbProduct:mongoose.model('runoob',mongoSchema,'产品'),dbRotation:mongoose.model('runoob',mongoSchema,'旋转'),dbUsers:mongoose.model('runoob',mongoSchema,'用户'),};

发送验证码需要开启QQ邮箱SMTP

登录QQ邮箱，点击左上角设置，选择账户栏，向下滚动会出现POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务栏，选择IMAP/SMTP服务启用选项，如图所示。记得记录给你的授权码，填写pass//创建一个发送邮件的对象lettransporter=nodemailer.createTransport({service:'qq',secure:true,auth:{user:'XXX@qq.com',//QQ邮箱pass:'XXXXXXX',//授权码},})

在通用返回组件通过获取当前激活路由信息来改变界面标题

this.$route.meta.title;

在底部通用导航中，通过获取路由携带的信息来渲染底部组件

模板divclass='my-tabbar'my-tabbar:list='list'selectedColor='#f00'/my-tabbar/div/templatescript/*******************************//*应用程序中每个页面重用标签栏*//***************************/importpathsfrom'@/router/router'//从router获取信息exportdefault{name:'app-tab-bar',Computed:{list(){returnpaths.filter(route=route.meta?inTabbar).map(item=({//循环获取信息pagePath:item.path,text:item.meta.title,icon:item.meta.icon,}))},},}/scriptstylelang='少'/风格

根据路由激活后isActive来确定是否选中

:class='['tab-bar-item',isActive'router-link-active',isExactActive'router-link-exact-active']'

只有isActive和isExactActive为true时，才会有属性router-link-active、router-link-exact-active，这是渲染风格。

放置全局前置守卫来判定是否登录

//全局前端路由守卫，实现页面拦截router.beforeEach((to,from,next)={if(to.meta?permission){//只能访问的路由中有meta=登录后{permission:true}if(store.state.shoppingCart.token){next()}else{next('/login')}}else{next()}})

从该路由到下一步要到达的路由

store仓库，仓库中的数据在启用命名空间后只能在store中进行更改，并且调用时要加上仓库名称

启用命名空间namespaced:true,//命名空间

配置文件中也有相应的配置exportdefaultnewVuex.Store({strict:process.env.NODE_ENV!=='product',//开启严格模式，保证mutation中数据发生改变module:{shoppingCart,//shoppingCart是该模块的命名空间},plugins:[createPersistedState({storage:sessionStorage,//默认将数据保存到localStoragepaths:['shoppingCart.token','shoppingCart.name',],})],})

调用store时，添加名称import{mapActions,mapGetters}from'vuex'//引入映射导出default{name:'cart',Computed:{carts(){returnthis.$store.state.shoppingCart.carts},mapGetters('shoppingCart',['allChecked','allMoney']),//在前面添加模块名称shoppingCart},methods:{.mapActions('shoppingCart',['removeCart','changNumCart','changCheckedSingle','changCheckedAll']),//在前面添加模块名shoppingCartonSubmit(){console.log('提交订单');},onClickEditAddress(){console.log('修改地址');},},}

分类页面刚进入就显示商品信息

创建(){this.$router.push({name:'sub',params:{name:this.navList[0],},})},

即，类目页面加载完成后，向子路由器发送网络请求，获取第一类目产品中的数据。

项目结构

BE(后端backend)bin后端启动目录wwwemailmail.js(发送验证码)modelindex.js(配置连接数据库)public(部分默认样式)routesindex.js(公开获取商品数据和轮播)private.jsuser.jsviewsapp.jsconfig.jspackage-lock.jsonpackage.jsondistpublicfavicon.icoindex.htmlsrcapiconstants.jsrotation.jssearch.jsuser.jsassets组件app-nav-barindex.vueapp-tab-barindex.vuetab-barindex.vuesearch.vuesearch-box.vuetab-bar.vuerouterindex.jsrouter.jsstoremoduleshopping-cart.jsindex.jsutilsrequest.jsvant-import.jsviewscartindex.vuecategoryindex.vuesub-category.vuedetailindex.vuehomeindex.vueloginindex.vueminechangAvatar.vueindex.vuenot-foundindex.vuesearchResultsearchResult。vueapp.vuemain.jsbabel.config.jsjsconfig.jsonpackage-lock.jsonpackage.jsonvue.config.js移动端适配

直接通过PC端写的代码在移动端不同的设备上，布局会出现问题

metaname='viewport'content='width=device-width,initial-scale=1,maximum-scale=1，最小规模=1，用户可扩展=否'

让不同设备的视口取得最佳CSS像素

npminstallpostcss@8.2.6--save

npminstallpostcss-import@14.0.0--save

npm安装postcss-loader@5.0.0--save

npminstallpostcss-pxtorem@5.1.1--save

npminstallpostcss-url@10.1.1--save

安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url一系列插件

module.exports={plugins:{'postcss-pxtorem':{rootValue:32,//根目录的字体大小设置为32pxpropList:['*'],//proplist:就是需要的那些属性转换为rem,allminPixelValue:2//最小转换单位.2px}}};

在项目根目录下添加.postcssrc.js文件

script(function(){functionautoRootFontSize(){document.documentElement.style.fontSize=Math.min(screen.width,document.documentElement.getBoundingClientRect().width)/470*32+'px';//取screen.width和document.documentElement.getBoundingClientRect().width的最小值；//除以470再乘以32;表示相对于470的大小为32px;}window.addEventListener('resize',autoRootFontSize);autoRootFontSize();})();/脚本

注：设计师制作的效果图通常为750px。为了方便直接读取UI中标注的像素大小，根目录的字体大小设置为32px；

在项目中index.html的头部添加下面这段js代码：

打包

HBuilderX

File=New=项目选择模板会将打包的dist中的文件放入项目中

新建项目

可以先连接手机，打开手机开发者模式，打开USB调试HBuilderX运行=运行到手机或模拟器=运行到AndroidApp库，手机上会安装调试工具。安装后点击运行在手机上看效果

调试

配置manifest.json配置应用识别

配置应用程序图标

点击发布=原生App-云打包

如果您还没有账户，您需要先注册一个账户

封装配置

如果包裹需要实名认证，可以取消通讯录

打包成功

点击地址即可下载