前端と後端分離---- VUE +ノード(発現)
フロントエンドとしてVUEフレーム、フレームの後端部としてノード(発現)。いいえデータベースは、ポートを使用してデータを保存しません。
VIEW:
使用VUE VUE-cliの建築プロジェクト(vueapp)。
npm install -g vue-cli(安装,安装过的就不用了)
vue init webpack vueapp
axios :(アヤックスと似ています)
import axios from 'axios'
var url="http://localhost:3000" //express服务器的地址
axios.get(url+'/product') //放数据的接口
.then(function (response) { //收到的数据
console.log(response);
console.log(response.data); //展示数据(看看是否拿到,和数据长啥样)
var nodeData=response.data;
})
.catch(function (error) {
console.log(error);![在这里插入图片描述](https://img-blog.csdnimg.cn/20191013132943460.jpg)
});
axiosはそれを覚えている機器をインストールしていません。(インストール精巧ではありません)
ノード(表現):スタート>>> NPM開始
特急ビルドサーバーを使用します。
新建个myapp放express
npm install express
製品を構築するために(ルートフォルダ)で、インタフェースをJS
var express = require('express'); //使用express
var router = express.Router(); //放数据
/* GET home page. */
router.get('/', function (req, res, next) {
var data = {
code: 0,
data: {
name: 'aaa',
pwd: '123'
},
isSuccess: true,
msg: "请求成功"
}
res.json(data);
});
module.exports = router;
app.js(データを格納するためのインタフェース)
var productRouter = require('./routes/product');
app.use('/product', productRouter);
最後に、サーバーのデータを持っています!!!!データリンクのフロントエンドを受信することもVUEされています!!!しかし、リンクする、まだ方法はありません!!!!
これは、クロスドメインの問題です!!!
クロスドメイン:
1.ポート異なるのhttp:// localhostを:3000とのhttp:// localhostを:8080
2.ウェブサイトwww.baidu.com異なるとwww.aiqiyi.com
3.ipと異なるURLののhttp:// localhostを:3000とhttp://127.0.0.1
とにかく、内部の同じURLの場合を除き、唯一の別のディレクトリには、クロスドメインを必要としません。
解決するために開始します!!
>>> app.jsを表現
//跨域问题解决方面
const cors = require('cors');
app.use(cors({
origin:['http://localhost:8080'],
methods:['GET','POST'],
}));
//跨域问题解决方面
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});
CORSは、依存関係をインストールする必要があります。
結果:
サーバー(表現):3000インタフェースデータを
取得します