node和vue实现商城用户地址模块

时间:2021-05-26

本文为大家分享了node和vue商城用户地址模块的实现,供大家参考,具体内容如下

server/models/user.js

var mongoose = require('mongoose')var userSchema = mongoose.Schema({ "userId":String, // 用户Id "userName":String, // 用户名 "userPwd":String, // 用户密码 "orderList":Array, // 订单列表 "cartList":[ // 购物车列表 { "productId": String, // 商品Id "productName": String, // 商品名称 "salePrice":String, // 商品价格 "productImage":String, // 图片地址 "checked":String, // 是否选中 "productNum":String // 商品数量 } ], "addressList":[ // 用户地址列表 { "addressId": String, "userName": String, "streetName": String, "postCode": Number, "tel": Number, "isDefault": Boolean } ]}); // 通过module.exports进行输出,这样才能加载到 三个参数分别是 模型名,userSchema名,管理数据库集合名module.exports = mongoose.model("User",userSchema,"users");

server/routes/users.js

var express = require('express');var router = express.Router(); var User = require('./../models/user'); router.get('/', function(req, res, next) { res.send('respond with a resource');}); router.get('/test', function(req, res, next) { res.send('test');}); // 登录router.post('/login', function(req, res, next) { // 获取前端传过来的参数 post方式用req.Body形式获取参数 var param = { userName:req.body.userName, userPwd:req.body.userPwd } User.findOne(param, function(err,doc) { if(err){ res.json({ status:"1", msg:err.message }); }else{ if(doc){ res.cookie("userId",doc.userId,{ // 将用户信息存入cookie path:'/', maxAge: 1000*60*60 }); res.cookie("userName",doc.userName, { path:'/', maxAge: 1000*60*60 }); // req.session.user = doc; // 将用户信息存入session res.json({ status:'0', msg:'', result:{ userName:doc.userName } }) } } });}); // 登出接口router.post("/logout", function (req,res,next) { res.cookie("userId", "", { // 登出将userId设置为"" path:"/", maxAge:-1 // 设置位过期 }) res.json({ status:"0", msg:'', result:'' })}) // 校验用户信息router.get("/checkLogin", function (req,res,next) { if(req.cookies.userId){ res.json({ status:'0', msg:'', result: req.cookies.userName || '' // 获取cookeie req.cookies.属性 }); }else{ // 取不到就说明当前没有登录 res.json({ status:'1', msg:'未登录', result:'' }); }}) // 查询当前用户的购物车数据router.get("/cartList", function (req,res,next) { var userId = req.cookies.userId; console.log(userId); User.findOne({userId:userId}, function (err,doc) { if(err){ res.json({ status:'1', msg:err.message, result:'' }); }else{ if(doc){ res.json({ status:'0', msg:'', result:doc.cartList }); } } });}); // 购物车删除router.post("/cartDel", function (req,res,next) { // 获取浏览器的cookie 以及用户传递过来的参数 productId var userId = req.cookies.userId,productId = req.body.productId; User.update({ userId:userId },{ $pull:{ 'cartList':{ 'productId':productId } } }, function (err,doc) { if(err){ res.json({ status:'1', msg:err.message, result:'' }); }else{ res.json({ status:'0', msg:'', result:'suc' }); } });}); //修改购物车商品数量router.post("/cartEdit", function (req,res,next) { var userId = req.cookies.userId, // 获取用户客户端的userId productId = req.body.productId, // 获取用户传的参数商品id productNum = req.body.productNum, // 获取用户传的参数商品id checked = req.body.checked; // 获取用户传的参数是否选中 User.update({ "userId":userId, "cartList.productId":productId},{ "cartList.$.productNum":productNum, "cartList.$.checked":checked, }, function (err,doc) { if(err){ res.json({ status:'1', msg:err.message, result:'' }); }else{ res.json({ status:'0', msg:'', result:'suc' }); } })}); // 商品全选不选router.post("/editCheckAll", function (req,res,next) { var userId = req.cookies.userId, checkAll = req.body.checkAll?'1':'0'; User.findOne({userId:userId}, function (err,user) { if(err){ res.json({ status:'1', msg:err.message, result:'' }); }else{ if(user){ user.cartList.forEach((item)=>{ item.checked = checkAll; }) user.save(function (err1,doc) { if(err1){ res.json({ status:'1', msg:err1,message, result:'' }); }else{ res.json({ status:'0', msg:'', result:'suc' }); } }) } } });}); // 用户地址模块开始-----------------------------------------------------------------------------------------------// 查询用户地址接口router.get("/addressList", function (req,res,next) { var userId = req.cookies.userId; User.findOne({userId:userId}, function (err,doc) { if(err){ res.json({ status:'1', msg:err.message, result:'' }); }else{ res.json({ status:'0', msg:'', result:doc.addressList }); } })}); // 设置默认地址router.post("/setDefault", function (req,res,next) { var userId = req.cookies.userId, addressId = req.body.addressId; if(!addressId){ res.json({ status:'1003', msg:'addressId is null', result:'' }); }else{ User.findOne({userId:userId}, function (err,doc) { if(err){ res.json({ status:'1', msg:err.message, result:'' }); }else{ var addressList = doc.addressList; addressList.forEach((item)=>{ if(item.addressId == addressId){ item.isDefault = true; }else{ item.isDefault = false; } }); doc.save(function (err1,doc1) { if(err){ res.json({ status:'1', msg:err.message, result:'' }); }else{ res.json({ status:'0', msg:'', result:'' }); } }) } }); }}); // 删除地址接口 router.post("/delAddress", function (req,res,next) { var userId = req.cookies.userId,addressId = req.body.addressId; User.update({ userId:userId },{ $pull:{ // 删除子文档元素 'addressList':{ 'addressId':addressId } } }, function (err,doc) { if(err){ res.json({ status:'1', msg:err.message, result:'' }); }else{ res.json({ status:'0', msg:'', result:'' }); } });});// 用户地址模块开始----------------------------------------------------------------------------------------------- module.exports = router;

vue 前端部分

src/router/index.js 路由

import Vue from 'vue'import Router from 'vue-router'import GoodsList from './../views/GoodsList.vue'import Cart from '@/views/Cart.vue'import Address from '@/views/Address'Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'GoodsList', component:GoodsList }, { path: '/cart', name: 'Cart', component:Cart }, { path: '/address', name: 'Address', component:Address } ]})

