从零开始，搭建一个简单的购物平台（十二）前端商城部分：
https://blog.csdn.net/time_____/article/details/108471436
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping
这篇文章我们来实现一下前端商城的工具类，其他配置和全局状态
工具类：
- 工具类我们统一放在utils文件夹下，并部署在Vue原型上（与Axios的一样）
-
首先我们要实现两个对象深复制的方法，之前博客也有介绍到，后续对全局静态变量做操作时，只能将其定义为只读，也就是不能改变他的值，所以深复制是很有必要的，对于简单的数据用json方式即可，遇上含有function，set，get等属性时需要用到递归版。
JSON：export default class Clone { static shallowClone(org) { return JSON.parse(JSON.stringify(org)); } }递归：
export default class Clone { static deepClone(org,tag) { var tag = tag || {}; var name = Object.getOwnPropertyNames(org); for (var i = 0; i < name.length; i++) { var desc = Object.getOwnPropertyDescriptor(org,name[i]); if (typeof desc.value === "object" && desc.value !== null) { var obj = desc.value.toString() === "[object Object]" ? {} : []; Object.defineProperty(tag,name[i],{ configurable: desc.configurable,enumerable: desc.enumerable,writable: desc.writable,value: obj }); Clone.deepClone(desc.value,obj); } else { Object.defineProperty(tag,desc); } } return tag; } } -
本地缓存的封装
import Vue from "vue"; class Storage { static saveStorage(key,val) { localStorage.setItem(key,JSON.stringify(val)); } static getStorage(key) { try { return JSON.parse(localStorage.getItem(key)) || []; } catch (error) {} } static clearStorage(key) { try { localStorage.removeItem(key); } catch (error) {} } } Vue.prototype.$storage = Storage;
其他配置：
-
Events：对全局事件做一个封装，这里针对每一个组件和每一个自定义事件用了一个简单的工厂模式，降低代码的耦合性，解决事件封闭，但是缺点是在每一个组件销毁时需要作事件取消监听（销毁），否则会导致之前的监听事件执行两次，虽然每个子工厂生产出来的都是独特的产品，但是会导致性能降低，所以要做事件销毁处理
import Vue from "vue"; class Events extends Vue {//继承Vue的自定义事件，使其直接调用 constructor() { super(); } static getInstance() {//返回当前实例的单例 if (!Events._instance) { Object.defineProperty(Events,"_instance",{ value: new Events() }); } return Events._instance; } onEvent(_event,_fn) { this.$on(_event,_fn); } onceEvent(_event,_fn) { this.$once(_event,_fn); } emitEvent(_event,_data) { this.$emit(_event,_data); } offEvent(_event,_fn) { this.$off(_event,_fn) } } Vue.prototype.$events = Events.getInstance() -
全国省市县的JSON文件
https://gitee.com/DieHunter/myCode/blob/master/shopping/client/shopclient/src/config/city.js -
静态Config文件
export default class Config { static Agreement = "http://"; //协议 static BaseUrl = "127.0.0.1"; //请求ip或域名 static ServerUrl = ""; //多级路径名 static ServerPort = ":1024"; //端口 static Path = "/"; //静态文件目录 static CryptoKey = "tokenkey"; //加密信息关键字 static RequestPath = Config.Agreement + Config.BaseUrl + Config.ServerPort + Config.Path; //服务端静态目录 static RequestTimeOut = 10 * 1000; //请求超时时间 static GetCodeTime = 60 * 1000; //邮箱验证码重发时间 static ShopMaxCount = [1,2,3,4,5,6,7,8,9]; //每件商品可购买数量（选择器配置） static ServerApi = { //接口名 token: "user/checkToken",//验证token user: { userLogin: "user/userLogin",//用户登录 getMailCode: "user/getMailCode",//获取验证码 updateUser: "user/updateUser",//更新用户 userReg: "user/userReg" //注册（移动端） },shop: { shopList: "shop/shopList" //获取商品列表 },order: { orderList: "order/orderList",//获取订单列表 addOrder: "order/addOrder",//新增订单 delOrder: "order/delOrder",//删除订单 updateOrder: "order/updateOrder" //更新订单状态 } }; static UploadName = { headPic: "upload/headPic" //图片路径 }; static UploadKey = { headKey: "headPic" //头像上传关键字 }; static StorageName = { //本地缓存 Token: "token",ShopCar: "shopCar",//购物车列表 UserInfo: "userInfo" //用户信息 }; static EventName = { //自定义事件 SelectKind: "selectKind",//分类选择 ChangeCount: "changeCount",//修改商品数量 ShowPicker: "showPicker",//显示，隐藏Picker CountShop: "countShop",//购物车商品总价 SelectAllChild: "selectAllChild",//全选子选项 SelectParent: "selectParent",//全选父选项 IsLogin: "isLogin",//登录成功 UploadPic: "uploadPic" //上传图片 }; static DefaultPageConfig = { //默认分页配置 shopType: "",picType: "",keyWord: "",page: 1,isactive: true,pageSize: "",totalPage: 1,orderId: "",sort: "1",orderState: "" }; } -
邮箱类型选择配置
export default class Mail { static address = [ "@qq.com","@gmail.com","@yahoo.com","@msn.com","@hotmail.com","@aol.com","@ask.com","@live.com","@0355.net","@163.com","@163.net","@263.net","@3721.net","@yeah.net","@googlemail.com","@mail.com" ]; } -
商品类型
export default class ShopType { //商品类型，图片类型，订单状态 static shopType = [ { name: "炒货",val: "0" },{ name: "果味",val: "1" },{ name: "蔬菜",val: "2" },{ name: "点心",val: "3" },{ name: "粗茶",val: "4" },{ name: "淡饭",val: "5" } // { name: "其他",val: "6" },]; static picType = [ { name: "单个商品",{ name: "轮播图",{ name: "分类",{ name: "主题",{ name: "其他",val: "4" } ]; static orderState = [ { name: "未付款",{ name: "已付款",{ name: "未发货",{ name: "已发货",{ name: "已完成",{ name: "已退款",val: "5" } ]; }
全局Store
-
全局store没有用Vuex,而是用本地缓存做了一个数据存储，在src下新建store文件夹，并新建store.js文件将所有的状态值汇总并暴露，这里我们简单搭建一下购物车，在shopCar中新建数据model层state和命令控制controller层action
-
store.js
import Vue from 'vue' import ShopCar from "./shopCar/action" Vue.prototype.$store = { ShopCar } -
state.js
import Vue from "vue" import Config from "../../config/config" export default class State extends Vue { constructor() { super() } set shopCar(val) {//写数据 this.$storage.saveStorage(Config.StorageName.ShopCar,val) } get shopCar() {//读数据 return this.$storage.getStorage(Config.StorageName.ShopCar) || [] } } -
action.js
import State from "./state" import Vue from "vue" import Config from "../../config/config" const { EventName } = Config; export default class Action extends Vue { constructor() { super() this._state = new State() } set state(val) { this._state.shopCar = val } get state() { return this._state.shopCar } countShopItem() {//修改商品数量 } delShopItem() {//删除商品 } selAllChild() {//全选 } filterSelect() {//刷新商品列表 } delSelShop() {//删除选择商品 } }
引入所有包
import Vue from 'vue'
import App from './App'
import router from './router'
import "./style/main.less"
import 'mint-ui/lib/style.css'
import MintUI from 'mint-ui'
import './utils/axios'
import './utils/cryptoTool'
import './utils/storage'
import "./event/event"
import "./store/store"
Vue.use(MintUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',router,components: {
App
},template: '<App/>'
})
到此为止，前端商城准备工作全部完成，下一篇文章正式开始进入开发
原文地址：https://blog.csdn.net/time_____
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。