作为一个单体应用，其实可以直接把密码写在后端业务代码里。为了拓展性，新建一个新的用户表，进行登录验证。 我们使用简单的Session-Cookie验证，Session和Cookie差不多是一种东西，Session储存在服务端，Cookie在用户端。都可以用来判断用户的登录，用在Session安全性高，可以随时废除登录凭证，是一个单体项目最好的实现。我们使用登录验证对接口鉴权后，没有通过验证的用户只能使用开发的接口，不能调用/admin 下的接口。只有我们自己可以进行添加删除修改文章，分类等等管理操作。普通用户只能看…
后端代码 后端已经没有复杂功能了。给出所有的代码 控制层 业务层 持久层 侧边菜单 首先我们要一个后台管理的菜单，方便在各个管理页面之间切换。这个页面点击侧边栏就可以在右侧显示对应的页面。访问这个会向后端发送验证 Session 的请求，如果没有权限会跳转到登录页面。还有调用了评论的接口，统计未读的评论数量。 路由 我们在 router.js 里面写上页面对应的路由规则，就可以正常工作了。 import { createRouter, createWebHistory } from 'vue-router'; co…
后端 文章管理页面的后端没有什么新的功能。只不过添加了一些新的小处理 Controller 的路径不一样，我们可以自定义参数获取所有文章信息。放在了/admin路径下，方便之后做鉴权。之前的前台博客的Controller的参数是写死的，只能获取到已经发布的文章，并且排序是固定按照发布时间降序，分页个数都是固定的。其他的复杂的请求全部放在了/admin下，只有拥有权限才能增删改操作。 @GetMapping("/admin/articles") public ResponseEntity<Page> ge…
有些 Javascript 生成的动态内容，没有办法通过网页源代码查看。因为解析出的网页内容只是静态页面，不包含动态元素。 目前最新的前端技术比如服务器端渲染（SSR）、单页面应用（SPA）等，都是看不到静态的网页源码的。这种网页只能通过访问网站，使用浏览器开发者工具即时查看显示的元素。 Python可以使用Selenium模拟浏览器行为加载页面，就可以获得网页的实际显示元素。 下载浏览器驱动 搜索浏览器名字 + webdriver ，是一个单文件程序。下载后扔到C:\Users\user\AppData\Loca…
这次要从一个贴图论坛下载赛马娘tag的所有色图，预计要下载6700张图片。 查看网页结构 从网站在查询时的url可以看出网站是PHP搭建的。经过测试发现，页面的每张图片的缩略图链接，稍微修改一下就是完整的图片链接。 查看了分页逻辑的，看到JS代码是手动计算分页。每页显示42张图片，将总数除以42得到页数。可以解析每一页分页的图片链接，点击进去帖子里面。然后获取到图片地址。 使用公开的API 要处理近6700张图片，每页有42张图，就要处理160页面，解析帖子链接。然后从6700个帖子链接中获取图片地址。 这恐怕是个…
我使用了Vditor这个Markdown编辑器组件作为我的文章编辑器。 src/components/comments.vue 我将Vidtor的项目代码放在本地/public路径下，使用本地资源，加载更快。给出的代码注释掉了，将会使用在线CDN。 <template> <!-- 指定一个容器 --> <div id="vditor" style="margin-top: 10px;"></div> </template> <script setup…
文章显示 文章显示页面需要文章的完整的所有信息，不能用文章列表实现获取一个文章。因为那个实现是专门列表显示的，为了大数据传输，文章内容只有前500字。我们需要一个新的实现。这个非常简单，重点是是评论功能的设计。 DTO package com.ingker.blogvue.dto; import com.fasterxml.jackson.annotation.JsonIgnore; import com.fasterxml.jackson.annotation.JsonProperty; import com.f…
首先要列出所有的文章，我们需要列出文章的基本信息：标题、内容摘要、分类和标签、发布状态、发布和更新时间、文章数据等等。 控制层 Controller @GetMapping("/articles") public ResponseEntity<Page<ArticleListDTO>> getPublish( @RequestParam(value="page", defaultValue = "0") Integer page, @RequestParam(value="limit", d…
要实现分页功能后端至少需要返回三个参数。我写了一个简单的分页类，包含五个参数。 参数 必需/可选 说明 content 必需 数据列表，当前页的数据。 totalElements 必需 总数据量，用于计算分页信息。 number 必需 当前页码。 totalPages 可选 总页数，方便前端直接使用。 size 可选 每页显示数量，确保前端可以调整分页大小的选项。 package com.ingker.blogvue.util; import java.util.List; public clas…
创建项目 创建一个Vue项目，首先要装上Node.js。然后才能用npm安装 vue cli。 ## 安装或者升级 npm install -g @vue/cli ## 保证 vue cli 版本在 4.5.0 以上 vue --version ## 创建项目 vue create my-project 这是Vue3简单项目的结构 vue-multi-file-example/ ├── public/ │ └── index.html ├── src/ │ ├── assets/ │ ├── components/…