記事ディレクトリ
1.キーの改良
- 非同期リクエスト
- axios
- クロスドメイン
2.Koaはバックエンドサービスを構築します
ローカルバックエンドを作成します。
yarn init
yarn add koa koa-router
Xiaodiはここでは詳しく説明しません。ご不明な点がございましたらnode、Xiaodiblogをご覧ください。前のコードを直接コピーして、yarnインストールの依存関係を実行します。
\ server01 \ app.js
const Koa = require('koa');
const KoaRouter = require('koa-router');
const KoaBodyParser = require('koa-bodyparser')
let datas = {
items: require('./data/items.json'),
users: require('./data/users.json')
}
const app = new Koa();
let currentId = 20;
app.use( async (ctx, next) => {
await next();
} );
app.use(KoaBodyParser());
const router = new KoaRouter();
router.get('/', async ctx => {
ctx.body = 'api';
});
router.get('/items', async ctx => {
let sort = ctx.request.query.sort || 'desc';
let items = datas.items.sort((a, b) => sort === 'asc' ? a.price - b.price : b.price - a.price);
ctx.body = items;
});
router.get('/item/:id', async ctx => {
let id = Number(ctx.params.id);
let item = datas.items.find(item => item.id === id);
await new Promise(resolve => {
setTimeout(_=>resolve(), 2000);
});
if (!item) {
ctx.throw(404, '没有该商品信息');
return;
}
ctx.body = item;
});
router.post('/add', async ctx => {
let {
name} = ctx.request.body;
if (name === '') {
ctx.body = {
code: 1,
message: '商品名称不能为空'
}
return;
}
let newData = {
id: currentId++,
name
};
datas.items.unshift(newData);
ctx.body = {
code: 0,
message: '提交成功',
data: newData
}
})
app.use( router.routes() );
app.listen(7777);
3.非同期リクエスト
実際のアプリケーション開発では、バックエンドと対話して非同期要求を行うことが非常に一般的な要件です。
3.1軸
npm i axios
yarn add axios
3.2リクエスト
// home.vue
<template>
<div class="home">
Home
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'home',
data() {
return {
items: []
}
},
created() {
axios({
url: 'http://localhost:7777/items'
}).then(res => {
this.items = res.data;
});
}
}
</script>
3.3 example01
\ app \ src \ views \ Home.vue
<template>
<div>
Home
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "Home",
data() {
return {
items: []
}
},
async created() {
let rs= await axios({
url:'http://localhost:7777/items'
});
this.items = rs.data;
console.log(this.items);
}
}
</script>
クロスドメインエラーのため！一般的なオンラインソリューションは、構成代理服务器、またはcorsクロスドメインの問題に対処することです。
クロスドメインローカル開発の場合、ローカルvue構成をセットアップしましょう。（前回の記事では、vue配置ファイルの構成方法について説明しました）
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a1.73ブランチ：branch05コミットの説明：a1.73（example01-axiosがデータを受信する際のクロスドメインの問題）
日：a1.73
4.クロスドメイン
vue-cliは、Webサーバーのビルドベースのノードを提供します。これを使用して、クロスドメイン要求をプロキシするためのプロキシサービスを提供できます。
4.1 vue.config.js
プロジェクトvue.config.jsドキュメントのルートディレクトリに作成します。npm run serveサービスが開始するまでに、ファイルが読み取られます。
4.2クロスドメインリクエストプロキシ設定
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:7777',
pathRewrite: {
'^/api': ''
}
}
}
}
}
構成ファイルを変更するには、サービスを再起動する必要があります。
npm run serve
// home.vue
<script>
...
created() {
axios({
url: '/api/items'
}).then(res => {
this.items = res.data;
});
}
...
</script>
4.3 example02
4.3.1example02-1
\ app \ src \ views \ Home.vue
async created() {
let rs= await axios({
url:'/items'
});
this.items = rs.data;
console.log(this.items);
}
url:'/items'リクエストはdevServer傍受され、にproxy転送されますhttp://localhost:7777
\ app \ vue.config.js
module.exports = {
devServer: {
proxy: {
'/items': {
target: 'http://localhost:7777'
}
}
}
};
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a1.74ブランチ：branch05コミットの説明：a1.74（example02-1-データを受信するaxiosのクロスドメイン問題を解決するため）
日：a1.74
4.3.2example02-2
この構成もあまり良くありません。リクエストごとに構成する必要があるため、プレフィックスを追加し、アドレスをリクエストしてから転送することができます。
url:'/api/items' =>ルーティング中の競合を防ぐために特別なプレフィックスを追加します。
\ app \ src \ views \ Home.vue
async created() {
let rs= await axios({
url:'/api/items'
});
this.items = rs.data;
console.log(this.items);
}
\ app \ vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:7777',
pathRewrite: {
'^/api': ''
}
}
}
}
};
複数のサーバ、複数の複数のインターフェイスで、サーバが同時に存在する場合がある利点は、行うことができ/api1/xx、/api2/xxそのため前方に複数。
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a1.75ブランチ：branch05コミットの説明：a1.75（example02-2-axiosがデータを受信するというクロスドメインの問題を解決する2）
日：a1.75
（後で追加されます）