当前位置：首页 > news >正文

使用vue2技术写了一个纯前端的静态网站商城-鲜花销售商城

news 来源：原创 2025/8/13 14:47:29

先给大家看一下网站的整体效果截图：
在这里插入图片描述

这个前端静态网站项目主要实现了以下功能：
商城首页、商品分类页、登录注册页、个人中心页、我的收藏页、我的订单页、商品详情页等功能。

最近不是在学习前端开发嘛，肯定要做一些项目来练习以下自己学习到的知识点，所以就做了一个卖花的商城网站，如果你也再学习前端开发，希望这个文章能帮助到你。
目前这个项目只做了前端，没有对应的后端。
使用的前端技术和组件如下：
Vue2
Element-UI：UI 组件库选用 Element-UI，提供丰富的交互式组件，帮助快速构建简洁、易用的用户界面。
node版本：Node.js 16.20
如果你是前端开发学习者、或者是正在找类似的网站，希望对你有所帮助。这个网站开发完整后，部署了一个演示站，有兴趣的可以去看一下：
https://test.wwwoop.com/?s=flower-mall&no=flower
最后给大家看一下搭建这个项目的目录结构：
在这里插入图片描述

相关文章：

使用vue2技术写了一个纯前端的静态网站商城-鲜花销售商城

先给大家看一下网站的整体效果截图： 这个前端静态网站项目主要实现了以下功能： 商城首页、商品分类页、登录注册页、个人中心页、我的收藏页、我的订单页、商品详情页等功能。最近不是在学习前端开发嘛，肯定要做一些项目来练习以下自己学…...

编程日记 2025/8/13 14:47:29

PyTorch深度学习框架60天进阶学习计划 - 第46天：自动化模型设计（一）

PyTorch深度学习框架60天进阶学习计划 - 第46天：自动化模型设计（一） 第一部分：使用ENAS算法生成图像分类网络大家好！欢迎来到我们PyTorch深度学习框架60天进阶学习计划的第46天。今天我们要深入探讨一个话题——使用…...

编程日记 2025/8/4 7:49:39

【上海大学计算机系统结构实验报告】多机环境下MPI并行编程

实验目的学习编制多进程并行程序实现如下功能： 创建多进程，输出进程号和进程数。运行多进程并行例子程序。编程实现大规模矩阵的并行计算。实验过程及结果分析实验环境操作系统：Ubuntu 20.04开发工具：GCC 9.3.0、OpenMPI…...

编程日记 2025/8/11 17:29:48

实用电脑工具，轻松实现定时操作

软件介绍如果你的电脑有时候需要像个听话的小助手一样，按照你的指令在特定时间做些事情，比如到了点就关机、开机，或者自动打开某个软件，那你可得了解下这个小帮手啦！ 小巧功能却不少程序定时器是一款超实用的电脑…...

编程日记 2025/8/12 19:25:47

jQuery — 动画和事件

介绍 jQuery动画与事件是提升网页交互的核心工具。动画方面，jQuery通过简洁API实现平滑过渡效果，提供预设方法如slideUp()，支持.animate()自定义CSS属性动画，并内置队列系统实现动画链式执行。开发者可精准控制动画速度、回调时机…...

编程日记 2025/8/9 8:54:55

Kubernetes相关的名词解释kube-proxy插件（3）

什么是kube-proxy？ kube-proxy 是一个网络代理组件，运行在每个节点（Node）上，是 Kubernetes 服务（Service）功能的核心实现之一。它的主要职责是通过维护网络规则，实现集群内服务&…...

编程日记 2025/8/11 0:24:45

第3章垃圾收集器与内存分配策略《深入理解Java虚拟机：JVM高级特性与最佳实践（第3版）》

第3章垃圾收集器与内存分配策略 3.2 对象已死 Java世界中的所有对象实例，垃圾收集器进行回收前就是确定对象哪些是活着的，哪些已经死去。 3.2.1 引用计数算法常见的回答是：给对象中添加一个引用计数器，有地方引用&#xff0…...

编程日记 2025/8/12 10:07:35

MCP是什么？为什么突然那么火？

什么是MCP? MCP全称为Model Context Protocol（模型上下文协议），是由Anthropic公司在2024年11月推出的一个开源协议。Anthropic是一家以其开发的Claude大语言模型而闻名的公司。MCP旨在提供一个通用的开放标准，以简化大型语言模型…...

