前端案例-32 Vue 结合node.js实现购物车页面的前后端交互

最新推荐文章于 2023-07-12 16:00:02 发布
最新推荐文章于 2023-07-12 16:00:02 发布
阅读量1.6k 收藏 21
点赞数 1
分类专栏： 前端案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KathyLJQ/article/details/118223472
版权

结构：
在这里插入图片描述
html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description"
        content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <!-- 先引入jquery  -->
    <script src="js/jquery.min.js"></script>
    <!-- 引入vue.js -->
    <script src="js/vue.min.js"></script>
    <!-- 在引入我们自己的js文件 -->
    <!-- <script src="js/car.js"></script> -->
    <script src='js/vue_mycart.js'></script>
    <!-- 引入axios -->
    <script src='js/axios.min.js'></script>
    <script type ='text/javascript' >
      
    </script>
</head>

<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航end  -->


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <img src="img/logo.png" alt=""> <b>购物车</b>
            </div>
        </div>
    </div>

 
    <!-- </div> -->
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">

                <div id="app">
                    <my-cart></my-cart>
                </div>

                <!-- 头部全选模块 -->
               
                <!-- 商品详细模块 -->
               

                <!-- 结算模块 -->
               
            </div>
        </div>

    </div>

    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i
最低0.47元/天 解锁文章
KathyLJQ
关注
  • 1
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue+vuex实现响应式布局加购物车简单案例
IT__zz的博客
07-25 844
哈喽，我又来了，vue想必大家都用的挺多的，所以，今天就用vue和vuex来写一个案例，那么，闲话不多说，我们就开始吧！ 在写之前，想必大家对购物车这一电商案例会有很多的经历吧，那今天就写个购物车案例吧！为了增加点难度，我会加入响应式布局，代码如下： //home <template> <div class="home"> <div class="home_header"> <div>admin</div> &l
响应式网格商品展示及加入购物车布局
06-05
响应式网格商品展示及加入购物车界面布局。该网格布局界面使用flexbox来制作商品的网格布局。通过每个商品面板右上角的“+”号可以将该商品添加到比较列表中，最多可以添加3个比较商品。在比较界面会以三列展示出商品的详细信息，用户可以对商品进行性价比较
Vue基础语法练习，制作响应式商品购物车案例
Etui۹(･༥･´)و的博客
07-01 583
本案例涉及的Vue知识点有：v-if、v-else、v-for、v-bind、v-on等 本例主要包括三个文件：index.html、style.css、main.js 案例效果图： 案例要求： 1、响应式的显示商品记录 2、点击+、-按钮可以增加减少商品数量 3、点击移除操作，删除对应记录 4、表格下方总价格根据商品数量改变 5、商品删除后，其余记录的id随之改变 6、购物车清空后，页面直接显示“购物车为空！”字样 案例源码： index.html <!DOCTYPE html> &lt
Web网站模板-横向滚动个人简历响应式网站模板(HTML+CSS+JavaScript)
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
04-08 6582
主页：搞前端的半夏 简介：前端领域优质创作者。扫码或搜索添加文末公众号「搞前端的半夏」：🍗 回复 ”网站模板“，免费送网站模板！ 欢迎点赞 👍 收藏 ⭐留言 📝 私信📄 你还在未HTML网页设计作业头大吗？ 你还在为自学前端，没有项目练手苦恼吗？ 你还在为外包项目没有模板难受吗? 关注专栏《前端网站模板》，自用，作业，外包。你想要的全都有，持续更新，励志更新1000套模板！！ 1.使用模板建站，周期较快。甚至可以达到量产网站，很大程度上给企业节约了成本。在建站的过程中，省去了需求分析的环节，不需要.
响应式布局+Vux=小米商城列表+小米商城购物车
这里是前端，是不一样的前端
07-10 963
列表页 <template> <div class="home"> <div class="header"> 头部 <div class="xia"> <button @click="jia">升序</button> <button @click="jia">降序</button> </div> </div&
淘宝购物车页面 PC端和移动端实战
weixin_30737433的博客
10-03 769
最近花了半个月的时间，做了一个淘宝购物车页面的Demo。当然，为了能够更加深入的学习，不仅仅有PC端的固定宽度的布局，还实现了移动端在Media Query为768px以下（也就是实现了ipad，iphone 6 plus，iphone6，S5等）的Flexbox弹性布局。 还要再说的是，pc端和移动端淘宝购物车页面的Bug基本修复完毕，完全适合一个对HTML，CSS，CSS3，HTML5...
毕业设计vue+node.js+mysql校园二手交易网(SPA).zip
09-03
Node.js使用JavaScript语言编写，使得前后端可以统一语言，提高了开发效率。在这个项目中，Node.js可能使用Express或Koa等框架来构建API接口，处理HTTP请求，与前端进行数据交互。 MySQL作为关系型数据库管理系统，...
Node.js-前端vue后端nodejskoa2搭配mongodb和redis
08-09
在`shoppingMall`项目中，Vue.js很可能被用来创建各种页面，如商品列表、购物车、用户登录/注册等，同时利用其路由管理和状态管理工具Vuex来组织应用程序的状态和导航。 接着是Node.js，这是一个基于Chrome V8引擎...
Node.js-Node.JSMySQL实现的B2C购物系统
08-10
9. **前端技术**：可能涉及React、Vue或Angular等前端框架，用于构建用户友好的交互界面，以及如何与Node.js后端进行数据交互。 10. **性能优化**：包括数据库索引优化、缓存策略、异步处理、负载均衡等，以确保...
聚造商城：微信小程序+vue+node.js+mysql
06-15
开发者可以利用Vue.js的数据绑定和响应式系统，实时更新页面状态，实现动态交互。 Node.js作为一个JavaScript运行环境，被用于搭建后端服务器。Node.js基于Chrome V8引擎，提供了非阻塞I/O模型，使其在处理高并发...
一个用Vue+node.js+express+mongodb写的前后端商城项目.zip
10-22
该项目是一个完整的前后端分离的电子商务商城系统，使用了现代Web开发技术栈，包括Vue.js、Node.js、Express和MongoDB。下面将详细解释这些技术及其在项目中的作用。 1. **Vue.js**：Vue.js 是一种轻量级的前端...
使用JavaScript和Vue.js框架开发的电子商务网站，实现商品展示和购物车功能
Z_suger7的博客
07-12 928
最重要的是，JavaScript和Vue.js的高效组合可以实现重要的交换和用户体验，提升网站的性能和功能。其次，Vue.js框架的响应式设计可以使网站在不同的设备上使用，提供良好的用户体验。未来，我们可以进一步优化和扩展网站的功能，提升用户的满意度和网站的竞争力。未来展望：随着技术的不断发展，网站的功能和性能触发不断提升。未来，我们可以进一步优化商品展示和购物车功能，增加搜索和推荐功能，提升网站的安全性和稳定性。在Vue.js应用程序的入口文件中，我们可以引入所需的库和模块，并设置代理服务器的信息。
电商前台项目（五）：完成加入购物车功能和购物车页面
weixin_42044763的博客
01-30 4888
这里要注意，这个项目的接口给的都是params参数，而使用axios发请求，params参数只能拼接在url地址中，而query参数的配置项叫params，很奇怪。3、如果不写返回值，且await后是失败的Promise，那么就会抛出异常，既然抛出异常，那么async函数返回的就是一个失败的Promise。中遍历购物车数据并派发请求，（当然其实在组件中写也一样，就是这样规范点），用try-catch捕获，如果都请求成功，那么就使用。4、如果不写返回值，且await后是成功的Promise，那么就会返回。
BootStrap书籍搜索列表&购物车&订单结算&form表单&分页
m0_67514201的博客
04-08 378
bootStrap 导入js库 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div class="container"> <!-- 第一行：导航区域 --> <div class="row" s..
Vue开发实例目录总索引
热门推荐
编程界明世隐的博客
12-20 1万+
Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ >即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！
用三种前端的方法实现简单的购物车功能
m0_67495466的博客
04-11 5133
通过javascript、jquery和vue三种方式实现简单的前端购物车功能开发
Node.js开发区块链（一） —— Node.js入门和搭建后台服务器
weixin_41326021的博客
07-06 4308
Node.js是现在开源社区最流行的开发平台之一.概念：          Node.js是一个搭建在ChromeV8上的javascript即时运行平台，采用的是事件驱动和非阻塞模型，既轻量又高效。         通俗说： Node.js是一个可以让你用javascript语言开发应用的平台，是构建运行在分布设备上的数据密集型实时程序的完美选择。          什么是数据密集型，实时的应用...
前端Vue和后端node.js交互案例
Dream_travelerly的博客
04-23 248
一、利用node创建后端服务器 初始化目录结构 npm init -y 下载express npm i express 利用 express 搭建服务器 //创建服务器 //第一个引入express框架 const express = require('express') //第二 把express 方法付给app const app = express() //创建一个接口...
node.js 链接数据库实现vue与后端交互
lck8989的博客
04-05 5802
首先实现vue前端的简单页面，本页面是采用vue@cli构建项目，项目实现简单的登录注册功能，利用express进行网络通信。 1：前端vue项目 设置vue.config.js:设置跨域相关（本身是在自己电脑上启动两个服务器一个后端服务器一个是vue启动的服务端口不同会造成跨域的问题） module.exports = { publicPath: '/', devServ...
vue+node.js电商网站前端源码
最新发布
12-03
它采用Vue.js作为前端框架，Node.js作为后端服务器，实现前后端的交互和数据传输。 该源码的主要特点包括： 1. 页面布局美观：通过使用Vue.js的组件化开发，实现了页面的模块化布局，使得页面美观且易于维护。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值