位置: IT常识 - 正文

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

编辑:rootadmin
端午假期整理了仿天猫H5 APP项目vue.js+express+mongo 效果

推荐整理分享端午假期整理了仿天猫H5 APP项目vue.js+express+mongo(端午假期干什么),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:端午假活动,端午假期作息表,端午假期作息表,端午假活动,端午假期干什么,端午假活动,端午假期如何安排,端午假期整理了哪些东西,内容如对您有帮助,希望把文章链接给更多的朋友!

源码

源码太多,放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>根据路由激活后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 后端启动目录wwwemailemail.js(发送验证码)modelindex.js(配置连接数据库)public(默认的一些样式)routesindex.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.vueapp-tab-bar(拿到路由中信息并处理)index.vuetab-bar (其他一些组件)index.vue(自定义插件)search.vue(搜索功能,除主界面使用)search-box.vue(搜索功能,主界面使用)tab-bar.vue (底部导航)router(路由)index.js(路由模块)router.js(路由分配)store(仓库)modulesshopping-cart.js(购物车逻辑处理模块)index.js(仓库配置)utils(工具模块)request.js(封装axios)vant-import.js(引入vant组件)views(视图模块)cartindex.vue(购物车视图)categoryindex.vue(商品分类左边)sub-category.vue(商品分类右边)detailindex.vue(商品详情)homeindex.vue(主界面)loginindex.vue(登录与注册)minechangAvatar.vue(更改用户头像)index.vue(我的页面)not-foundindex.vue(路径错误是404界面)searchResultsearchResult.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 --savenpm install postcss-import@14.0.0 --savenpm install postcss-loader@5.0.0 --savenpm install postcss-pxtorem@5.1.1 --savenpm 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>端午假期整理了仿天猫H5 APP项目vue.js+express+mongo(端午假期干什么)

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

打包HBuilder X新建项目文件 => 新建 => 项目选择模板将打包好的dist里面的文件放入到项目里调试可以先连接手机,打开手机开发者模式,打开usb调试HBuilder X 运行 => 运行到手机或模拟器 => 运行到Android App基座会在手机上安装一个调试工具,安装后点击运行就能在手机上看到效果打包配置manifest.json配置应用标识(一般自带)

配置应用图标

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

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

打包配置

如果打包出现要实名认证可以取消通讯录

打包成功

点击地址下载

本文链接地址:https://www.jiuchutong.com/zhishi/300299.html 转载请保留说明!

上一篇:疑问搞懂,python中文词频统计,让你真能学会(python答疑)

下一篇:js调用gpt3.5(支持流回显、高频功能)(js调用函数的几种方法)

  • 北京增值税认证平台电话
  • 合伙企业税务筹划点
  • 个人抬头的发票可以报销吗
  • 销售人员的工资属于什么会计科目
  • 小微企业开票多少算小规模纳税人
  • 销售折让开具红字
  • 个体户3万免税免的是哪些税
  • 材料加工计入什么科目
  • 劳动合同的履行包括什么原则
  • 其他公司代缴社保分录
  • 按折现率计算现值
  • 苗木增值税发票税率
  • 汇算清缴截止
  • 无形资产和固定资产计提折旧的时间
  • 尚未开发的土地使用权摊销
  • 自己开电子发票要什么软件
  • 预计负债什么时候确认
  • 企业收到政府扶贫资金补助及运用补助金怎么做账
  • 怎么访问海康硬盘录像机
  • 新企业几个月没交社保
  • QQPCTray.exe是什么进程 QQPCTray.exe文件介绍
  • 损益类科目细分
  • rnbrcache.exe是什么意思
  • 补缴税款怎么补
  • 项目完工叫什么
  • linux安装配置ftp
  • 税务新政策解读
  • php从数据库中读取数据
  • thinkphp3.0
  • 最新版本金铲铲强势阵容
  • Vue3中的pinia使用(收藏版)
  • c语音进阶
  • smitty命令用法
  • php 下载上传文件
  • 帝国cms适合建什么站
  • 代理记账公司工作经历
  • 企业接受捐赠怎么入账
  • 企业坏账准备贷方核算内容
  • access使用查询设计视图计算并显示平均成绩
  • 织梦怎么用
  • 银行汇票是什么意思易懂
  • 会计期末业务有哪些?
  • 影响存货管理的因素有哪些
  • sqlserver去掉字符串内的指定字符
  • 确认营业收入的时间是什么简答题
  • 金税四期来了我们前期要准备什么
  • 公司购买汽车的会计分录
  • 个人社保应不应该缴纳
  • 个人独资企业个税怎么交
  • 借方记录什么的增加
  • 工厂厨房厨具
  • 注册资金未缴齐怎么处理
  • 随同产品销售不单独计价包装物如何进行账务处理?
  • 管理费用属于什么成本
  • 制造费用分配结转表
  • sql server使用教程
  • sqlserver全文索引
  • sql局部变量标识符
  • mysql免安装版下载
  • 用u盘重新装系统
  • ubuntu tcp
  • 五笔输入法怎么切换中文
  • 任务管理器快捷键ctrl+alt+
  • win10无法安装无线显示器
  • win10开机显示recover
  • win10系统优化的方法
  • 远程调试linux
  • ssh encountered 1 errors during the transfer错误3种解决方法
  • js浏览器打印
  • js导出excel文件前端插件
  • 谈谈对环境保护认识话题三分钟
  • 飞车超人助手官网
  • 命令行net
  • python 开源框架
  • 跟踪子弹
  • JavaScript中的数据类型分为两大类
  • android基础教程第三版电子版
  • 河北电子税务局社保缴费流程
  • 南京国税局长是谁
  • 盘锦税务局招聘信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设