手机端在线商城开发(前端vue+后台php)

已于 2022-03-02 01:23:26 修改
阅读量1.2k 收藏 2
点赞数 1
分类专栏： vue 文章标签： 前端 vue.js php
于 2022-01-15 10:43:16 首次发布
本文链接：https://blog.csdn.net/jtyxj/article/details/122506862
版权
本文介绍了一个在线商城项目的开发过程，重点讲解了商品属性SKU和SPU的概念及其在系统中的实现方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

最近接项目做了一个在线商城项目，因为工作中开发的业务不涉及到前端的一些商城服务，今天写出来记录一下，希望能对大家有一些借鉴意义

业务说明

整个商城中主要就是商品这个属性稍微有些复杂，至于后台数据库关于订单、购物车、地址管理、订单信息这些做起来比较快，因为平时主要做的就是后端服务。前后端都是自己开发的，所以效率也会高很多，毕竟前端需要的数据我可以尽可能的从后台整理好格式直接发送给前端

商品

商品主要有两个属性SKU和SPU，这里根据我自己的理解简单的解释一下
SKU：就是商品规格属性
SPU：怎么说呢，我把它理解成商品的属性
举个简单的例子
苹果手机12是商品
SPU就是颜色(白色、红色、绿色)、内存(128G、256G)、型号(min、max)
SKU就是白色/128G/max、绿色/256G/max等一个个的组合称为SKU
主要的就是这么一个概念比较复杂一点，理解之后开发起来就比较简单了

手机端效果图!

在这里插入图片描述
商品详情页:
在这里插入图片描述
购买页面

在这里插入图片描述
商品评价页面
在这里插入图片描述

总结：

由于截图不能太多设计广告审核过不了，就写这么多吧，有时间我会部署一下demo更新出来
欢迎沟通交流15651012186

