端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

效果

端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

源码

源码太多，放github上了点击

遇到的问题

连接mongodb数据库多个集合（model文件）

  1. mongodb与mysql数据库连接不同，sql在定义查询语句时可以连接不同的表
  2. mongodb需要在开始定义好连接要用到的表
module.exports = {
    dbProduct: mongoose.model('runoob',mongoSchema,'product'),
    dbRotation: mongoose.model('runoob',mongoSchema,'rotation'),
    dbUsers:mongoose.model('runoob',mongoSchema,'users'),
  };

发送验证码需要开启QQ邮箱SMTP（email文件）

// 创建发送邮件对象
let transporter=nodemailer.createTransport({
    service:'qq',
    secure: true,
    auth:{
        user:'XXX@qq.com',  // QQ邮箱
        pass:'XXXXXXX',  // 授权码
    },
})

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

this.$route.meta.title;

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

<template>
  <div class="my-tabbar">
   <my-tabbar :list="list" selectedColor="#f00"></my-tabbar>
  </div>
</template>
<script>
/***************************/
/* 应用中各页面复用的tabbar */
/***************************/
import routes from '@/router/router' // 从router中获取信息
export default {
    name: 'app-tab-bar',
    computed:{
      list(){
        return routes.filter(route=>route.meta?.inTabbar).map(item=>({ // 循环遍历拿到信息
          pagePath: item.path,
          text: item.meta.title,
          icon: item.meta.icon,
        }))
      },
    },
}
</script>
<style lang="less">
</style>

根据路由激活后isActive来确定是否选中（components文件夹）

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

只有isActive，isExactActive为真才会有属性router-link-active，router-link-exact-active也就是渲染样式

放置全局前置守卫来判定是否登录（router文件夹）

// 全局前置路由守卫，实现页面拦截
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, // 命名空间（名字空间） 

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 启用严格模式，保证在mutation中更改数据
  modules: {
    shoppingCart, //shoppingCart 是这个模块命名空间
  },
  plugins: [createPersistedState({
    storage: sessionStorage, // 默认是向 localStorage 中保存数据
    paths:[
      'shoppingCart.token',
      'shoppingCart.name',
    ],
  })],
})

import { mapActions,mapGetters } from 'vuex' // 引入映射
export default {
  name:'cart',
  computed:{
    carts(){
      return this.$store.state.shoppingCart.carts
    },
    ...mapGetters('shoppingCart',['allChecked','allMoney']), // 前面加入模块名shoppingCart
  },
  methods:{
    ...mapActions('shoppingCart',['removeCart','changNumCart','changCheckedSingle','changCheckedAll']), 
    // 前面加入模块名shoppingCart
    onSubmit(){
      console.log("提交订单");
    },
    onClickEditAddress(){
      console.log('修改地址');
    },
  },
}

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

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

也就是在分类页面加载好后即向子路由发送网络请求拿到第一个分类商品中的数据

项目结构

移动端适配

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

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

npm install postcss@8.2.6 --save

npm install postcss-import@14.0.0 --save

npm install postcss-loader@5.0.0 --save

npm install postcss-pxtorem@5.1.1 --save

npm install postcss-url@10.1.1 --save

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

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

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

<script>(function () {
    function autoRootFontSize() {
      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();
  })();</script>

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

打包

HBuilder X

新建项目

调试

打包

端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

标签 , ,

发表回复