DaZeng：Vue全家桶实现小米商城（二）

最新推荐文章于 2024-03-12 09:30:00 发布
最新推荐文章于 2024-03-12 09:30:00 发布
阅读量1.2k 收藏 15
点赞数 4
分类专栏： web总栏 vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z269571627/article/details/109116174
版权

自学笔记--从0独立开发企业级电商系统

Vue全家桶实现小米商城（一）

Vue全家桶实现小米商城（一）

跨域CORS

什么是前端跨域

前端独有，是浏览器为了安全而做出的限制策略。

浏览器请求必须遵循同源策略：同域名、同协议、同端口。

怎么去解决跨域

CORS跨域
JSONP跨域
代理跨域

CORS跨域

服务端设置，前端直接调用。
说明：后端允许前端某个站点进行访问。如Easy Mock：开源的公共MOCK平台，公共接口。
在axios中访问mock的接口后

    let url = 'https://www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/'
    axios.get(url).then((data)=>{
      console.log(data)
    })

控制台查看network
在这里插入图片描述
响应头中：
Access-Control-Allow-Credentials：允许前端将cookie带过去
Access-Control-Allow-Origin：表示允许指定的这个网址访问mock的接口

JSONP跨域

前端适配，后台配合
说明：需要前后端同时改造

安装jsonp

npm i jsonp -S

在这里插入图片描述
jsonp不是请求在network中的XHR里面没有，JS里面有，是js的一段脚本。

jsonp与cors的区别：

let url2 = 'https://order.imooc.com/pay/cartorder'
    axios.get(url2).then((data)=>{
      console.log(data)
    })
    jsonp(url2,{},(err,res)=>{
      console.log(res)
    })

当使用axios时控制台输出信息，表示不是允许的网站，无Access-Control-Allow-Origin请求头。
在这里插入图片描述
当使用jsonp时：
在这里插入图片描述
在这里插入图片描述

接口代理

实现：通过修改nginx服务器配置来实现；
说明：前端修改，后台不动；

具体操作：
1.在整个项目项目中新增vue.config.js的配置文件
2.文件中写入：

// 开发环境下的接口代理  访问/a代理到/b，则实际访问的/b
// webpack的配置表传送给nodejs服务器
// nodejs遵循commonjs规范抛出就不用import了
module.exports = {  
    // 自动加载devServer中的配置表
    devServer:{
        host:'localhost',
        port:8080,
        // 代理
        proxy:{
            // 访问/pay时实现拦截转发到target中
            '/api':{
                // 目标网址,内部访问到慕课网的接口
                target:'https://order.imooc.com',
                changeOrigin:true,
                pathRewrite:{
                    '/api':''
                }
            }
        }
    }
}

