vue-cli 프로젝트 에서 mockjs 사용 하기(데이터 삭제 요청)

우리 의 생산 실제 에서 백 엔 드 의 인 터 페 이 스 는 비교적 늦게 나 오기 때문에 우리 의 전단 의 많은 개발 은 인터페이스 가 우리 에 게 줄 때 까지 기 다 려 야 진행 할 수 있다.그러면 우리 전단 에 있어 매우 수 동적 이 고 가짜 데 이 터 를 만들어 백 엔 드 인 터 페 이 스 를 모 의 할 수 있 는 지,답 은 긍정 적 이다.그래서 오늘 우 리 는 매우 강력 한 플러그 인 Mock.js 을 소개 합 니 다.매우 편리 하 게 백 엔 드 의 데 이 터 를 모 의 할 수 있 고 삭제 와 검 사 를 쉽게 실현 할 수 있 습 니 다.백 엔 드 데이터 가 완 성 된 후에 당신 이 한 일 은 mockjs 를 제거 하 는 것 입 니 다.진실 한 ajax 차단 을 중단 하 는 것 입 니 다.이것 뿐 입 니 다.
vue 프로젝트 구축

#      vue-cli
$ npm install --global vue-cli
#        webpack       
vue init webpack vue-mock
$ cd my-project
#     
$ npm install

mockjs 설치

npm install mockjs --save-dev

항목 열기

npm run dev

mockjs 폴 더 와 mockjs 를 만 들 고 main.js 에 이 파일 을 도입 합 니 다.
이때 이런 프로젝트 구 조 를 볼 수 있다.

mockjs 사용
프로젝트 의 mock.js 파일 에 아 날로 그 데 이 터 를 기록 합 니 다.이 때 mockjs 문 서 를 참조 할 수 있 습 니 다.

//    Mock
var Mock = require('mockjs')
var data = Mock.mock({
  //    list        ，     1   10    
  'list|1-10': [{
    //    id       ，     1，    1
    'id|+1': 1
  }]
})
//     
console.log(JSON.stringify(data, null, 4))

이제 저희 가 하고 싶 은 거 할 수 있어 요.
mock.js 에서 간단 한 데 이 터 를 모 의 합 니 다.

 const Mock = require('mockjs');
//    mock.Random   
 const Random = Mock.Random;
 // mock    
 const produceData = function (opt) {
  console.log('opt', opt);
  let articles = [];
  for (let i = 0; i < 30; i++) {
   let newArticleObject = {
    title: Random.csentence(5, 30), // Random.csentence( min, max )
    thumbnail_pic_s: Random.dataImage('300x250', 'mock   '), // Random.dataImage( size, text )         Base64     
    author_name: Random.cname(), // Random.cname()              
    date: Random.date() + ' ' + Random.time() // Random.date()             ,   yyyy-MM-dd；Random.time()             
   }
   articles.push(newArticleObject)
  }
  return {
   data: articles
  }
 }
Mock.mock('/news', /post|get/i, produceData);// post get   /news   Mock             

vue 에서 요청

methods: {
   setNewsApi: function() {
    this.$http.post("/news", "type=top&key=123456").then(res => {
     console.log(res.data);
 
     this.newsListShow = res.data.data;
    });
   }
  }

효과 미리 보기

삭제 처 리 를 하나 더 하 겠 습 니 다.
아 날로 그 데이터

let arr = []
 for (let i = 0; i < 30; i++) {
  let newArticleObject = {
   name: Random.cname(), // Random.cname()              
   content: Random.csentence(5, 30), // Random.csentence( min, max )
   id: i
  }
  arr.push(newArticleObject);
 }
 let list = function (options) {
  let rtype = options.type.toLowerCase(); //      
  switch (rtype) {
   case 'get':
    break;
   case 'post':
    let id = parseInt(JSON.parse(options.body).params.id) //     id
    arr = arr.filter(function(val){
     return val.id!=id;//   id           
    });
    break;
   default:
  }
  return {
   data: arr
  } //      ,            
 }
 Mock.mock('/list', /get|post/i, list);//get      ，post      

vue 에서 사용

methods: {
   setNewsApi: function() {
    this.$http.get("/list", "").then(res => {
     this.data = res.data.data;
    });
   },
   deleteList(data) { //    
    let id = data.id;
    this.$http.post('/list', {
      params: {
       id: id
      }
     }).then(function(res) {
      console.log(res);
      this.data = res.data.data;
      alert(data.name + '    ');
     }.bind(this))
     .catch(function(error) {
      console.log(error)
     });
   },
  }

효과 미리 보기
 
github 코드 주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.