本页 12 篇文章
StarBloghttps://blog.deali.cn/blog/starblog-4
...ngth); } 文章状态和标题处理 之前在用本地markdown文件写博客的时候，出于个人习惯，我会在文件名里加上代表状态的前缀，例如未完成的文章是这样的： （未完成）StarBlog博客开发笔记(4)：markdown博客批量导入 或者已完成但未发布，会加上（未发布） 等到发布之后，就把前缀去掉，所以在导入的时候，我要用正则表达式对这个前缀进行提取，让导入数据库的博客文章标题...
StarBloghttps://blog.deali.cn/blog/starblog-blog-dev-notes-3-model-design
...保留导入前的文章状态。 本项目的博客支持导入整个目录markdown文件作为文章，我的习惯是会在markdown文件的文件名最前面写上这个文章的状态，比如一篇未完成的文章，它的文件名是：（未完成）StarBlog博客开发笔记(3)：模型设计，所以这个Status字段就是要把（未完成）中的这个状态识别提取出来，（具体用到的是正则表达式，这是后面要介绍的内容）。 然后是Path字段，这个字段表示文章作为mar...
StarBloghttps://blog.deali.cn/blog/starblog-frontend-5-axios-encapsulation
安装axios axios是一个基于Promise用于浏览器和Node.js的HTTP客户端，我们后续需要用来发送HTTP请求，先来记录一下axios的安装和使用。 安装命令 bash yarn add axios 写代码 修改一下src/views/Home.vue 首先布局改一下，添加一个按钮用来触发网络请求逻辑 vue <template> ...
StarBloghttps://blog.deali.cn/blog/starblog-frontend-4-font-awesome-icons
前言 在现代前端开发中，图标已成为构建用户友好界面的重要元素。Font Awesome 是全球最流行的图标库之一，提供了大量的矢量图标，支持多种平台和框架。无论是网站、应用程序，还是管理面板，Font Awesome 都能帮助开发者轻松地为界面增添直观且易于识别的视觉元素。 一般做个 demo 项目的话 Font Awesome 都够用了，免费版的图标不多，如果需要更多图标可以去阿里图标...
StarBloghttps://blog.deali.cn/blog/starblog-frontend-3-sass-scss
前言 本项目需要使用 SCSS 来编写页面样式。 Sass （Syntactically Awesome Stylesheets）是一个 css 预处理器，而 SCSS 是 **Sass** 的一种语法格式，它完全兼容 CSS，同时扩展了 CSS 的功能，使得样式编写更加高效、灵活和模块化。 对于初学者，SCSS 是完全和 CSS 兼容的，这意味着几乎为零的学习曲线。SCSS 语法...
StarBloghttps://blog.deali.cn/blog/starblog-frontend-development-2-page-routing
前言 Vue.js 使用虚拟 DOM 处理单页面，然后使用 Webpack 打包。通过上一篇文章的例子，读者也许已经发现，无论语法和写法如何不同，Vue.js 程序打包后都是一个单一的 HTML 文件，同时会引入一个标准的 JavaScript 文件。 Vue.js 中编写的所有代码都被 Webpack 自动打包成可以被浏览器解析的 HTML 和 JavaScript 代码，并且项目本身...
StarBloghttps://blog.deali.cn/blog/starblog-frontend-development-setup
前言 之前在【基于.NetCore 开发博客项目 StarBlog - (32) 第一期完结】里说到 StarBlog 的 Vue 前端系列已经写好了 本来打算后面再发的，不过最近有点懒没去写新的文章 😂 还是整理一些老文发出来吧~ PS：这个系列的文章最后编辑于 2023 年 6 月 本公...
StarBloghttps://blog.deali.cn/blog/starblog-frontend-navigation-guards
路由对象router给我们提供了beforeEach方法，可以在每次路由之前进行一些相关处理，也叫导航守卫，我们这里就通过导航守卫实现一些类似身份认证的辅助功能。 修改router/index.js文件，添加导航守卫，在每次路由时判断用户会话是否过期。如果登录有效且跳转的是登录界面，就直接路由到主页；如果是非登录页面且会话过期，就跳到登录页面要求登录。 代码如下 js router.b...
StarBloghttps://blog.deali.cn/blog/starblog-vuex-state-frontend-8
状态管理 在很多应用场景下，我们需要在组件之间共享状态，比如我们的左侧导航栏需要收缩和展开的功能，收缩状态时宽度很小，只显示菜单图标，因为导航菜单栏收缩之后宽度变了，所以右侧的主内容区域要占用导航栏收缩的空间，主内容区域宽度也要根据导航栏的收缩状态做变更，而导航栏和主内容区域是两个不同的组件，而非父子组件之间不支持状态传递，所以组件之间的状态共享问题发生了。 之前我写flutter的时候...
StarBloghttps://blog.deali.cn/blog/starblog-frontend-dev-7-main-page
界面设计 按照ElementUI提供的布局来 左边是导航栏，右边上方是标签页，然后是主内容区 如图 二级类目 开始写代码 主页面的内容已经比较复杂了，全部写在一个文件内不现实 我们来分解一下 根据这个布局，页面可以分为头部、主体、左侧导航栏三部分 所以我来新建三个vue页面 HeaderBar.vue Na...
StarBloghttps://blog.deali.cn/blog/starrblog-frontend-development6-login-page
前言 前端开发的准备工作在前面已经完成了，接下来就要开启写页面（Copy/Paste）操作了~ 用ElementUI写页面很简单，对照着官网文档代码一顿复制粘贴就完事了。 写代码 没啥好说的，直接代码 布局 vue <template> <el-form :model="loginForm" :rules="fieldRules" ref="loginFo...
StarBloghttps://blog.deali.cn/blog/starblog-frontend-file-upload
参考资料 前端通过axios和FormData实现文件上传功能遇到的坑：https://segmentfault.com/a/1190000016927601 Element el-upload上传组件详解：https://segmentfault.com/a/1190000013796215