Vue-CI3 기반 애플리케이션 개발 중인 JSON API를 사용하는 express 서버
12344 단어 vue-cli3JavaScriptVue.js
개시하다
Webpack을 사용하는 프런트엔드 개발에서 Webpack devserver를 사용하면 파일의 변경 사항을 확인하고 자동으로 구축 브라우저를 다시 불러옵니다.이 경우 서버 측에 REST API 기능이 필요할 수 있습니다.
Vue-CI3 기반 프로젝트에서 그걸 하는 방법을 소개하겠습니다.
사용된 도구
Ubuntu는 18.04입니다.
hagiwara@dev01:~/tmp$ nodejs --version
v8.10.0
hagiwara@dev01:~/tmp$ npm --version
6.6.0
hagiwara@dev01:~/tmp$ vue --version
3.3.0
hagiwara@dev01:~/tmp$
Vue-CI3 기반 프로젝트 준비
어쨌든 먼저 견본품의 항목을 세워라.
hagiwara@dev01:~/tmp$ vue create foobar
Vue CLI v3.3.0
? Please pick a preset: default (babel, eslint)
Vue CLI v3.3.0
✨ Creating project in /home/hagiwara/tmp/foobar.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
(省略)
🎉 Successfully created project foobar.
👉 Get started with the following commands:
$ cd foobar
$ npm run serve
hagiwara@dev01:~/tmp$
hagiwara@dev01:~/tmp/foobar$ npm run serve
> [email protected] serve /home/hagiwara/tmp/foobar
> vue-cli-service serve
DONE Compiled successfully in 4841ms
App running at:
- Local: http://localhost:8080/
- Network: http://10.0.2.15:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
localhost:8080 후 이런 느낌으로 이동합니다.
vue-cli-plugen-express로 API Server 만들기
vue-cli-plugin-express - npm.
설치하다.
hagiwara@dev01:~/tmp$ cd foobar/
hagiwara@dev01:~/tmp/foobar$ vue add express
📦 Installing vue-cli-plugin-express...
(省略)
✔ Successfully installed plugin: vue-cli-plugin-express
? Should serve vue app? Yes
? Where will be located your server? ./srv
🚀 Invoking generator for vue-cli-plugin-express...
✔ Successfully invoked generator for plugin: vue-cli-plugin-express
The following files have been updated / added:
srv/index.js
vue.config.js
package.json
You should review these changes with git diff and commit them.
hagiwara@dev01:~/tmp/foobar$
설정
기본 설정대로 돌아가세요.추가
srv/index.js에서expressserver 코드는 리뷰 출력 상태에서 붙여넣기 때문에 GET api만 사용합니다.srv/index.js
import express from 'express';
export default app => {
app.use(express.json());
app.get('/foo', (req, res) => {
res.json({msg: 'foo'});
});
}
API 서버 이동
hagiwara@dev01:~/tmp/foobar$ npm run express
DONE Mon Jan 28 2019 17:37:14 GMT+0900 (JST)
♻️ Server running at:
- Local: http://localhost:3000/
- Network: http://10.0.2.15:3000/
⚙ You're in development mode. to start the application, run yarn serve.
🎉 Fallback to this server enabled: you can use relative routes in your code!
🔀 api routes found:
- /foo: GET
localhost:3000/foo찍어보세요.
JSON 데이터를 잘 되돌려주고 있습니다.
응용 프로그램에서 API 사용
이왕 여기까지 된 이상 어떻게 말해야 하나.어플리케이션은 여전히 어플리케이션이며, API Server는 API Server에서만 개별적으로 이동합니다.
응용 프로그램 사이드 서버 시작
npm run express API Server를 시작한 상태npm run serve에서 응용 프로그램용devserver를 시작합니다.지금 devserver 옆에 있습니다INFO Starting development server...
DONE Express server Fallback will be done on your server. You can use relative calls to it in your code.
응용 프로그램에서 REST API 클릭
API
/foo를 눌렀을 때 되돌아오는 값msg이 샘플 응용 프로그램에 표시됩니다.먼저 API Server 측에서 적절한 정보로 응답하도록 변경합니다.
srv/index.js
import express from 'express';
export default app => {
app.use(express.json());
app.get('/foo', (req, res) => {
res.json({msg: 'Welcome to Your Vue.js App FROM API SERVER'});
});
}
/foo에 따라 얻은 JSON에 대한 정보를 설정합니다.src/App.vue
hagiwara@dev01:~/tmp/foobar$ git diff src/App.vue
diff --git a/src/App.vue b/src/App.vue
index fcc5662..2d6dac4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <HelloWorld v-bind:msg="message"/>
</div>
</template>
@@ -12,6 +12,18 @@ export default {
name: 'app',
components: {
HelloWorld
+ },
+ computed: {
+ message () {
+ const req = new XMLHttpRequest
+ let message = ''
+ req.open('GET', '/foo', false)
+ req.onload = function () {
+ message = JSON.parse(req.responseText).msg
+ }
+ req.send(null)
+ return message
+ }
}
}
</script>
hagiwara@dev01:~/tmp/foobar$
HelloWorld 구성 요소msg에 표시된 문자열을 컴퓨터(계산 속성)의 message로 대체합니다.그리고 message의 내용은 단순히 두드리기/foo→JSON의 값을 꺼내기→msg일 뿐이다.(오류 검사는 없고 처리가 거칠지만 샘플입니다.)응용 프로그램은 이렇다.GET
/foo로 얻은 값으로 잘 업데이트했습니다.
이것을 해보면 다음과 같은 몇 가지를 알아차릴 수 있을 것 같다.
Proxy error: Could not proxy request /foo from localhost:8080 to http://0.0.0.0:3000/.
Mode 설정
이상은 개발자 모드의 활용 방법입니다.Production은 다음과 같습니다.
우선
npm run build 포장dist 목록을 만듭니다.hagiwara@dev01:~/tmp/foobar$ npm run build
(省略)
hagiwara@dev01:~/tmp/foobar$ ls dist
css favicon.ico img index.html js
hagiwara@dev01:~/tmp/foobar$
npm run express:run합니다.hagiwara@dev01:~/tmp/foobar$ npm run express:run
> [email protected] express:run /home/hagiwara/tmp/foobar
> vue-cli-service express:run
DONE Mon Jan 28 2019 18:42:00 GMT+0900 (JST)
♻️ Server running at:
- Local: http://localhost:3000/
- Network: http://10.0.2.15:3000/
📦 You're in production mode. To build the application, run yarn build.
🎉 Fallback to the app enabled: your application is served!
🔀 api routes found:
- /foo: GET
localhost:3000 하면 프로그램이 시작됩니다.(express pluggin에서 프로그램 포함)총결산
vue-cli-plugin-express를 사용하면 API 서버를 포함한 프런트엔드 개발을 손쉽게 수행할 수 있습니다.
npm run express : API server (default, tcp/3000) npm run serve : App dev server (default, tcp/8080) npm run build에 구축npm run serve에서 App/API 서버 (default, tcp/300) 시작 덤
for Heroku
이 정도면 Node/Express를 개발하는 응용 프로그램과 마찬가지로 어렵지 않을 것이다.
기본적으로 vue-cli에서 생성됩니다.gitignore에dist 디렉터리 가 포함되어 있음을 주의하십시오
const port = process.env.PORT || 3000
app.set('port', port)
heroku config:set NPM_CONFIG_PRODUCTION=false.npm run express 안에서 vue-cli-server라고 부른다.그럼 이 포장류는 devDependencies죠.이 근처 만들면 나중에 귀찮으니까 솔직하게 devDependencies 포함해서 다 싸주세요.vue-cli-plugen-express 이외의 방법
vue-cli-plugen-express를 사용하지 않으면 어떻게 합니까? Devserver 자체가express middleware이기 때문에sore가 박힌 서버 스크립트를 쓰기 시작하고 싶습니다.다음을 참조하여...보면 알겠지만 그래도 좀 귀찮아요.주변 사람들을 잘 아는 사람은 많이 할 수 있을지도 몰라요.
Running Vue CLI 3 generated project with custom Express server · GitHub
Reference
이 문제에 관하여(Vue-CI3 기반 애플리케이션 개발 중인 JSON API를 사용하는 express 서버), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/corestate55/items/81ba50cf33c78b7119fd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
