Giter Site home page Giter Site logo

bookmarks's Introduction

vu3+.net6 webApi 书签管理项目

前言

作为一个bug程序员,保存了很多书签,直接用浏览器的每次都还要找,很麻烦,比如我自己的Google浏览器就200多个书签。所以做了个简单的项目去管理他们,同样该项目可以作为vue3、.net6 webApi入门项目,很容易上手。

部署项目需要用到.net6 SDK,百度去官网下载即可。

使用到的技术

  • 前端:vue3
  • 后端:.net core webApi,EF Core
  • 数据库:mysql
  • 插件:VueUse-useDark(切换主题),一为API(通过url获取网站图标),x-pageList(分页)

前端地址

(ZyPLJ/BookMarksVue: 书签项目前端 (github.com))

博客园地址

博客园

接口文档

如何用控制台运行项目 :点击跳转

.net6 webapi自带Swagger接口文档,运行项目后,根据运行的url地址和端口号可以访问Swagger,项目运行文章查看如图所示:

项目截图

新增原神首页 可以跳转最近很火的AI chatgpt

新增百度搜索功能

image

新增筛选功能

image

新增自定义菜单功能

image

初始化书签界面

初始化书签

查看所有书签-可以模糊查询,分页。

书签置顶栏-只能置顶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

更新日记

2023/3/5

新增书签筛选,一开始准备用vue前端filter去解决,但是分页只展示12个书签。所以还是用后端去解决了,新增Classid参数。修改了书签的排列顺序,最新添加的书签将放在最前面。

优化了linq查询,将join联表换成了导航属性查询。

2023/3/14

新增百度搜索,一开始用axios去请求接口,但是发现部署之后会出现跨域问题,然后百度了很久,采用了script的方式做请求,也不是很明白,不过能用。

2023/3/21

新增菜单功能,可以自定义添加图标链接,可跳转/删除。现版本推荐使用sql文件创建数据库。

2023/3/31 bug修复

修复Bookmarks书签文件上传时,出现文件夹嵌套文件夹引起程序报错,如图所示

原因是因为一开始只实现了文件夹套书签的json格式解析,没有考虑到文件夹套文件夹套书签。现在使用了递归去判断文件夹下面是否还有文件夹。目前测试文件夹->文件夹->文件夹->书签,3层文件夹没有问题。

优化了性能,使用了yield关键字返回实体。

2023/4/9

修改前端自定义书签的UI

将前端修改成了Vue3 + Vite项目

遇到问题

bookmarks's People

Contributors

zyplj avatar

Stargazers

 avatar wlpseeyou avatar  avatar  avatar  avatar Helio452b avatar  avatar Friend avatar  avatar  avatar  avatar zcsoft avatar miaochenxiang avatar  avatar  avatar mwwo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.