當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/4/15 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了搭建一个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安裝依賴

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

超強干貨來襲云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的搭建一个VUE+Express前后端分离的开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：获取ini内容 GetPrivatePr
下一篇： sql server版本特性简介、版本介