src/views/Address.vue

<template> <div> <nav-header></nav-header> <nav-bread> <span>Address</span> </nav-bread> <div class="checkout-page"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://ponents:{ NavHeader, NavFooter, NavBread, Modal }, methods:{ init(){ axios.get("/users/addressList").then((response)=>{ // 获取用户地址列表 let res = response.data; this.addressList = res.result; this.selectedAddrId = this.addressList[0].addressId; for(var i=0;i<this.addressList.length;i++){ if(this.addressList[i].isDefault){ this.checkIndex = i; } } }); }, expand(){ // 展开和收起地址列表 if(this.limit==3){ this.limit = this.addressList.length; }else{ this.limit = 3; } }, setDefault(addressId){ // 设置默认地址 axios.post("/users/setDefault",{ addressId:addressId }).then((response)=>{ let res = response.data; if(res.status=='0'){ console.log("set default"); this.init(); } }) }, closeModal(){ // 管理删除地址提示弹框 this.isMdShow = false; }, delAddressConfirm(addressId){ // 弹出模态框 选中删除的地址 this.isMdShow = true; this.addressId = addressId; }, delAddress(){ // 删除该地址 axios.post("/users/delAddress",{ addressId:this.addressId }).then((response)=>{ let res = response.data; if(res.status=="0"){ console.log("del suc"); this.isMdShow = false; this.init(); } }) } } }</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章