MUKI AI Summary
最近計畫重置履歷介紹，並考慮使用 Vue 和 Express 建置前後端網站，以解決跨域 API 問題。首先，使用 Webpack 安裝 Vue-cli，並安裝 Axios 進行 API 請求。網站結構中，Express 被放在 Vue 專案底下。
接著，安裝 Express 及其產生器，設定 Router，並使用 nodemon 自動重啟伺服器。為解決跨域問題，安裝 cors 套件，並設定前端 proxy。最後，使用 connect-history-api-fallback 套件，將 Vue build 出來的專案在 Express 下執行。開發環境設定完成後，即可開始進行網站開發。...
最近想要重置自己的履歷介紹，並將專案整理後放上來。
因為有的專案會用到跨域的 API，為了解決這個問題，就考慮要自己弄個後端 SERVER 來處理跨域問題，因此這次改版決定將 Vue 和 Express 通通整合進來，並將步驟記錄下來以供日後參考使用。
使用套件
預計會使用的套件如下：
- VUE v2
- Vue-Cli
- Webpack
- Axios
- Node
- Express
- Cors
- Nodemon
網站結構
我會將 Express 放在 Vue 專案底下，因此結構目錄大概長這樣：
portfolio (VEU project) ├─ /build ├─ /dist ├─ /server (Express) ├─ /src ├─ ... ├─ index.html ├─ package.json │ └── 下略...
安裝 Vue
使用 Webpack 建立專案
首先，用 Webpack 安裝 Vue-cli，可以自行修改細部的設定，也可以使用「Enter」大法一直按下一步，直到安裝完成。
$ vue init webpack portfolio
安裝 Axios 套件
1. 安裝 Axios 套件
$ npm install --save axios
2. 打開 src/main.js 引入 axios
import axios from 'axios' // 把 axios 註冊為原型 Vue.prototype.$axios = axios
使用 Axios
打開 vue 預設的檔案 HelloWorld.vue，將我們預先設計好的 api 寫進來。這邊用了兩個 function get & post API：getmsg() 以及 postmsg()，剩下的 API Router 設定會在 Express 完成。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button type="button" name="button" v-on:click="getmsg">get</button>
<button type="button" name="button" v-on:click="postmsg">post</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
getmsg () {
this.$axios.get('/api/personal?name=MUKI').then(function (res) {
console.log('res=', res)
})
},
postmsg () {
this.$axios.post('/api/favorite', {name: 'money'}).then(res => {
console.log('post res = ', res)
})
}
}
}
</script>弄好之後可以先看一下畫面，使用指令 npm run dev，畫面如下所示：
前端 Vue 預設的 port 為：http://localhost:8080
安裝 Express
安裝 Express 產生器
第一次使用要先安裝他的產生器：
$ npm install express-generator -g
建立 Express 專案
Express 可以選擇要使用的「樣版引擎」以及「CSS 預處理器」，如果都沒有指定，預設就是：
- 樣版引擎：jade
- CSS 預處理器：原生的 css
我自己是習慣使用 ejs 跟 scss，所以我會下這樣的指令新建專案：
# 進入 portfolio 目錄下 $ cd portfolio # 使用 express 產生器建立專案 $ express server --view=ejs --css=compass # 開啟該專案的目錄 $ cd server # 安裝需要用到的套件 $ npm install # 啟動伺服器 $ npm start
後端預設的 port 為 http://localhost:3000，畫面如下：
設定 Router
接著在 server/routes/index.js 設定 router
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/personal', function(req,res,next){
res.send(req.query)
})
router.post('/favorite', function(req, res, next){
res.send(req.body)
})
module.exports = router;使用 nodemon 自動重啟伺服器
nodemon 可以說是後端的 livereload。我們更改 server 端的程式碼後，不用關閉伺服器再打開，直接重新整理網頁即可，非常的方便！
先在 server 資料夾底下安裝 nodemon：
$ cd server/ $ npm install --save-dev nodemon
然後打開 app.js，將最後一行註釋起來
// module.exports = app;
並加入以下程式碼：
var debug = require('debug')('my-application');
app.set('port', process.env.PORT || 3000);
// 啟動監聽
var server = app.listen(app.get('port'), function() {
debug('Express server listening on port ' + server.address().port);
});接著再啟動 nodemon：
$ nodemon app.js
這樣每次存檔後，就可以到網頁上看結果，不需要重啟伺服器了。
安裝 Cross-env 跨平台設定環境
corss-env 這個套件可以讓我們跨平台的將環境設定好，讓 MAC / Linux / Windows 的環境一致。
$ cd server/ $ npm install --save-dev cross-env
打開 server/package.json，將 script 設定全部替換掉：
"scripts": {
"start:dev": "cross-env NODE_ENV=development nodemon ./bin/www",
"start:prod": "cross-env NODE_ENV=production node ./bin/www"
},安裝 Cors 解決跨域問題
最後就是要解決前端跟後端的跨域問題了，先安裝 cors 套件：
$ cd server/ $ npm install --save-dev cors
然後在 server/app.js 裡，加入以下語法來設定跨域：
// 解決跨域問題
const cors = require('cors');
app.use(cors({
origin:['http://localhost:8080'],
methods:['GET','POST'],
}));
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});開啟前端 Vue 的檔案設定 proxy，詳細位置為 portfolio/config/index.js
//將整段 proxyTable 替換為以下語法
proxyTable: {
'/api': {
target: 'http://localhost:3000/',
ChangeOrigin: true
}
},最後重啟伺服器：
# 前端 $ cd portfolio/ $ npm run dev # 後端 $ cd portfolio/server $ nodemon app.js
在網址輸入 http://localhost:8080 後，打開 console 視窗，試著點選 get 和 post 兩個按鈕，應該可以成功看到 api 資訊
到此為止，Vue 和 Express 的開發環境就算是設定完成了，我們可以在 Express 設定 API router，然後用 Vue 開發時接入 API。
使用 Express 部署 Vue 專案
最後，我希望用 Vue build 出來的專案(dist/index.html)，可以在 Express 底下執行並順利接 API，完成我的一條龍計畫！
先安裝 connect-history-api-fallback 套件，這個套件是用來溝通前端和後端的中間層。
$ cd server/ $ npm install --save connect-history-api-fallback
打開 server/app.js 修改 Express 的 router：
// 1. 刪除以下語法
app.use(express.static(path.join(__dirname, 'public')));
// 2-1. 找到以下語法
app.use('/', indexRouter);
app.use('/users', usersRouter);
// 2-2. 替換成以下語法
app.use('/api', indexRouter);
app.use('/api/users', usersRouter);
var history = require('connect-history-api-fallback');
app.use(express.static(path.join(__dirname, '../dist')));
app.use(history());打開 routes/index.js：
// 將以下語法刪除或注釋起來
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});回到前端將專案 build 出來
$ cd portfolio/ $ npm run build
再打開後端的 http://localhost:3000，就可以執行我們最後 build 出來的專案囉，而且也可以順利執行 API：
最後就可以愉快地開始寫網站囉！！
參考資料
vue+node(express)做中间层开发一
前提条件安装：vue v2.9.6vue-cliiviewnode v15.4express v4.16.1axios v0.18.0cors采用的结构为前端Vue项目，内包一个node服务vue端 {代码...} 执行 npm run...
https://segmentfault.com/a/1190000038816828
使用Express部署Vue项目
使用Express部署Vue项目目录目录1. 背景2. 配置Vue CLI2.1. 安装Node.js2.2. 安装Vue CLI2.3. 创建Vue项目2.4. 构建Vue项目3. 配置Express3.1. 安装Express3.2. 创建项目4. 使用Express部署Vue项目 1. 背景我们想…
https://zhuanlan.zhihu.com/p/116749549
7
10
2
很棒的一篇文章，但我的視線一直被妳的 code block 所吸引，能請問下妳是使用了什麼 tool 嗎？
我用的是這個 plugin：Advanced Gutenberg Blocks
不過剛搜尋了一下，作者好像停止開發了，可能需要自己手動安裝了
附上 github 位置：https://github.com/maximebj/agb.plugin
HAHA, 我是用 Jekyll + Markdown 來寫網誌的，看來要把
Syntax highlighting 的 Style 弄成這套有點麻煩，我在來研究看看，謝謝！
P.S. 是我錯覺還是真的很久沒看到你更新手帳的社團了？
純改 style 應該不難？但我記得 syntax highlighting 也有很多 color scheme 可以直接使用？？
ps. 不是錯覺，社團都半荒廢了，現在有點時間先選擇把吃飯的技術鞏固好，再來談興趣了 😂
對於半吊子前端很難阿 XDDD 可以直接用，只是都不太喜歡多多少都有不喜歡的部份。
P.S. 好的, 加油嘿～！當初妳跟 AKI 的網誌可是拖我入坑的，非常希望再看到妳們分享😀 ( 雖然 AKI 她的翻譯也已經被我歸入有生之年系列了 XDDDD)
祝你早點找到心儀的 color scheme!!! 我的手帳也還有持續在寫，只是最近寫比較多，有多一點會再到 IG 跟 FB 粉絲團分享，謝謝你喜歡 Q_____Q，手帳魂不滅ＧＯＧＯ
我照著步驟做但是api打不過去404
如果都有照著做，code 確定也沒打錯的話，會不會是沒有啟動後端的伺服器呢?
以解決謝謝您
我是網頁的新手，我想問您express這邊除了server功能，還有其他功能面嗎，router的話Vue專案好像就有了
我這邊介紹的 express 範例，是可以開發自己的 API 唷 ^Q^
請問目前用vue3, 前後端都啟動了, 照著步驟是出現 http://localhost:8080/api/personal 404 (Not Found),
而改改 getmsg() 直接ping http://localhost:3000/personal
得到 Access to XMLHttpRequest at ‘http://localhost:3000/personal’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
有頭緒嗎?
方便的話，要不要把檔案丟到 git 上我跑跑看？
你開發時
後端的 API 是在 localhost:8080，前端的網站是在 localhost:3000
兩邊網址不同，會有跨域問題
文章裡面有這個章節 [安裝 Cors 解決跨域問題]做完之後，錯誤訊息應該可以消失