介绍 npm install -g vue-cli(安装,安装过的就不用了)
vue init webpack vueapp import axios 得到& # 39;axios& # 39;
var url=癶ttp://localhost: 3000,,,,,,,,,,,,,//表达服务器的地址
axios.get (url + & # 39;/产品# 39;),,,,,,,,,,,,,,,//放数据的接口
,不要犹豫(function (响应),{,,,,,,,,,,,,//收到的数据
console.log才能(响应);
console.log才能(response.data);,,,,,,,,,,,,//展示数据(看看是否拿的到,和数据长啥样),
var 才能nodeData=https://www.yisu.com/zixun/response.data;
}）
.catch(函数(错误){
console.log(误差);![在这里插入图片描述)(https://img-blog.csdnimg.cn/20191013132943460.jpg)
}); 新建个myapp放表达
npm install 表达 var express =,要求(& # 39;表达# 39;),,,,,,,//使用表达
var router =, express.Router(),,,,,,,,,//放数据/*,GET home 页面只*/router.get (& # 39;/& # 39;,, function (申请,,,,下一个),{
var 才能;data =, {
,,,代码:,0,
数据:,,,,{
,,,,,名字:,& # 39;aaa # 39;
,,,,,pwd:, & # 39; 123 & # 39;
,,,},
,,,isSuccess:,真的,
,,,味精:,“请求成功”;
,,}
res.json才能(数据);
});
时间=module.exports 路由器; var productRouter =,要求(& # 39;。/线路/产品# 39;);
app.use(& # 39;/产品# 39;,,productRouter); //跨域问题解决方面
const cors =,要求(& # 39;歌珥,),,
app.use(歌珥({,
产地:才能[& # 39;http://localhost: 8080 & # 39;],
方法:才能[& # 39;得到# 39;& # 39;文章# 39;],
}));//跨域问题解决方面
app.all (& # 39; * & # 39; function (申请,,,,下一个),{
,res.header (& # 39; Access-Control-Allow-Origin& # 39;,, & # 39; http://localhost: 8080 & # 39;);
,res.header (& # 39; Access-Control-Allow-Headers& # 39;,, & # 39;内容类型# 39;);
,res.header (& # 39; Access-Control-Allow-Methods& # 39;,, & # 39;,,,,,,删除,选择# 39;);
next ();
});
小编给大家分享一下VUE +节点如何实现前后端分离,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
VUE作为前端的框架,节点(表达)作为后端的框架。无数据库,使用端口保存数据。VUE:
使用vue-cli构建VUE项目(vueapp)。
axios:(与ajax相似)
axios没安装的记得装一下。(安装不细说)
节点(表达):启动祝辞祝辞祝辞npm开始
使用表达构建服务器:
在(路线文件夹中)建一个产品,js接口
app.js(建立接口存放数据)
最后服务器数据有了! ! ! ! VUE前端接收数据的链接也有了! ! !但还是没办法链接! ! ! !这就是跨域的问题! ! !
跨域:
1。端口不同http://localhost: 3000和http://localhost: 8080
2。网址不同www.baidu.com和www.aiqiyi.com
3. ip和网址不同http://localhost: 3000和http://127.0.0.1
反正除非同个网址里面,只有目录不同,才不用跨域。
开始解决! !
express>祝辞的在应用程序。js
歌珥需要安装,是一个依赖。
结果:
服务器(表达):3000接口数据
看完了这篇文章,相信你对“VUE +节点如何实现前后端分离”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
