Front and rear ends separated ---- VUE + node (express)
vue frame as the front end, node (express) as the rear end of the frame. No database, save the data using the port.
VIEW:
Use vue vue-cli building project (vueapp).
npm install -g vue-cli(安装,安装过的就不用了)
vue init webpack vueapp
axios :( ajax and similar)
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 did not install the equipment remember it. (Installation not elaborate)
node (express): Start >>> npm start
Use express build server:
新建个myapp放express
npm install express
In (routes folder) to build a product, js Interface
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 (interfacing to store data)
var productRouter = require('./routes/product');
app.use('/product', productRouter);
Finally, the server data have! ! ! ! Receiving data link front end has also been VUE! ! ! But still no way to link! ! ! !
This is the problem of cross-domain! ! !
Cross-domain:
1. Port different http: // localhost: 3000 and http: // localhost: 8080
2. Website www.baidu.com different and www.aiqiyi.com
3.ip and different URL http: // localhost: 3000 and http://127.0.0.1
Anyway, unless the same URLs inside, only a different directory, you do not need cross-domain.
Begin to solve! !
express>>>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 need to install a dependency.
Results:
Server (express): 3000 interface data
to get