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
vue init webpack mockjs<br>cd mockjs<br>npm install axios --save
npm install mockjs --save-dev 
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];
})
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);
<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>
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);
}
}
<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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
