1-3koa脚手架(vue-shop server)后端流程

一、安装

1、安装依赖

npm i koa-generator -g

2、创建项目

koa2-server

3、启动项目

npm i
npm run dev

二、操作数据库

1、安装mongoose

yarn add mongoose

2、mongoose模块化

新建一个models文件夹//db.js

const mongoose = require('mongoose');
mongoose.connect( 'mongodb://127.0.0.1:27017/shop', {useNewUrlParser: true},(err)=>{
    if(err) throw err;
    console.log("database连接成功")
});
module.exports = mongoose;  //shop是库名  要跟连接数据库的库名相映射

然后再创建一个和表明对应的js文件
这里是goods.js

var mongoose = require('./db');
var GoodsSchema = new mongoose.Schema({
    productId:String,
    productName:String,
    salePrice:Number,
    productImage:String,
    productUrl:String
})
var Goods =  mongoose.model('Goods',GoodsSchema,'goods');  //goods是表名
module.exports = Goods;

三、给前端返回的数据格式

新建一个routes文件夹 //goods.js

const router = require('koa-router')()
const GoodsModel = require('../models/goods');
router.get('/goods/list',async (ctx)=>{
  var {start,limit} = ctx.query;
  var total= await GoodsModel.find({}).count();
  var data = await GoodsModel.find({}).skip(Number(start)).limit(Number(limit));
  ctx.body = {
    code:200,
    mag:"首页数据请求成功",
    result:data,
    total:total
  };
})
module.exports = router;

四、实现后端跨域

//1.安装koa2-cors这个模块
yarn add koa2-cors
//2.配置  http://192.168.14.57:8080/ 读取后台的数据
const cors =  require('koa2-cors');
app.use(cors({
  origin:"http://192.168.14.8:8080", //允许配置跨域的命令
}))

五、axios-get

5-1 parmas参数传递数据给后端

新做一个接口 前端 点击事件 价格分类

methods: {
   handlePrice(gt, lt) {
      this.axios({
        url: "/goods/price",
        methods: "get",
        params: {
          gt,
          lt
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.goodsList = res.data.result;
          this.total = 10;
        } else {
          this.goodsList = [];
          this.$message({
            duration: 1000,
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
  }

5-2 后端query接收get传值

/ 根据价格大小查询 /

router.get("/goods/price", async ctx => {
  var { gt, lt } = ctx.query;
})

5-3 对数据库进行查询

var data = await GoodsModel.find({ salePrice: { $gt: gt, $lt: lt } })

5-4 对有数据和没数据的处理

//后台
/ 根据价格大小查询 /

router.get("/goods/price",async ctx=>{
  var {gt,lt}= ctx.query;
  var data = await GoodsModel.find({salePrice:{$gt:gt,$lt:lt}});
  if(data.length){
    ctx.body = {
      code:200,
      mag:"数据请求成功",
      result:data,
      total:data.length
    };
  }else{
    ctx.body = {
      code:101,
      msg:"没有数据",
    }
  } 
})
//前台
 methods: {
    handlePrice(gt, lt) {
      console.log(gt, lt);
      this.$http({
        url: "/goods/price",
        method: "get",
        params: {
          gt,
          lt
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.goodsList = res.data.result;
        }else{
          this.goodsList = [];
          this.$message({
            duration:1000,
            message:res.data.msg,
            type: 'warning'
          })
        }
      });
    }
  }