编程日记 2025/8/10 17:27:55

与终端同居日记：Linux指令の进阶撩拨手册

前情提要： 当你和终端的关系从「早安打卡」进阶到「深夜代码同居」，那些曾经高冷的指令开始展露致命の反差萌—— man 是那个永远在线的钢铁直男说明书，只会说："想懂我？自己看文档！"&#xff08…...

编程日记 2025/8/13 13:47:29

STM32单片机入门学习——第42节: [12-2] BKP备份寄存器RTC实时时钟

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难，但我还是想去做！ 本文写于：2025.04.19 STM32开发板学习——第42节: [12-2] BKP备份寄存器&RTC实时时钟前言开发板说…...

编程日记 2025/7/31 14:53:38

AI 驱动抗生素发现：从靶点到化合物测试

AI 驱动抗生素发现：从靶点到化合物测试目录基于 AI 驱动的研发流程发现抗生素，整合靶点选择和深度学习分子生成，显著提升了候选药物发现效率。结合数据平衡技术，机器学习和 AutoML 能有效提升不平衡数据集分类性能。RibbonFold 是一种新的 AI 模型，可以准确预测淀粉样蛋…...

编程日记 2025/8/11 5:14:32

群晖威联通飞牛等nas如何把宿主机硬盘挂接到可道云docker容器中

可道云系统是用户常用的一款面向个人用户的轻量级私有云存储工具，以高效管理和安全存储为核心，打造便捷的数字化办公体验。但是用户希望把原有其他磁盘中文件挂接到这个新系统中有很大的难度,主要是对linux文件系统理解有很大的误区,认为目录结构是固定的…...

编程日记 2025/8/13 13:47:33

用 R 语言打造交互式叙事地图：讲述黄河源区生态变化的故事

目录 🌟 项目背景：黄河源头的生态变迁 🧰 技术栈介绍 🗺️ 最终效果预览 💻 项目构建步骤 1️⃣ 数据准备 2️⃣ 构建 Leaflet 地图 3️⃣ 使用 scrollama 实现滚动触发事件 4️⃣ 使用 R Markdown / Quarto 打包发布 🎬 效果展示截图 📦 完整代码仓库 …...

编程日记 2025/8/11 3:11:51

opencv(双线性插值原理)

双线性插值是一种图像缩放、旋转或平移时进行像素值估计的插值方法。当需要对图像进行变换时，特别是尺寸变化时，原始图像的某些像素坐标可能不再是新图像中的整数位置，这时就需要使用插值算法来确定这些非整数坐标的像素值。双线性插值的工…...

编程日记 2025/8/4 12:38:29

Flutter 弹窗队列管理：实现一个线程安全的通用弹窗队列系统

在开发复杂的 Flutter 应用时，弹窗的管理往往是一个令人头疼的问题。尤其是在多个弹窗需要按顺序显示，或者弹窗的显示需要满足特定条件时，手动管理弹窗的显示和隐藏不仅繁琐，还容易出错。为了解决这个问题，我们可以实现…...

编程日记 2025/8/13 14:14:51

Linux压缩与解压命令完全指南：tar.gz、zip等格式详解

Linux压缩与解压命令完全指南：tar.gz、zip等格式详解在Linux系统中，文件压缩和解压是日常操作中不可或缺的一部分。本文将全面介绍Linux下常用的压缩和解压命令，包括tar.gz、tar、zip等格式的区别和使用方法，帮助你高效管理文件…...

编程日记 2025/8/13 14:18:05

doris/clickhouse常用sql

