vue+mockjs 아 날로 그 데이터 구현 전후 단 분리 개발 인 스 턴 스 코드

11479 단어 vuemock앞 뒤 분리
본 고 는 vue+mockjs 시 뮬 레이 션 데이터 가 전후 단 분리 개발 을 실현 하 는 실례 코드 를 소개 하고 여러분 에 게 공유 하 며 자신 에 게 메모 도 남 겼 습 니 다.
프로젝트 에서 mockjs,mock 데 이 터 를 시도 하여 전후 단 분리 개발 을 실현 합 니 다.
mockjs 에 대해 홈 페이지 에서 설명 한 것 은?
1.앞 뒤 분리
2.기 존 코드 를 수정 하지 않 아 도 Ajax 요청 을 차단 하고 아 날로 그 응답 데 이 터 를 되 돌려 줍 니 다.
3.데이터 형식 이 풍부 하 다
4.랜 덤 데 이 터 를 통 해 각종 장면 을 모 의 한다.
등등 장점.
결론 적 으로 백 엔 드 인터페이스 가 개발 되 지 않 기 전에 전단 은 기 존의 인터페이스 문 서 를 사용 하여 실제 요청 에 있어 ajax 를 차단 하고 mockjs 의 mock 데이터 규칙 에 따라 실제 인터페이스 에서 돌아 온 데 이 터 를 모 의 하고 무 작위 적 인 아 날로 그 데 이 터 를 해당 하 는 데이터 인 터 랙 션 처리 에 참여 하여 백 엔 드 의 분리 개발 을 실현 합 니 다.
기 존의 자신 이 모 의 한 가짜 데이터 와 달리 mockjs 가 우리 에 게 가 져 다 줄 수 있 는 것 은 배경 인터페이스 가 개발 되 지 않 기 전에 모 의 데 이 터 를 개발 하고 돌아 와 프론트 데스크 톱 의 상호작용 을 완성 하 는 것 이다.배경 데이터 가 완 료 된 후에 당신 이 한 일 은 mockjs 를 제거 하 는 것 입 니 다.진실 한 ajax 를 차단 하 는 것 을 중단 하 는 것 뿐 입 니 다.
vue-cli 프로젝트 를 만 들 고 뉴스 류 의 데이터 시 뮬 레이 션 인 터 페 이 스 를 추가 합 니 다.
1.vue-cli 전역 비계 설치

npm install --global vue-cli 
2.vue 프로젝트 만 들 기

vue init webpack mockjs<br>cd mockjs<br>npm install axios --save 
3.mockjs 설치

npm install mockjs --save-dev 
4.프로젝트 디 렉 터 리

axios/api    axios
Hello.vue     페이지 첫 페이지
NeswCell.vue   뉴스 구성 요소
router/index.js   경로
main.js      입구
mock.js     mockjs 파일
완성 후의 효 과 를 살 펴 보 겠 습 니 다.

5.입구 js(main.js)에 mockjs 도입

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

 

Vue.config.productionTip = false

 

//   mockjs

require('./mock.js')

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  template: '<App/>',

  components: {

    App

  }

})

 

Vue.filter('getYMD', function(input) {

  return input.split(' ')[0];

}) 

여기에 제 가 자주 사용 하 는 시간 정리 필터 getYMD 를 추 가 했 습 니 다.
6.mock 규칙 추가(mock.js)

//   mockjs

const Mock = require('mockjs');

//    mock.Random   

const Random = Mock.Random;

// mock    

