VUE+node（express）实现前后端分离

在现代Web开发中，前后端分离是一种常见的架构模式，它允许前端和后端应用独立开发和部署，提高开发效率和应用性能。本文将详细讲解如何使用Vue.js和Node.js（基于Express框架）来实现前后端分离的示例。 Vue.js 是一个轻量级的前端框架，它提供了组件化开发、虚拟DOM以及响应式数据绑定等功能，使得前端开发更加便捷。要创建一个Vue项目，可以通过`vue-cli`工具进行初始化： 1. 安装Vue CLI： ``` npm install -g vue-cli ``` 2. 初始化Vue项目： ``` vue init webpack vueapp ``` 接下来，我们需要引入axios库，它是一个基于Promise的HTTP库，可以方便地处理HTTP请求。在Vue项目中，可以这样使用axios获取数据： ```javascript 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); }); ``` 在后端，我们将使用Node.js和Express框架来构建API服务器。确保已经安装了Express： ```bash npm install express ``` 创建一个名为`myapp`的文件夹，然后在其中编写Express服务器代码： 1. 创建`app.js`，引入Express并设置路由： ```javascript var express = require('express'); var app = express(); var productRouter = require('./routes/product'); app.use('/product', productRouter); app.listen(3000, function () { console.log('Server is running on port 3000'); }); ``` 2. 在`routes`文件夹下创建`product.js`，定义接口： ```javascript var express = require('express'); var router = express.Router(); router.get('/', function (req, res, next) { var data = { code: 0, data: { name: 'aaa', pwd: '123' }, isSuccess: true, msg: "请求成功" }; res.json(data); }); module.exports = router; ``` 现在，前端可以向`http://localhost:3000/product`发送请求并获取数据了。但是，由于前端和后端运行在不同的端口上（例如：Vue在8080端口，Express在3000端口），会遇到跨域问题。跨域是指浏览器的同源策略限制了JavaScript从一个源（协议+域名+端口）访问另一个源的数据。 解决跨域问题，可以在Express服务器中添加CORS中间件。首先安装cors库： ```bash npm install cors ``` 然后，在`app.js`中配置CORS： ```javascript const cors = require('cors'); app.use(cors({ origin: ['http://localhost:8080'], methods: ['GET', 'POST'] })); ``` 或者，如果需要更灵活的配置，可以使用以下代码： ```javascript 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(); }); ``` 完成以上步骤后，前端就可以顺利地从后端获取数据了。总结来说，通过Vue.js和Node.js（Express）的组合，我们可以轻松地实现前后端分离，同时利用CORS解决跨域问题，保证前后端通信的顺畅。这只是一个基础示例，实际开发中还需要考虑更多细节，如错误处理、安全性、性能优化等。