Vue+Node 서버 조회 Mongo 데이터베이스 및 페이지 데이터 전달 작업 사례 분석

이 사례 는 Vue+Node 서버 조회 Mongo 데이터베이스 및 페이지 데이터 전달 작업 을 다 루 었 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
1.Mongoose 를 이용 하여 MongoDB 조회
mongoose 의존 을 통 해 mondodb 데이터 베 이 스 를 간편 하 게 조작 할 수 있 습 니 다.먼저 mongoose 를 설치 합 니 다.

cnpm install mongoose --save

mongoose 를 사용 하려 면 하나의 모드 Schema 가 필요 합 니 다.이것 은 mongodb 에서 조회 한 모든 문서 항목 의 내용 을 정의 한 다음 에 mongoose.model()을 통 해 템 플 릿 model 을 생 성 합 니 다.템 플 릿 은 하나의 프레임 과 같 습 니 다.데이터 베 이 스 를 가 져 온 모든 항목 의 내용 을 프레임 의 구조 에 따라 채 우 면 조작 하기 쉽 고 구조 적 인 데이터 대상 이 됩 니 다.이 대상 을 통 해 템 플 릿 의 관련 속성 에 접근 할 수 있 고 함수 방법 을 정의 할 수 있 습 니 다.
예 를 들 어 mongodb 의 데이터베이스 mall 의 상품 항목 은 그림 과 같다.

(PHP Storm 에는 간단 한 mongo 시각 화 플러그 인 이 있 습 니 다.mongo plugin 검색 을 통 해 이 플러그 인 을 설치 한 후 phpstorm 메 인 메뉴 의 view/tool Windows 에서 mongo explore 를 찾 아 mongo 사 이 드 바 도 구 를 열 고 mongo 데이터베이스 에 연결 하면 데 이 터 를 시각 적 으로 볼 수 있 습 니 다)
Schema 정의 에 따라 상품 템 플 릿 goods 를 생 성하 고 내 보 냅 니 다.

//    server/modules      goods.js  
const mongoose=require('mongoose');  
let Schema=mongoose.Schema;      
let productSchema=new Schema({     //  mongoose Schema    
 "productId":String,
 "productName":String,
 "salePrice":Number,
 "productImage":String
});
//    goods
module.exports=mongoose.model('goods',productSchema);

메모:Schema 의 필드 이름 은 데이터베이스 와 일치 해 야 합 니 다.그렇지 않 으 면 필드 가 일치 하지 않 아 데이터 베 이 스 를 조작 할 수 없습니다.예 를 들 어 저 는 데이터베이스 에 produtImage 이 고 schema 에 produtImg 이 있어 서 삽입 할 때 필드 를 잃 어 버 렸 습 니 다.
그리고 goods 템 플 릿 을 통 해 데이터 베 이 스 를 조회 하 는 작업 을 수행 합 니 다.err 를 잘못 되 돌려 주지 않 으 면 조회 결과 doc 를 되 돌려 줍 니 다.

goods.find({},(err,doc)=>{callback()});

2.Node 서버 에서 데이터 베 이 스 를 조회 하고 결 과 를 되 돌려 줍 니 다.
①、Express 프레임 워 크 를 통 해 데이터베이스 연결:

//   server/routes/goods.js  
//      
const express=require('express');
const router=express.Router();
const mongoose=require('mongoose');
const goods=require('../modules/goods')  //  goods  
//    mongodb    mall  
mongoose.connect('mongodb://localhost:27017/mall');
mongoose.connection.on('connected',()=>{
 console.log("mongoDB    ");
});
mongoose.connection.on('erroe',()=>{
 console.log("mongoDB    ");
});
mongoose.connection.on('disconnected',()=>{
 console.log("mongoDB    ");
});

②,전단 에서 온 get 요청 에 응답:데이터베이스 mall 집합 을 조회 하고 결 과 를 result.list 에 두 고 status,msg 를 더 해 json 형식 으로 res 로 되 돌려 줍 니 다.

router.get('/',(req,res,next)=>{
 //  goods    mongooseAPI       
 goods.find({},(err,doc)=>{    //       
  "use strict";
  if (err){
   res.json({
    status:1,
    msg:err.message
   })
  }else {
   res.json({//  res      get  
    status:0,
    msg:'',
    result:{
     count:doc.length,
     list:doc
    }
   })
  }
 })
});

