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

m0_67393413

于 2022-07-30 01:20:13 发布

阅读量358

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67393413/article/details/126066793

版权

效果

请添加图片描述

源码

源码太多，放github上了点击

遇到的问题

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

mongodb与mysql数据库连接不同，sql在定义查询语句时可以连接不同的表
mongodb需要在开始定义好连接要用到的表

module.exports = {
dbProduct: mongoose.model(‘runoob’,mongoSchema,‘product’),
dbRotation: mongoose.model(‘runoob’,mongoSchema,‘rotation’),
dbUsers:mongoose.model(‘runoob’,mongoSchema,‘users’),
};

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

登录QQ邮箱
点击左上角设置
选择账户栏往下翻
有一个POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务栏,选择IMAP/SMTP服务开启选项,如图.记得记录给你的授权码,填入pass

// 创建发送邮件对象
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>