前置条件

请确保安装了node。window+R打开cmd，输入 node -v  查看node版本。

建议使用淘宝镜像代替npm，确保安装速度，接下来都会使用cnpm

一、搭建后台Express环境

1、安装环境

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

在此使用shift+鼠标右键打开cmd

全局安装Express

cnpm install express --save  

安装Express应用程序生成器

cnpm install express-generator -g  

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

express --view=pug myapp  

成功的例子：

之后在你的Express文件夹中会有一个myapp的文件夹，这就是我们的express项目文件

进入myapp安装依赖

  cd myapp   cnpm install  

启动应用

set DEBUG=myapp:* & npm start  

成功：

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

2、发送GET请求

在你的编辑器中打开myapp

目录：（因为我已经有一个myapp了，所以叫myapp2）

在routes新建一个produce.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:"请求成功"   }   //将product视图与指定的对象渲染后输出到客户端   res.json(data);   });       module.exports = router;  

app.js中添加

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

重启一下应用，浏览器输入 http://localhost:3000/product ，可以看到请求成功。

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

在这里我使用vue-cli搭建vue环境

打开cmd，安装vue-vli

cnpm install vue-cli -g  

进入刚才创建的Express文件夹，在文件夹用shift+鼠标右键或者cd 进入

创建自己的vue项目

vue init webpack vueProject  

接下来会让你选择，在这里不多做解释。一直回车Y即可。

创建成功：

myapp是我们的后端express项目，vueProject是我们的前端vue项目。大体的框架已经搭建完成了，接下来需要把前后端连接起来。

进入vueProject，启动项目

npm run dev  

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

安装axios

cnpm install axios  

在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);   });  

打开f12可以看到请求接收成功

转载于:https://www.cnblogs.com/ydam/p/10983564.html