【超详细】搭建一个VUE+Express前后端分离的开发环境

【前言部分】
Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架, 提供一系列强大特性帮助你创建各种Web应用

进入主题，搭建一个VUE+Express前后端分离的开发环境，需要确保安装了node

一、搭建后台Express环境

1、安装环境**

新建一个Express文件夹，之后的操作都在这个文件夹里操作，确保能找到你的项目

1.1、安装Express

在此右键点击打开cmd，输入npm install express --save命令

1.2、安装Express应用程序生成器

在打开的cmd中输入npm install -g express-generator命令

1.3、创建一个名称为 myapp 的 Express 应用

如下命令创建了一个名称为 myapp 的 Express 应用。此应用将在当前目录下的 myapp 目录中创建，并且设置为使用 Pug 模板引擎（view engine）：

输入express --view=pug myapp命令后，会出现下图

1.4、进入myapp安装依赖

安装依赖

1.5、启动应用

输入set DEBUG=myapp:* & npm start命令

在浏览器中输入 http://localhost:3000/ 如下图，成功创建了一个express应用

2、发送GET请求

2.1、在编辑器中打开myapp

2.2、在routes新建一个product.js

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
	var data={
		code:0,
		data:{name:'aaa',pwd:'123'},
		isSuccess:true,
		msg:"请求成功"
	}
	res.json(data);
});
 
module.exports = router;

2.3、在app.js中添加两行代码

var productRouter = require('./routes/product');
 
app.use('/product', productRouter);

添加后的app.js文件内容，截图如下

2.4、在终端输入npm start命令，发送get请求

2.5、请求成功

浏览器输入 http://localhost:3000/product ，可以看到请求成功。

二、搭建VUE环境并接受请求

2.搭建VUE环境

2.1、打开cmd，安装vue-vli

输入下条命令：

npm install vue-cli -g

报错了报错了，不要慌，看了一下错误，直接按那个路径把vue.psl删掉就好了

尴尬的是，并没有成功解决这个问题，然后查找了一下解决办法，输入npm install vue-cli -g --force命令进行覆盖安装

npm install vue-cli -g --force

2.2、创建Vue项目

进入刚才创建的Express文件夹，右键点击打开cmd，输入vue init webpack vueproject命令

vue init webpack vueproject

命令执行后一直按回车即可

2.3、成功创建Vue项目

【创建成功cmd页面】

在创建的EXpress文件夹会新出现vueProject文件夹

• myapp是我们的后端express项目， vueProject是我们的前端vue项目

2.4、进入vueProject，启动项目

启动成功后，在浏览器输入 http://localhost:8080/

2.5、安装axios

用编辑器打开新创建的vueProject文件夹，在集成终端中输入npm install axios命令安装axios

npm install axios

2.6、在main.js中引入并发送请求

import axios from 'axios'
var url="http://localhost:3000"
axios.get(url+'/product')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

正常情况下是可以在控制台看到接收请求成功的

然而，我的是不正常情况，控制台出现了报错，如图

:8087/#/:1 Access to XMLHttpRequest at ‘http://localhost:3000/product’
from origin ‘http://localhost:8087’ has been blocked by CORS policy:
No ‘Access-Control-Allow-Origin’ header is present on the requested
resource.
应该是跨域问题没有解决，在CSDN上看了很多博客，试了很多种方法，还未解决，等解决了再写个博客