vue＋.net入门级书签项目

最新推荐文章于 2024-09-13 13:38:18 发布
最新推荐文章于 2024-09-13 13:38:18 发布
阅读量384 收藏 1
点赞数 1
分类专栏： Vue .NET 文章标签： vue.js .net 前端 .netcore c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IsZYya/article/details/130493878
版权
.NET 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
Vue
1 篇文章 0 订阅
订阅专栏
这是一个结合Vue3和.net6webApi的书签管理项目，支持Docker部署，包含Swagger接口文档，使用VueUse插件和EFCore数据库。项目提供书签筛选、自定义菜单和百度搜索功能，并修复了文件夹嵌套上传的错误。
摘要由CSDN通过智能技术生成

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，如图所示：
image

前端地址

书签前端地址

如何使用命令行打包项目

对于使用其他编辑器的人，可以选择命令行、终端打包项目
命令行打包

vue如何docker部署

Docker部署vue

项目截图

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

新增百度搜索功能

image

新增筛选功能

image

新增自定义菜单功能

image

初始化书签界面

image

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

image

image

书签置顶栏-只能置顶12个书签，刚好一页。

image

点击跳转
image

主题切换

image

项目部署

建议采用Docker部署，方便快捷，还可以部署在自己电脑的本地，非常的nice

Docker下载链接：https://docs.docker.com/

后端部署

首先确保有数据库，如果没有则根据图片去创建，或者采用codefirst模式，或者执行sql文件，都行，3选1。

codefirst模式就不做演示了，需要的话可以去看我的另一个博客项目中有写。
博客项目地址：https://gitee.com/zyplj/personalblog

数据库名 BookMark

数据库表结构：

image

bookmarks表：

主键不需要自增

image

bookTops表：

主键需自增

image

class表：

主键需自增

image

数据库创建完成后就要修改项目的连接字符串了，如果不采用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;

image

开始部署

打包项目，Visual Studio 2022去官网下免费的，然后步骤在博客项目中可以看到。

如果没有Visual Studio 2022如何打包呢，可以使用命名行，进入项目BrowserBookmarks目录（bin文件的那一层），输入dotnet publish即可
然后在BrowserBookmarks\bin\Debug\net6.0\publish 中可以看到打包的项目，打包后目录如图所示：

image

如果没有Dockerfile文件，可以使用本项目中的参考的文件copy进去

进入书签项目部署的目录，打开控制台，输入docker build -t 名称 .，如图：可以和我一样的名称

image

然后等待镜像下载完成，继续输入docker run -d --restart=always -p 9031:9031 --name 名称 名称，–restart=always让容器开机自动启动。如图：

image

出现一串字符就代表docker部署成功了。

注意端口号本项目默认9031，如果需要更改则要更改后端Dockerfile文件和Program.cs文件，如图：

image

image

前端部署

首先需要修改项目目录http中index.ts中httApi的值，它取决于你的后端部署url

image

然后修改初始化书签组件中上传文件的url路径

image

可以去看一下我的博客园文章，步骤一样。

https://www.cnblogs.com/ZYPLJ/p/17103691.html

跨域问题

需要修改Program.cs中文件代码，根据自己去修改，如果是本地则只需要关注端口号，如图所示：

image

项目使用介绍

怎么使用呢，非常简单，只需要找到你使用的浏览器的Boolmarks文件目录即可，然后上传文件。

//这是我的Google浏览器目录
C:\Users\Lenovo\AppData\Local\Google\Chrome\User Data\Default\Bookmarks

image

更新日记

2023/3/5

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

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

2023/3/14

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

2023/3/21

新增菜单功能，可以自定义添加图标链接，可跳转/删除。现版本推荐使用sql文件（在git后端项目中）创建数据库。

2023/3/31 bug修复

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

image

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

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

2023/4/9

修改前端自定义书签的UI

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

遇到问题

image