实现原理：

  1. 书写好config.js后重启项目，vue会自动加载此配置文件下的devServer配置表
  2. 针对proxy中做路由统一拦截（此处是统一拦截的/api），在.vue文件中定义url时都统一定义为如下：let url2 = ‘/api/pay/cartorder’，在拦截后进行访问目标地址时由**changeOrigin:true,pathRewrite:{’/api’:’ '}**自动去掉/api进行访问。
  3. 此时看似访问的localhost:8080/api/pay/cartorder实则访问的https://order.imooc.com/pay/cartorder
    在这里插入图片描述

项目准备

需求梳理

  1. 熟悉文档、查看原型、读懂需求
  2. 了解前端设计稿-设计前端业务架构
  3. 了解后台接口文档-制定相关对接规范
  4. 协调资源
  5. 搭建前端架构

分析目录

  1. 查看原型图，分析哪些板块会封装为一个组件，进行复用。
  2. 综合分析后先搭建大的目录再去创建小的。
  3. 静态图片建议src下的assets放小的，public下放大的。
  4. src下的components就是组件
    在这里插入图片描述

构建项目目录

  1. 初始化VScode内容：
    删除components文件夹下的最初的HelloWord组件，以及删除App.vue下对HelloWord组件的所有引用，并增加router-view的入口。
    在这里插入图片描述
  2. 在src目录下新建api文件夹统一管理路由api
  3. src下创建util文件夹存放公共方法，如格式化，数组转换之类的方法等。
  4. src下创建storage文件夹存放对数据存值取值等的工具箱。
  5. src下创建store文件夹存放vuex的内容。
  6. src下创建router.js存放路由
  7. src下创建pages文件夹存放页面文件
  8. pages创建index.vue（首页）、home.vue（主结构、存放公共的头部和尾部），product.vue（产品栈）、detail.vue（商品详情）、orderList.vue（订单页）、order.vue（订单主结构）、orderConfirm.vue（订单确认）、cart.vue（购物车）、login.vue（登录）、orderPay.vue（支付）、alipay.vue（支付跳转中间页）
  9. components下创建NavHeader.vue公共头部NavFooter公共底部。
    在这里插入图片描述
    在这里插入图片描述

安装依赖

懒加载：vue-lazyload
ui库：element-ui
sass编译：node-sass sass-loader
轮播：vue-awesome-swiper
axios：vue-axios
cookie：vue-cookie

npm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save-dev

在这里插入图片描述

路由封装

由页面划分路由，找共性，拆分父子组件。
在router.js中封装所有的路由，并重定向到index

import Vue from 'vue'
import router from 'vue-router'
import Home from './pages/home.vue'
import Index from './pages/index.vue'
import Product from './pages/product.vue'
import Detail from './pages/detail.vue'
import Cart from './pages/cart.vue'
import Order from './pages/order.vue'
import OrderList from './pages/orderList.vue'
import OrderConfirm from './pages/orderConfirm.vue'
import OrderPay from './pages/orderPay.vue'

Vue.use(router);

export default new router({
    routes:[
        {
            path:'/',
            name:'home',
            component:Home,
            redirect:'/index',
            children:[
                {
                    path:'/index',
                    name:'index',
                    component:Index
                },
                {
                    path:'/product/:id',
                    name:'product',
                    component:Product
                },
                {
                    path:'/detail/:id',
                    name:'detail',
                    component:Detail
                }
            ]
        },
        {
            path:'/cart',
            name:'cart',
            component:Cart
        },
        {
            path:'/order',
            name:'order',
            component:Order,
            children:[
                {
                    path:'/list',
                    name:'order-list',
                    cmponent:OrderList
                },
                {
                    path:'/confirm',
                    name:'order-confirm',
                    cmponent:OrderConfirm
                },
                {
                    path:'/pay',
                    name:'order-pay',
                    cmponent:OrderPay
                },
                {
                    path:'alipay',
                    name:'alipay',
                    component:AliPay
                }
            ]
        }
    ]
})

在main.js中引入，并全局使用
在这里插入图片描述
定义index是home的子页面，在home中写入router-view用来显示子页面内容：
在这里插入图片描述
index.vue：
在这里插入图片描述
访问路由：http://localhost:8080/#/index
页面显示为：青色框为公共组件，红色为视图层，home相当于整个容器。
在这里插入图片描述
同理定义order页面，放置公共顶部尾部和视图：
在这里插入图片描述
访问路由：http://localhost:8080/#/order/list
在这里插入图片描述

Storage封装

cookie，localStorage，sessionStorage三者区别（分六点）？

  1. 大小：cookie 4k，storage 5m

  2. 有效期：cookie拥有有效期可以通过expires设置失效时间，不设置默认关闭浏览器即失效，localStorage永久存储需要手动清除，sessionStorage会话存储，关闭网页就清除了信息。

  3. http请求：cookie会携带在http头中，发送到服务器端，如果使用cookie保存过多数据会带来性能问题，存储在内存中，Storage只存储在浏览器端不参与和服务器的通信。

  4. 路径：Cookie有路径限制，Storage只存储在域名下。

  5. API：Cookie没有特定的API，Storage有对应的API

  • API：setItem，getItem，removeItem，clear

    1. 设置key，value
      sessionStorage.setItem(“key”, “value”);
      localStorage.setItem(“site”, “js8.in”);

    2. 通过key获取value
      var value = sessionStorage.getItem(“key”);
      var site = localStorage.getItem(“site”);

    3. 删除对应key
      sessionStorage.removeItem(“key”); localStorage.removeItem(“site”);

    4. 清除所有的key/value
      sessionStorage.clear();
      localStorage.clear();

  1. 应用场景：
    cookie：登录
    localStorage：跨页面传递参数
    sessionStorage：保存临时数据，防止用户刷新页面后丢失参数。

为什么要封装Storage？本身不是有api吗？

  1. Storage本身有API，但是只是简单地key/value形式。
  2. Storage只存储字符串，需要人工转为json对象。
  3. Storage只能一次性清空，不能单个清空。

手写Storage封装

在storage文件夹下的index.js中，抛出四个操控Storage的函数，存储值——setItem，获取值——getItem，获取整个浏览器的缓存信息——getStorage，清空某一个值——clear

  1. getStorage：
    运行项目，在Application中添加sessionStorage，注意Value中格式为JSON格式（“key”：“value”）类似于{“data”:{“name”:“DDDZ”,“age”:3,“blog”:“SuperITZ”}}
    在这里插入图片描述
    在控制台查看对应的sessionStorage的值：
    在这里插入图片描述
    转换为JSON：
    在这里插入图片描述
    函数中为：
getStorage(){
        return JSON.parse(window.sessionStorage.getItem(STORAGR_KEY) || '{}');
        }
  1. setItem:
    往sessionStorage设置值，分两种情况：
  • 在对应Storage_Key下直接创建value值，如mail下直接创建data:{},id:‘001’
    在这里插入图片描述
    在这里插入图片描述
//storage/index.js (第二种情况返回的值：'data','this.getStorage()['data']')
setItem(key,value){
    //此时的val为sessionStorage的JSON格式
        let val = this.getStorage();
        //往大的模块中覆盖旧的值 this.getStorage()['data']=this.getStorage()['data']
        val[key] = value;
        //存完之后转换为字符串写入Storage信息中覆盖原来的Storage_key
        window.sessionStorage.setItem(Storage_Key,JSON.stringify(val)); 
},
    
//App.vue中导入
import storage from './storage/index'
//App.vue中mounted中使用
storage.setItem('id','001')
storage.setItem('data',{})

val[key]相当于JSON.parse(window.sessionStorage.getItem(‘mail’))[‘id’] //打印001
在这里插入图片描述

  • 在已有的模块中再添加内容，如往data中添加username，以及userblogs（包含blog1，blog2）
    在这里插入图片描述
//App.vue
//参数：key，value，添加到哪里的模块
storage.setItem('username','DDDZ','data')
storage.setItem('userblogs',{
  'blog1':'name1',
  'blog2':'name2'
},'data')

//storage/index.js
setItem(key,value,module_name){   
	//拿到data下面的所有值引入getItem第一种情况返回为this.getStorage()['data']
    let val = this.getItem(module_name);
    //等同于this.getStorage()['data']['username']='DDDZ'
    val[key] = value;
   	//module_name成为key，val为value执行第一种情况 ('data','this.getStorage()['data']')
    this.setItem(module_name,val);
},
  1. getItem：
    分两种情况，一种类似于sessionStorage下获取data或者id的值，另一种类似于获取data里面userblogs的值。
    第一种：
getItem(key){
	return this.getStorage()[key]
}

第二种：

//如传参：('username','data')
getItem(key,module_name){
	//递归获取 module_name变成key this.getItem('data');到第一种情况返回this.getStorage()['data'] 为val
    let val = this.getItem(module_name);
    //return this.getStorage()['data']['username']
    if(val) return val[key];
}
  1. claer：
    分两种情况，一种类似于直接删除sessionStorage下的id，一种删除data里面的userName。
    第一种：
//storage/index.js
clear(key){
	//获取
	let val = this.getStorage()
	//删除 this.getStorage()['id']
	delete val[key]
	//更新
	window.sessionStorage.setItem(Storage_Key, JSON.stringify(val))
}

第二种：

//storage/index.js
clear(key,module_name){
	//获取
	let val = this.getStorage()
	//this.getStorage()['data'] 判断如果没有值，返回
	if (!val[module_name]) return;
	//this.getStorage()['data']['username'] 删除
	delete val[module_name][key];
	//更新
	window.sessionStorage.setItem(Storage_Key, JSON.stringify(val))
}

//App.vue
storage.clear('id')
storage.clear('username','data')

封装Storage完整代码

//storage/index.js
//Storage封装 如：value为{"user":{"username":"jack","age":30,"sex":1}}
const Storage_Key = 'mail';
export default {
    //module_name是某个模块如user
    //存储值
    //storage/index.js (第二种情况返回的值：'data','this.getStorage()['data']')
    setItem(key, value, module_name) {
        //获取某个模块下面的属性user下面的username
        if (module_name) {
            //拿到data下面的所有值引入getItem  this.getStorage()['data']
            let val = this.getItem(module_name);
            //this.getStorage()['data']['username']='DDDZ'
            //val[key]相当于JSON.parse(window.sessionStorage.getItem('mail'))['id'] //打印001
            val[key] = value;
            //module_name成为key，val为value执行第一种情况 ('data','this.getStorage()['data']')
            this.setItem(module_name, val);
        }
        else {
            //此时的val为sessionStorage的JSON格式
            let val = this.getStorage();
            //往大的模块中覆盖旧的值 this.getStorage()['data']=this.getStorage()['data']
            val[key] = value;
            //存完之后转换为字符串写入Storage信息中覆盖原来的Storage_key
            window.sessionStorage.setItem(Storage_Key, JSON.stringify(val));
        }

    },


    getItem(key, module_name) {
        if (module_name) {
            //递归获取 module_name变成key this.getItem('data');到第一种情况返回this.getStorage()['data'] 为val
            let val = this.getItem(module_name);
            //return this.getStorage()['data']['username']
            if (val) return val[key];
        }
        //获取的user相当于(JSON.parse(window.sessionStorage.getItem("mall") || '{}'))["user"]
        return this.getStorage()[key];

    },
    //获取整个缓存信息
    getStorage() {
        return JSON.parse(window.sessionStorage.getItem(Storage_Key) || '{}');
    },

    clear(key, module_name) {
        //获取
        let val = this.getStorage();
        if (module_name) {
            //this.getStorage()['data'] 判断如果没有值，返回
            if (!val[module_name]) return;
            //this.getStorage()['data']['username'] 删除
            delete val[module_name][key];
        } else {
            //删除 this.getStorage()['id']
            delete val[key];
        }
        //更新
        window.sessionStorage.setItem(Storage_Key, JSON.stringify(val));
    }
}

接口错误拦截

统一报错、未登录统一拦截、请求值，返回值统一处理。

使用Axios拦截器

  1. 安装：npm install axios
  2. 在main.js引入Axios，导入vue-axios
    import axios from ‘axios’
    import VueAxios from ‘vue-axios’
  3. 挂载导入的vue-axios，方便项目中用this.axios直接使用axios不然每次使用前都要去import axios就很麻烦。
    Vue.use(VueAxios,axios)
  4. 添加拦截器interceptors，注意response.data，是响应拦截器的data，而res.data是前后端接口字段中自定义的data，state也是自定义的。
  5. 在设置status时应当做统一分类处理，比如订单一类的都是2001,2002之类的。
// 添加响应拦截器(返回值拦截)
axios.interceptors.response.use((response)=>{
	    //获取所有的接口数据
	    let res = response.data;
	    //检测已经登陆，返回数据
	    if(res.status == 0){
	      //返回接口里面data包含的值
	      return res.data
	    }
	    //检测未登录，拦截跳转到登录页
	    else if(res.status == 10){
	      window.location.href = '/#/login';
	    }
	    //登录失败，错误的提示信息
	    else{
	      alert(res.msg)
	    }
	}, function (error) {
	    // 对响应错误做点什么
	    return Promise.reject(error);
  	}
)

设置baseURL及接口环境

使用JSONP或CORS跨域以及接口代理时的baseURL

  1. 设置请求默认地址baseURL和响应超时时间

baseURL根据前端的跨域方式做调整：

JSONP或CORS跨域：后端域名和前端不一样时用baseURL用’http://完整的url地址‘ 。

接口代理：后端与前端一样时，前端在这里定义了/api后端接口也要统一为/api,后端没有/api的话可以前端在转发时统一去掉/api。拦截时接口代理中用：changeOrigin:true,pathRewrite:{’/api’:’’}去掉/api。

//接口代理
axios.defaults.baseURL = '/api';

//CORS或JSONP跨域
axios.defaults.baseURL = 'https://order.imooc.com/pay/cartorder'

//设置超时时间
axios.defaults.timeout = 8000;

JSONP或CORS跨域接口的环境设置（不是接口代理的情况下统一管理baseURL）

为什么要去设置？

  1. 开发上线不同阶段，需要不同的配置。
  2. 不同的跨域方式，配置不同。
  3. 打包时候统一注入环境参数，统一管理环境，输出不同的版本包。

如何去做？

  1. src文件夹下创建env.js文件
  2. 在package.json中注入环境参数，通过–mode=环境参数的值，来赋值。
"scripts": {
    "serve": "vue-cli-service serve --mode=development",
    //自定义的环境变量prev
    "prev":"vue-cli-service serve --mode=prev",
    "build": "vue-cli-service build --mode=production",
    "lint": "vue-cli-service lint"
  },
  1. 在env.js中去拿到环境参数：node.js中的process进程通过process.env.NODE_ENV获取当前nodejs服务器下的环境变量。
  2. 自定义环境变量xxx时要在src下加一个文件.env.xxx，并且在里面配置NODE_ENV = ‘xxx’
let baseUrl;
//根据不同的环境输出不同的url地址
//在package.json中增加 --mode=XXX参数（环境变量传给参数）
//process.env取到当前nodejs服务器下的环境变量
switch (process.env.NODE_ENV) {
    //开发development，测试test，生产production
    case 'development':
        baseUrl = '  https://dev-www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;

    case 'test':
        baseUrl = 'https://test-www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;

    case 'production':
        baseUrl = 'pro-https://www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;

        //自定义环境变量prev一定要在加一个文件.env.prev，并且在里面配置
    case 'prev':
        baseUrl = 'https://pre-www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;

    default:
        baseUrl = 'https://dev-www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;
}

export default{
    baseUrl
}
  1. 在main.js导入env，并使用由环境变量获取到的baseURL地址
import env from './env'
axios.defaults.baseURL = env.baseUrl;
  1. npm run serve/pre/build 就会使用不同的环境变量，从而使用不同的baseURL。

Mock设置（模拟数据）

为什么要用Mock？

  1. 开发阶段，为了高效率，需要提前Mock
  2. 减少代码冗余，灵活插拔
  3. 减少沟通，减少接口联调时间

如何创建Mock？

  1. 本地创建JSON（接口文档已经规定好）
  2. easy-mock平台
  3. 集成Mock API

使用JSON文件

public文件夹下创建mock文件夹，创建一个user文件夹存放login.json文件作为mock。
在这里插入图片描述
在app.vue中发起axios请求，在main.js中注释掉baseURL
在这里插入图片描述
浏览器可以查看到拿到的JSON Mock数据
在这里插入图片描述
在这里插入图片描述

使用easy-mock

easy-mock官网

//App.vue
this.axios.get('/user/login').then((res)=>{
          this.res = res
})

//main.js
axios.defaults.baseURL = '换成自己在easy-mock的baseURL地址';

使用本地集成Mockjs API

  1. 搭建自己的mock平台
  2. 或者使用mockjs平台
  • 安装mockjs，在src下创建mock文件夹存放api.js，定义mock文件。
  • 使用mockjs，不会发请求但是会有数据。
    在这里插入图片描述
//安装mockjs
npm i mockjs --S

//main.js
//mockjs 开关，设置按需加载
const mock = true
if(mock){
  require('./mock/api')  //加载mock文件
}

axios.defaults.baseURL = '/api';

//App.vue
 this.axios.get('/user/login').then((res)=>{
           this.res = res
})

查看返回的数据：
在这里插入图片描述

总结接口代理，接口拦截，mock.js间的联系

接口代理：在vue.config.js中其实也是一种拦截，识别到url中的/api后拦截转发到真实的接口地址获取数据。

接口拦截：用axios，在main.js中添加baseURL统一接口地址的起始头为/api，添加interceptors拦截器对接口返回的数据进行判定处理，如识别到未登录、已登录、登录错误等。

mock.js：获取本地模拟数据，使用jsonp时mockjs拦截不到，访问接口返回在Network中的JS里。使用axios时，mock 开关，关闭拦截，则没有被拦截，访问接口返回真实接口数据，返回信息在Network的XHR中。mock 开关，打开拦截则URL被拦截访问本地数据。

举例：

//App.vue
let url2 = '/pay/cartorder'

this.axios.get(url2).then((res)=>{
    this.res2 = res
    console.log(res)
})

//main.js
axios.defaults.baseURL = '/api';
//mock开关打开，axios发url请求时被拦截去访问./mock/api文件里面的/api/pay/cartorder下的模拟接口数据而不会去访问vue.config.js内的真实接口地址
const mock = true
if(mock){
  require('./mock/api')
}

//vue.config.js
module.exports = {  
    // 自动加载devServer中的配置表
    devServer:{
        host:'localhost',
        port:8080,
        // 代理
        proxy:{
            // 访问/pay时实现拦截转发到target中
            '/api':{
                // 目标网址,内部访问到慕课网的接口
                target:'https://order.imooc.com',
                changeOrigin:true,
                pathRewrite:{
                    '/api':''
                }
            }
        }
    }
}
Da Zeng
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue仿小米商城
qq_42857403的博客
04-11 2228
Vue仿小米商城 一、项目介绍： 1、该项目是对小米商城系统的模仿，实现了从浏览商品到结算商品的整个过程，是一个前后端分离的开源目，实现了前端内容的编写。 2、主要技术栈：Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现，包含了登录、产品首页、产品站、 产品详情、购物车、订单确认、订单支付、订单列表等功能。 Gitee地址：https://gitee.com/hoona/mi-mall
Vue2实现仿小米商城练手项目前端篇(2-首页实现)
qq_39064418的博客
03-06 2862
基于Vue2实现仿小米商城练手项目
mimall:基于Vue2.x的移动端小米商城
05-17
项目简介 学习vue也有一段时间了，所以一直有想法想做个项目把之前学到的东西总结一下，结合自己前端时间学的移动端布局知识，所以决定做一个移动端商城，因为一个商城一般都会涉及到大量的数据交互，这正好能发挥vue的强大作用。对比了一些相关网站后，觉得小米商城的风格比较符合自己的口味，于是选择了小米商城。 该项目基于vue2.x，结合vue-cli+vue-router+axios+mint-ui+webpack共同完成，目前已经完成商城的主要功能，后续还会继续更新完善。 项目中运用了大部分vue常用的知识点，如vue基本指令、组件、计算属性、数据渲染、生命周期钩子、slot插槽等等，并附有大量注释，对于初学vue想通过实际项目进阶的小伙伴们也会有一定帮助。 如果项目对你有帮助的话欢迎star、fork！ 在线预览 (建议在F12移动端调试模式下或在手机浏览器下观看) (测试账号：admin
vue+element纯手工完美模拟实现小米有品网站
lucky_fang的博客
05-24 1845
后续不定期将不断完善和增加功能页面，敬请期待。关注作者，及时了解更多好项目！作者主页也有更多好项目分享！获取源码或如需帮助，可通过博客后面名片+作者即可！其他作品集合：《vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网》《vue实现功能完整的购物商城，商品零食、电商通用商城》《vue+element实现蔬菜、水果、电商商城》《vue+element简单实现电商商城网站，模仿小米电商商城》《vue实现美观大方的动漫、cos、帖子类型网站》《vue实现好看的相册、图片网站》
vue+element简单实现电商商城网站，模仿小米电商商城
热门推荐
lucky_fang的博客
11-25 3万+
vue+element简单实现商城网站首页，模仿小米电商商城
vue+elementui实现app布局小米商城，样式美观大方，功能完整
lucky_fang的博客
06-16 9480
后续不定期将不断完善和增加功能页面（数据分离管理、页面数据通讯交互、参数变化等），敬请期待。关注作者，及时了解更多好项目！作者主页也有更多好项目分享！获取源码或如需帮助，可通过博客后面名片+作者即可！其他作品集合：《vue完美模拟pc版快手，实现短视频，含短视频详情播放》《vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网》《vue实现功能完整的购物商城，商品零食、电商通用商城》《vue+element实现蔬菜、水果、电商商城》
【Vue】仿小米商城系统（一）
前端学习博客
05-10 7894
【Vue】仿小米商城系统（一） 文章目录【Vue】仿小米商城系统（一）前言一、项目概述项目介绍商城页面与组件技术栈商城各页面展示商品首页产品站商品详情登录页面：账号 jack 密码 jack订单确认购物车页面订单支付页面支付宝支付微信支付订单列表项目源码：二、项目开发前准备跨域解决jsonpnginx项目目录结构Storage封装接口错误拦截Mock设置集成Mock API（本地集成Mock.js） 前言 本项目是基于Vue全家桶的仿小米商城系统，系列笔记(已完结)如下👇🏻 【Vue】仿小米商城系统（一）
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能。后端采取了MVC模式，根据前端需要的数据分模块设计了相应的接口、控制层、数据持久层
Vue全家桶项目--小米商城
最新发布
weixin_50811484的博客
03-12 862
Vue全家桶项目--小米商城
基于 Vue + Element UI 开发，参考小米商城，实现的电商项目-vue-xiaomi.zip
11-04
基于 Vue + Element UI 开发，参考小米商城，实现的电商项目-vue-xiaomi
vue仿小米商城demo
04-10
vue仿小米商城demo
vue实例项目小米移动商城
08-10
vue项目-小米移动商城开源版
vue2模仿小米商城官网
03-15
使用vue.js模仿小米官网的作品
Vue实现小米商城登录和注册
weixin_53261137的博客
04-16 584
【代码】Vue实现小米商城登录和注册。
【Vue】仿小米商城系统（二）
前端学习博客
05-10 2133
【Vue】仿小米商城系统（二） 文章目录【Vue】仿小米商城系统（二）前言三、商品首页的开发mixin的使用商标移出和进入鼠标移动到菜单上显示下拉列表对返回的数据统一样式 --> 使用过滤器鼠标移动到左侧菜单上，右侧列表打开弹框组件实现 --> Modal组件Modal.vueVue动画：modal.scss首页使用Modal组件图片懒加载四、登录页面的开发登录模块将登录的信息进行保存到vuex注册模块登录后获取用户信息和购物车商品数量第一次登录进去保存数据到vuex在vuex中设置action
【Vue】仿小米商城系统（四）
前端学习博客
05-10 1982
【Vue】仿小米商城系统（四） 文章目录【Vue】仿小米商城系统（四）前言八、Element-UI使用1.按需引入一个🌰2.插件引用3.对于 babelrc文件 和 babel.config.js文件方案一：方案二：在该项目中引入 --> 方法一，用import在该项目中引入 --> 方法二，将该方法扩展到vue实例身上九、订单支付页面支付宝微信支付十、订单列表页 --> 分页功能elementUI: 分页器加载更多按钮滚动加载 --> 插件实现原生实现加载更多十一、项目优化十二、总
基于Vue2.x的小米商城移动端项目
atjw25188的博客
04-28 1196
初学vue已经有一段时间，为了检验自己的学习成果，决定做一个项目作为一个阶段性总结，项目花了差不多半个月时间，目前实现了7个页面，商城的主要功能基本实现，代码已经放到github上面. 这个项目把大部分vue的基本知识都用上了，个人认为比较适合刚入门vue并且缺乏实站经验的小伙伴们参考，如果项目对你有帮助的话，欢迎各位star或者fork！ >...
基于Vue的仿小米商城
程序猿大波的博客
01-09 5416
之前分享过基于Vue的商城项目，今天再给大家分享一个。这个项目相比之前的，界面更加好看，最重要的是完美还原了小米商城的界面，对于学习和参考具有很大的意义。 项目简介 本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。 实现了商品的展示
基于vue全家桶移动端高仿小米商城、vue-cli项目笔记
JerryBro的博客
04-08 1501
vue-cli项目注意点 vue-cli项目克隆到本地，需要cnpm install（即安装依赖包），再cnpm run serve（即启动项目） cnpm install [插件名] --save(-S) 【保存到dependencies:{xxx}】 cnpm install [插件名] --save-dev(-D) 【保存到devDependencies:{xxx}】 区...
DaZeng：雪碧图（精灵图）的使用
大曾blog
11-25 5125
雪碧（精灵）图 要求显示效果：（轮播图导航栏效果）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Da Zeng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值