准备工作:

1.安装nodejs ---还用我教了?

2.安装依赖包express4.x  点这里》》》nodeJS搭建本地服务器

3.安装vue-cli脚手架 点这里》》》vue-cli构建vue项目

这里强调一下,express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的,但是它们都是基于nodejs的。

nodeJS部分:这里我已经认为你搭建好了express服务器,并且能在浏览器中访问到

1.在express目录下,安装cors包1.npm install cors --save 
2. //这里的--save是指把cors依赖注入到package.json中 

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

2.在app.js中配置:开启cors  //就如我下图配置的一样

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域) 

//.............
var cors = require('cors');

//...............

app.use(cors({
  origin:['http://localhost:8080'],
  methods:['GET','POST'],
  alloweHeaders:['Conten-Type', 'Authorization']
}));

3.在routes/index.js中配置一条路由映射

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

router.post('/first', function(req, res, next) {
 res.json({name:'aaa',pwd:'123'});
});

说明:到这里后端就配置完了,我这里写了假数据,没有访问数据库,我只让返回了一个json对象 {name:'aaa', pwd:'123'}

只要是 http://localhost:8080/first 这个路由过来的访问都可以拿到这个返回的对象了

这里需要说明的是,后台自己本来的域名下也是可以访问到这个路由的,就是说明这个域名是可以共享的。

 --重启服务器

Vue部分:这里我已经认为你搭建好了vue服务器,并且能在浏览器中访问到

说明:我们这里引入了jquery,目的是为了用他的ajax插件,这里有同学可能会问了,为什么不用vue-resource"text-align: center">nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

2.在入口文件中编写代码   这里可能有人问为什么不用模块化开发,我在说一遍,我现在还不会 -_- |       -_-|       -_-| 

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域) 

这里我用了百度静态资源库的cdn加载

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

3.因为vue项目是自动刷新的,如果没有,你就手动刷新一下,因为我还没搞明白它什么在哪些情况下会自动刷新,再不行就重启服务器,哈哈

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域) 

这是现在的前端页面,我们点击以后看控制台,因为在ajax请求里写的,我们在访问成功success时,打印出传回来的数据

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域) 

至此,我们的前后端入门就到此结束了。。。

我们从localhost:8080端口访问到了localhost:3000端口,并进行了交互,各位,像前后端分离进军吧!

参考:

Vue.js——基于$.ajax实现数据的跨域增删查改 

express中文文档  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
nodejs,express,vue,nodejs,express,vuejs,vue,nodejs

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。