基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（一）

## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 給專案瘦身，讓它跑起來](https://www.cnblogs.com/meowv/p/12896898.html)** 3. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 完善與美化，Swagger登場](https://www.cnblogs.com/meowv/p/12909558.html)** 4. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 資料訪問和程式碼優先](https://www.cnblogs.com/meowv/p/12913676.html)** 5. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 自定義倉儲之增刪改查](https://www.cnblogs.com/meowv/p/12916613.html)** 6. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 統一規範API，包裝返回模型](https://www.cnblogs.com/meowv/p/12924409.html)** 7. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 再說Swagger，分組、描述、小綠鎖](https://www.cnblogs.com/meowv/p/12924859.html)** 8. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 接入GitHub，用JWT保護你的API](https://www.cnblogs.com/meowv/p/12935693.html)** 9. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 異常處理和日誌記錄](https://www.cnblogs.com/meowv/p/12943699.html)** 10. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用Redis快取資料](https://www.cnblogs.com/meowv/p/12956696.html)** 11. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 整合Hangfire實現定時任務處理](https://www.cnblogs.com/meowv/p/12961014.html)** 12. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 用AutoMapper搞定物件對映](https://www.cnblogs.com/meowv/p/12966092.html)** 13. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（一）](https://www.cnblogs.com/meowv/p/12971041.html)** 14. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（二）](https://www.cnblogs.com/meowv/p/12974439.html)** 15. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（三）](https://www.cnblogs.com/meowv/p/12980301.html)** 16. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（一）](https://www.cnblogs.com/meowv/p/12987623.html)** 17. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（二）](https://www.cnblogs.com/meowv/p/12994914.html)** 18. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（三）](https://www.cnblogs.com/meowv/p/13039883.html)** 19. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（四）](https://www.cnblogs.com/meowv/p/13043084.html)** 20. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（五）](https://www.cnblogs.com/meowv/p/13046603.html)** --- ## 前言從今天開始將使用 Blazor 完成部落格的前端開發，如果你不瞭解 [Blazor](https://blazor.net/) ，建議你還是去微軟官網學習學習基礎知識。本篇不做普及，因為這是實戰系列，重點是完成專案開發。還有，在開始 Blazor 實戰之前，建議動手完成之前的系列文章，這樣更有連貫性，不至於懵圈。因為我也是第一次使用 Blazor 開發專案，所以無法保證程式碼的最優性，如果有不對的地方，或者有更好的做法，歡迎大家指正，謝謝。接下來，我將現學現做帶來一個完整的部落格專案，來吧，Just do it 。我這裡選擇的是 Blazor WebAssembly，需要你有 .NET Core 3.1 的開發環境，並且你還要有 Visual Studio 2019 IDE。給大家看看我的開發環境，終端工具是：Window Terminal ，配置一下用起來太爽了，五星強烈推薦。 ![0](https://img2020.cnblogs.com/blog/891843/202006/891843-20200607205414486-945023053.png) ## 搭建 > Blazor WebAssembly 是一個單頁應用框架，可用它通過 .NET 生成互動式客戶端 Web 應用。 Blazor WebAssembly 使用開放的 Web 標準（沒有外掛或程式碼轉換），適用於移動瀏覽器等各種新式 Web 瀏覽器。 > ... 不囉嗦了，直接開幹吧，在專案中新建 Blazor Web 應用。 ![1](https://img2020.cnblogs.com/blog/891843/202006/891843-20200607205832925-1719016827.png) 然後將專案設定為啟動專案，Ctrl+F5 執行一下看看，官網預設示例我這裡也懶得說了，直接進入主題吧。 ## 改造我這裡使用的UI還是我目前部落格的樣式，你可以選擇任意你喜歡的UI介面，這部分就隨意了，不是本實戰系列的重點，所以有關樣式這些東西我就直接 Ctrl CV 了。替換下面css程式碼到 wwwroot/css/app.css 中。

點選檢視程式碼

