vue+.net入门级书签项目
vu3+.net6 webApi 书签管理项目
本项目已接入ChatGpt
前言
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(分页)
接口文档
如何用控制台运行项目 :点击跳转
.net6 webapi自带Swagger接口文档,运行项目后,根据运行的url地址和端口号可以访问Swagger,如图所示:
前端地址
项目截图
新增原神首页
可以跳转最近很火的AI chatgpt
新增筛选功能
初始化书签界面
查看所有书签-可以模糊查询,分页。
书签置顶栏-只能置顶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即可
然后在BrowserBookmarksinDebug
et6.0publish 中可以看到打包的项目,打包后目录如图所示:
如果没有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:UsersLenovoAppDataLocalGoogleChromeUser DataDefaultBookmarks
更新日记
2023/3/5
新增书签筛选,一开始准备用vue前端filter去解决,但是分页只展示12个书签。所以还是用后端去解决了,新增Classid参数。修改了书签的排列顺序,最新添加的书签将放在最前面。
优化了linq查询,将join联表换成了导航属性查询。
遇到问题
相关文章
- 设计模式已经陨落了?
- 普通人约架去公园,程序员约架去Github:Git提高战斗力
- 从C#到Object C转型开发:分析两者之间的差异
- 程序员初学者如何自学编程另类版
- 记录我与DHT爬虫那些激情岁月
- 坐在马桶上看算法:快速排序
- 能让你成为更优秀程序员的10个C语言资源
- 成为一个PHP专家:缺失的环节
- 排名前十的PHP调试工具,你认可吗?
- 最大开源项目:玩游戏就能学会编程
- 众筹平台盘点:当创业遇上互联网金融
- 从“黑掉Github”学Web安全开发
- 一个“蝇量级”C语言协程库
- 失落的C语言结构体封装艺术
- PHP里10个鲜为人知但却非常有用的函数
- Visual Studio Online 2013 (VSO)–在云端进行开发
- PostgreSQL连接PHP
- PHP开发者应了解的24个库
- C++语言的15个晦涩特性
- Docker如何将错综复杂的Linux代码转成开发者的魔法