nodeJS(express4.x) vue(vue-cli)构建一个前端分离实例(跨域)

准备工作：

1.安装nodejs -要我教你吗？

2.安装依赖包express4.x单击此处" " nodeJS构建本地服务器。"

3.在此安装vue-cli脚手架点" " vue-cli以构建vue项目。

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

NodeJS部分：在这里，我已经认为您已经构建了一个快速服务器，并且可以在浏览器中访问它

1.在快速目录中，安装cors包1。NPM安装cors - save2。//这里-save指的是将CORS依赖注入到package.json中

2.在app.js中配置：如下图我配置的那样打开cors //。

//..var CORS=require(' CORS ')；//..app . use(CORS({ origin :[' http://localhost :8080 ']，methods:['GET '，' POST']，allowheaders :[' Conten-Type '，' Authorization ']})；3.在routes/index.js中配置路线图

router.post('/first '，函数(req，res，next) { res.json({name:'aaa '，pwd : ' 123 ' })；});注意：这里配置了后端。我在这里写了假数据，但是没有访问数据库。我只让一个json对象{name:'aaa '，pwd:'123'}返回。

只要是http://localhost:8080/first，就可以得到返回的对象

这里需要说明的是，这个路由也可以在后台的原域名下访问，也就是说这个域名可以共享。

-重新启动服务器

Vue部分：我已经认为你已经建立了vue服务器，可以在浏览器中访问它

解释：我们在这里引入jquery是为了使用它的ajax插件。这里的一些学生可能会问，为什么不使用vue-resource？

Vue-resource:是Vue.js的一个插件，可以通过XMLHttpRequest或JSONP发起请求和处理响应。也就是说，vue-resource插件可以做什么$。ajax可以做到，vue-resource的API更简单。此外，vue-resource还提供了一个非常有用的拦截器功能，可以在请求前后附加一些行为，比如在ajax请求时使用拦截器显示加载界面。

我告诉你原因：因为我不行，那是我有多自信！另外，我想再次声明，如果这个项目的结构有任何不合理之处，请给我你的建议，那就是谦虚求教

1.打开vue项目的入口文件

2.将代码写入门户文件。有些人可能会问为什么我们不使用模块化开发。我再说一遍。我不能-_-|-_ |-_-|

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

脚本类型=' text/JavaScript ' src=' http :http://apps . bdimg.com/libs/jquery/2 . 1 . 4/jquery . min . js '/script button get JSON/button script $(' button ')。单击(function(){ $)。ajax({ type:'POST '，URL : ' http://localhost :3000/first '，header RS : { ' Conten-Type ' : ' http://localhost :3000/first ' })，success : function(back date){//body.console . log(back date)；} })}/脚本3。因为vue项目是自动刷新的，如果不是，你可以手动刷新，因为我还没想好什么情况下会自动刷新，不工作的话重启服务器，哈哈

这是现在的前端页面。我们将在点击控制台后查看它，因为它写在ajax请求中，当我们访问成功时，我们会打印出返回的数据。

至此，我们对前端和后端的介绍到此结束。

我们从localhost:3000端口访问了localhost:8080端口，互相交流。女士们先生们，让我们像前面和后面一样前进！

参考：

Vue.js——基于$实现数据的跨域添加、删除、查询和修改。创建交互式、快速动态网页应用的网页开发技术

快递中文文件

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。