这篇文章主要介绍了node和vue怎么实现商城用户地址模块，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司是专业的高县网站建设公司，高县接单;提供成都网站制作、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行高县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
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
