vue商城

最新推荐文章于 2024-07-08 19:57:58 发布
最新推荐文章于 2024-07-08 19:57:58 发布
阅读量321 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46621937/article/details/106137132
版权

vue商城

使用MUI布局首页九宫格导航

  1. 使用MUI九宫格组件布局导航

  2. 替换导航中的默认图片

  3. 更改a标签为router-link实现路由跳转

使用MUI实现新闻列表界面

  1. 在main.js中添加路由规则

    {path:'/news/newslist',component:newslist}

  2. 利用MUI图文列表组件实现新闻列表布局

  3. 使用vue-resource请求新闻列表真实数据

  4. 使用v-for循环渲染界面

  5. 添加样式美化列表

使用全局过滤器和moment.js实现日期格式化

  1. main.js中注册全局过滤器

    Vue.filter('datefmt',function(input,fmtstring){}

  2. 安装moment

    npm install moment --save

  3. 使用moment格式化时间

    Vue.filter('datefmt',function(input,fmtstring){
        // 使用momentjs这个日期格式化类库实现日期的格式化功能
        return moment(input).format(fmtstring);
})

  4. newslist.vue中使用日期过滤器

    <span>发表时间:{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>

实现跳转新闻资讯详情页面及传参

  1. 在main.js中添加路由规则

    {path:'/news/newsinfo/:id',component:newsinfo}

  2. 修改新闻列表界面中的a标签为router-link

    <router-link to='/news/newsinfo/13'>

  3. 配置跳转参数

    <router-link v-bind="{to:'/news/newslist/'+item.id}">

  4. 实现页面传参

    created() {
        // 获取URL传入的参数id赋值给data中的id属性
        this.id = this.$route.params.id;
}

实现详情页面界面布局和真实数据

  1. 使用css完成基本布局

  2. 请求真实数据

  3. 使用vue指令赋值真实数据

公共功能提取-API根域名提取

  1. 将根域名存放到common.js中

    export default{
        apidomain:'http://webhm.top:8899', // 所有数据请求的根域名地址
}

  2. 导入common.js使用

评论组件-提交评论功能

  1. 父组件向子组件传值

    - 父组件中注册组件

 components: {
        comment,  // II. 注册评论组件
 },

- 父组件中使用子组件时属性传值

 <comment :id='id'></comment>

- 子组件中props接收传值

 props: ['id'],//用来接收父组件传递过来的值

  2. 实现评论提交界面样式

  3. 发送post请求提交数据

    - 数据为空时提示用户不能提交
- 提交成功清空文本框数据

评论组件-列表数据展示功能

  1. 使用MUI列表组件实现基本样式布局

  2. 请求真实数据赋值给list

  3. v-for渲染数据到界面

评论组件-点击加载更多功能

  1. 定义全局变量pageindex,点击加载更多时pageindex++

  2. 传入pageindex重新发送数据请求

  3. 进行数据拼接:将新数据和旧数据拼接到一个数组中

    this.list = this.list.concat(res.body.message);

优化-默认显示home及最新评论在前功能

  1. 添加路由规则重定向根目录为home页面

    {path:'/',redirect:'/home'},// 默认进入home页面(将跟页面重定向到首页home)

  2. 将最新添加的数据追加到数组最前面

    this.list = [{
        "user_name": "匿名用户",
        "add_time": new Date(),
        "content": this.postcontent
}].concat(this.list);

图片分享列表-跳转及页面样式

  1. router-link设置跳转路径

    <router-link to="/photo/photolist">

  2. main.js中设置路径规则

  • 导入photolist组件

    import photolist from './components/photo/photolist.vue'

  • 设置路由规则

    {path:'/photo/photolist',component:photolist}
  1. 布局及书写分类样式

图片分享列表-请求分类真实数据

  1. v-for循环渲染

    <li v-for="item in cates">{{item.title}}</li>

  2. 请求真实数据存放到cates数组中

  3. 根据cates长度及每一个li的宽度动态计算ul的宽度

图片分享列表-图片列表样式及真实数据

  1. 使用mint-ui的lazy-load控件实现图片懒加载功能

    <img v-lazy="item.img_url">

  2. 布局图片及文字样式

  3. 请求真实图片数据

  4. 给分类选项绑定点击事件

图片分享详情-点击图片跳转到详情

  1. 使用router-link包装图片

    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">

  2. 设置跳转的路由规则

    - 建立`photoinfo.vue`组件
- 导入`photoinfo.vue`

        import photoinfo from './components/photo/photoinfo.vue';

- 配置路由规则

        {path:'/photo/photoinfo/:id',component:photoinfo}

  3. 获取路由传递的id值

    this.id = this.$route.params.id;

图片分享详情-基本页面布局

  1. 使用九宫格组件布局缩略图界面

  2. 使用封装的评论组件布局评论模块

  3. 请求图片详情数据

图片分享详情-vue-preview实现缩略图预览

  1. 安装vue-preview

    npm install vue-preview --save

  2. main.js中注册vue-preview到vue对象中

    import VuePreview from 'vue-preview';
Vue.use(VuePreview);

  3. webpack.config.js中添加babel转码

    {
    test: /vue-preview.src.*?js$/,  // vue-preivew组件专用
    loader: 'babel'
}

  4. url-loader添加svg文件格式支持

    {
    test: /\.(png|jpg|gif|ttf|svg)$/,
    loader:'url-loader?limit=20000'
}

  5. 更改图片配置

    <img class="preview-img"  v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">

  6. 在list中添加数据

图片分享详情-请求真实数据

  1. 将v-for放到li标签上适配样式

    <li v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)">
</li>

  2. 请求真实数据

  3. 重新组装数据格式(添加图片的宽高属性)

    // 图片对象必须有宽高属性才能预览大图,所以需要对请求回来的数据添加w h属性
{
    src: 'https://placekitten.com/1200/900',
    w: 600,
    h: 400
}

商品购买路由跳转及静态结构

  1. Home.vue中设置跳转路径

    <router-link to="/goods/goodslist">

  2. main.js中设置路由规则

    {path:'/goods/goodslist',component:goodslist}

  3. 利用mui中的图文表格组件实现：

    http://www.dcloud.io/hellomui/examples/slider-table-default.html

商品购买请求动态数据

    this.$http.get(url).then(function(res){
            // res.body即为请求回来的数据
    });

商品详情-路由跳转

  1. goodlist.vue中配置跳转路径

    <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">

  2. main.js中配置路由规则

    {path:'/goods/goodsinfo/:id',component:goodsinfo},

商品详情-轮播图组件的提取

  1. 抽取组件:

    - 将`Home.vue`中的轮播图结构代码和样式代码抽取到单独的`silder.vue`文件中
- 定义一个用于接收父组件传递过来参数的imgs属性

  2. 使用组件

    - 需要使用`siler`组件的父组件中先注册组件

import silder from '../components/subcom/silder.vue';
...
...
components:{
        silder
}

- 使用组件并传递参数

<silder :imgs='list'></silder>

商品详情-图文详情页面

  1. goodsinfo.vue中设置路由跳转路径

    <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
</router-link>

  2. main.js中配置路由规则

    // 导入组件
import goodsdesc from './components/goods/goodsdesc.vue';
// 设置路由规则
{path:'/goods/goodsdesc/:id',component:goodsdesc},

  3. 根据API请求数据

商品详情-商品评论组件集成

  1. goodsinfo.vue中设置路由跳转路径

    <router-link v-bind="{to:'/goods/goodscomment/'+id}">
        <mt-button type="danger" size="large">商品评论</mt-button>
</router-link>

  2. main.js中配置路由规则

    // 导入组件
import goodscomment from './components/goods/goodscomment.vue';
// 设置路由规则
{path:'/goods/goodscomment/:id',component:goodscomment},

  3. goodscomment.vue中集成comment.vue组件

    // 注册子组件
components:{
        comment
}

// 使用子组件
<comment :id="id"></comment>

商品详情-定制inputNumber组件

  1. 创建inputNumber.vue文件实现组件布局和增减逻辑

  2. 子组件向父组件传值

    - 子组件inputNumber中定义方法使用this.$emit传值
sendmessage(){
        this.$emit('dataobj',this.count);
}

- 子组件中数据发生变化时调用sendmessage方法
this.sendmessage();

- 父组件使用子组件时绑定子组件传值时属性名相同的方法`dataobj`
<inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>

- 父组件定义getcount方法,参数即为子组件传递过来的值
getcount(count){
        // count 即为子组件传递过来的数据
        this.inputNumberCount = count;
},

  3. 父组件中使用子组件

    - 注册子组件
components:{silder,inputnumber}

- 使用子组件
<inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>

商品详情-加入购物车同步角标数字

因为购物车数量inputNumber在goodsinfo.vue组件中,而角标在App.vue组件中,两者不是父子组件关系,无法直接传值。父子组件能够传值正是因为共享了同一个vue实例对象,所以需要额外定义一个公共的vue实例实现子组件向父组件传值的方式将数据传递到App.vue中。

  1. 定义vm.js文件导出一个空的vue实例

    import Vue from 'Vue';

// 导出一个常量
export const COUNTSTR = 'inputNumberCount';
// 导出空的vue实例
export var vm = new Vue();

  2. goodsinfo.vue中定义方法使用该公共实例传递数据

    // 导入公共实例
import {vm,COUNTSTR} from './kits/vm.js';
...
toshopcar(){
        // 触发事件 COUNTSTR代表事件名 是vm.js中定义的常量
        vm.$emit(COUNTSTR,this.inputNumberCount);
}

  3. App.vue中使用该公共实例获取数据

    // 导入公共实例
import {vm,COUNTSTR} from './kits/vm.js';

// 利用 vm.$on() 来注册 COUNTSTR这个常量代表的事件
vm.$on(COUNTSTR,function(count){
        // 将count值追加到购物车中
        var badgeobj = document.querySelector('#badge');
        badgeobj.innerText = parseInt(badgeobj.innerText) + count;
});

  4. 点击购物车时触发toshopcar方法将数据传递到App.vue

    <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>

商品详情-使用localStorage存储购物数量

  1. 定义本地存储公共帮助文件

    // 实现添加获取删除
export function setItem(value){}
export function getItem(){}
export function removeItem(){}

  2. 点击加入购物车时调用setItem()存储数据

商品详情-购物车小球动画效果

  1. 书写小球样式

  2. 设定需要动画的元素

    <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div v-if="isshow" class="ball"></div>
</transition>

  3. 使用动画钩子函数实现小球出现动画

    // 动画出现前
beforeEnter(el){
        // 设定小球的初始位置
        el.style.transform = "translate(0px,0px)";
},
// 动画出现
enter(el,done){
        // 保证小球出现动画
        el.offsetWidth;
        // 设置小球的结束位置
        el.style.transform = "translate(75px,366px)";
        //结束动画
        done();
},
// 动画结束
afterEnter(el){
        //重置小球的初始状态
        this.isshow = !this.isshow;
}

购物车-列表界面静态结构

  1. 设置跳转路径和路由规则

    {path:'/shopcar/car',component:car}

  2. 利用v-model绑定开关状态并存储到数组中

购物车-列表界面请求真实数据

  1. 将本地存储中goodsid相同的多个对象合并成同一个对象

    export function getgoodsObject(){

        var arr  = getItem();
        var resObj ={};
        for(var i = 0 ; i<arr.length; i++){
                var item = arr[i];
                if(!resObj[item.goodsid]){
                // 如果没有当前商品的数据，则添加一个数据
                resObj[item.goodsid] = item.count;
                }else{
                // 已经有当前商品的数据了，则将cont追加
                var count = resObj[item.goodsid];
                resObj[item.goodsid] = count + item.count;
                }
        }
        return resObj;
}

  2. 遍历存储商品id和数量的对象,将id拼接成为字符串

    // 1.0 从localstorage中获取到所有的商品id值
var obj = getgoodsObject();
// 2.0 将id值按照 api的参数格式进行拼接
var idstring = '';
for(var key in obj){
        idstring+= key + ',';
}
// 去除最后一个逗号
idstring = idstring.substring(0,idstring.length-1);

  3. 发送请求获取购物车列表真实数据

购物车-carinputNumber组件封装

  1. 实现父组件向子组件传值(carinputNumber中显示的数量从父组件中得来)

    - 因为数量是存储在localStorage中,所以数据请求回来之后,需要根据数据的id从localStorage
中将每个id对应的数量取出来存放到请求回来的数据里面的cou属性中

  2. 实现子组件向父组件传值(点击carinputNumber组件中的加减后,需要将加减后的数据传回到父组件中)

    - 因为每次加减都是1,所以只需要传递该数据的id以及点击按钮的类型是加还是减,具体更新父组件中数量的代码
逻辑在父组件中完成

sendmessage(type){
        this.resObj.type = type;
        this.resObj.goodsid = this.goodsid;

        this.$emit('cardataobj',this.resObj);
}

  3. 数据通过子组件加减后需要更新本地localStorage中的数据以及datalist中的数据

    - 封装localStorage更新数据操作
updateData(resObj);

购物车-总价格动态计算功能

  1. 使用计算属性computed中定义方法动态计算

  2. 选择switch开关时,开关状态保存在value属性中

  3. 遍历value数组,选取值为true的数据计算总价格

购物车-商品数据删除实现

  1. 删除value数组中对应的值

  2. 删除datalist中对应的数据

  3. 删除localStorage中存储的数据

统一返回按钮实现

  1. 浏览器后退使用vue-router中的this.$router.go(-1)

    backto(){
        this.$router.go(-1);
}

  2. 控制返回按钮在非首页显示

    // 监控路由变化
watch:{
        '$route':function(newroute,oldroute){
                if(newroute.path.toLowerCase() == '/home'){
                        this.isshow = false;
                }else{
                        this.isshow = true;
                }
        }
}
Never Settle！
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现商城系统
lwhstart的博客
06-22 1435
vue加bootstrap实现商城系统
实战Vue：基于Vue的移动端购物商城
热门推荐
KaiSarH
11-27 6万+
基于Vue的移动端购物商城
vue3实现商城系统详情页（前端实现）
最新发布
m0_72618563的博客
07-08 1398
pc端商品详情页如何实现？这篇文章或许能给你一个参考
vue锤子商城
weixin_30575309的博客
01-02 1009
1：项目源代码：https://github.com/Hightinstance/project/tree/master/vue/vue_smart_project/vue_smart_black //功能有详细的注释。 1：锤子商城实战 （1） 环境配置 Vue脚手架，vuex,vue-router (2) 创建目录结构 (2)组件拆分（页面分析） 公共样...
Vue商城-MiMall
01-27
Vue商城-MiMall npm i -g vue-cli // 全局安装 vue init webpack . // 将当前文件夹初始化为一个项目 npm i // 安装依赖 npm run dev // 本地自动打开有一个网页，实时显示页面
vue商城项目（购物网站）
06-07
Vue 商城项目是一款基于 Vue.js 框架构建的在线购物平台。Vue.js 是一个轻量级、高性能的前端框架，特别适合构建用户界面。它采用组件化开发方式，允许开发者将复杂的UI拆分为可复用的小部件，提高了代码的可维护性...
vue商城项目
09-28
在Vue商城项目中，如商品列表、购物车、用户登录等模块，都可以被封装为独立的组件，提高代码复用性和可维护性。 3. **指令系统**：Vue 提供了一系列内置指令，如`v-if`、`v-for`、`v-bind`和`v-on`等，用于增强...
vue商城项目笔记+原代码
04-30
在这个"vue商城项目"中，我们看到开发者不仅提供了详细的开发笔记，还附带了完整的源代码，这对于初学者或者希望深入理解Vue.js在实际项目中应用的人来说，是一份极其宝贵的学习资源。 首先，让我们来看看Vue全家桶...
vue商城（源代码）.zip
07-04
VUE很全面的商城实例，涵盖全方面知识。适合新手学习。使用VUE、vue-link、vue-router、vue-axios、jsonp、scss-loader、node-scss、vue-awesome-swiper、vue-lazyload
vue 商城模板
05-17
"Vue 商城模板"是基于Vue.js技术实现的电子商务平台的网页模板，特别适用于创建手机商城的活动列表页面。这种模板设计旨在提供一种高效、直观且易于定制的解决方案，以满足手机端购物体验的需求。 模板通常包括一...
一个基于vue的pc端综合性网上购物商城
08-12
一个基于vue的pc端综合性网上购物商城，包括前台商城和后台管理系统，后端采用koa2，数据库采用mysql
用vue写的h5商城
11-15
用vue写的h5商城, 包括框架生成等资源。有实用价值的代码.
vue 仿移动web商城
06-29
基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城
使用Vue开发的京东商城首页
05-30
使用Vue开发的京东商城首页，涉及了大多数的基础语法，可用于课程设计，对新手也有一定的参考价值
【项目实战】Vue商城
one or only的博客
08-24 1万+
【项目实战】Vue商城
基于vue制作的购物商城系统
GuduGUdu_gudu的博客
06-30 2212
本购物商城系统的功能，主要是后端管理系统，角色就分为普通用户和管理员两大角色，主要功能包括：商品信息管理、商品类别管理、管理员信息管理、购物车信息管理、用户管理、修改密码、用户购买、用户评论、用户余额充值与显示、购物状态更新以上为我完成的购物商城系统。
Vue项目随笔—— 商城
qq_26705343的博客
05-20 869
Vue cli 项目笔记 public 中 index.html 是整个cli 唯一的单页面 README 项目说明文件 src 开发环境下的项目源码 操作的就是src中的代码 ​ components 公共组件 公共组件放到components ​ router 路由的管理 ​ store 全局状态管理器 任何组件产生的状态都可以拿到这个状态 ​ views 所有视图都在这个文件 页面组件文件夹 页面组件放到views ​ App.vue 项目的顶层组件 最大的组件 全局所有组件
Vue 简易商城开发
weixin_43783814的博客
06-02 3661
原文博客地址 藤原拓鞋的博客 开始 Vue是目前前端领域教火的框架，被广泛应用，插件和依赖包生态强大，诞生了许多大型应用 Vue 官网 学习了 vue 之后，利用所学知识搭建了个简易的商城，用到了 vue 开发中常用的技巧以及扩展包，通过这个小项目加深了对 vue 的学习 但因为没有做对应的后台，所以用到了浏览器本地储存作为临时仓库的模拟，以达到计算商品剩余量的目的 同样，对于登录和注册功能，也是通过 localStorage 暂存用户名与密码，所以只能暂时有一个用户~~ 后台系统的话，以后我会用 node
springboot vue商城
12-24
Springboot Vue商城是一个基于Springboot和Vue的前后端分离的电商项目。它实现了一个完整的商城系统，包括用户管理、商品分类管理、商品信息管理、订单评价管理等功能模块。 该项目使用JavaWeb的Springboot框架作为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值