路径 demo1\server\routes\goods.js
//核心代码
router.get("/list",(req,res,next)=>{
//分页功能实现
let page = parseInt(req.param("page"));
let pageSize = parseInt(req.param("pageSize"));
let sort = parseInt(req.param("sort"));//-1降序,1升序
let priceLevel = req.param("priceLevel");
let skip = (page-1)*pageSize;
let params = {};
let priceGt = '',priceLte = '';
if(priceLevel!="all")
{
switch (priceLevel){
case '0':priceGt = 0;priceLte = 1000;break;
case '1':priceGt = 1000;priceLte = 2000;break;
case '2':priceGt = 2000;priceLte = 5000;break;
}
params = {//实现分价格区间展示数据
salePrice:{
$gt:priceGt,
$lte:priceLte
}
}
}
let goodsModel = Goods.find(params).skip(skip).limit(pageSize);//实现分页展示数据即每页最多
goodsModel.sort({'salePrice':sort});
goodsModel.exec((err,doc)=>{
if(err){
res.json({
status:"1",
msg:err.message
});
}else{
res.json({
status:"0",
msg:"",
res:{
count:doc.length,
list:doc
}
})
}
})
路径 demo1\src\views\goodsList.vue
//核心代码
loadMore(){
this.busy = true;//滚动加载失效
setTimeout(() => {
this.page++;
this.getGoodsList(true);
}, 500);
}
路径 src\components\Header.vue server\routes\users.js
//登陆核心代码
//前端
login(){
if(!this.userName||!this.userPwd)
{
this.errorTip = true;
return ;
}
axios.post("/users/login",{
userName:this.userName,
userPwd:this.userPwd
}).then((response)=>{
let res = response.data;
if(res.status == "0"){
this.errorTip = false;
this.loginModalFlag = false;
this.nickName = res.result.userName;
}else{
this.errorTip = true;
}
})
}
//后台
router.post("/login",(req,res,next)=>{
var param = {
userName:req.body.userName,
userPwd:req.body.userPwd
}
User.findOne(param,(err,doc)=>{
if(err){
res.json({
status:"1",
msg:err.message
});
}else{
if(doc){
res.cookie("userId",doc.userId,{
path:'/',
maxAge:1000*60*60
});
res.cookie("userName",doc.userName,{
path:'/',
maxAge:1000*60*60
});
//req.session.user = doc;
res.json({
status:'0',
msg:'',
result:{
userName:doc.userName
}
})
}
}
})
})
//登出核心代码
//前端
logOut(){
axios.post("/users/logout").then((response)=>{
let res = response.data;
if(res.status=="0")
{
this.nickName = '';
}
})
}
//后台登出接口
router.post("/logout",(req,res,next)=>{
res.cookie("userId","",{
path:"/",
manAge:-1
});
res.json({
status:"0",
msg:"",
result:''
})
})
//刷新保存登陆状态核心代码
//前端
checkLogin(){
axios.get("/users/checkLogin").then((response)=>{
let res = response.data;
if(res.status=='0'){
this.nickName = res.result.userName;
}
})
}
//后台
router.get("/checkLogin",(req,res,next)=>{
if(req.cookies.userId){
res.json({
status:'0',
msg:"",
result:{
userName:req.cookies.userName||''
}
})
}else{
res.json({
status:'1',
msg:'no login',
result:""
})
}
})
路径 config\index.js
proxyTable: {
// 代理插件解决跨域
'/goods':{
target:'http://localhost:3000'
},
'/users/*':{
target:'http://localhost:3000'
}
},//其中*表示可以跟任意路径,也即只要是/user开头就可以了
路径 server\app.js
app.use((req,res,next)=>{
if(req.cookies.userId){
next();
}else{
if(req.originalUrl=='/users/login'||req.originalUrl=='/users/logout'||req.path=='/goods/list'){//白名单
next();
}
else{
res.json({
status:'10001',
msg:'no login',
result:''
})
}
}
});
路径 src\views\Cart.vue , src\components\Modal.vue
<template>
<div>
<div class="md-modal modal-msg md-modal-transition " v-bind:class="{'md-show':mdShow}">
<div class="md-modal-inner">
<div class="md-top">
<button class="md-close" @click="closeModal">Close</button>
</div>
<div class="md-content">
<div class="confirm-tips">
<slot name="message"></slot>
</div>
<div class="btn-wrap">
<slot name="btnGroup"></slot>
</div>
</div>
</div>
</div>
<div class="md-overlay" v-if="mdShow" @click="closeModal"></div>
</div>
</template>
<script>
export default {
props:["mdShow"],
data(){
return {
msg:'hello world'
}
},
methods:{
closeModal(){
this.$emit("close");
}
}
}
</script>
-
- cmd
- npm install
- npm run dev
- 默认 http://localhost:8080
-
- npm install
- 运行 www 文件
- 或者—>
- cmd
- pm2 start www (pm2是一个很好的监测node的工具哦,可以了解一下)