搭建一个VUE+Express前后端分离的开发环境

前置条件

请确保安装了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安装依赖

1.  
   cd myapp
2.  
   cnpm install

 

启动应用

set DEBUG=myapp:* & npm start

 

成功：

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

2、发送GET请求

在你的编辑器中打开myapp

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

在routes新建一个produce.js

1.  
   var express = require('express');
2.  
   var router = express.Router();
3.  
   /* GET home page. */
4.  
   router.get('/', function(req, res, next) {
5.  
   var data={
6.  
   code:0,
7.  
   data:{name:'aaa',pwd:'123'},
8.  
   isSuccess:true,
9.  
   msg:"请求成功"
10.  
    }
11.  
    //将product视图与指定的对象渲染后输出到客户端
12.  
    res.json(data);
13.  
    });
14.  
     
15.  
    module.exports = router;

 

app.js中添加

1.  
   var productRouter = require('./routes/product');
2.  
    
3.  
   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中引入并发送请求

1.  
   import axios from 'axios'
2.  
   var url="http://localhost:3000"
3.  
   axios.get(url+'/product')
4.  
   .then(function (response) {
5.  
   console.log(response);
6.  
   })
7.  
   .catch(function (error) {
8.  
   console.log(error);
9.  
   });

 

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