Vue가 모의 데이터를 호출하는 방법

이번에는 vue가 모의 데이터를 호출하는 방법을 보여드리겠습니다. vue가 모의 데이터를 호출할 때 주의사항은 무엇인가요?

프로젝트 초기화

더 이상 고민하지 말고 먼저 프로젝트를 초기화하세요. 가장 쉬운 방법은 vue-cli

vue init webpack

를 사용하는 것입니다. mock.js를 소개합니다

설치 mockjs

npm install --save-dev mockjs

쉬운 사용을 위해 Vue 프로토타입에 도입

 import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock

위 내용은 Vue 프로토타입에 도입되었으며, this.$mock을 사용하여 모의 데이터를 직접 생성할 수 있습니다

여기를 보세요 Vue.prototype

여기를 보세요 mockjs

프로젝트 개발 과정에서 프런트엔드와 백엔드가 분리되어 가짜 데이터가 생성되었고, vue2.0을 이용하여 프로젝트를 재구성하였고, 백엔드 역시 개발 과정을 지연시키지 않기 위해 가상 데이터를 요청하여 사용하였습니다. vue-cli 스캐폴딩을 사용하여 빌드합니다. 프로젝트 파일에서 dev-server는 가상 API 요청을 빌드하고 자체 모의 가짜 데이터에 액세스하여 백그라운드 모드를 요청합니다

build/dev-server.js 파일에서

var app = express()

// 本地json-server服务器搭建代码
// 引入数据库文件
var appData = require('../mock.json')
// 引入数据库
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法来创建连接时候的请求
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
// 调用api
app.use('/api', apiRoutes)

인스턴스 아래에 다음 코드를 추가하세요. appData가 의존하는 mock.json 파일은 자신의 모의 데이터 파일입니다. 직접 모의하거나 mock.js를 사용하여 프런트엔드 및 백엔드 요구 사항에 따라 가짜 데이터를 만들 수 있습니다

getBoardList는 인터페이스입니다. var getBoardList = appData.getBoardList는 appData에서 이 인터페이스 데이터를 정의합니다.

var apiRoutes = express.Router() api 경로를 생성합니다. apiRoutes.post는 요청을 실행하고 각각 반환하는 req 및 res 매개변수를 생성합니다. 이 json에는 다음이 포함됩니다. 상태 코드errno 및 반환된 데이터 데이터(데이터는 인터페이스 데이터 getBoardList를 가리킴).

그러면 app.use('/api', apiRoutes) API를 호출하면 이 서비스를 정상적으로 사용할 수 있습니다

여기서는 vue2.0에서 권장하는 axios 요청 데이터를 사용했는데, 코드는 다음과 같습니다

this.$http.post('/api/getBoardList')
 .then(function (response) {
  console.log(response.data.data);
  alert('成功了');
 })
 .catch(function (code) {
  alert('失败了');
  console.log(code);
 });

브라우저 콘솔에서 네트워크를 열면 네트워크 요청이 생성된 것을 확인할 수 있습니다

동시에 데이터는 행복하게 반환되었습니다:

인터페이스 데이터를 추가하려면 dev-server.js에 계속 추가하면 되고, post, get 등을 사용할 수 있습니다.

dev-server.js를 변경할 때마다 npm run dev를 다시 시작해야 합니다.

프로젝트 시작

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 주의하세요. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!

추천 자료:

ES6

js에서 템플릿 문자열을 사용하여 밀리초 + 일 + 시간 + 분과 초 변환을 구현하는 방법에 대한 자세한 설명

Bootstrap의 양식 유효성 검사 기능 사용에 대한 자세한 설명

위 내용은 Vue가 모의 데이터를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!