const produceNewsData = function() {

  let articles = [];

  for (let i = 0; i < 100; 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 {

    articles: articles

  }

}

 

// Mock.mock( url, post/get ,      );

Mock.mock('/news/index', 'post', produceNewsData); 

7.Hello.vue 에서 문서 인 터 페 이 스 를 요청 하고 mock 데 이 터 를 받 습 니 다.

<template>

 <div class="index">

  <div v-for="(item, key) in newsListShow">

   <news-cell

   :newsDate="item"

   :key="key"

   ></news-cell>

  </div>

 </div>

</template>

 

<script>

import api from './../axios/api.js'

import NewsCell from './NewsCell.vue'

 

export default {

 name: 'index',

 data () {

  return {

   newsListShow: [],

  }

 },

 components: {

  NewsCell

 },

 created() {

  this.setNewsApi();

 },

 methods:{

  setNewsApi: function() {

   api.JH_news('/news/index', 'type=top&key=123456')

   .then(res => {

    console.log(res);

    this.newsListShow = res.articles;

   });

  },

 }

}

</script>

 

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.topNav{

 width: 100%;

 background: #ED4040;

 position: fixed;

 top:0rem;

 left: 0;

 z-index: 10;

}

.simpleNav{

 width: 100%;

 line-height: 1rem;

 overflow: hidden;

 overflow-x: auto;

 text-align: center;

 font-size: 0;

 font-family: '    ';

 white-space: nowrap;

}

.simpleNav::-webkit-scrollbar{height:0px}

.simpleNavBar{

 display: inline-block;

 width: 1.2rem;

 color:#fff;

 font-size:0.3rem;

}

.navActive{

 color: #000;

 border-bottom: 0.05rem solid #000;

}

.placeholder{

 width:100%;

 height: 1rem;

}

</style> 

 주의:api.JH뉴스 는 제 가 봉 인 된 axios 함수 입 니 다.
axios/api.js 는 다음 과 같 습 니 다.

import axios from 'axios'

import vue from 'vue'

 

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

 

//      

axios.interceptors.request.use(function(config) {

  return config;

 }, function(error) {

  return Promise.reject(error);

 })

 //      

axios.interceptors.response.use(function(response) {

 return response;

}, function(error) {

 return Promise.reject(error);

})

 

//   axios post  

export function fetch(url, params) {

 return new Promise((resolve, reject) => {

  axios.post(url, params)

   .then(response => {

    resolve(response.data);

   })

   .catch((error) => {

    reject(error);

   })

 })

}
 
export default {

 JH_news(url, params) {

  return fetch(url, params);

 }

} 
8.뉴스 셀 vue 에서 데 이 터 를 보 여 줍 니 다.

<template>

 <section class="financial-list">

  <section class="collect" @click="jumpPage">

   <aside>

    <h2>{{newsDate.title}}</h2>

    <section class="Cleft clearfix">

     <img class="fl" src="./../assets/icon/eyes.png" style="width:0.24rem;height:0.2rem;">

     <span class="fl">{{newsDate.author_name}}</span>

    </section>

    <section class="Cright">

     <img src="./../assets/icon/clock.png" style="width:0.2rem;height:0.2rem;">

     <span>{{newsDate.date | getYMD}}</span>

    </section>

    <div style="clear: both"></div>

   </aside>

   <aside>

    <img :src="newsDate.thumbnail_pic_s" style="border-radius: 0.2rem;">

   </aside>

   <div style="clear: both"></div>

  </section>

 </section>

</template>

 

<script>

export default {

 name: 'NewsCell',

 props: {

  newsDate: Object

 },

 data () {

  return {

  }

 },

 computed: {

 },

 methods: {

  jumpPage: function () {

   window.location.href = this.newsDate.url

  }

 }

}

</script>

 

<style scoped>

.financial-list {

 width: 100%;

 height: 100%;

 background-color: white;

 padding: 0.28rem 0;

 border-bottom: 1px solid #ccc;

}

 

.financial-list .collect {

 width: 92%;

 margin: 0 auto;

}

 

.financial-list .collect aside:nth-of-type(1) {

 width: 63%;

 float: left;

}

 

.financial-list .collect aside:nth-of-type(2) {

 width: 32%;

 height: 2rem;

 float: left;

 margin-left: 0.3rem;

}

 

.financial-list .collect h2 {

 width: 100%;

 height: 0.96rem;

 font-size: 0.32rem;

 color: #333333;

 line-height: 0.48rem;

 text-overflow: ellipsis;

 -o-text-overflow: ellipsis;

 overflow: hidden;

}

 

.financial-list .collect aside:nth-of-type(2) img {

 width: 100%;

 height: 100%;

}

 

.financial-list .collect aside .Cleft {

 width: 45%;

 float: left;

 margin-top: 0.66rem;

}

 

.financial-list .collect aside .Cleft span{

 display: block;

 width: 1.4rem;

 margin-left: 0.05rem;

 white-space: nowrap;

 text-overflow: ellipsis;

 -o-text-overflow: ellipsis;

 overflow: hidden;

}

 

.financial-list .collect aside .Cright {

 width: 55%;

 float: right;

 margin-top: 0.66rem;

}

.financial-list .collect aside .Cright span{

 display: inline-block;

 margin: 0.04rem 0 0 0.05rem;

}

.financial-list .collect aside span {

 font-size: 0.2rem;

 color: #999999;

}

 

.financial-list .collect aside .Cleft img,

.financial-list .collect aside .Cright img {

 width: 0.18rem;

 height: 0.24rem;

 margin-top: 0.09rem;

}

</style> 

9.모든 코드 는 나의 github 를 볼 수 있 습 니 다.  https://github.com/Jasonwang911/vue_mockjs
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기