博客文章

路由对象router给我们提供了beforeEach方法，可以在每次路由之前进行一些相关处理，也叫导航守卫，我们这里就通过导航守卫实现一些类似身份认证的辅助功能。 修改router/index.js文件，添加导航守卫，在每次路由时判断用户会话是否过期。如果登录有效且跳转的是登录界面，就直接路由到主页；如果是非登录页面且会话过期，就跳到登录页面要求登录。 代码如下 router.beforeEach

身份认证使用JWT，关于AspNetCore的身份认证和JWT可以看看我之前这篇博客 先安装nuget包 dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer 在Services目录下新建一个AuthService类，先留着不写代码，等把准备工作完成了再来。 用户模型 在 StarBlog.Data 项目的 Models

后端实现，前端的后面说 可以先在swagger里测试 ImageSharp组件文档：https://docs.sixlabors.com/articles/imagesharp/gettingstarted.html service private string GetPhotoFilePath(Photo photo) { return Path.Combine(_environment

在现代前端开发中，图标已成为构建用户友好界面的重要元素。Font Awesome 是全球最流行的图标库之一，提供了大量的矢量图标，支持多种平台和框架。无论是网站、应用程序，还是管理面板，Font Awesome 都能帮助开发者轻松地为界面增添直观且易于识别的视觉元素。

状态管理 在很多应用场景下，我们需要在组件之间共享状态，比如我们的左侧导航栏需要收缩和展开的功能，收缩状态时宽度很小，只显示菜单图标，因为导航菜单栏收缩之后宽度变了，所以右侧的主内容区域要占用导航栏收缩的空间，主内容区域宽度也要根据导航栏的收缩状态做变更，而导航栏和主内容区域是两个不同的组件，而非父子组件之间不支持状态传递，所以组件之间的状态共享问题发生了。 之前我写flutter的时候，响应式设

界面设计 按照ElementUI提供的布局来 左边是导航栏，右边上方是标签页，然后是主内容区 如图 二级类目 开始写代码 主页面的内容已经比较复杂了，全部写在一个文件内不现实 我们来分解一下 根据这个布局，页面可以分为头部、主体、左侧导航栏三部分 所以我来新建三个vue页面 HeaderBar.vue Navbar.vue MainContent.vue 完成之后目录结构如下 views ├──