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

在本文中，我们将探讨如何使用Node.js（Express 4.x）和Vue（通过vue-cli）构建一个前后端分离的应用，并解决跨域问题。确保你已经安装了Node.js环境，这是运行Express和Vue的基础。 **一、Express 4.x 后端设置** 1. **安装Express**：在命令行中输入`npm install express --save`，这将安装Express框架并将其添加到项目依赖中。 2. **配置CORS**：为了允许Vue前端与Express后端进行跨域通信，需要安装CORS中间件。使用`npm install cors --save`命令安装。然后在`app.js`文件中导入CORS并配置： ```javascript var cors = require('cors'); // 在app.use()方法中添加cors中间件 app.use(cors({ origin: ['http://localhost:8080'], methods: ['GET', 'POST'], allowedHeaders: ['Content-Type', 'Authorization'] })); ``` 3. **创建路由**：在`routes/index.js`文件中，定义一个POST路由来响应前端请求。例如： ```javascript router.post('/first', function(req, res, next) { res.json({name: 'aaa', pwd: '123'}); }); ``` **二、Vue（通过vue-cli）前端设置** 1. **安装vue-cli**：确保已安装Vue CLI，通过`npm install -g @vue/cli`命令全局安装。 2. **创建Vue项目**：使用`vue create project-name`命令创建一个新的Vue项目。 3. **引入jQuery**：虽然Vue.js有自己的API，但这里为了演示Ajax请求，我们选择引入jQuery。在HTML模板中，通过CDN链接引入jQuery： ```html <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> ``` 4. **发送Ajax请求**：在Vue项目的入口文件（通常是`main.js`或`App.vue`）中，监听按钮点击事件并使用jQuery的Ajax方法发起POST请求： ```html <button>获取json</button> <script> $('button').click(function(){ $.ajax({ type: 'POST', url: 'http://localhost:3000/first', headers: { "Content-Type": "application/json" }, success: function(backDate) { console.log(backDate); } }); }); </script> ``` **注意**：确保Vue项目在`http://localhost:8080`上运行，而Express后端在`http://localhost:3000`上运行。 **总结** 前后端分离架构中，前端和后端分别在不同的端口上运行，通过API接口进行通信。在这个实例中，我们使用Express作为后端服务器，处理HTTP请求，并通过CORS中间件允许Vue前端进行跨域请求。Vue前端使用jQuery的Ajax功能向后端发送POST请求，获取后端返回的数据。尽管Vue有内置的`axios`库或者其他插件如`vue-resource`可以实现相同的功能，但在这里我们选择了jQuery的Ajax，以便更直观地展示数据交互过程。 这个例子提供了一个基本的前后端分离应用的起点，你可以根据需求进一步扩展，比如添加用户认证、连接数据库、优化请求处理等。同时，为了更好地实践模块化开发，推荐学习和使用Vue的组件化和Vuex状态管理等技术。