一、doris常用SQL 1、doris统计数据库的总大小（单位：MB） SELECT table_schema AS database_name,ROUND(SUM(data_length) / 1024 / 1024, 2) AS database_size_MB FROM information_schema.tables WHERE table_schema NOT IN (information…...

编程日记 2025/8/11 15:16:35

实现AWS Lambda函数安全地请求企业内部API返回数据

需要编写一个Lambda函数在AWS云上运行，它需要访问企业内部的API获取JSON格式的数据，企业有网关和防火墙，API有公司的okta身份认证，通过公司的域账号来授权访问，现在需要创建一个专用的域账号，让Lambda函数访…...

编程日记 2025/8/7 20:41:05

【Easylive】Interact与Web服务调用实例及网关安全拦截机制解析

【Easylive】项目常见问题解答（自用&持续更新中…） 汇总版 easylive-cloud-interacteasylive-cloud-web 1. 不同服务（web和interact）之间的调用方式调用流程 • 角色分工： • easylive-cloud-web：作…...

编程日记 2025/8/7 8:24:35

【HDFS】EC重构过程中的校验功能：DecodingValidator

一、动机 DecodingValidator是在HDFS-15759中引入的一个用于校验EC数据重构正确性的组件。先说下引入DecodingValidator的动机，据很多已知的ISSUE（如HDFS-14768, HDFS-15186, HDFS-15240，这些目前都已经fix了）反馈， EC在重构的时候可能会有各种各样的问题，导致数据错误…...

编程日记 2025/8/13 14:29:16

Chromium 134 编译指南 macOS篇：编译优化技巧（六）

1. 引言在Chromium 134的开发过程中，优化编译速度是提升开发效率的关键因素。本文将重点介绍如何使用ccache工具来加速C/C代码的编译过程，特别是在频繁切换分支和修改代码时。通过合理配置和使用这些工具，您将能够显著减少编译时间&#xf…...

编程日记 2025/8/9 22:48:30

FPGA——基于DE2_115实现DDS信号发生器

FPGA——基于DE2_115实现DDS信号发生器文章目录 FPGA——基于DE2_115实现DDS信号发生器一、实验要求二、实现过程（1）新建工程二、波形存储器ROM（1）方波模块（2）正弦波形存储器（3）锁…...

编程日记 2025/8/4 18:45:53

PHP中的ReflectionClass讲解【详细版】

快餐： ReflectionClass精简版在PHP中，ReflectionClass是一个功能强大的反射类，它就像是一个类的“X光透视镜”，能让我们在程序运行时深入了解类的内部结构和各种细节。一、反射类的基本概念和重要性反射是指在程序运行期间获…...

编程日记 2025/8/11 21:24:47

嵌入式面试题解析：常见基础知识点详解

在嵌入式领域的面试中，基础知识点的考察尤为重要。下面对一些常见面试题进行详细解析，帮助新手一步步理解。一、原码、反码、补码及补码的好处题目什么叫原码、反码、补码？计算机学科引入补码有什么好处？ 在计算机科学中&a…...

编程日记 2025/8/13 4:19:47

GPU渲染阶段介绍+Shader基础结构实现

GPU是什么 （CPU）Center Processing Unit:逻辑编程 （GPU）Graphics Processing Unit：图形处理（矩阵运算，数据公式运算，光栅化） 渲染管线渲染管线也称为渲染流水线&#x…...

编程日记 2025/8/13 14:42:34

08-DevOps-向Harbor上传自定义镜像

harbor创建完成，往harbor镜像仓库中上传自定义的镜像，包括新建项目、docker配置镜像地址、镜像重命名、登录harbor、推送镜像这几个步骤，具体操作如下： harbor中新建项目访问级别公开，代表任何人都可以拉取仓库中的镜…...

编程日记 2025/8/9 1:31:47

C++学习之路，从0到精通的征途：vector类的模拟实现

目录一.vector的介绍二.vector的接口实现 1.成员变量 2.迭代器 （1）begin （2）end 3.容量操作 （1）size，capacity （2）reserve （3）resize…...

编程日记 2025/8/8 15:49:52

嵌入式软件--stm32 DAY 2

大家学习嵌入式的时候，多多学习用KEIL写代码，虽然作为编译器，大家常用vscode等常用工具关联编码，但目前keil仍然是主流工具之一，学习掌握十分必要。 1.再次创建项目 1.1编译器自动生成文件 1.2初始文件这样下次创建新…...

编程日记 2025/8/10 12:28:39

多模态大语言模型arxiv论文略读（二十九）

Temporal Insight Enhancement: Mitigating Temporal Hallucination in Multimodal Large Language Models ➡️ 论文标题：Temporal Insight Enhancement: Mitigating Temporal Hallucination in Multimodal Large Language Models ➡️ 论文作者：Li Su…...

编程日记 2025/8/13 13:30:13

【人工智能学习-01-01】20250419《数字图像处理》复习材料的word合并PDF，添加页码

前情提要 20250419今天是上师大继续教育人工智能专升本第一学期的第一次线下课。三位老师把视频课的内容提炼重点再面授。（我先看了一遍视频，但是算法和图像都看不懂，后来就直接挂分刷满时间，不看了） 今天是面对面授…...

编程日记 2025/8/8 21:45:13

B端APP设计：打破传统限制，为企业开启便捷新通道

B端APP设计：打破传统限制，为企业开启便捷新通道在数字化转型浪潮中，企业级移动应用正突破传统管理系统的功能边界，演变为连接产业链各环节的核心枢纽。本文从技术架构革新、交互模式进化、安全防护升级三个维度，系统…...

编程日记 2025/8/4 7:26:21

【多线程5】面试常考锁知识点

文章目录悲观/乐观锁挂起等待锁/自旋锁偏向锁轻量级/重量级锁锁升级CASCAS引发的ABA问题解决方案原子类公平/不公平锁可重入锁ReentrantLock读写锁 Callable接口这里的“悲观”“乐观”“挂起等待”“自旋”“轻量级”“重量级”“公平”“非公平”“可重入”仅代表某个锁的…...

编程日记 2025/8/8 1:08:14

Linux第一个系统程序——进度条

1.回车与换行回车（CR, \r）： 作用：将光标移动到当前行的行首（最左侧），但不换到下一行。历史来源：源自打字机的“回车”操作——打字机的滑架（Carriage）需…...

编程日记 2025/8/6 6:26:12

C 语言 --- 指针 3

C 语言 --- 指针 3 函数指针函数指针数组代码解释回调函数 - - - qsort模拟实现 qsort 函数总结 💻作者简介：曾与你一样迷茫，现以经验助你入门 C 语言 💡个人主页：笑口常开x…...

编程日记 2025/8/13 13:28:44

蓝桥杯之递归

1.数字三角形题目描述上图给出了一个数字三角形。从三角形的顶部到底部有很多条不同的路径。对于每条路径，把路径上面的数加起来可以得到一个和，你的任务就是找到最大的和（路径上的每一步只可沿左斜线向下或右斜线向下走）。输…...

编程日记 2025/8/9 5:29:53

学习笔记十八——Rust 封装

🧱 Rust 封装终极指南：结构体、模块、Trait、目录结构与模块引用 🧭 目录导航什么是封装？Rust 的封装理念Rust 的封装工具总览模块（mod）和访问控制（pub）详解结构体和枚举&#xff…...

编程日记 2025/8/13 13:59:39

【面试向】点积与注意力机制，逐步编码理解自注意力机制

点积（dot product）两个向量点积的数学公式点积（dot product）与 Attention 注意力机制（Attention）注意力机制的核心思想注意力机制中的缩放点积自注意力机制中，谁注意谁？ 逐步编码理解…...

编程日记 2025/8/12 1:23:47

基础数学知识-线性代数

1. 矩阵相乘 c i j = a i k ∗ b k j c_{ij} = a_{ik} * b_{kj} cij=aik∗bkj 1. 范数 1. 向量的范数任意一组向量设为 x ⃗ = ( x 1 , x 2 , . . . , x N ) \vec{x}=(x_1,x_2,...,x_N) x =(x1,x2,...,xN) 如下：向量的1范数：向量的各个元素的绝对值之和∥ …...

编程日记 2025/7/31 14:52:44

【KWDB 创作者计划】_上位机知识篇---Docker容器

文章目录前言1. Docker 容器是什么？隔离性轻量级可移植性可复用性 2. Docker 核心概念镜像容器仓库Dockerfile 3. Docker 基本使用(1) 安装 Docker(2) 容器生命周期管理(3) 镜像管理(4) 进入容器内部(5) 数据持久化（挂载卷）(6) 网络管理 4. …...

编程日记 2025/8/10 18:10:09

指针函数和函数指针

指针函数本质是一个函数，只是函数的返回值是指针类型函数指针本质是一个指针，只是这个指针指向的是一个函数指针函数函数有很多类型的返回值，例如 short funcA(参数列表) // 表示该函数返回值是一个short类型 void funcA(参数列表) // 表…...

编程日记 2025/8/11 8:27:31

案例驱动的 IT 团队管理：创新与突破之路：第六章组织进化：从案例沉淀到管理体系-6.1 案例库建设方法论-6.1.2案例分级与标签体系

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲案例分级与标签体系构建方法论：IT团队知识管理的结构化实践1. 案例库建设的战略价值与核心挑战1.1 案例管理的战略定位1.2 分级标签体系的核心价值 2. 案例分级体…...

编程日记 2025/8/11 17:43:23

sqlilabs-Less之HTTP头部参数的注入——基础篇

Less-18 user-agent报错注入这一关的代码漏洞点出现在了insert语句，因为这里没有对user-agent和ip_address进行过滤，，并且输出了mysql的错误信息补充知识点 PHP里用来获取客户端IP的变量 $_SERVER[HTTP_CLIENT_IP] #这个很少使用&#xf…...

编程日记 2025/8/10 1:15:58

java多线程相关内容

java线程创建的方式一共有四种方式继承 Thread 类：本质上是实现了 Runnable 接口的一个实例，代表一个线程的实例启动线程的唯一方法就是通过 **Thread 类的 start()**实例方法。start()方法是一个 native 方法，它将启动一个新线程&…...

编程日记 2025/8/12 1:48:41

Windows Server .NET Core 应用程序部署到 IIS 解决首次访问加载慢的问题

第一篇： Windows .NET Core 应用程序部署到 IIS 解决首次访问加载慢的问题第二篇：Windows Server .NET Core 应用程序部署到 IIS 解决首次访问加载慢的问题第三篇：Windows .NET Core 应用程序部署到 IIS 解决首次访问加载慢的问题设置…...

编程日记 2025/8/11 4:28:07

ubuntu24.04上使用qemu+buildroot+uboot+linux+tftp+nfs模拟搭建vexpress-ca9嵌入式linux开发环境

1 准备工作 1.1 安装依赖工具 sudo apt-get update && sudo apt-get install build-essential git bc flex libncurses5-dev libssl-dev device-tree-compiler1.2 安装arm交叉编译工具链 sudo apt install gcc-arm-linux-gnueabihf安装之后，在终端输入ar…...

编程日记 2025/8/8 4:51:09

Cocos Creater打包安卓App添加隐私弹窗详细步骤+常见问题处理

最终演示效果，包含所有代码内容 + 常见错误问题处理点击服务协议、隐私政策，跳转到相关网页，点击同意进入游戏，不同意关闭应用一，添加Activity，命名为MyLaunchActivity 二，编写MyLaunchActivity.java的内容 package com.cocos.game.launch;import android.os.Bund…...

编程日记 2025/8/11 20:04:18

UI文件上传

1、文件上传：文件上传是自动化中比较麻烦棘手的部分。有些场景我们需要上传本地文件到项目里。这种比较麻烦，因为需要点开文件上传的窗口后，打开的是windows的文件选择窗口， 而selenium是无法操作这个窗口的。 selenium只能操作…...

编程日记 2025/7/31 17:23:30

2.凸包优化求解

1.减而治之(Decrease and Conquer) 插入排序典型的减而治之算法就是插入排序方法插入排序法: 在未排序中选择一个元素，插入到已经排序号的序列中将凸包也采用减而治之的方法 2.In-Convex-Polygon Test 怎么判断引入的极点存在于多边形里面还是外面&#xff1…...

编程日记 2025/8/8 5:26:09

从0开发一个unibest+vue3项目，使用vscode编辑器开发，总结vue2升vue3项目开始，小白前期遇到的问题

开头运行可看官网链接: unibest官网一：vscode中vue3代码显示报错标红波浪线去查看扩展商店发现一些插件都弃用了，例如h5的插件以及vue老插件解决办法：下载Vue - Official插件（注意：横杠两边是要加空格的&#xff…...

编程日记 2025/8/6 8:13:08

jmeter中文乱码问题解决

修改jmeter.properties配置文件‌ 进入JMeter安装目录的bin文件夹，找到jmeter.properties文件。搜索参数sampleresult.default.encodingUTF-8，取消注释（删除行首的#），并将其值改为UTF-8。保存文件并‌重启JMeter‌生效…...

编程日记 2025/8/11 5:15:23