IsZYya
关注
专栏目录
Vue.js 初学者指南：从 React 转换到 Vue 的小说阅读器完整教程” “一篇入门级教程：用 Vue.js 构建现代风格小说阅读器！” “从零开始：Vue.js 实现小说阅读器，适合初学者的
南北极之间
10-23 564
Vue.js 初学者指南：从 React 转换到 Vue 的小说阅读器完整教程” “一篇入门级教程：用 Vue.js 构建现代风格小说阅读器！” “从零开始：Vue.js 实现小说阅读器，适合初学者的
219-6-3Google浏览器书签备份
qq_43046057的博客
06-03 3638
WAF 创建时间 2019-03-11 12:45:27 最后修改 2019-04-03 14:02:50>> 书签名称 链接 添加时间 WEB漏洞测试（二）——HTML注入 & XSS攻击 - CSDN博客 http://www.secsky.cn/216.html 2018-05-15 10:45:24 ModSecurity介绍 - CSDN博客...
vue项目demo（asp.net mvc5+vue2.5）
02-13
本项目是asp.net mvc5+vue2.5的项目，花了很长时间做的。 实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.后台使用了EF进行操作数据库，EF使用的是codeFirst 4.实现了分页的功能。 5.另外，本项目无论是前台还是后台都对代码进行了注释，使得项目非常容易理解，花了很长时间做的，麻烦给打5分好评，非常感谢。
Asp.net+Vue2构建简单记账WebApp
09-13
作为一个asp.net 程序员，当发现Vue.js的存在时就爱上它，但是在asp.net应用中使用Vue一时让我无从上手。直到最近有了点心得。就计划把之前做的一个记账应用前端改为Vue2实现。 具体请看我博客里介绍 http://blog.csdn.net/yiershan1314/article/details/77875679
入门Vue+.NET 8 Web Api记录（一）
最新发布
weixin_41208754的博客
09-13 613
合集 - C#(78)1.使用C#将几个Excel文件合并去重分类2023-11-152.C#使用SqlSugar操作MySQL数据库实现简单的增删改查2023-11-163.C#中的类和继承2023-11-174.C#中的virtual和override关键字2023-11-175.C#中的属性2023-11-206.C#winform中使用SQLite数据库2023-11-237.C#简化工作...
推荐开源项目：Vue.NetCore - 前后端分离的现代化Web开发框架
gitblog_00005的博客
03-22 882
推荐开源项目：Vue.NetCore - 前后端分离的现代化Web开发框架 Vue.NetCore(已支持sqlsugar).NetCore、.Net6、Vue2、Vue3、Element plus+uniapp前后端分离，全自动生成代码；支持移动端(ios/android/h5/微信小程序。http://www.volcore.xyz/项目地址:https://gitcode.com/gh_m...
Net和Vue的结合
net511的专栏
08-24 1016
要将Net与Vue集成在一起，最简单的方法是使用Net Web API来作为后端，然后使用Vue作为前端。Net是一种用于构建Web应用程序和服务的技术框架，而Vue则是一种用于构建用户界面的渐进式JavaScript框架。是一个非常复杂的构成，全栈工程师的价值是非常大的，创业公司不可能像大公司一样，各方面的人才都有。为此，鄙人不才，把多年来的工作成果，整理成一个通用的后台框架。Net与Vue是两个广受欢迎的技术框架，它们各自解决了不同的问题。所以需要一个多面手，各种活都能一肩挑，独挡多面的万金油。
终于找到了，开源的Vue3+.NET6通用管理后台！
dotNET跨平台
06-22 2424
据说80%的.NET项目都是管理后台，然而能用上Vue3+.NET6的管理后台并不多见。这里分享一套Vue3+ Axios+ TS+ Vite +ElementUI Plus+ .NET 6 WebAPI+ JWT+ SqlSugar的前后端分离架构的通用管理后台源码+数据库脚本，还有与之配套录制的一组视频教程，全部打包免费分享！下图扫码(或加微信zhaoxi005)进...
[yishen] 小慕读书web端学习笔记
yishen的博客
09-23 2825
课程常用链接 【前奏-课程】快速入门Web阅读器开发 【小慕读书web端】Vue 实战商业级读书Web APP 全面提升技能 【epub图书免费下载站点 · 中文书】http://www.ziliaoh.com/epub.html 【项目代码gitee】https://gitee.com/yishen_yishen/vue-ebook 如果对你有帮助欢迎点个 star 【md格式 源文档下载】下载链接 在线阅读可能会乱码(我知道是编码问题，但在七牛云里不知道怎么修改)，请下载后查看 阅读器原理课程-免
两个月实战
qq_45163356的博客
04-26 2406
1：js的全部复习 后盾人js复习完，做完笔记起步入门 | 后盾人 牛客刷完js的题 2：typeScript的学习 后盾人typescript学习介绍 | 后盾人 3：vue3的学习 VUE3最新最全实战项目2021课程_哔哩哔哩_bilibili 网易云后端文档网易云音乐 NodeJS 版 API 4：vue3结合typescript项目 简单的：2022最新Vue3.0+TypeScript项目实战TypeScript教程TypeScript视频教程TypeSc........
技术淘宝
热门推荐
dicha7140的博客
06-23 2万+
???? ???? ???? ????精度前端学习 ——前端开发100天（置顶） http://alloyteam.github.io/CodeGuide/https://github.com/AlloyTeam/CodeGuide cmd控制台的小技巧：可以直接将文件夹/文件丢进去，这样就会打印出该路径了。 舒服的字体家族样式： font: 300 16px/1.8 ...
毕业设计基于Vue和.NET Core Web API 加油站管理系统源码+项目说明.zip
10-16
【资源说明】 毕业设计基于Vue和.NET Core Web API 加油站管理系统源码+项目说明.zip 前端：Vue + ElementUI (ElementUI 2.7.2) 后台：.NET Core Web API (.net core 2.2) * 前台采用ElementUI界面风格良好 * 页面提交修改有关数据都会进行验证处理 * 使用JWT进行权限校验和Token颁发 * 使用Swagger以便更好的查看和调试接口 * 配置Cors跨域，可以配置相关信息以处理跨域请求 * 使用Identity 进行项目角色，声明的权限管理 * 基于策略的接口权限验证 * 使用EFCore进行数据处理 * .NET Core跨平台开发 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
.NET中间件以及VUE拦截器联合使用
qq_45798312的博客
06-27 327
.NET中间件以及VUE拦截器联合使用，拦截响应后判断重新发送原来的请求
.net core + vue 搭建前后端分离的框架
战族狼魂的博客
08-01 1171
确保你的开发环境中已安装了最新版本的.NET Core SDK。你可以从获取最新版本。： 在命令行或者通过Visual Studio等集成开发环境，创建一个新的.NET Core Web API项目。： 如果需要特定的功能（例如身份验证、数据库访问等），可以添加相应的NuGet包。： 在生成的.NET Core项目中编写你的后端API，定义控制器和服务，连接数据库等。
Vue+.Net 部署在IIS上
qq_41544258的博客
03-18 2350
Vue+.Net 部署在IIS上，局域网内实现url访问
.Net Core 6.0 + Vue 项目尝试
iZaix的博客
08-04 2129
net core 6.0 +vue尝试一
Vue + .NetCore前后端分离，不一样的快速发开框架
chenchuang0128的博客
03-31 1947
随着前端技术的快速发展，Vue.NetCore框架已成为前后端分离开发中的热门选择。本文将深入探讨Vue.NetCore前后端分离的快速开发框架，以及它如何助力开发人员提高效率、降低开发复杂度。文章将从基础功能、核心优势、适用范围、依赖环境等多个角度，对Vue.NetCore进行全面的解析。
.NET 7+Vue 前后端分离框架Admin.Core
weixin_68436326的博客
02-21 280
前言中台admin是前后端分离权限管理系统，Admin.Core为后端项目，基于.NET 7.0开发。支持多租户、数据权限、动态 Api、任务调度、OSS 文件上传、滑块拼图验证、多数据库，分布式缓存、分布式事务等接口文档一览项目地址Github https://github.com/zhontai/Admin.Core技术栈dotnet7FreeSqlAutofacCAPMapster特点快速启...
Vue + .NetCore前后端分离，不一样的快速发开框架(提供Vue2/Vue3版本)
weixin_48449171的博客
07-14 1732
框架内置了大量的通用组件可直接使用,并内置了基于本框架定制开发的代码生成器，尽量避免重复性代码编写。帐号：admin666密码：123456（本地超级管理员帐号：admin密码123456)框架不仅仅是快速开发，更多的是倾向于业务代码扩展的编写与代码规范。
Vue+.Net Core SignalR详细配置
03-24
非常好的问题，以下是Vue .Net Core SignalR详细配置的步骤： 1. 在Vue项目中安装signalr客户端npm包 ``` npm install @aspnet/signalr ``` 2. 在Vue项目中创建一个名为`SignalR.js`的文件，并编写以下内容： ```javascript import * as signalR from "@aspnet/signalr"; export default { install(Vue, options) { Vue.prototype.$signalR = new signalR.HubConnectionBuilder() .withUrl(options.url) .configureLogging(signalR.LogLevel.Information) .build(); Vue.prototype.$signalR.start(); }, }; ``` 3. 在Vue项目中创建一个名为`main.js`的文件，并编写以下内容： ```javascript import Vue from "vue"; import App from "./App.vue"; import SignalR from "./SignalR"; Vue.use(SignalR, { url: "http://localhost:5000/chatHub", // SignalR后端地址 }); new Vue({ render: (h) => h(App), }).$mount("#app"); ``` 4. 在.Net Core项目中安装`Microsoft.AspNetCore.SignalR`包 5. 在`Startup.cs`中添加以下代码： ```csharp using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.SignalR; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; namespace SignalRServer { public class Startup { public IConfiguration Configuration { get; } public Startup(IConfiguration configuration) { Configuration = configuration; } public void ConfigureServices(IServiceCollection services) { services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_3_0); services.AddSignalR(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapHub<ChatHub>("/chatHub"); }); } } } ``` 6. 在.Net Core项目中创建一个名为`ChatHub.cs`的文件，并编写以下内容： ```csharp using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace SignalRServer { public class ChatHub : Hub { public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); } } } ``` 7. 在Vue项目中使用以下代码与SignalR服务器通信： ```javascript // 发送消息 this.$signalR.invoke("SendMessage", user, message); // 接收消息 this.$signalR.on("ReceiveMessage", (user, message) => { console.log(user + "：" + message); }); ``` 希望这个解答可以帮助你！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值