博客
vue H5 App对接加油接口Api到自己App
09-19 1316
自己H5 app接入第三方加油渠道接口方法
博客
vue H5对接团油接口(后台服务是php)
09-19 1672
目录业务场景：简单介绍：声明业务逻辑接入代码总结：业务场景：用vue写的H5 app中现在需要接入能链集团的团油服务简单介绍：声明看团油的官方文档能顺利接通的是神仙，那种垃圾文档三流水平都算不上，缺胳膊少腿的业务逻辑其实很简单，下面详细梳理一下业务逻辑企业在团油申请成为合作方，申请通过后会给你一个渠道编码、key、Secret(这三个值注意，文档里不同接口可能叫不同的名字，就这种垃圾文档连个名字都统一不了呵呵) 根据文档的授权码接口,获取到团
博客
vue同一浏览器登录不同账号token覆盖导致的数据互相污染
04-10 4233
业务场景后台管理系统有不同的角色权限，不同账号的角色权限不同登录之后看到的页面也是不一样的，当我们用同一个浏览器登录一个账号A之后，再打开一个新的tab标签页重新登录一个不同于账号A角色权限的账号B之后，浏览器中A的token被B覆盖，导致A账号提交数据时候可能会出现后台误以为是B账号进行的一些操作，从而导致后台数据保存出现匹配错误的bug解决方案一、vue中新建一个全局变量用来保存当前用户token新建一个constants.js文件/** * 全局变量定义 */export let gl
博客
el-pagination分页自定义前往第几页样式(下拉框形式)
03-17 4305
el_pagination分页修改默认样式
博客
小程序之实现表格展示数据
03-07 4579
前言由于小程序组件一般是没有表格插件的，所以只能利用页面配合wxss强行自己写一个了实现步骤wxml中代码1、先写表头<view class="tr bg-w"> <view class="th">姓名</view> <view class="th">电话</view> <view class="th ">所属部门</view> <view class="th ">注册时间</view&g
博客
Cordova插件cordova-plugin-media-capture实现短视频的录制上传和播放
03-03 6246
效果图写在前面(吐槽)1、网上的教程大部分都是虎头蛇尾的不全的。互相抄来抄去真的感觉就没有一个是真正自己去写一写的，不然这里面这么多的坑就没有一个人出来说说的？下面就写写我实现功能过程中的一些问题吧，代码绝对完整并且按照步骤来一定可以成功！2、本文主要讲在Android中的实现，IOS端目前还在适配，不少问题到时候再另外单独发一篇实现逻辑1、客户端利用cordova-plugin-media-capture插件调用摄像机权限进行视频拍摄2、拍摄的视频上传至服务器3、服务端接收视频文件并转码保
博客
微信小程序----地理围栏实现员工防作弊地图打卡功能
03-03 2707
效果图业务场景小程序用户(公司员工)需要在小程序选择位置打卡并上传位置，为了保证员工是真实的去指定的地点开展了公司的业务而不是虚假打卡上传的位置，需要进行地理围栏限制，要求打卡上传的位置地点必须和员工的真实位置在一个可接受的距离范围内，防止员工作弊打卡实现步骤地图选点插件的引入实现小程序地图选点功能这个很简单，腾讯官方有详细的接入步骤，通过此步骤我们可以获取到员工的选点经纬度latitudelongitude获取用户的当前定位wx.getLocation({ type: 'gcj02'
博客
小程序Map组件点聚合功能详细接入步骤和ios、Android真机环境以及开发者工具各种样式差异的适配过程
03-02 4616
效果图ios效果图Android效果图开发者工具效果图业务场景需要将很多的小区根据经纬度在地图上进行标注，随着业务的推进，小区标注点越来越多，如何将所有的小区合理的分布在有限的地图空间上便于管理者全局的观察成了一个亟待解决的问题！首先当然是小程序刚更新没多久的组件map的点聚合功能了，有了点聚合还不够，如何合理的定义地图中心点也非常重要！接下来就是小程序Api MapContext.includePoints缩放视野展示所有经纬度！最后一个就是标记点markers的callout气泡窗
博客
IM即时通信多房间聊天室仿微信聊天(四)
03-01 432
聊天记录的保存和展示IM即时通信多房间聊天室仿微信聊天(一)IM即时通信多房间聊天室仿微信聊天(二)IM即时通信多房间聊天室仿微信聊天(三)聊天消息的保存我们直接在服务端接收到客户端发送的消息的时候进行操作，这样我们还可以剔除一些无用的消息，选择性的进行聊天记录的保存如用户连接进入聊天室和离开聊天室的消息我们就可以不用保存服务端在接收到GateWay转发过来的客户端消息后，进行聊天记录的保存代码如下:// /* 聊天记录保存(只保存发送的消息 不保存进入房间和离开房间数据) */
博客
IM即时通信多房间聊天室仿微信聊天(三)
03-01 597
IM即时通信多房间聊天室仿微信聊天(页面消息展示)在IM即时通信多房间聊天室仿微信聊天(一)中我们已经搭建了基本的通信架构，接下来重点就是发送的消息在页面的展示效果了1、消息发送box(文字、语音、图片、表情等)很明显这里需要使用v-show控制不同按钮的显示/隐藏<div class="sendbox"> <div class="left-icon" @click="changeAudioButton"> <img src="../assets/img/jia
博客
IM即时通信多房间聊天室仿微信聊天(二)
02-25 622
不依赖任何收费第三方组件，直接详细的业务逻辑和全量的代码都直接贴出来，复制即可跑起来
博客
IM即时通信多房间聊天室仿微信聊天(一)
02-24 2970
IM即时通信多房间聊天室仿微信聊天(概述)
博客
封装的H5 app无法使用van-uploader组件上传图片
01-15 5747
vant的组件van-uploader上传图片在vue做H5时候是没有问题的，就是说直接在浏览器上是可以的但是一旦封装成客户端android和ios的时候直接就失效了今天我把自己写的一个组件分享给大家我这里用的封装框架是cordova，用cordova讲vue H5的项目封装成客户端app1、组件内容<template> <div class="uploader"> <div class="info-imgs" v-for="(item, index) in u
博客
支付宝H5支付(手机网站支付)
10-13 1万+
前言接了支付宝这个支付之后我不得不说几句首先这个文档是真的垃圾！花里胡哨乱七八糟，找起来那叫一个费劲！当然可能因为人家业务复杂，逻辑严谨把他们的demo还是算了吧，那个demo就像什么呢，就像复制粘贴过来然后还不把别人东西去掉的意思！里面一堆用不着的代码！不建议下载学习，那样反而容易误导支付的逻辑这么一对比，微信还是牛批不少，自上而下的企业精神—严谨、简约！看支付宝app和微信app就知道了！垃圾归垃圾没办法还得接，都是穷惹的祸啊总而言之，垃圾demo不看也罢！进入正题。。。全程按照我的步骤
博客
cordova Android中webview加载第三方https链接中的http图片不显示解决方法
09-29 990
问题场景：cordova生成的android app在引入第三方的https网址时候，里面有图片是http链接形式加载的，这样会导致此图片不能正常显示，如图：解决方法：找到cordova webview插件inappbrowser逻辑代码找到代码中设置webview websetting的地方加入如下代码： //解决https第三方网址加载http图片 settings.setBlockNetworkImage(false); if(Build.VERSION.SDK_INT >=
博客
cordova打包ios到上架AppStore全过程记录(无敌详细)
09-11 3612
前言上一篇已经讲了cordova打包android app的全过程,在这里关于打包ios的过程就尽量简单说一下了。ios重点就是配置开发者证书的一些东西稍微复杂一点，下面图文详细的一步步操作。ios的配置证书我总结一下大致如下：首先需要证书和appid，pp文件(配置文件)其实是将appid和证书绑定的作用，主要就是这三个的配置一.配置ios证书1.打开钥匙串访问2.钥匙串访问—证书助理—从证书颁发机构请求证书：3.填写申请证书的一些信息：4.本地生成了.cer文件(这个文件是后续在
博客
Cordova封装打包vue H5项目到Android平台详解
09-05 1572
安装Cordovanpm install -g cordova安装完成之后终端输入cordova显示下图即表示安装成功创建Cordova项目进入你要创建项目的目录执行：cordova create helloWorldhelloWorld即为你的项目名成功创建之后文件夹如下：创建平台(这里是Android)进入刚才创建的Cordova项目helloWorld中cordova platform add android如果需要添加指定版本的android则在后面加上版本号co
博客
vue引入echart柱状图详细流程步骤
09-04 1242
安装echarts插件：npm install echarts --save这里只讲按需引入，因为全局引入写死的比较简单:在需要引入的.vue中：import * as echarts from 'echarts'接下来创建放置柱状图的容器：<div id='chart' style="width:100%;height:300px"></div>JS mounted方法中执行初始化echart的方法(这里我加了一个延时方法确保..
博客
小程序构建npm---miniprogarm_npm包
09-04 2418
小程序引入第三方npm包并没有生成miniprogram_npm 包的解决方案查看自己项目是否有package.json文件，如果没有，打开终端输入npm init就可以看到新生成的package.json文件了右上角--详情--本地设置--勾选使用npm模块 然后开始引入自己的第三方库(这里我以引入vant Weapp为例)控制台输入npm i @vant/weapp -S --production成功之后就可以在项目中看到node_modules文件夹了...
博客
thinkphp后台管理系统+vue前端H5 app
07-11 1878
thinkphp后台管理系统+vue前端H5 app众包接单型App全部源码已发布，欢迎star，移步码云前言1.帮朋友做的一个接单类型的后台管理系统（朋友的需求是淘宝好评刷管理）2.目前利用空闲时间改造成了接单众包类型的后台管理系统并且利用vue做了个手机端H5App3.目前没有服务器提供演示(具体我都会截图看效果)业务场景介绍当前十分火热的众包模式如美团众包，阿里众包等，国外已经火了很久了witkee模式简单来讲就是用户可以在app中发布自己的需求让其他有能力的用户替自己办事并获得相
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值