基于Node+Vue.js高质量商城系统的开发
程序员根本不会有35岁危机！！！
周末，我没有出去，又接了个单子，一个网友让我用Node+vue做一个商城系统。
其实web开发，好多语言的后台逻辑处理都是千篇一律，学好一门语言可以横扫其他语言。所以学好啥语言都有前途。
这一个单子就是我原来一个月的工资！
程序行业是一个备受争议的行业：
高薪、996、秃顶、格子衫……
这都是外界给程序员的帽子。
我是一名多年开发的程序员，从本科到硕士一直重试计算机相关的工作，基本也是见证了这个行业的起起落落。
其实外界的声音不重要的，关键是做自己吧！今年和同行聊一下：
35岁有没有职业危机！
从我的职场经验来看，35岁没有危机，反而也是越来越吃香，薪资越来越高！
那什么样的程序员容易淘汰???
停滞不前，一直不学习，35岁的时候还是一顿CRUD（增删改查）!你说不辞退你辞退谁？
当然到了35岁，在学习能力和加班方面，我们比不上应届生。
但是你可以在技术、管理方面建立优势，当然也可以开发兼职，兼职可以做哪些？？
咨询、接私活、自媒体等。
这些随便做起来一个都可以超过你上班的工资。我曾经做去企业做过一次咨询，给了五位数，Tob是真的香！上次和我对象的一个朋友吃饭，他是一个本科生，一直做NLP，上周去大学代课，一上午给了4500。
所以35岁还年轻，于程序员来说，有太多的转型的方向，我觉得程序员35岁失业就是P话！！！
下面看一下开发的这个系统。
一，系统界面
二，系统核心代码展示
// 小孟v:jishulearn
<template>
<view class="cart">
<!--<view class="header" :style="{ position: headerPosition, top: headerTop }">-->
<!--<view class="title">购物车</view>-->
<!--</view>-->
<!--<!– 占位 –>-->
<!--<view class="place"></view>-->
<!-- 购物车为空 -->
<view v-if="cartList.length === 0" class="empty">
<text class="iconfont icongouwuche" :class="'text-'+themeColor.name"></text>
<view v-if="hasLogin" class="empty-tips">
空空如也
<navigator
class="navigator"
:class="'text-'+themeColor.name"
v-if="hasLogin"
url="../category/category"
open-type="switchTab"
>随便逛逛></navigator
>
</view>
<view v-else class="empty-tips">
空空如也
<view class="navigator" :class="'text-'+themeColor.name" @tap="navTo('/pages/public/logintype')"
>登录/注册 ></view
>
</view>
</view>
<!-- 购物车列表 -->
<view class="goods-list" v-else>
<view class="rf-cart-row" v-for="(row, index) in cartList" :key="index">
<!-- 删除按钮 -->
<view class="menu" @tap.stop="deleteCartItem(row.id, 'one')" :class="'bg-'+themeColor.name">
<text class="iconfont icon iconiconfontshanchu1"></text>
</view>
<!-- 商品 -->
<view
class="carrier"
:class="[
theIndex === index ? 'open' : oldIndex === index ? 'close' : ''
]"
@touchstart="touchStart(index, $event)"
@touchmove="touchMove(index, $event)"
@touchend="touchEnd(index, $event)"
>
<!-- checkbox -->
<view class="checkbox-box" @tap="selected(index, row)">
<view
class="checkbox"
:class="[
parseInt(row.status, 10) === 0 ? `checkbox-disabled ${'text-'+themeColor.name}` : 'text-'+themeColor.name
]"
>
<view :class="[row.selected ? `on ${'bg-'+themeColor.name}` : '']"></view>
</view>
</view>
<!-- 商品信息 -->
<view class="goods-info">
<view class="img">
<image :src="row.productPic"></image>
</view>
<view class="info">
<view
class="title in2line"
@tap="navTo(`/pages/product/product?id=${row.product.id}`)"
>
{{ row.productName }}
</view>
<view class="state-wrapper">
<view class="spec" @tap.stop="toggleSpec(row)">{{ row.productAttr|attrFilter}}</view>
<view class="state" v-if="parseInt(row.status, 10) === 0">
已失效
</view>
</view>
<view class="price-number">
<view class="price">{{ moneySymbol }}{{
row.price
}}</view>
<view class="remark" >{{ row.remark }}</view>
<view class="number" >
<view class="sub" @tap.stop="sub(row, index)">
<text class="iconfont icon icon-jianhao"></text>
</view>
<view class="input" @tap.stop="discard">
<input
type="number"
:class="'text-'+themeColor.name"
v-model="row.quantity"
@input.stop="numberChange(row, $event, index)"
/>
</view>
<view class="add" @tap.stop="add(row, index)">
<text class="iconfont icon iconjia1"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 脚部菜单 -->
<view
class="footer"
:style="{ bottom: footerbottom }"
v-if="cartList.length !== 0"
>
<view class="checkbox-box" @tap="allSelect">
<view class="checkbox" :class="'text-'+themeColor.name">
<view :class="[isAllselected ? `on ${'bg-'+themeColor.name}` : '']"></view>
</view>
<view class="text">全选</view>
</view>
<view
class="delBtn"
:class="'text-'+themeColor.name"
@tap="deleteCartItem"
v-if="selectedList.length > 0"
>删除</view
>
<view class="settlement">
<view class="sum"
>合计:
<view class="money">{{ moneySymbol }}{{ sumPrice }}</view>
</view>
<view class="btn" :class="'bg-'+themeColor.name" @tap="createOrder"
>结算({{ selectedList.length }})</view
>
</view>
</view>
<!-- 规格-模态层弹窗 -->
<view
class="popup spec show"
v-if="specClass === 'show'"
@touchmove.stop.prevent="stopPrevent"
@tap="hideSpec"
>
<!-- 遮罩层 -->
<view class="mask" @tap="hideSpec"></view>
<view class="layer" @tap.stop="stopPrevent">
<rf-attr-content
:isSelectedNum="false"
:product="productDetail"
@toggle="toggleSpec"
></rf-attr-content>
</view>
</view>
<!--页面加载动画-->
<rfLoading isFullScreen :active="loading"></rfLoading>
</view>
</template>
<script>
import {
cartItemClear,
cartItemDel,
cartItemList,
cartItemUpdateNum,
cartItemUpdateSku,
productDetail
} from '@/api/product';
import rfAttrContent from '@/components/rf-attr-content';
import { mapMutations } from 'vuex';
export default {
components: { rfAttrContent },
filters:{
attrFilter(val){
if(!val) return ;
val = JSON.parse(val);
let res = [];
val.map(v=>{
res.push(v.value);
})
return res.join(',');
}
},
data() {
return {
sumPrice: '0.00',
headerPosition: 'fixed',
headerTop: null,
statusTop: null,
showHeader: true,
selectedList: [],
isAllselected: false,
// 控制滑动效果
theIndex: null,
oldIndex: null,
isStop: false,
cartList: [],
hasLogin: null,
footerbottom: 0,
specClass: 'none',
productDetail: {
base_attribute_format: [],
sku: []
},
specSelected: [],
specChildList: [],
specList: [],
currentSkuId: '',
moneySymbol: this.moneySymbol,
loading: true,
singleSkuText: this.singleSkuText
};
},
onPageScroll(e) {
// 兼容iOS端下拉时顶部漂移
this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
this.headerTop = e.scrollTop >= 0 ? null : 0;
this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
},
// 下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
onPullDownRefresh() {
this.selectedList.length = 0;
this.isAllselected = false;
this.sumPrice = 0;
this.getCartItemList('refresh');
},
onShow() {
// 兼容H5下结算条位置
// #ifdef H5
this.footerbottom =
document.getElementsByTagName('uni-tabbar')[0].offsetHeight + 'px';
// #endif
// #ifdef APP-PLUS
this.showHeader = false;
// eslint-disable-next-line
this.statusHeight = plus.navigator.getStatusbarHeight();
// #endif
this.initData();
},
methods: {
...mapMutations(['setCartNum']),
// 规格弹窗开关
toggleSpec(row) {
if (parseInt(row.status, 10) === 0) return;
if (this.specClass === 'show') {
if (!this.hasLogin) {
this.specClass = 'none';
this.$mHelper.toast('请先登录！');
return;
}
this.handleCartItemUpdateSku(this.currentSkuId, row.skuId);
this.specClass = 'hide';
setTimeout(() => {
this.specClass = 'none';
}, 250);
} else if (this.specClass === 'none') {
if (row) {
this.getProductDetail(row);
}
}
},
// 获取产品详情
async getProductDetail(row) {
this.currentSkuId = row.sku_id;
await this.$http
.get(`${productDetail}`, {
id: row.product_id
})
.then(async r => {
this.productDetail = r.data;
this.productDetail.sku_name = row.sku_name;
this.specClass = 'show';
});
},
hideSpec() {
this.specClass = 'hide';
setTimeout(() => {
this.specClass = 'none';
}, 250);
},
stopPrevent() {},
// 删除选中购物车商品
async deleteCartItem(id, type) {
let ids = [];
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].selected) {
ids.push(parseInt(this.cartList[i].id, 10));
}
}
await this.$http2.post("cart/delete",{ids},{
header:{
'content-type':'application/x-www-form-urlencoded'
}
});
this.selectedList.length = 0;
this.isAllselected = false;
this.sumPrice = 0;
this.getCartItemList();
this.oldIndex = null;
this.theIndex = null;
// await this.$http
// .post(`${cartItemDel}`, {
// sku_ids: JSON.stringify(skuIds)
// })
// .then(() => {
// this.selectedList.length = 0;
// this.isAllselected = false;
// this.sumPrice = 0;
// this.getCartItemList();
// this.oldIndex = null;
// this.theIndex = null;
// });
},
// 修改购物车商品sku
async handleCartItemUpdateSku(skuId, newSkuId) {
await this.$http
.post(`${cartItemUpdateSku}`, {
sku_id: skuId,
new_sku_id: newSkuId
})
.then(() => {
this.selectedList.length = 0;
this.isAllselected = false;
this.sumPrice = 0;
this.getCartItemList();
});
},
// 数据初始化
initData() {
this.hasLogin = this.$mStore.getters.hasLogin;
if (this.hasLogin) {
this.theIndex = null;
this.oldIndex = null;
this.selectedList.length = 0;
this.isAllselected = false;
this.sumPrice = 0;
this.getCartItemList();
} else {
this.cartList = [];
this.selectedList.length = 0;
this.loading = false;
}
},
// 通用跳转
navTo(route) {
if (!this.$mStore.getters.hasLogin) {
uni.setStorageSync('backToPage', JSON.stringify({ route: '/pages/cart/cart' }));
}
this.$mRouter.push({ route });
},
// 获取购物车列表
async getCartItemList(type) {
let r = await this.$http2.get('cart/list').catch(() => {
this.cartList = [];
this.loading = false;
if (type === 'refresh') {
uni.stopPullDownRefresh();
}
});
this.loading = false;
this.cartList = r.data;
this.$set(this,'cartList',[...r.data]);
// 清空购物车
clearCart(params) {
const content = params ? '清空失效商品？' : '清空购物车？';
uni.showModal({
content,
success: async e => {
if (e.confirm) {
await this.$http.post(`${cartItemClear}`, params).then(() => {
this.selectedList.length = 0;
this.isAllselected = false;
this.sumPrice = 0;
this.getCartItemList();
});
}
}
});
},
// 控制左滑删除效果
touchStart(index, event) {
// 多点触控不触发
if (event.touches.length > 1) {
this.isStop = true;
return;
}
this.oldIndex = this.theIndex;
this.theIndex = null;
// 初始坐标
this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
},
三，欢迎关注我
如果你想学习更多的技术，欢迎关注我！
你好，我是小孟，10年开发老司机，小作坊boss、做过码农、主管、产品经理。喜欢自由，讨厌职场的勾心斗角。我的偶像是乔布斯，10年前选择计算机这个行业，就是因为热爱。现在已而立之年，虽然没有当初追寻技术的单纯，但依然热爱。技术改变世界，知识改变命运是我不变的信念。学习、思考、因时代变化而变化是我的武器。如果我觉得一件事，值得干，至少我会坚持5年。在我毕业一年后，我就搞定了房贷、车贷等一切贷款，所以我可以自由。我不喜欢循规蹈矩和被安排的生活，大学时候就喜欢折腾，现在也是。我大多数时候很孤独，也喜欢孤独，不怎么合群，在创业中苟延残喘的活下来。未来怎么样，我不知道，但是我依然会追寻有激情的生活和事情，我相信坚持的力量，如果能把一件事坚持下去，真的可以打败99%的人。关注我，一起聊技术、职场、人生和好玩的事。