这篇文章主要介绍了node和vue怎么实现商城用户地址模块，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联公司是专业的高县网站建设公司，高县接单;提供成都网站制作、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行高县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和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');
 
/* GET users listing. */
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

感谢你能够认真阅读完这篇文章，希望小编分享的“node和vue怎么实现商城用户地址模块”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

本文名称：node和vue怎么实现商城用户地址模块
浏览地址：http://ybzwz.com/article/jheiij.html