Blog專案 - 親手造一個Blog
大家好我是Mike,是一個大學畢業3年才開始學Coding的自學Programmer。
你所在的這個網站是我親手做的,作為一個學習紀錄為主的Blog,第一篇文章也是寫這個Blog怎樣實現。
^寫第一篇文章時的模樣,架在自家IIS上
做這個網站的主要目的是以強化技能為主,因此framework的選擇也很簡單
前端: 比webform新一點的MVC<
...(more)
Blog專案 - 初步結構
新增asp.net core的MVC專案後
Visual Studio會自動生成一個包含Controllers, Models和Views
相信大家都了解這3個的作用 Controller負責接收request,呼叫Model處理邏輯後return結果給request Model負責邏輯部份,例如CRUD、算法之類 View是視圖,傳給request ...(more)
Visual Studio會自動生成一個包含Controllers, Models和Views
相信大家都了解這3個的作用 Controller負責接收request,呼叫Model處理邏輯後return結果給request Model負責邏輯部份,例如CRUD、算法之類 View是視圖,傳給request ...(more)
Blog專案 - 首頁列表 (Controller, Model, View, css)
首頁的思維是這樣的
是一個列表,預覽文章
左邊是Blog、右邊是sidebar
下方有頁碼
那麼立即開始
首先新建Controller/BlogController.cs、Models/Blog、Views/Blog/index.cshtml
給未寫過MVC的朋友簡單說明一下,Controller負責最外層接request,Model負責內 ...(more)
首先新建Controller/BlogController.cs、Models/Blog、Views/Blog/index.cshtml
給未寫過MVC的朋友簡單說明一下,Controller負責最外層接request,Model負責內 ...(more)
Blog專案 - 內文 (Controller, view)
內文很簡單,就是詳細讀一篇文章,基本上比首頁列表模式更簡單,所以立即看代碼吧。
public class BlogController : Controller
{
[Route("/blog/{id:int}")]
public IActionResult Individual(int id)
{
ViewData["Blo
...(more)
Blog專案 - 連接DB
目前的進度
首頁文章列表 (Controller & View)
內文
連接DB
閱讀文章的基本功能已經大致完成,但還沒有文章,所以現在開始著手寫連接DB的部份
前文提到當我們request /blog或者/blog/{id} 時,會執行BlogFactory的2個Method,從database裡面抓取 ...(more)
首頁文章列表 (Controller & View)
內文
連接DB
閱讀文章的基本功能已經大致完成,但還沒有文章,所以現在開始著手寫連接DB的部份
前文提到當我們request /blog或者/blog/{id} 時,會執行BlogFactory的2個Method,從database裡面抓取 ...(more)
Blog專案 - 創造文章
上一篇文章做到的進度是:
能讀DB抓文章進Views
能根據傳進Views的Data產生文章列表
能點進去看內文 那基本上Blog最最基礎的部份就達成了,接下來應該開始寫文章,不然其他功能都用不到 當初計劃本站的時候是打算把文章用markdown語法儲存在DB
再找方法把markdown parse成html顯示出來
所以b ...(more)
能根據傳進Views的Data產生文章列表
能點進去看內文 那基本上Blog最最基礎的部份就達成了,接下來應該開始寫文章,不然其他功能都用不到 當初計劃本站的時候是打算把文章用markdown語法儲存在DB
再找方法把markdown parse成html顯示出來
所以b ...(more)
blog專案 - 點擊圖片縮放
新增了一個圖片縮放的功能
https://github.com/fat/zoom.js
它是一個很簡單的插件,所有擁有attribute data-action="zoom"的img元素都具有放大功能 <img src="img/blog_post_featured.png" data-action="zoom"> ...(more)
https://github.com/fat/zoom.js
它是一個很簡單的插件,所有擁有attribute data-action="zoom"的img元素都具有放大功能 <img src="img/blog_post_featured.png" data-action="zoom"> ...(more)
Blog專案 - IIS Hosting - 把網站公開到網路上
發現有些朋友即使已經工作幾年了,沒碰過Web的話還是會不懂Web Hosting的機制,所以今天寫一篇關於Hosting的文章。
我們開發了網站,當然要讓自己以外的人也能訪問到網站。按照之前的教程,我們已經有一個具備基本功能的Web Application project,它其實是一個用來接收Http request的程式,當接收到有效的Http request時,就回傳一個html給要求者
...(more)
Blog專案 - 增加頂置功能
如圖所示,可以頂置文章了
頂置功能本身很簡單就能想像如何實現吧
加一個叫pin的int欄位,抓文章列表時加一個order by pin desc,沒其他花招 這次想講的反而是
當我們想要新增一個功能時,似乎增加欄位不一定是個好做法
像現在要為文章增加一個欄位,pin這個欄位幾乎肯定只有一兩個有值,不可能幾十篇文章都頂置< ...(more)
如圖所示,可以頂置文章了
頂置功能本身很簡單就能想像如何實現吧
加一個叫pin的int欄位,抓文章列表時加一個order by pin desc,沒其他花招 這次想講的反而是
當我們想要新增一個功能時,似乎增加欄位不一定是個好做法
像現在要為文章增加一個欄位,pin這個欄位幾乎肯定只有一兩個有值,不可能幾十篇文章都頂置< ...(more)
Blog專案 - Table Design難題
Blog table內有tags這個varchar欄位
value為"tag1, tag2, tag3"這樣
當以tag搜尋文章時,就用sql以%tag%方式去找 但問題是
當blog 1的tags是test
blog 2的tags是iq-test
如果我用%test%去找,會連帶blog2都找出來,這 ...(more)
value為"tag1, tag2, tag3"這樣
當以tag搜尋文章時,就用sql以%tag%方式去找 但問題是
當blog 1的tags是test
blog 2的tags是iq-test
如果我用%test%去找,會連帶blog2都找出來,這 ...(more)