vu3＋.net6 webApi 書簽管理項目 前言 Gitee項目地址：https://gitee.com/zyplj/book-marks Github項目地址：https://github.com/ZyPLJ/BookMarks 作為一個bug程式員，保存了很多書簽，直接用瀏覽器的每次都還要找 ...
vu3＋.net6 webApi 書簽管理項目
前言
Gitee項目地址：https://gitee.com/zyplj/book-marks
Github項目地址：https://github.com/ZyPLJ/BookMarks
作為一個bug程式員，保存了很多書簽，直接用瀏覽器的每次都還要找，很麻煩，比如我自己的Google瀏覽器就200多個書簽。所以做了個簡單的項目去管理他們，同樣該項目可以作為vue3、.net6 webApi入門項目，很容易上手。
部署項目需要用到.net6 SDK,百度去官網下載即可。
使用到的技術
- 前端：vue3
- 後端：.net core webApi，EF Core
- 資料庫：mysql
- 插件：VueUse-useDark（切換主題），一為API（通過url獲取網站圖標），x-pageList（分頁）
前端地址
項目截圖
初始化書簽界面
查看所有書簽-可以模糊查詢，分頁。
書簽置頂欄-只能置頂12個書簽，剛好一頁。
點擊跳轉
主題切換
項目部署
建議採用Docker部署，方便快捷，還可以部署在自己電腦的本地，非常的nice
Docker下載鏈接：https://docs.docker.com/
後端部署
首先確保有資料庫，如果沒有則根據圖片去創建，或者採用codefirst模式，或者執行sql文件，都行，3選1。
codefirst模式就不做演示了，需要的話可以去看我的另一個博客項目中有寫。
博客項目地址：https://gitee.com/zyplj/personalblog
資料庫名 BookMark
資料庫表結構：
bookmarks表：
主鍵不需要自增
bookTops表：
主鍵需自增
class表：
主鍵需自增
資料庫創建完成後就要修改項目的連接字元串了，如果不採用codefirst模式生成資料庫，則只需要修改 Program.cs中的connStr即可，註意後面5,7,40是mysql資料庫的版本號！
Server=資料庫地址;Port=埠;Database=BookMark; User=root;Password=123456;
Server=localhost;Port=3306;Database=BookMark; User=root;Password=123456;
開始部署
打包項目，Visual Studio 2022去官網下免費的，然後步驟在博客項目中可以看到。
如果沒有Visual Studio 2022如何打包呢，可以使用命名行，進入項目BrowserBookmarks目錄（bin文件的那一層），輸入dotnet publish即可
然後在BrowserBookmarks\bin\Debug\net6.0\publish 中可以看到打包的項目，打包後目錄如圖所示：
如果沒有Dockerfile文件，可以使用本項目中的參考的文件copy進去
進入書簽項目部署的目錄，打開控制台，輸入docker build -t 名稱 .，如圖：可以和我一樣的名稱
然後等待鏡像下載完成，繼續輸入docker run -d --restart=always -p 9031:9031 --name 名稱 名稱，--restart=always讓容器開機自動啟動。如圖：
出現一串字元就代表docker部署成功了。
註意埠號本項目預設9031，如果需要更改則要更改後端Dockerfile文件和Program.cs文件，如圖：
前端部署
首先需要修改項目目錄http中index.ts中httApi的值，它取決於你的後端部署url
然後修改初始化書簽組件中上傳文件的url路徑
可以去看一下我的博客園文章，步驟一樣。
https://www.cnblogs.com/ZYPLJ/p/17103691.html
跨域問題
需要修改Program.cs中文件代碼，根據自己去修改，如果是本地則只需要關註埠號，如圖所示：
項目使用介紹
怎麼使用呢，非常簡單，只需要找到你使用的瀏覽器的Boolmarks文件目錄即可，然後上傳文件。
//這是我的Google瀏覽器目錄
C:\Users\Lenovo\AppData\Local\Google\Chrome\User Data\Default\Bookmarks
遇到問題
