电商平台项目
电商平台项目
项目简介
- 平台分为管理员端以及用户端
- 管理员能够对商品进行上、下架，修改商品信息以及对用户的信息进行修改
- 用户能够选择游客模式对商品进行浏览，或者登陆平台将商品加入购物车，生成订单等操做
技术实现
- 使用bootstrap框架进行用户端前端界面的搭建，H-ui框架进行管理员端界面的搭建
- 使用到了localStorage、cookie等缓存技术
- 使用Ajax技术进行先后端的交互
- 数据库采用了mongoDB，并结合了可视化工具Robo 3T
- 后台采用了node.js+express+mongoose技术进行对数据库的逻辑操做
用户端核心部分
使用Ajax向服务器发送请求，动态加载数据库中的商品javascript
前台发送ajax请求html
$(function(){
var OL_Action_root='http://127.0.0.1:3000';
//页面加载事件
$.ajax({
url:"http://localhost:3000/home/load",
type:'POST',
data:{},
success:function(res){
//console.log(res);
var arr0=[];
var arr1=[];
var arr2=[];
for(var i=0;i<res.length;i++){
if(res[i].p_type=="LaterDesigns"){
arr0.push(res[i]);
}else if(res[i].p_type=="Special Offers"){
arr1.push(res[i]);
}else{
arr2.push(res[i]);
}
}
console.log(arr0);
console.log(arr1);
console.log(arr2);
function loadPro(arr,tab){
con0="";
for(i=0;i<arr.length;i++){
con0+='<div class="col-md-3 product-men">';
con0+='<div class="men-pro-item simpleCart_shelfItem">';
con0+='<div class="men-thumb-item" οnclick="jumpToSingle($(this))" value="'+arr[i]._id+'">';
con0+='<img src="'+OL_Action_root+arr[i].p_img+'" alt="" class="pro-image-front" value="'+arr[i].p_img+'">';
con0+='<img src="'+OL_Action_root+arr[i].p_img+'" alt="" class="pro-image-back">';
con0+='<div class="men-cart-pro">';
con0+='<div class="inner-men-cart-pro">';
con0+='<a href="single.html" class="link-product-add-cart">Quick View</a>';
con0+='</div></div>';
con0+='<span class="product-new-top">New</span></div>';
con0+='<div class="item-info-product ">';
con0+='<h4><a href="single.html">'+arr[i].p_name+'</a></h4>';
con0+='<div class="info-product-price">';
con0+='<span class="item_price">$'+arr[i].p_newprice+'</span>';
con0+='<del>$'+arr[i].p_oldprice+'</del></div>';
con0+='<a href="#" class="item_add single-item hvr-outline-out button2" οnclick="addtoCart($(this))">Add to cart</a>';
con0+='</div></div></div>'
}
tab.append(con0);
}
loadPro(arr0,$("#tab0"));
loadPro(arr1,$("#tab1"));
loadPro(arr2,$("#tab2"));
if(localStorage.getItem("username")){
$("#RegOrLogin").html("欢迎登陆<span>"+localStorage.getItem("username")+"</span> <button class='btn btn-warning' οnclick='logout()'>退出</button>");
}
},
error:function(err){
console.log(err);
}
})
后台接收数据并处理请求前端
let express=require('express');
let router=express.Router();
const multer=require('multer');
const fs=require('fs');
const path=require('path');
let upload=multer();
//引入数据库中的集合
let products=require('../models/model_product.js');
let adproducts=require('../models/model_adProduct.js');
//路由拦截器
router.use((req,res,next)=>{ console.log("home拦截器"); next(); }) //页面加载 router.post('/load',function(req,res){ adproducts.find({}) .then((doc)=>{ //console.log("页面加载时"+doc); res.send(doc); }) .catch((err)=>{ console.log(err) }) })
- 用户登陆注册时向后台验证
前台发送ajax请求
//登陆事件
$("#login_btn").click(function(){
if(!$("#loginName").val()){return alert("用户名不能为空")}
if(!$("#loginPwd").val()){return alert('密码不能为空')};
console.log($("#loginName").val());
console.log($("#loginPwd").val());
$.ajax({
url:"http://localhost:3000/user/login",
type:'POST',
data:{loginName:$("#loginName").val(), loginPwd:$("#loginPwd").val()},
success:function(res){
console.log(res)
if(res.err==0){
user=$("#loginName").val();
localStorage.setItem('username',$("#loginName").val());
$("#myModal4").modal("hide")
$("#RegOrLogin").html("欢迎登陆<span>"+localStorage.getItem("username")+"</span> <button class='btn btn-warning' οnclick='logout()'>退出</button>");
}else{
location.reload(true);
}
},
error:function(err){
console.log(err)
}
})
})
后台接收数据并处理请求java
//用户登陆
router.post('/login',function(req,res){
//console.log(req.body);
let obj={u_name:req.body.loginName,u_password:req.body.loginPwd}
usersModel.checkUserLogin(obj)
.then((res2)=>{ console.log(res2); if(res2.length){ //res.cookie('username','111'); //res.send(req.headers.cookie); //console.log(req.headers.cookie); res.send({err:0,msg:'登陆成功'}) }else{ res.send({err:-1,msg:'登陆失败'}) } }) .catch((err)=>{ console.log(err) }) }) //用户注册 router.post('/reg',function(req,res){ let obj={u_name:req.body.regName,u_password:req.body.regPwd,u_img:req.body.regImg,u_phone:req.body.regPhone,u_sex:req.body.regSex} usersModel.checkUserName({u_name:req.body.regName}) .then((res2)=>{ if(res2.length){return res.send({err:-1,msg:'用户名已存在'})}; return usersModel.userReg(obj) }) .then((res3)=>{ res.send({err:0,msg:'注册成功'}) }) .catch((err)=>{ res.send({err:-1,msg:'注册失败'}) }) })
- 用户输入关键字查询商品
后台逻辑处理部分
//用户输入关键字查询商品
router.post('/fuzzyQuery',function(req,res){
console.log(req.body);
if(req.body.type=="key"){
adproducts.find({p_name:new RegExp(req.body.keyWord)})
.then((doc)=>{ console.log(doc); res.send(doc); }) .catch((err=>{ console.log(err) })) } if(req.body.type=="type"){ adproducts.find({p_classification:req.body.keyWord}) .then((doc)=>{ console.log(doc); res.send(doc); }) .catch((err=>{ console.log(err); })) } })
- 用户对购物车中的商品进行增删改查
内容过多，只贴部分核心代码node
//用户加入购物车
router.post('/addToCart',function(req,res){
let obj={c_username:req.body.username,c_productname:req.body.c_name,c_productprice:req.body.c_price,c_productimg:req.body.c_img,c_productnum:1};
console.log(obj);
usersModel.addToCart(obj)
.then((res2)=>{ console.log(res2); res.send({err:0,msg:'ok'}); }) .catch((err)=>{ console.log(err); }) }) //加载购物车中的商品 router.post('/loadcart',function(req,res){ console.log(req.body); let obj={c_username:req.body.loginName}; shopCarts.find(obj) .then((doc)=>{ console.log(doc); res.send(doc); }) .catch((err)=>{ console.log(err); res.send({err:-1,msg:'出现错误'}) }) }) //删除购物车中的商品 router.post('/removecart',function(req,res){ console.log(req.body); let obj={c_productimg:req.body.productImg,c_productname:req.body.productName,c_username:req.body.username}; shopCarts.findOneAndDelete(obj) .then((doc)=>{ console.log(doc); res.send({err:0,msg:'删除成功'}) //res.send(doc) }) .catch((err)=>{ console.log(err); res.send({err:-1,msg:'删除失败'}) }) }) //修改购物车中商品的数量 router.post('/addCartNum',function(req,res){ console.log(req.body); let obj1={c_productname:req.body.productName,c_username:req.body.username}; let obj2={c_productnum:req.body.productNum}; shopCarts.findOneAndUpdate(obj1,obj2) .then((doc)=>{ console.log(doc) }) .catch((err)=>{ console.log(err) }) })
- 用户端前端呈现效果
管理员端核心部分
（登陆以及对商品的增删改查与用户对购物车或商品的增删改查相似，因此本部分就不贴类似的功能实现啦~(≧▽≦)/~啦啦啦）web
主界面
ajax添加商品界面
数据库编辑商品信息界面
express按页码查询商品
bootstrap按关键字查询商品
管理员批量删除商品
//批量删除商品
router.post('/delSome',function(req,res){
console.log(req.body);
var arr=req.body.id.split("$");
console.log(arr);
for(let i=0;i<arr.length;i++){
adProducts.findOneAndDelete({_id:arr[i]})
.then((doc)=>{ console.log(doc); }) .catch((err)=>{ console.log(err); }) } res.send('done'); })
- 动态生成编辑界面
//加载编辑页面
router.post('/loadedit',function(req,res){
console.log(req.body);
let obj={_id:req.body.id};
adProducts.find(obj)
.then((doc)=>{ console.log(doc); res.send(doc); }) .catch((err)=>{ console.log(err); }) })
- 修改商品信息
//修改商品
router.post('/editProduct',function(req,res){
console.log(req.body);
let id=req.body.id;
let obj={p_name:req.body.productName,p_classification:req.body.productClass,
p_newprice:req.body.productNewPrice,p_oldprice:req.body.productOldPrice,
p_num:req.body.productNum,p_type:req.body.productDesc,p_img:req.body.productImg};
adminsModel.editProduct({_id:id},obj)
.then((doc)=>{ console.log(doc); res.send({err:0,msg:'修改为功'}) }) .catch((err)=>{ console.log(err); }) })