搭建一個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可以看到請求接收成功