# 軟體工程開發實務期末專題
[Toc]
## 使用什麼方法了解需求
以自身使用逢甲大學圖書館網站的經驗，去了解使用網站的感覺。

例如：

進入網站時，我是一名學生，我要使用圖書館網站去看，我在課堂上需要看的原文書，
因為館內沒有藏書，且原文書太貴，所以我想要向學校推薦一下。

## 設計架構圖

**序列圖**

## 版本控制過程
我原本預計使用作業2來進行修改，但不知為什麼原本可以跑的pipeline都不能跑了，所以我一直在修改錯誤，然後我幾乎都在master主支流上面進行修改，commit的次數多到數不清，幾乎滿江紅。

當然，偶爾會做分支，可是整合後都還是失敗，所以就還是主要在主支流上進行修改。

因為我同時測試很多專案，但我就放這個最主要的

---
12/29

>$ sudo npm install -g vue-cli

>$ vue create final

>$ vue init webpack frontend

>$ cd frontend/
>$ npm run dev
>在App.vue 寫入自己的程式，寫完後按command S就可以跑出後端網頁

>修改結束後，按command C
>$ npm run build
>build後，就可以套在Azure Portal上了，然後按照參考資料2就行了

我透過VS code，安装vue-cli，（npm run dev）將自己已經完成的程式寫入，最後再推到Azure portal上面（npm run build）

這邊是我的程式

<template>
  <div class="col-sm-4">
    <div id="blk-login">
      <div class="board"></div>
      <!-- .board -->
      <h3>
        <span id="title">推薦者登入 Login</span>
      </h3>
      <!-- .form-group -->
      <div class="form-group"></div>
      <!-- .form-group -->
      <div class="form-group">
        <br />
      </div>
      <!-- .form-group -->
      <div class="button1">
        <input
          type="button"
          id="Button1"
          value="NID登入"
          onclick="javascript:window.open('http://opendata.fcu.edu.tw/fcuOauth/Auth.aspx?client_id=637102957247.e9976f5b722a47a6af9beddfeadb70e4.recommend.lib.fcu.edu.tw&amp;client_url=http://recommend.lib.fcu.edu.tw/weblink/scripts/weblink/oauth.aspx', '_top', 'copyhistory=0');"
          class="btn btn-default"
        />
      </div>
      <!-- .btns -->
      <div class="help">
        <h4>如何登錄系統</h4>
        <ul>
          <li>帳號：請輸入教職員/學生證號。</li>
          <li>密碼：請輸入NID密碼。(忘記密碼請聯絡資訊處分機2712)</li>
          <li>薦購服務相關問題請洽圖書館讀者服務組2682。</li>
        </ul>
      </div>
      <!-- .help -->
    </div>
    <!-- #blk-login -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#col-sm-4 {
		    width: 150px;
		    float: left;
		    padding: 0px 15px;
}
#blk-login {
    color: #ffffff;
    padding: 15px;
    background: #00b9cf;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#blk-login .btns {
    text-align: center;
    margin-bottom: 30px;
}

#help {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
</style>

## 軟體測試計畫

實作NID的登入，只要按下登入button，應該就能順利進入NID的帳號輸入畫面了

## 部屬流程

透過Azure Portal建立一個靜態的網頁，自動部署，應該只會有一個階段。

## 組件網址
這是我做完的網址：
https://final5test.azurewebsites.net/#/

## 參考資料

**1.Python Web实战：Flask + Vue 开发一个漂亮的词云网站** ：
https://bbs.huaweicloud.com/blogs/322920

**2.【 Cloud 】部署 Vue App 到 Azure App Service** ：
https://learningsky.io/deploy-vue-app-to-azure-app-service/

**3.使用 Flask 和 Vue.js 来构建全栈单页应用**
https://learnku.com/python/t/24985

**4.【Vue】按照文件操作，怎麼還是報錯｜macOS 安裝 CLI 指令**
https://ithelp.ithome.com.tw/articles/10282781

## 引用git
https://github.com/oleg-agapov/flask-vue-spa