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

这篇具有很好参考价值的文章主要介绍了端午假期整理了仿天猫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文件)

  • 登录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>

根据路由激活后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()
  }
})
  • to要到达的路由
  • from从那个路由来
  • 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',
    ],
  })],
})
  • 调用store时要加上名字
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],
      },
    })
  },

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

项目结构

  • BE(back-end后端)
    • bin 后端启动目录
      • www
    • email
      • email.js(发送验证码)
    • model
      • index.js(配置连接数据库)
    • public(默认的一些样式)
    • routes
      • index.js(公共的获取商品数据和轮播图)
      • private.js(私有的需要登录后获取用户信息)
      • user.js(登录与注册模块)
    • views(默认配置视图)
    • app.js(入口文件)
    • config.js(密钥存放文件)
    • package-lock.json(配置文件)
    • package.json(三方包资源)
  • dist(打包文件存放)
  • public (前端启动目录)
    • favicon.ico(图标存放)
    • index.html(前端主界面)
  • src(前端资源存放)
    • api(网络资源统一适配)
      • constants.js(前端放送网络请求用到的接口)
      • rotation.js(获取轮播图与商品模块)
      • search.js(搜索模块)
      • user.js(处理与用户信息相关模块)
    • assets(存放静态资源)
    • components (存放组件)
      • app-nav-bar(同步返回通用组件)
        • index.vue
      • app-tab-bar(拿到路由中信息并处理)
        • index.vue
      • tab-bar (其他一些组件)
        • index.vue(自定义插件)
        • search.vue(搜索功能,除主界面使用)
        • search-box.vue(搜索功能,主界面使用)
        • tab-bar.vue (底部导航)
    • router(路由)
      • index.js(路由模块)
      • router.js(路由分配)
    • store(仓库)
      • modules
        • shopping-cart.js(购物车逻辑处理模块)
      • index.js(仓库配置)
    • utils(工具模块)
      • request.js(封装axios)
      • vant-import.js(引入vant组件)
    • views(视图模块)
      • cart
        • index.vue(购物车视图)
      • category
        • index.vue(商品分类左边)
        • sub-category.vue(商品分类右边)
      • detail
        • index.vue(商品详情)
      • home
        • index.vue(主界面)
      • login
        • index.vue(登录与注册)
      • mine
        • changAvatar.vue(更改用户头像)
        • index.vue(我的页面)
      • not-found
        • index.vue(路径错误是404界面)
      • searchResult
        • searchResult.vue(搜索结果页面)
    • app.vue(主界面)
    • main.js(入口配置文件)
  • babel.config.js(配置文件)
  • jsconfig.json(JS配置文件)
  • package-lock.json(配置文件)
  • package.json(三方包资源)
  • vue.config.js(vue配置文件)

移动端适配

直接通过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
  • 将打包好的dist里面的文件放入到项目里

调试

  • 可以先连接手机,打开手机开发者模式,打开usb调试
  • HBuilder X 运行 => 运行到手机或模拟器 => 运行到Android App基座
  • 会在手机上安装一个调试工具,安装后点击运行就能在手机上看到效果

打包

  • 配置manifest.json
  • 配置应用标识(一般自带)

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

  • 配置应用图标
    端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

  • 点击 发行 => 原生App-云打包

  • 如果没有账号的话,需要先注册个账号(邮箱和电话必须验证)

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

  • 如果打包出现要实名认证可以取消通讯录
    端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

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

  • 点击地址下载文章来源地址https://www.toymoban.com/news/detail-400869.html

到了这里,关于端午假期整理了仿天猫H5 APP项目vue.js+express+mongo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)

    H5 项目基于 Web 技术,可以在智能手机、平板电脑等移动设备上的浏览器中运行,无需下载和安装任何应用程序,且H5 项目的代码和资源可以集中在服务器端进行管理,只需更新服务器上的代码,即可让所有顾客访问到最新的系统版本。 本系列将以肯德基自助点餐页面为模板

    2024年02月13日
    浏览(65)
  • Vue项目中app.js过大,导致web初始化加载过慢问题

    1、删除多余不需要的库: npm uninstall xxx 如例如moment库文件是很大的可以直接放到index.html文件直接CDN引入 2、修改/config/index.js配置文件:将productionGzip设置为false ​ 3、设置vue-router懒加载 懒加载配置: ​ 非懒加载配置: ​ 4、在webpack.prod.conf.js文件中修改配置: ​ 5、在in

    2024年02月11日
    浏览(42)
  • 已解决:安卓自带的webview加载前端h5项目白屏时长严重,vue首页加载白屏时间过长,那我让app进入的时候就提前加载网页

    自己写的vue项目,自己写的安卓壳子,本来自己觉得慢,忍忍就过去了,但是人家觉得慢,你不得改么?结果是前端自己开发,安卓也自己开发,想甩个锅都没法甩,总不能甩给后端吧?哈哈哈 描述一下我的情况,我写了一个vue项目,需要嵌在安卓里运行,没想到安卓webvi

    2024年02月03日
    浏览(62)
  • uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

            因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个

    2023年04月09日
    浏览(68)
  • js 判断手机、电脑、微信、h5、安卓、IOS、APP

    需求 在我们写项目时候, 经常会遇到限制打开页面的方式;那就需要我们去判断。网上有很多中方式,我给大家总结出来了 总结(解决) 以上是本文所有内容,这是集多位大佬文档整理出来的。有问题有补充可留言

    2024年02月16日
    浏览(51)
  • uni-app crypto-js DES 加解密 ,支持app , h5,小程序

    crypto-js DES 加解密 ,支持app,h5,小程序 第一步 npm install crypto-js 可以直接下载示例运行,看控制台打印 下载地址 https://ext.dcloud.net.cn/plugin?id=13351 crypto-js DES 加解密 - DCloud 插件市场

    2024年02月12日
    浏览(40)
  • uni-app搭建h5项目

    一、 打开官方网站 https://uniapp.dcloud.net.cn/quickstart-cli.html 二、找到使用vue-cli命令行,按照文档上的步骤进行搭建 全局安装 vue-cli 搭建项目 可以根据命令行搭建,搭建vue2.0对应的是webpack, 也可以搭建vue3.0+vite,命令行下载不下来,直接访问高亮起来的 gitee 然后下载模板即可

    2024年02月22日
    浏览(78)
  • Vue(h5)与App(android,ios)端交互详解

    最近开发vue与app交互,总结了一下开发心得。我是一名Android开发者,vue开发这块也稍有涉足,在android或者IOS中展示h5可以减少工作量,也能满足用户体验性。下面主要以Android和Vue方法介绍为主。 上菜了     三、 vue代码 注意,Vue中的方法通常是写在vue实例的methods中的,ap

    2024年02月10日
    浏览(38)
  • app内嵌h5支付功能,跳转支付宝&微信,vue组件

    app内前h5涉及到支付的功能,ios非实物商品实付需要使用ios原生支付方式,实物商品则可以三方支付,主要的实现思路为后端返回跳转支付宝或微信的支付scheme链接,前端进行跳转支付,同时需要实时查询用户的支付状态。 整个过程中复杂的部分在于查询用户支付状态的体验

    2024年02月06日
    浏览(50)
  • 前端Vue uni-app App/小程序/H5 通用tree树形结构图

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包