```css *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]-moz-focusring, [type="reset"]-moz-focusring, [type="submit"]-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } @font-face { font-family: 'Fira Code Medium'; src: url('https://static.meowv.com/fonts/FiraCode-Medium.woff2') format('woff2'), url("https://static.meowv.com/fonts/FiraCode-Medium.woff") format("woff"); font-weight: 500; font-style: normal; } html { font-family: 'Fira Code Medium', Microsoft Yahei, monospace; overflow-x: hidden; } html::-webkit-scrollbar { width: 5px; height: 5px; } html::-webkit-scrollbar-thumb { height: 20px; background-color: #5A9600; } html::-webkit-scrollbar-thumb:hover { background-color: #5A9600; } body { font-size: 11pt; font-weight: normal; line-height: 2em; background-color: #fff; color: #161209; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; } body:before { content: ""; background-repeat: no-repeat; background-position: center; opacity: 0.05; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } body.dark-theme { background-color: #292a2d; color: #a9a9b3; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; } a { color: #161209; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; cursor: pointer; } a:hover { color: #5A9600; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; } .dark-theme a { color: #a9a9b3; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; } .dark-theme a:hover { color: #fff; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; } .wrapper { display: flex; flex-direction: column; min-height: 100vh; width: 100%; } .navbar { height: 4rem; line-height: 4rem; width: 100%; } .navbar .container { width: auto; max-width: 1200px; text-align: center; margin: 0 auto; display: flex; justify-content: space-between; } .main { flex-grow: 1; flex-shrink: 0; flex-basis: auto; } .container { padding-left: 1em; padding-right: 1em; } .footer { width: 100%; text-align: center; } /*input css begin*/ * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } input[type="checkbox"], input[type="radio"] { display: none; width: 0; height: 0; visibility: hidden; } input[type="checkbox"]:checked + label:after { transition: all 0.3s ease-in; } input[type="checkbox"]:not(:checked) + label:after { transition: all 0.3s ease-out; } input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label { transition: all 0.3s ease-in-out; } input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + label i:before, input[type="checkbox"]:not(:checked) + label i:before, input[type="checkbox"]:checked + label i:after, input[type="checkbox"]:not(:checked) + label i:after, input[type="checkbox"]:not(:checked) + label:before { transition: all 0.3s ease-in-out; } input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after { transition: all 0.3s ease-in-out; } .switch_default + label { background-color: #e6e6e6; border-radius: 7px; cursor: pointer; display: inline-block; height: 14px; position: relative; box-shadow: 0.2px 0.2px 1px 0.5px rgb(180, 180, 180); width: 30px; } .switch_default + label:after { background-color: #fff; border-radius: 50%; content: ""; height: 12px; left: 1px; position: absolute; top: .5px; width: 12px; box-shadow: 0.2px 0.2px 1px 0.5px rgb(180, 180, 180); } .switch_default:checked + label { background-color: #1ABC9C; box-shadow: none; } .switch_default:checked + label:after { left: 17px; } @font-face { font-family: "iconfont"; src: url('//at.alicdn.com/t/font_1313145_r9szngeugmj.eot?t=1566619028667'); /* IE9 */ src: url('//at.alicdn.com/t/font_1313145_r9szngeugmj.eot?t=1566619028667#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAiMAAsAAAAAD1QAAAg+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDdAqRCI1TATYCJAMgCxIABCAFhG0HXhvDDFGUcFIP2c+CnCw3FdS0XDPVbunm+E8fE3Kh6ue/bf25c6cYjLF6zMIMaivAjSQGxCJXNjJwM/BFbdbXczPwNb5ueXi7vbv7y5IszKOA2/IoDoIWp4GmlieQNKkzrZalJCXDA+JcJDsu8Qa0obxaKz0SBAprr8Pya68FDD1xLPmjV6X13/Yu2UGLwt0ogQZU0TadboBznEq5XTozB57jZIAAcBIhD9CoGqEBFsnmIaQcFrMO2IIc2dGMsCK6YceQoM1AYfMaog8ANkW/j36QIRaAQBWwNxyzKY3Q+PFfc3jxIDY1UMKy5bQAIC4GgAHkAQApCu9GyVoAH+mtGBdNmg6Ad/4iBn7eL/Nr/K3+VQPNX3ODg5Vq8NGkCugA8I4dSMwF/3moApsfAIgxwAA/79GfWyADCRDAr7EABcAACZDAv4oEGDDQTAIIfM0J4IFB7Oo8ABQCEC8AXhmk1ovRGGdBLBjd8PEhEkmUKwkj7Q2XcCgpncW8lAwLD1RQiHpZRCPq2XFdPSZJ3VpOf+ZhInXgUYXu9IMEcu/9thnRJonEzeipaAUHrRb40G4oKdWek0KrqlNGvzvlfPb53B6P7vUa5LLhRpv+Zw0tVitpxk1GbHIT1GOTq0g3lxGJLwnzP3PXM67Ni/ReV/m8z3XQCRx2U8CB4ubYY42tYP8zB3DedYFj3iPehzZXg7jQNGGpSdyWZUrVOM4BsDiENpWAUjmGclVtXimBYkVhTA6glC2CGUKEKYGMTqFAm8jIEglCiWVMAVfAK7R4waZoiZa8fLLKuRYsBEfBoro9YU2ScTwGn4PTrhTr1J7G+5+ZNb5LVzt8ywqc80TgwCGPGcZB6Ww+qVeunp71mz0/R8o9PS3t9eQ4AASOuAFfmOU3UDoKQSY0oPmcN0CoIxMRTTQ2lpYWUFoHYfZupcysO9TjOlmvK1cMwAZbLdVtCqvldfSJgPc1YcXQKW4mGjDFK7tJflBU3j8Y/Li047Pnj+79adS3ArfHp3VMyC2NSv+4dJ3El3ZqRz1cpT+Z+7Itr7FKLvr90rseudkbeoKjsHZJg5vj/a9M399PlAsGE4Ml1FSqcksTTM5zlPCRCmmDqJfKttsWUfJZHW9U3kJw12FvhEG7RGgIQM5LEaOoDEzglhAOWbmJnGRbgtuCKAbDsi7hrTfVVdskAPrXon3RbM0E1gR02BFPwMU1Q0iRtpjK/O0YK4LPUVL4TfNW8s3btybD9+0LDX9/9vCTIwaOjFe7+D9yPnGdcEWEs+yq347wxL0ohLvwEyfY+henIWkPEYKNI088lFHaoT6EJ0xHV80n5hFBF2EizJRkuyqYMkSNRWPrDestoO0c1WnAs3ffYRi+7dzaFcRG4vI+3A2KyelHcdMsVVsbI5L3E9h0dPVwh+DJ9GSszlx9fxKjeotDabJW4/NpSjWRPooAYz4/UqPaNk8xbzdEy6MTcKm89JovnDkR4UmPL/0uVZriLpGW+OTXx60ZO5cJp9xUCm2mwum5Y9eMuy73lUhT3bKuRUvj0z0RJ+hw2k0nEwWMqVSYZe5UUGClzHTKdHU4Q5oSdwoE34G2NA0Xok63Ct4Gb+Puht1C5W34lWoxKAN+qhtTCz9FlOwLg6pWTltGzvMeXkRMhk0T04eFUvFjhqhw3Infqybsnz4wJZB7Yg+62BPqUTkaFWAsni3kjLwPO19nJqpb/poAtJqmP0dpE9OrJ3iWZp4dyqQSp3NIa3llctmQYRPDhqlOZ8QqoqMXf1qR+NUIe8xHExICSuPClqlN2Y0PpzwNP1iLfJcuBXKvr14F30xvVt++/fv2+bK8f3+v/nf5EvTbvNmv9+6rkdzJNDZ+DVev+hZt4+0jB/fPn3YW6sOPP8+B8GhxP5WZSfUT79yS7C9PASndzqvVkXljwP+iUVyPJ05eXxV6ajK5yYK3cXHKdZOYoRlYyQ4r/Hj1x/53UrI4gxk6aV2cksNbN1mmUK9GZ8AmKaTsL78lId4h+zMz074Ju115mr3Y3Ou+tHirQR3K8vr98suK/3tWastt6WV5pexWOjwonO6mZfmySNBcWq2X782vGaqUbD6wWLlaufjAZolyTYFOXsYT3MM0HIrpCfYwyqE1+b3FCtlTtyJIodVyBzx29C+ZIlE7vq43FdKebtggp1uYHsZbTv7333+lQWpv3Xj55FbFaoVUsSZCBvVYucWbNtddcvOmxRzfHedt7RsY6HP3vfbBIgAAgx/ja1hA9z/4E0wt3kfm4WIAABLxaN3/kggj7wIyFi9G8Ba+hGvfTCvBs+p7qhnBtb+x0j+rKS9WPt1O1OHAvARgEUBkvIeiIg9gcDBgGSwo2NAYXv8+A7f0wb2sXgj2EgA4ZxzA28ccCv1LCiM4xstOGJGhCYwENMZKA5Cs4wQpUqVA01gNaE4uqHeXCgMHDIUEAHJgBUMjPLyNJgS5ysVNkDtcEhAfmhIJ33Fo1COM5rSksANKZSALJ3eIOpdoFPRzBIvB2mVyVS4uTh0nmmd16BzE4tdqER1Oi7VLKC4oskJqsUt0LLGJs9ssc7lMgslh7RRUbAOxo8Mq2BzWNtHgKmhF0FZdWGiSNy0wWDuBI+cg0nEF+EYC6M0htzCw6mKa3IWr/Pw4IrNZOug4Omrq5C1EDk6W+QtQDAVQNACg5ncNqnmUbKduZjJwkdZE8IodrDoJoCKtqMPxWwlga16ujcjApQBaJ3htqqGQBjMN5RdsL+z8pecAwLEPwyYCYUQiCtGIQSySAPnxnspIu0XLbEsX3anr0plFrLNZSIPVKNJmi6t1lp7qsrpEJwAAAA==') format('woff2'), url('//at.alicdn.com/t/font_1313145_r9szngeugmj.woff?t=1566619028667') format('woff'), url('//at.alicdn.com/t/font_1313145_r9szngeugmj.ttf?t=1566619028667') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1313145_r9szngeugmj.svg?t=1566619028667#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .iconread:before { content: "\e742"; } .iconweixin:before { content: "\e632"; } .iconmanage:before { content: "\e610"; } .iconapi:before { content: "\e668"; } .iconcode:before { content: "\e654"; } .icongithub:before { content: "\ea0a"; } .iconnotes:before { content: "\e687"; } .header-logo a { padding: 0; } .navbar .menu a { padding: 0 8px; } .navbar .menu .active { font-weight: 900; color: #161209; } .dark-theme .navbar .menu .active { color: #fff; } .navbar-header a:hover, .navbar .menu a:hover { background-color: transparent; } header label { margin-left: 15px; position: relative; -webkit-transform: translateY(0.1em) translateX(0.5em); } .copyright { font-size: 14px; } .pagination { display: flex; flex-direction: row; justify-content: center; list-style: none; white-space: nowrap; width: 100%; padding-top: 2em; } .pagination a, .pagination span { -webkit-font-smoothing: antialiased; font-size: 12px; color: #bfbfbf; letter-spacing: 0.1em; font-weight: 700; padding: 5px 5px; text-decoration: none; transition: 0.3s; } .pagination .page-number { padding-bottom: 3px; margin: 0 20px; box-sizing: border-box; position: relative; display: inline; } .pagination .page-number.disabled { display: none; } .pagination .page-number:hover a { color: #000; } .dark-theme .pagination .page-number:hover a { color: #fff; } .pagination .page-number:before, .pagination .page-number:after { position: absolute; content: ""; width: 0; height: 1px; background: #000; transition: 0.3s; bottom: 0px; } .dark-theme .pagination .page-number:before, .dark-theme .pagination .page-number:after { background: #fff; } .pagination .page-number:before .current, .pagination .page-number:after .current { width: 100%; } .pagination .page-number:before { left: 50%; } .pagination .page-number:after { right: 50%; } .pagination .page-number:hover:before, .pagination .page-number:hover:after { width: 50%; } .pagination .page-number.current { color: #000; } .dark-theme .pagination .page-number.current { color: #fff; } .pagination .page-number.current:before, .pagination .page-number.current:after { width: 60%; } .intro { transform: translateY(20vh); text-align: center; } .intro .avatar { padding: 10px; } .intro .avatar img { width: 128px; height: auto; display: inline-block; -webkit-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05); box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05); margin: 0 auto; -webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; -o-transition: all ease 0.4s; transition: all ease 0.4s; cursor: pointer; } .intro .avatar img:hover { position: relative; -webkit-transform: translateY(-0.75em); -moz-transform: translateY(-0.75em); -ms-transform: translateY(-0.75em); -o-transform: translateY(-0.75em); transform: translateY(-0.75em); cursor: pointer; } .nickname { font-size: 2em; font-weight: normal; } .links a { padding: 0 5px; } .links a:hover { background-color: transparent; } .links .iconfont { font-size: 2em; } .post-wrap { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; padding-top: 2rem; } .archive-item-date { float: right; text-align: right; color: #a9a9b3; } .dark-theme .archive-item-date { color: #87878d; } .post-wrap .categories-card { margin: 0 auto; margin-top: 1em; display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; padding: 0 2.5em; line-height: 1.6em; } .post-wrap .categories-card .card-item { font-size: 14px; text-align: left; width: 50%; display: flex; align-items: flex-start; position: relative; } .post-wrap .categories-card .card-item .categories { overflow: hidden; } .categories h3 { display: inline-block; } .categories span { float: right; padding-right: 1em; } .categories .more-post-link { float: right; } .tag-cloud-tags { margin: 10px 0; padding-top: 2em; } .tag-cloud-tags a { display: inline-block; position: relative; margin: 5px 10px; word-wrap: break-word; transition-duration: 0.3s; transition-property: transform; transition-timing-function: ease-out; } .tag-cloud-tags a:active, .tag-cloud-tags a:focus, .tag-cloud-tags a:hover { color: #5A9600; transform: scale(1.1); } .dark-theme .tag-cloud-tags a:active, .dark-theme .tag-cloud-tags a:focus, .dark-theme .tag-cloud-tags a:hover { color: #fff; } .tag-cloud-tags a small { margin: 0 0.3em; color: #a9a9b3; } .dark-theme .tag-cloud-tags a small { color: #fff; } .page { padding-top: 0; } .page .post-content { margin: 0; padding-top: 0; } .post-wrap p { font-size: 1em; margin: 0.5em 0 0.5em 0; } .post-wrap .post-header h1 { margin: 0 !important; } .post-wrap .post-title { font-size: 2em; line-height: 1.5em; } .post-wrap .eror-tip { text-align: center; line-height: 1.5em; margin-top: 250px; } .post-wrap .post-meta { color: rgba(85, 85, 85, 0.529) !important; } .dark-theme .post-wrap .post-meta { color: #87878d !important; } .post-wrap .post-meta a { color: #000; } .dark-theme .post-wrap .post-meta a { color: #eee; } .post-wrap .post-meta a:hover { color: #5A9600; } .dark-theme .post-wrap .post-meta a:hover { color: #fff; } .post-content { padding-top: 2rem; text-align: justify; } .post-copyright { margin-top: 5rem; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; } .post-copyright a { color: #000; } .dark-theme .post-copyright a { color: #eee; } .post-copyright a:hover { color: #5A9600; } .dark-theme .post-copyright a:hover { color: #fff; } .post-copyright .copyright-item { margin: 5px 0; } .post-copyright .lincese { font-weight: bold; } .dark-theme .post-copyright { border-top: 1px solid #909196; border-bottom: 1px solid #909196; } .post-tags { padding: 1rem 0 1rem; display: flex; justify-content: space-between; } .post-nav:before, .post-nav:after { content: " "; display: table; } .post-nav a.prev, .post-nav a.next { font-weight: 600; font-size: 16px; transition-property: transform; transition-timing-function: ease-out; transition-duration: 0.3s; } .post-nav a.prev { float: left; } .post-nav a.prev::before { content: "<"; margin-right: 0.5em; } .post-nav a.prev:hover { transform: translateX(-4px); } .post-nav a.next { float: right; } .post-nav a.next::after { content: ">"; margin-left: 0.5em; } .post-nav a.next:hover { transform: translateX(4px); } .post-nav a.prev::before, .post-nav a.next::after { font-weight: bold; } .tag:not(:last-child) a::after { content: " / "; } @media only screen and (min-device-width: 320px) and (max-device-width: 1024px) { .main { padding-top: 40pt; } .navbar { display: none; } .navbar-mobile { display: block !important; position: fixed; width: 100%; z-index: 100; transition: all 0.6s ease 0s; } .navbar-mobile .container { padding: 0; margin: 0; line-height: 5.5em; background: #fff; } .navbar-mobile .container .navbar-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-right: 1em; padding-left: 1em; box-sizing: border-box; position: relative; } .navbar-mobile .container .navbar-header .menu-toggle { cursor: pointer; line-height: 5.5em; padding: auto 2em; } .navbar-mobile .container .navbar-header .menu-toggle span { display: block; background: #000; width: 36px; height: 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: 0.25s margin 0.25s, 0.25s transform; -moz-transition: 0.25s margin 0.25s, 0.25s transform; transition: 0.25s margin 0.25s, 0.25s transform; } .dark-theme .navbar-mobile .container .navbar-header .menu-toggle span { background: #a9a9b3; } .navbar-mobile .container .navbar-header .menu-toggle span:nth-child(1) { margin-bottom: 8px; } .navbar-mobile .container .navbar-header .menu-toggle span:nth-child(3) { margin-top: 8px; } .navbar-mobile .container .navbar-header .menu-toggle.active span { -webkit-transition: 0.25s margin, 0.25s transform 0.25s; -moz-transition: 0.25s margin, 0.25s transform 0.25s; transition: 0.25s margin, 0.25s transform 0.25s; } .navbar-mobile .container .navbar-header .menu-toggle.active span:nth-child(1) { -moz-transform: rotate(45deg) translate(4px, 6px); -ms-transform: rotate(45deg) translate(4px, 6px); -webkit-transform: rotate(45deg) translate(4px, 6px); transform: rotate(45deg) translate(4px, 6px); } .navbar-mobile .container .navbar-header .menu-toggle.active span:nth-child(2) { opacity: 0; } .navbar-mobile .container .navbar-header .menu-toggle.active span:nth-child(3) { -moz-transform: rotate(-45deg) translate(8px, -10px); -ms-transform: rotate(-45deg) translate(8px, -10px); -webkit-transform: rotate(-45deg) translate(8px, -10px); transform: rotate(-45deg) translate(8px, -10px); } .navbar-mobile .container .menu { text-align: center; background: #fff; /*border-top: 1px solid #000;*/ padding-top: 1em; padding-bottom: 1em; display: none; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1); } .navbar-mobile .container .menu a { display: inline-block; margin: 0 1em; line-height: 2.5em; } .navbar-mobile .container .menu.active { display: block; white-space: nowrap; box-sizing: border-box; overflow-x: auto; } .dark-theme .navbar-mobile .container .menu { background: #292a2d; /*border-top: 1px solid #87878d;*/ } .dark-theme .navbar-mobile .container { background: #292a2d !important; } .archive { width: 90%; } .archive .archive-item .archive-item-date { display: none; } #dynamic-to-top { display: none !important; } .footer { height: 3rem; width: 100%; text-align: center; line-height: 1.5rem; padding-top: 2em; } .post-warp { padding-top: 6em; } .post-warp .archive-item-date { display: none; } .categories .categories-card .card-item { width: 100%; display: flex; min-height: 0; } .categories .categories-card .card-item .categories { overflow: hidden; } .signature-img { width: 100%; } .signature-box img { height: 100px !important; } .signature-img img { height: 100px; } .signature-action, .vip-action { width: 100%; } .signature-action select, .vip-action select { width: 100%; } .signature-action input, .vip-action input { width: 200px; float: left; margin-top: 5px; } .signature-action button, .vip-action button { width: 200px; margin-top: 5px; } .mta-box { width: 100% !important; } .mta-a ul li { width: 100% !important; } .navbar-mobile { display: none; } } @media only screen and (min-device-width: 768px) { .navbar-mobile { display: none; } } @media only screen and (min-width: 1024px) { .navbar-mobile { display: none; } } .loader { box-sizing: content-box; display: block; position: absolute; top: 50%; left: 50%; margin: 0; text-align: center; z-index: 1000; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .loader:before { position: absolute; content: ''; top: 0; left: 50%; width: 50px; height: 50px; margin: 0 0 0 -25px; border-radius: 50px; border: 4px solid rgba(0, 0, 0, .1); } .loader:after { position: absolute; content: ''; top: 0; left: 50%; width: 50px; height: 50px; margin: 0 0 0 -25px; animation: loader .6s linear; animation-iteration-count: infinite; border-radius: 50px; border: 4px solid transparent; border-top-color: #767676; box-shadow: 0 0 0 1px transparent; } @keyframes loader { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .dark-theme .post-content { background: #292a2d !important; color: #eee !important; } .dark-theme .post-content p code, .dark-theme .post-content ul li code { background: #292a2d !important; } .apps { color: red; font-weight: bold; } .signature-box { margin-top: 100px; text-align: center; } .signature-box img { border: none; height: 145px; margin-bottom: 50px; } .signature-action select, .vip-action select { height: 30px; } .signature-action input, .vip-action input { height: 25px; padding-left: 5px; } .signature-action input:focus, .vip-action input:focus { outline: none; } .signature-action button, .vip-action button { width: 135px; height: 30px; } .tag-cloud-tags-extend { padding-top: 0; } .hidden { display: none; } .vip-action { text-align: center; } .imgbox { width: 70%; text-align: center; margin: 80px auto 0; } .imgbox img { max-width: 100%; max-height: 100%; } .girl-qrcode { text-align: center; } .girl-img { width: 20%; } .btnbox { text-align: center; margin-top: 20px; } .tab-box { margin: 0 auto; margin-top: 50px; width: 1150px; } .top-tab { font-weight: bold; float: left; margin-top: 5px; } .top-tab ul li { list-style: none; } .top-tab ul li a.archive { color: #5A9600; } .top-content { float: left; } .top-content ul li { list-style: none; height: 35px; line-height: 35px; width: 888px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mta-box { width: 75%; margin: 100px auto 0; } .mta-a { margin: 20px 68px 50px 20px; } .mta-a ul { width: auto; display: none; } .mta-a ul li { float: left; width: 25%; list-style: none; } .mta-a-item { margin: 0 10px; border: 1px solid #e1e1e1; background: #fff; min-height: 60px; } .mta-a-title { padding: 16px 16px 0; height: 20px; line-height: 20px; } .mta-a-value { height: 100%; font-size: 30px; height: 24px; margin: 20px 0 20px 30px; } .mta-date { text-align: right; padding-right: 5px; } .dark-theme .mta-a-item { border: 1px solid #a9a9b3; background: transparent; } .qrcode { width: 120px; z-index: 99999; opacity: 0.8; margin: 20px auto 0; } .qrcode img { width: 100%; } .soul { text-align: center; margin-top: 200px; } .soul-btn { background-color: #5a9600; border: 5px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .soul-btn:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); } ```

