vue+element实现电商商城礼品代发网,商品、订单管理
一、项目效果图
1.首页
2.登录
版本2:
3.注册
4.找回密码
5.立即下单
6.商品详情
7.个人中心-工作台
8.个人中心-订单列表
9.订单中心-包裹列表
10.个人中心-工单管理
11.我的钱包
12.实名认证
13.升级vip
14.个人中心-推广赚钱
二、关键源码
1.路由配置
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/components/index/index'
Vue.use(Router)export const constantRoutes = [{path: '/index',component: Layout,children: [{path: '',name: '主页',component: () =>import( /* webpackChunkName: "views" */ '@/views/home/index'),}]},{path: '/',name: '主页',redirect: '/index'},{path: '/type',component: Layout,children: [{path: '',name: '分类',component: () =>import( /* webpackChunkName: "views" */ '@/views/type/index'),}]},{path: '/productDetail',component: Layout,children: [{path: '',name: '商品详情',component: () =>import( /* webpackChunkName: "views" */ '@/views/product_detail/index'),}]},{path: '/personal',component: Layout,redirect: '/personal/staging',children: [{path: 'staging',name: '个人中心',component: () =>import( /* webpackChunkName: "views" */ '@/views/personal/index'),redirect: '/personal/staging',children:[{path: '/personal/staging',name: '工作台',component: () => import( '@/views/personal/staging.vue')},{path: '/personal/order',name: '订单列表',component: () => import( '@/views/personal/order.vue')},{path: '/personal/package',name: '包裹列表',component: () => import( '@/views/personal/package.vue')},{path: '/personal/merchant',name: '工单管理',component: () => import( '@/views/personal/merchant.vue')},{path: '/personal/myWallet',name: '我的钱包',component: () => import( '@/views/personal/my_wallet.vue')},{path: '/personal/auth',name: '实名认证',component: () => import( '@/views/personal/auth.vue')},{path: '/personal/vip',name: '升级VIP',component: () => import( '@/views/personal/vip.vue')},{path: '/personal/popMoney',name: '推广赚钱',component: () => import( '@/views/personal/pop_money.vue')}]}]},];const createRouter = () => new Router({// mode: 'history', // require service supportscrollBehavior: () => ({y: 0}),routes: constantRoutes
})const router = createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {const newRouter = createRouter()router.matcher = newRouter.matcher // reset router
}export default router
2.登录注册窗口
<template><div><!-- 登录弹窗 --><el-dialogclass="form-dialog"title="":visible.sync="box"width="500px":close-on-click-modal="false"center><div><div v-show="modalType === 'forget'" class="form-title"> 找回密码 </div><div class="tabs-group"><a :class="'tab-link el-link el-link--danger '+(modalType === 'login'?'active':'')" @click="changeModalType('login')"><!----><span class="el-link--inner"> 登录 </span><!----></a><div class="tab-divider el-divider el-divider--vertical"><!----></div><a :class="'tab-link el-link el-link--danger '+(modalType === 'register'?'active':'')" @click="changeModalType('register')"><!----><span class="el-link--inner"> 注册 </span><!----></a></div><el-form v-show="modalType === 'login'" class="login-form"status-icon:rules="loginRules"ref="loginForm":model="loginForm"label-width="0"><el-form-item prop="phone"><el-input size="small"v-model="loginForm.phone"auto-complete="off"placeholder="请输入您的手机号"><i slot="prefix" class="el-icon-user el-icon--right"/></el-input></el-form-item><el-form-item prop="password" v-show="loginType === 'pwd'"><el-input size="small":type="passwordType"v-model="loginForm.password"auto-complete="off"placeholder="请输入您的密码"><i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/><i slot="prefix" class="el-icon-lock el-icon--right"/></el-input></el-form-item><el-form-item prop="validCode" v-show="loginType === 'code'"><el-input size="small" placeholder="请输入验证码" v-model="loginForm.validCode" class="input-with-select"><i slot="prefix" class="el-icon-user el-icon--right" style="line-height: 32px;"/><el-button slot="append" @click="sendValidCode">发送验证码</el-button></el-input></el-form-item><el-form-item><el-row :span="24"><el-col :span="12"><el-checkbox v-show="loginType === 'pwd'" v-model="loginForm.autoLogin">保存密码</el-checkbox></el-col><el-col :span="loginType === 'pwd'?12:24" style="text-align: right;"><el-button type="text"style="width: 100px;color: #606266;"@click.native.prevent="changeModalType('forget')"class="login-submit">忘记密码</el-button></el-col></el-row><el-row :span="24"><el-col :span="24" style="text-align: right;"><el-button type="primary"style="width: 100%;height: 40px;"@click.native.prevent="handleLogin"class="login-submit">登录</el-button></el-col></el-row></el-form-item></el-form><el-form v-show="modalType === 'register'" class="login-form"status-icon:rules="registerRules"ref="registerForm":model="registerForm"label-width="0"><el-form-item prop="phone"><el-input size="small"v-model="registerForm.phone"auto-complete="off"placeholder="请输入您的手机号"><i slot="prefix" class="el-icon-user el-icon--right"/></el-input></el-form-item><el-form-item prop="validCode"><el-input size="small" placeholder="请输入验证码" v-model="registerForm.validCode" class="input-with-select"><i slot="prefix" class="el-icon-user el-icon--right" style="line-height: 32px;"/><el-button slot="append" @click="sendValidCode">发送验证码</el-button></el-input></el-form-item><el-form-item prop="password"><el-input size="small":type="passwordType"v-model="registerForm.password"auto-complete="off"placeholder="6-20位密码"><i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/><i slot="prefix" class="el-icon-lock el-icon--right"/></el-input></el-form-item><el-form-item prop="passwordConfirm"><el-input size="small":type="passwordType"v-model="registerForm.passwordConfirm"auto-complete="off"placeholder="请输入确认密码"><i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/><i slot="prefix" class="el-icon-lock el-icon--right"/></el-input></el-form-item><el-form-item><el-row :span="24"><el-col :span="24" style="text-align: right;"><el-button type="primary"style="width: 100%;height: 40px;"@click.native.prevent="handleRegister"class="login-submit">注册</el-button></el-col></el-row></el-form-item></el-form><div v-show="modalType === 'login' || modalType === 'register'" class="login-type-change"><a class="el-link el-link--info" @click="changeLoginType('pwd')"><!----><span class="el-link--inner">密码登录</span><!----></a><div class="el-divider el-divider--vertical"><!----></div><a class="el-link el-link--info"><!----><span class="el-link--inner" @click="changeLoginType('code')">验证码登录</span><!----></a></div><el-form v-show="modalType === 'forget'" class="login-form"status-icon:rules="forgetRules"ref="registerForm":model="forgetForm"label-width="0"><el-form-item prop="phone"><el-input size="small"v-model="forgetForm.phone"auto-complete="off"placeholder="请输入您的手机号"><i slot="prefix" class="el-icon-user el-icon--right"/></el-input></el-form-item><el-form-item prop="validCode"><el-input size="small" placeholder="请输入验证码" v-model="forgetForm.validCode" class="input-with-select"><i slot="prefix" class="el-icon-user el-icon--right" style="line-height: 32px;"/><el-button slot="append" @click="sendValidCode">发送验证码</el-button></el-input></el-form-item><el-form-item prop="password"><el-input size="small":type="passwordType"v-model="forgetForm.password"auto-complete="off"placeholder="6-20位密码"><i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/><i slot="prefix" class="el-icon-lock el-icon--right"/></el-input></el-form-item><el-form-item prop="passwordConfirm"><el-input size="small":type="passwordType"v-model="forgetForm.passwordConfirm"auto-complete="off"placeholder="请输入确认密码"><i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/><i slot="prefix" class="el-icon-lock el-icon--right"/></el-input></el-form-item><el-form-item><el-row :span="24"><el-col :span="12" style="text-align: left;"><el-button type="text"@click="changeLoginType('pwd')"style="width: 100px;color: #606266;"@click.native.prevent="handleLogin"class="login-submit">返回登录</el-button></el-col></el-row></el-form-item><el-form-item><el-row :span="24"><el-col :span="24" style="text-align: right;"><el-button type="primary"style="width: 100%;height: 40px;"@click.native.prevent="handleForget"class="login-submit">确认修改</el-button></el-col></el-row></el-form-item></el-form></div></el-dialog></div>
</template><script>export default {name: "login_modal",data() {return {box: false,modalType: 'login',loginType: 'pwd',loginForm: {phone: "",password: "",validCode: "",autoLogin: false},loginRules: {phone: [{required: true, message: "请输入您的手机号", trigger: "blur"}],password: [{required: true, message: "请输入您的密码", trigger: "blur"},{min: 1, message: "密码长度最少为6位", trigger: "blur"}],validCode: [{required: false, message: "请输入验证码", trigger: "blur"}],},registerForm: {phone: "",validCode: '',password: "",passwordConfirm: "",},registerRules: {phone: [{required: true, message: "请输入您的手机号码", trigger: "blur"}],validCode: [{required: true, message: "请输入验证码", trigger: "blur"}],password: [{required: true, message: "请输入密码", trigger: "blur"},{min: 1, message: "密码长度最少为6位", trigger: "blur"}],passwordConfirm: [{required: true, message: "请输入确认密码", trigger: "blur"},{min: 1, message: "密码长度最少为6位", trigger: "blur"}]},forgetForm: {phone: "",validCode: '',password: "",passwordConfirm: "",},forgetRules: {phone: [{required: true, message: "请输入您的手机号码", trigger: "blur"}],validCode: [{required: true, message: "请输入验证码", trigger: "blur"}],password: [{required: true, message: "请输入密码", trigger: "blur"},{min: 1, message: "密码长度最少为6位", trigger: "blur"}],passwordConfirm: [{required: true, message: "请输入确认密码", trigger: "blur"},{min: 1, message: "密码长度最少为6位", trigger: "blur"}]},passwordType: "password",};},watch: {'loginType'(){if(this.modalType === 'login' && this.loginType === 'code'){this.loginRules['validCode'][0].required = true;}else{this.loginRules['validCode'][0].required = false;}}},mounted() {},methods: {//登录模式changeModalType(type){this.modalType = type;if(this.$refs.loginForm){this.$refs.loginForm.resetFields();}if(this.$refs.registerForm){this.$refs.registerForm.resetFields();}},//登录模式changeLoginType(type){this.modalType = 'login';this.loginType = type;if(this.$refs.loginForm){this.$refs.loginForm.resetFields();}if(this.$refs.registerForm){this.$refs.registerForm.resetFields();}},loginModal(){this.box = true;if(this.$refs.loginForm){this.$refs.loginForm.resetFields();}if(this.$refs.registerForm){this.$refs.registerForm.resetFields();}},showPassword() {this.passwordType === ""? (this.passwordType = "password"): (this.passwordType = "");},//登录handleLogin() {this.$refs.loginForm.validate(valid => {if (valid) {const loading = this.$loading({lock: true,text: '登录中,请稍后。。。',spinner: "el-icon-loading"});loading.close();}});},//发送验证码sendValidCode(){if(this.registerForm.phone.trim() === ''){this.$message.warning('请输入手机号码');return;}},//注册handleRegister() {this.$refs.registerForm.validate(valid => {if (valid) {const loading = this.$loading({lock: true,text: '注册中,请稍后。。。',spinner: "el-icon-loading"});loading.close();}});},//找回密码handleForget() {this.$refs.forgetForm.validate(valid => {if (valid) {const loading = this.$loading({lock: true,text: '保存中,请稍后。。。',spinner: "el-icon-loading"});loading.close();}});},}}
</script><style scoped>.form-dialog .tabs-group {display: flex;justify-content: center;margin: 20px;}.el-link.el-link--danger {color: #f56c6c;}.form-dialog .tabs-group .tab-link {font-size: 16px;color: #999;}.form-dialog .tabs-group .active {font-size: 20px;color: #f94a3d;}.el-divider--vertical {display: inline-block;width: 1px;height: 1em;margin: 0 8px;vertical-align: middle;position: relative;}.form-dialog .tabs-group .tab-divider {height: 28px;}.el-divider {background-color: #dcdfe6;}.form-dialog .login-type-change {margin-top: 14px;text-align: center;}.el-link.el-link--info {color: #909399;}.el-link {display: inline-flex;flex-direction: row;align-items: center;justify-content: center;vertical-align: middle;position: relative;text-decoration: none;outline: none;cursor: pointer;padding: 0;font-size: 14px;font-weight: 500;}.form-dialog .tabs-group .tab-link:hover {color: #fa6a64;}.form-dialog .form-title {font-size: 20px;color: #666;font-weight: 700;line-height: 1;padding-bottom: 37px;text-align: center;}
</style>
三、项目结构、设计说明
项目以vue项目创建,前端某些元素使用element,项目启动执行的命令为:
npm install
npm run dev(当然命令可以修改为npm run serve,没啥区别)
注意:npm install 成功了再执行 npm run dev 启动项目
结构如下截图,项目已经集成和实现了需要请求后端接口的一切功能,所以无须花费精力去考虑前端如何去对接后端和接口,可以把一切精力放在实现前端界面设计上来。
这样不懂后端的伙伴也省心省力,接口请求只需按照模板去copy就好,无非就是get/post/delete/put等请求方式和参数传递的差别,当然不明白的可以细问作者。
项目结构还是分为:顶部+具体功能显示容器+底部,页面存放于src/components目录下,看目录命名就能明白其含义,具体功能页面在views目录下。
路由在router目录中。
四、总结
后续不定期将不断完善和增加功能页面(数据分离管理、页面数据通讯交互、参数变化等),敬请期待。
关注作者,及时了解更多好项目!
作者主页也有更多好项目分享!
获取源码或如需帮助,可通过博客后面名片+作者即可!
相关文章:

vue+element实现电商商城礼品代发网,商品、订单管理
一、项目效果图 1.首页 2.登录 版本2: 3.注册 4.找回密码 5.立即下单 6.商品详情 7.个人中心-工作台 8.个人中心-订单列表 9.订单中心-包裹列表 10.个人中心-工单管理 11.我的钱包 12.实名认证 13.升级vip 14.个人中心-推广赚钱 二、关键源码 1.路由配置 impor…...

Python接口自动化-requests模块之post请求
一、源码解析 def post(url, dataNone, jsonNone, **kwargs):r"""Sends a POST request.:param url: URL for the new :class:Request object.:param data: (optional) Dictionary, list of tuples, bytes, or file-likeobject to send in the body of the :cl…...
DDoS检测防御实现方案
流量采集模式 通过分光器将流量直接镜像到攻击检测器,收包采用DPDK库。 当前整机流量、源IP信息、连接数 、连接内容(五元组等)的信息汇聚 当发生告警时采样原始数据包, 采用固定采样算法 基于检测对象的TCP syn ack psh ack established的个数、流量…...

ArcGIS: 第二届全国大学生GIS技能大赛(广西师范学院)详解-下午题
目录 01 题目 02 思路和实操 2.1 流域提取-思路 2.2 流域提取-实操 2.2.1 获取DEM 编辑 2.2.2 水文分析-提取流域基于单出水口 2.3 河网分级-思路 2.4 河网分级-实操 2.4.1 提取河道网络 2.4.2 河网分级 编辑 2.5 子流域提取和处理-思路 2.6 子流域提取和处理-实…...

vue七牛云视频直传
完成后样式: 下面的代码是我自己项目里面用到的,一些判断看自己情况去掉,用的是element-ui组件 安装 uuid 库。你可以使用 npm 或 yarn 来完成安装。在终端中执行以下命令: npm install uuidhtml部分 <el-upload class&quo…...

云原生Kubernetes:K8S集群版本升级(v1.20.15 - v1.22.14)
目录 一、理论 1.K8S集群升级 2.集群概况 3.升级集群(v1.21.14) 4.验证集群(v1.21.14) 5.升级集群(v1.22.14) 6.验证集群 (v1.22.14) 二、实验 1.升级集群(v1.21.14) 2.验…...

VUE树结构实现
实现效果: 数据库表结构如下: 要求:需要有parentId,id。parentId就是父记录的id 表数据要求:一定不要让一条记录的parentid和id相同 前端代码: 注意:el-table标签里面需要加上属性,才可以有下拉箭头的样式 <el-table v-loading="listLoading" :data...

Node.js 正在逐渐被淘汰!Bun 1.0 正在改变 JavaScript 的游戏规则
在深入讨论之前,我们需要解释什么是 JavaScript 运行时以及为什么我们应该关心其速度。 想象一下,你用 JavaScript 写了一个故事,需要有人大声读出来。JavaScript 运行时就像是那个友好的叙述者,为你的故事赋予生命!它…...

[Machine Learning][Part 5]监督学习——逻辑回归
之前文章中提到监督学习的应用可分为两类:线性回归和逻辑回归。和线性回归不同,逻辑回归输出只有0和1。对于一个逻辑回归任务,可以先使用线性回归来预测y。然而我们希望逻辑回归预测模型输出的是0和1,为了达到这个目的,…...

whistle安卓手机抓包(图文详解)
1、安装node https://nodejs.org (官网下载对应的node,一般推荐长期稳定版本 LTS) 需要node的版本是大于 v0.10.0 查看自己本地node 版本号 node -v2、安装whistle npm i -g whistle3、开启whistle 补充说明: ● w2 stop:关闭…...
【经典排序算法 time: 2023-10-12】冒泡排序(层层优化改进)
原理 每次循环找出一个最大的元素(动态演示)第一版冒泡 public class Maopao1 {public static void main(String[] args) {long start System.currentTimeMillis();int[] arr2 {11, 23, 69, 99, 1, 3, 45, 67, 5, 234, 678, 999, 7, 123};int[] result…...

【图像去噪的扩散滤波】图像线性扩散滤波、边缘增强线性和非线性各向异性滤波(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

4、在docker容器内的tomcat 中发布项目
1、查看本地是否有tomcat镜像,如果不存在则去下载 docker images 2、查看本地是否有tomcat容器,如存在跳过第3步 docker ps 3、创建tomcat容器 此容器用于复制tomcat的配置文件,配置文件复制后需删除此容器,如果已经存在跳过此步…...

数学建模——人工神经网络模型
一、人工神经网络简介 1、神经网络起源与应用 1943年心理学家McCulloch和数学家Pitts提出神经元生物数学模型(M-P模型),后来人工神经网络(Artifical Neural Network,ANN)是在生物神经网络(Biological Neural Network,BNN)基础上发展起来的&a…...
java合成多个pdf为一个pdf
pom文件 <dependency><groupId>com.lowagie</groupId><artifactId>itext</artifactId><version>2.1.7</version></dependency>主文件 import com.lowagie.text.Document; import com.lowagie.text.pdf.PdfCopy; import com.lo…...

“高级Vue状态管理 - Vuex的魅力与应用“
目录 引言1. Vuex的简介1.1 什么是Vuex?1.2 Vuex的核心概念 2. Vuex的值获取与改变(综合案例)3. Vuex的异步请求总结 引言 在现代Web开发中,前端应用变得越来越复杂。随着应用规模的扩大和数据流的复杂性增加,有效地管理应用的状态成为了一项…...
Vue整合
基础配置: 1.创建:cmd 中 输入 create vue vue_name 启动命令:npm run serve 2.当node_modules(依赖)丢失时通过 npm install 下载 【根据:package-lock.json下载】 3.下载路由 npm i vue-router3.5.2 -S main.js导入 // np…...

探秘PMP和六西格玛的不同:哪一个能为你的职业生涯加分?
今天,我们将带你深入了解一项相对冷门但价值不菲的证书——六西格玛黑带。 可能你曾听说过PMP,但相比之下,六西格玛黑带的资源分享似乎较少,考试内容却更为广泛深入。这里,让我为你详细解析这一考试,带你进…...
大数据学习(3)-hive分区表与分桶表
&&大数据学习&& 🔥系列专栏: 👑哲学语录: 承认自己的无知,乃是开启智慧的大门 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝支持一下博>主哦&#x…...
JS 原生实现触底加载
创建一个容器来存储列表项。 监听滚动事件,当滚动接近底部时触发加载更多操作。 加载更多数据后,将新数据附加到容器中。 以下是一个简单的示例: <!DOCTYPE html> <html><head><style>#scroll-container {heigh…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...

汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...

stm32wle5 lpuart DMA数据不接收
配置波特率9600时,需要使用外部低速晶振...