마지막 으로 경로 노출 router 를 기억 하 세 요.

module.exports = router;

주:요청 을 받 는 매개 변 수 는 보통 세 가지 방식 이 있 습 니 다.

req.query 는 get 요청 으로 보 낸 데이터,인 자 는?요청 경로 의 끝 에 req.query.keyname 을 추가 하면 데 이 터 를 얻 을 수 있 습 니 다

req.body 는 post 요청 을 받 는 데 사용 되 며,post 요청 은 request 본문 에 데 이 터 를 넣 기 때문에 req.body.keyname 은 요청 데 이 터 를 얻 을 수 있 습 니 다

req.params 의 매개 변 수 는 경로 에 포함 되 어 있 습 니 다.예 를 들 어 요청 경 로 는?http://localhost:3000/test/myparam서버 에서 인 자 를 읽 습 니 다

router.get('/testparams/:param', function (req, res) {
  console.log('   ： ' + req.params.param);  //           ：myparam
})

3.도 메 인 간 요청 데이터
로 컬 Vue 는 localhost:8080 에서 실행 되 기 때문에 Node 는 localhost:3000 에 있 습 니 다.vue 에서 axios 를 이용 하여 데이터 요청 을 하려 면 도 메 인 프 록 시 를 실행 해 야 합 니 다.vue 에 있 는 config/index.js 파일 의 dev 에 퍼 가기 대 리 를 설정 합 니 다."/goods"를 요청 할 때 localhost:3000 하의/goods 로 퍼 가기:

Node 서버 가 get 요청 에 대한 분석 과정:localhost:3000 단 에 요청 할 때 Node 서버 의 app.js 파일 은 요청 경 로 를 분석 하고 app.use()를 통 해/goods 를 routes/goods.js 파일 로 지정 하여 이 파일 에서 데이터 베 이 스 를 조회 하고 결 과 를 되 돌려 줍 니 다.

var goods=require('./routes/goods');  //    routes/goods.js
app.use('/goods',goods);        //          

4.vue 데이터 요청 및 페이지 렌 더 링
views/GoodsList.vue 파일 에서 axios 를 이용 하여 데 이 터 를 요청 하고 getGoodsList()방법 을 정의 하 며 마 운 트 후 호출 합 니 다.

 mounted:function (){
  this.getGoodsList();
 },
 methods:{
  getGoodsList(){
   axios.get("/goods").then(response =>{
    let res=response.data;
    if(res.status==0){
     this.goodsList=res.result.list;
    }else{
     console.log("          ！");
    }
   })
  },

axios 의 get 요청/goods 를 통 해 위 에 크로스 도 메 인 프 록 시 를 했 기 때문에 Node 서버 에 요청 을 보 낼 수 있 습 니 다.리 셋 함수 에서 response 의 data 는 리 턴 에 응 하 는 실제 내용 입 니 다.저 희 는 서버 에서 리 턴 상태 status 를 0 으로 정의 하고 데 이 터 를 result.list 에 두 었 습 니 다.페이지 에서 list 배열 을 옮 겨 다 니 면 데 이 터 를 페이지 에 렌 더 링 할 수 있 습 니 다.
모든 데이터 대상 을 옮 겨 다 닐 때 키 이름 은 mongoDB 의 정의 와 일치 해 야 합 니 다.예 를 들 어 item.salePrice 는 항목 의 가격 에 접근 할 수 있 습 니 다.

<li v-for="(item,index) in goodsList">
  <div class="pic">
    <a href="#" rel="external nofollow" ><img v-lazy="`static/${item.productImage}`" alt=""></a>
  </div>
  <div class="main">
    <div class="name">{{item.productName}}</div>
    <div class="price">{{item.salePrice}}</div>
    <div class="btn-area">
      <a href="javascript:;" rel="external nofollow" class="btn btn--m">     </a>
    </div>
  </div>
</li>

mongoDB,Node 서버 를 시작 하고 vue-cli 프레임 워 크 를 실행 하면 localhost:8080 에서 결 과 를 볼 수 있 습 니 다.그림 과 같 습 니 다.

본 고 에서 말 한 것 이 여러분 의 node.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.