在css中用到了開源的 FiraCode 字型，可以自己去下載，不過在css中我已經改為遠端地址了。刪掉 wwwroot/sample-data、wwwroot/css/bootstrap、wwwroot/css/open-iconic 三個資料夾。在wwwroot資料夾下，有一個index.html，這個是我們網站的入口，注意裡面有一對標籤：`Loading...`，這個標籤裡面的內容會在 wasm 載入完畢後自動清除掉，所以，一般可以用來做載入提示。現在改造一下`index.html`，程式碼如下： ```html </div> <div class="entry-footer"> <div class="entry-tag"> </div> <div class="entry-page"> <center><script type="text/javascript" src="/js/article.js"></script></center> </div> <h3 class="entry-related-title">相關推薦</h3> <style> .r{ margin-bottom:10px; border-bottom:1px solid #f1f1f1; padding-bottom:10px;} .r p{ color:#999; line-height:25px;} .r h5 a{ font-size:16px; line-height:25px;} .r h5 a:hover{ color:#ff6600} </style> <div class="r"> <h5><a href="/content/1591671722.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font><font color=red>一</font><font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1591758122.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font>二<font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1591844582.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font>三<font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1591929362.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font>四<font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1592017623.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font>五<font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1592190303.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font>六<font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1592276586.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font>七<font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1592362862.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font>八<font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1592457362.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - <font color=red>Blazor</font> <font color=red>實戰</font><font color=red>系列</font><font color=red>（</font>九<font color=red>）</font></a></h5> <p> ## 系列文章 1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)** 2. **[基於 abp vNext 和 .NET Core 開發部落格專案 </p> </div> <div class="r"> <h5><a href="/content/1589547786.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 使用 <font color=red>abp</font> cli 搭建<font color=red>專案</font></a></h5> <p> 首先，預設咱們已經有了.net core 3.1的開發環境，如果你沒有，快去下載... https://dotnet.microsoft.com/download 由於專案是基於abp vNext開發的，所以開發之前建議去擼一遍abp官方文件，https://docs.abp.io/en/abp/lates </p> </div> <div class="r"> <h5><a href="/content/1589716863.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 給<font color=red>專案</font>瘦身，讓它跑起來</a></h5> <p> 上一篇文章(https://www.cnblogs.com/meowv/p/12896177.html)已經成功建立了部落格專案，但是abp預設給我們引用了許多專案中用不到的元件。本篇文章將給專案進行瘦身，刪掉對我們來說暫時用不到的元件。講解各個模組之間的關係，寫一個Hello World，讓其成功執行起 </p> </div> <div class="r"> <h5><a href="/content/1589807044.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 完善與美化，Swagger登場</a></h5> <p> 上一篇文章(https://www.cnblogs.com/meowv/p/12896898.html)已經成功將部落格專案跑起來了，那麼本篇主要是將之前遺留的問題解決，現在的程式碼看起來可能還是比較混亂，有大量與之無關的程式碼存在裡面，對於強迫症患者來說真的是零容忍。在程式設計師界，總有一批強迫症患者， </p> </div> <div class="r"> <h5><a href="/content/1589875622.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 資料訪問<font color=red>和</font>程式碼優先</a></h5> <p> 上一篇文章(https://www.cnblogs.com/meowv/p/12909558.html)完善了專案中的程式碼，接入了Swagger。本篇主要使用Entity Framework Core完成對資料庫的訪問，以及使用Code-First的方式進行資料遷移，自動建立表結構。 ## 資料訪問在 </p> </div> <div class="r"> <h5><a href="/content/1589971745.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 自定義倉儲之增刪改查</a></h5> <p> 上一篇文章(https://www.cnblogs.com/meowv/p/12913676.html)我們用Code-First的方式建立了部落格所需的實體類，生成了資料庫表，完成了對EF Core的封裝。本篇說一下自定義倉儲的實現方式，其實在abp框架中已經預設給我們實現了預設的通用(泛型)倉儲，`I </p> </div> <div class="r"> <h5><a href="/content/1590045725.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 統一規範API，包裝返回模型</a></h5> <p> 上一篇文章(https://www.cnblogs.com/meowv/p/12916613.html)使用自定義倉儲完成了簡單的增刪改查案例，有心的同學可以看出，我們的返回引數一塌糊塗，顯得很不友好。在實際開發過程中，每個公司可能不盡相同，但都大同小異，我們的返回資料都是包裹在一個公共的模型下面的，而不 </p> </div> <div class="r"> <h5><a href="/content/1590116822.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 再說Swagger，分組、描述、小綠鎖</a></h5> <p> 在開始本篇正文之前，解決一個 @瘋瘋過指出的錯誤，再次感謝指正。 ![0](https://img2020.cnblogs.com/blog/891843/202005/891843-20200521140310243-1483710674.png) 步驟如下： * 刪掉`.Domain.Shared </p> </div> <div class="r"> <h5><a href="/content/1590203284.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 接入GitHub，用JWT保護你的API</a></h5> <p> 上一篇文章(https://www.cnblogs.com/meowv/p/12924859.html)再次把Swagger的使用進行了講解，完成了對Swagger的分組、描述和開啟小綠鎖以進行身份的認證授權，那麼本篇就來說說身份認證授權。開始之前先搞清楚幾個概念，請注意認證與授權是不同的意思，簡單理解： </p> </div> <div class="r"> <h5><a href="/content/1590374345.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 異常處理<font color=red>和</font>日誌記錄</a></h5> <p> 在開始之前，我們實現一個之前的遺留問題，這個問題是有人在GitHub Issues(https://github.com/Meowv/Blog/issues/8)上提出來的，就是當我們對Swagger進行分組，實現`IDocumentFilter`介面添加了文件描述資訊後，切換分組時會顯示不屬於當前分組的Ta </p> </div> <div class="r"> <h5><a href="/content/1590474245.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 使用Redis快取資料</a></h5> <p> 上一篇文章(https://www.cnblogs.com/meowv/p/12943699.html)完成了專案的全域性異常處理和日誌記錄。在日誌記錄中使用的靜態方法有人指出寫法不是很優雅，遂優化一下上一篇中日誌記錄的方法，具體操作如下：在`.ToolKits`層中新建擴充套件方法`Log4NetE </p> </div> <div class="r"> <h5><a href="/content/1590553922.html" target="_blank"><font color=red>基於</font> <font color=red>abp</font> <font color=red>vNext</font> <font color=red>和</font> .<font color=red>NET</font> <font color=red>Core</font> <font color=red>開發</font><font color=red>部落</font><font color=red>格</font><font color=red>專案</font> - 整合Hangfire實現定時任務處理</a></h5> <p> 上一篇文章(https://www.cnblogs.com/meowv/p/12956696.html)成功使用了Redis快取資料，大大提高部落格的響應效能。接下來，將完成一個任務排程中心，關於定時任務有多種處理方式，如果你的需求比較簡單，比如就是單純的過多少時間迴圈執行某個操作，可以直接使用.net </p> </div>  </div> </div> </article> </div> <aside class="sidebar"> <div id="search-7" class="widget widget_search"> <h3 class="widget-title">搜尋</h3> <form name="formsearch" class="search-form" action="https://www.796t.com/public/api.php" method="get"> <input type="hidden" name="app" value="search"/> <input type="text" class="keyword" name="q" placeholder="輸入關鍵詞..." value=""> <input type="submit" class="submit" value=""> </form> </div> <div id="wpcom-image-ad-4" class="widget widget_image_ad"></div> <div id="tag_cloud-3" class="widget widget_tag_cloud"> <h3 class="widget-title">基礎教學</h3> <div class="tagcloud"> <a href="https://www.796t.com/category.php?cid=18" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Mysql入門</a> <a href="https://www.796t.com/category.php?cid=19" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Sql入門</a> <a href="https://www.796t.com/category.php?cid=20" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Android入門</a> <a href="https://www.796t.com/category.php?cid=21" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Docker入門</a> <a href="https://www.796t.com/category.php?cid=22" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Go語言入門</a> <a href="https://www.796t.com/category.php?cid=23" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Ruby程式入門</a> <a href="https://www.796t.com/category.php?cid=24" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python入門</a> <a href="https://www.796t.com/category.php?cid=25" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python進階</a> <a href="https://www.796t.com/category.php?cid=26" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Django入門</a> <a href="https://www.796t.com/category.php?cid=27" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python爬蟲入門</a> </div> </div> <div id="wpcom-image-ad-12" class="widget widget_image_ad"> </div> <div id="wpcom-post-thumb-3" class="widget widget_post_thumb"> <h3 class="widget-title">最近訪問</h3> <ul> <p><a href="/content/.html" style="font-size:16px;"> </a> </p> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li id="menu-item-109589" class="menu-item current-menu-item current_page_item menu-item-109589"><a href="https://www.796t.com/" aria-current="page">首頁</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=9">前端設計</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=10">程式設計</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=13">免費資源</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=14">實用技巧</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=15">資料庫</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=29">資訊</a></li><li class="menu-item menu-item-373"><a href="https://www.3du.tw/zidian.php">字典</a></li></ul> <div class="copyright"> <p>Copyright © 2002-2020 <a href="https://www.796t.com/">程式人生</a> 796T.COM All rights reserved. </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <style> .footer{padding-bottom: 20px;} </style> <script type="text/javascript" src="/css/main.js"></script> <script type="text/javascript" src="/css/wp-embed.js"></script> <script type="text/javascript" src="/css/lazysizes.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.1.2/styles/atelier-estuary-light.css"> <script>hljs.initHighlightingOnLoad();</script> </body> </html>