---
# System prepended metadata

title: Project documentation template

---

---
title: 'Project documentation template'
disqus: hackmd
---

. Net Core MVC 金融網頁設計技術作品 README
===
![downloads](https://img.shields.io/github/downloads/atom/atom/total.svg)
![build](https://img.shields.io/appveyor/ci/:user/:repo.svg)
![chat](https://img.shields.io/discord/:serverId.svg)

## 作品介紹
.Net Core MVC 用了Razor語法幫助開發者很好把c#語法跟前端view的html融合，並使用viewmodel模型開法讓前端更容易取得方法去使用。

我們建立viewmodel撰寫的時候使用Razor語法方便使用html。
觀念:
1.因為程式碼 view要重，model要輕，要減輕model程式碼並且讓view可以快速調用，所以寫Mvc裡面最重要的一個概念，也就是強型別的View（Strong Type View）和ViewModel。
2.Mvc裡面的View使用的是Razor語法，而每一個View能夠定義傳進來的Model形態是什麼。透過這種方式，在寫View的時候不止能夠在Compile time的時候知道對於傳進來的Model使用上面有沒有正確，配上HtmlHelper，還能夠建立能夠和Model binding成功的對應html input。
3.ViewModel就像它的名字一樣，用於顯示View的Model。
-ViewModel不定義邏輯 - 有些會把取得資料的邏輯或者一些商業邏輯寫在ViewModel。但是，我認為ViewModel應該越純粹越好，它只是資料的載體，方便我們把資料傳到 View而已

## 登入及首頁

**一我用消費者的角度開始使用 . Net Core MVC，會先進入首頁，也就是銀行官方首頁**。

![](https://i.imgur.com/wXmGs5B.png)

**在這裡我設計在首頁去登錄帳號。
用滑鼠點一下Sign in，會進入帳號密碼登錄畫面。**

![](https://i.imgur.com/Q4QPn8a.png)




## 首頁layout

**-主要使用bootstrap的套版製作。**
![](https://i.imgur.com/wXmGs5B.png)
**在bootstrap官網download頁面， 複製5.1版的CDN，貼到程式碼裡面。**
![](https://i.imgur.com/6wbjDJu.png)
**貼在link和script的地方**
![](https://i.imgur.com/bC7DM0t.png)




**版面上有投影片自動切換我們使用了carousel。**
![](https://i.imgur.com/QIg2rnv.png)


![](https://i.imgur.com/dYGvZQO.png)



**版面設計colum使用layout的Grid。
並且設定匯率的數字，用decimal定義匯率比較精準。**


![](https://i.imgur.com/yeZugQB.png)
使用component card來製作每個國家匯率卡
![](https://i.imgur.com/mu6jNLj.png)

![](https://i.imgur.com/ESsUzYh.png)




再用layout Grid 將匯率卡水平整齊排列，按照比率去排
![](https://i.imgur.com/kpclmLx.png)




開始建立內容，有自動投影片，有各國匯率卡，有銀行官方新聞。

首先先在model的地方建立首頁的homeviewmodel service
因為要建立動態匯率先將CurrencyCode定義出來
![](https://i.imgur.com/TcbdiMd.png)


![](https://i.imgur.com/l4KcCvW.png)


為了複製同樣的動態匯率卡片，裡面採用foreach的方式將各個國家匯率渲染出來，並且將買進賣出的匯率InRate和OutRate show出來。
![](https://i.imgur.com/VaCPuL3.png)



同樣使用foreach的方式將新聞的標題和內容的item渲染出來

![](https://i.imgur.com/vUeJAHV.png)

![](https://i.imgur.com/MKR5ts1.png)

![](https://i.imgur.com/TL9XW2E.png)




## 登錄頁面layout



![](https://i.imgur.com/8xmZDfe.png)

![](https://i.imgur.com/rnJ6jse.png)











**我們開一個類別叫LoginService。
把帳號預設為johnny密碼為123。以便我們作品範例執行之後繼續開發。**

![](https://i.imgur.com/U6UNca1.png)

![](https://i.imgur.com/oqgIxPI.png)



![](https://i.imgur.com/GeORI42.png)



![](https://i.imgur.com/ZvIxymA.png)



## 消費者註冊頁面


![](https://i.imgur.com/73zW6Sb.png)




![](https://i.imgur.com/MdhYu5K.png)