BLOG - 个人博文系统开发总结 一：概览

最新推荐文章于 2023-06-26 15:27:59 发布
最新推荐文章于 2023-06-26 15:27:59 发布
阅读量1.9k 收藏 7
点赞数 1
分类专栏： 项目 文章标签： ssm 个人博客系统 lucene shiro 开源项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aimeimeits/article/details/79397558
版权

BLOG 是学习 JavaWeb 开发4个月以来的总结实践项目，使用了SSM（Spring、SpringMVC、MyBatis）框架，MVC 三层结构，Shiro 身份，权限管理，Lucene 全文检索引擎工具的个人博文系统。

GitHub地址：DuanJiaNing/BlogSystem

1. 开发环境

IDE：IntelliJ IDEA 2017.3 x64、Postman、navicat、Google Chrome
jdk版本：jdk1.8.0_45
MySQL版本：5.7.16-log
服务器：apache-tomcat-8.5.24

2. 项目结构

参考博文：手把手教你整合最优雅SSM框架：SpringMVC + Spring + MyBatis

项目结构
代码包结构

项目使用 SSM 框架，spring 的配置文件、mybatis 的映射文件、国际化资源、数据库文件以及项目的配置文件放置于 resources 目录中。

代码放置于 java 目录中，包分层包含 JavaWeb 项目基础包：entity、dao、dto、service、web，此外还有 util 工具包，枚举类包，异常类包、shiro 的 realm所在包，manager（类似于util包，但承当了比util更具针对性，与web.api耦合更紧密的一些功能）包。

2.1 service

业务层（service）根据用例参与者来进行划分，分为 audience（读者）、blogger（博主）、通用的 common 以及他们的实现（impl）。

2.2 web

web 层分为 api 和 blog 两层，api 层主要为 url 接口，每一个 url 请求都返回 json 数据，用于前端 javaScript 访问，不涉及页面跳转控制。blog 对应一个具体的网站应用，即BLOG，BLOG使用了 api 包中提供的接口，同时依赖于其他的包。

2.3 dao

dao 层定义了 MyBatis 的数据库操控接口，在 resources/mapper 目录中存放了其对应的映射文件。

2.4 exception

exception 包中定义了所有的项目异常（错误信息），这些错误都是 RuntimeException，一些检查异常，如IOException也被转化为运行时异常，这样做使这些异常在繁杂的方法调用栈中可以不被吞噬，能够以简洁的方式抛到最上层，即 web 包中的类，由控制层（web层）决定如何处理这些异常，如对于 web.api 中抛出的错误信息，将会以 json 的方式将错误信息对应的代码以及错误的描述信息返回给API使用者。
参考了聚合API的设计。

3. 开发流程

项目开发流程参考javaee项目开发流程，开发过程将一些过程省略（毕竟这是一个人的项目）。

将项目的开发分为两大部分：后端API接口开发和网站开发。

3.1 后端 API 接口开发（web.api）

API开发的最终代码入口为 com.duan.blogos.web.api 包中的类，每一个类对应于一类数据的操控，不涉及页面跳转控制。api 的调用通过 url 的方式，url 的设计遵循 RESTful 风格。
参照：RESTful API 设计指南

这部分的开发占据了大量时间，在最终编写 api 包中类的代码前需完成数据库表的设计，dao、entity、service 以及其他辅助类的编写以及测试，后续的网站开发也依赖于其中一部分类。

例如：com.duan.blogos.web.api.BloggerLinkController#add 方法
其对应的url：/blogger/{bloggerId}/link，bloggerId指博主id
请求方式：POST
返回数据类型：JSON
请求参数：iconId，title，url和bewrite。
代码为：

对于 api 包中的每一个接口方法都有对应的文档说明。包含详尽的调用说明、返回参数说明以及错误代码说明。

详尽API文档见 BlogSystem-wiki

1.2 网站开发 （web.blog）

网页开发的最终代码放置于 com.duan.blogos.web.blog 包中，这些类（或类中的方法）直接与前端页面对应，相互依赖，控制跳转和数据传递。

网站截图

3. 用例图

3.1 读者用例

3.2 博主用例


—END—

DuanJiaNing_
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
我的音乐（Musicoco）- 本地音乐播放器开发总结
Duan的博客
09-01 8761
开源一个功能相对齐全的本地音乐播放器简述从五月末就开始利用空余时间开发这款 app ，不知不觉三个月过去了。App 名称：我的音乐，我给取了个别名：Musicoco。Android 手机本地音乐文件播放器。应用开启了单独的播放服务进程，在服务进程中控制音乐播放逻辑，目前已实现功能如下：通过耳机和通知栏快捷控制音乐播放、创建歌单、本地歌曲搜索、歌曲多选操作、记忆播放、自动切换到夜间模式、定时停止播放、
【php】-- php快速入门（标记、常量、变量、运算符、流程控制语句）
张修宇的博客
09-08 948
php快速入门：语法风格、注释、常量、变量、运算符、流程控制语句if、for
个人博客系统总结
liyanglaila的博客
04-12 446
个人博客系统总结
博客管理系统|基于SpringBoot+Vue+ElementUI付费博客系统的设计与实现
软件开发实战项目分享
06-26 1736
本项目开发实现了一个博客平台系统，相较于传统的博客系统来讲，它可以实现付费博文的功能，作者可以通过付费的知识型博文来进行收费获得一定的收益，这就像CSDN上可以发布收费的博客或专栏一样，希望本项目的实现能给大家一些参考思路。
PHP 开发与代码审计(总结)
CSDN
01-27 4817
笔者将学习PHP时的学习笔记分享出来，基本上是前面的那些博文的汇总，看起来更方便一些，笔者最近放弃了PHP代码审计部分，所以不再继续学下去了，由于精力实在达不到，只能选择一样进行发展，不想成为半瓶子醋，以后将集中精力做好运维的前提下继续研究二进制方向。
个人博客系统
weixin_47958760的博客
10-09 9383
个人博客系统采用B/S结构、java开发语言、以及Mysql数据库等技术。系统主要分为管理员和博客两部分，管理员主要功能包括：个人中心、文章分类管理、文章库管理、博客管理、系统管理等。博客个人后台管理主要包括：个人中心、文章库管理、我的收藏管理，博客个人前台管理主要包括：首页、文章库、新闻资讯、我的、跳转到后台等功能，基本上实现了整个，个人博客系统信息管理的过程。本系统在一般个人博客系统的基础上增加了首页文章库最新信息的功能方便博客快速浏览，是一个高效的、动态的、交互友好的个人博客系统。
[附源码]计算机毕业设计springboot个人博客系统
bishe507的博客
11-29 1038
项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。
我的第一篇博客——个人心得，目标与展望
m0_63331634的博客
12-11 391
我的第一篇文章，包含了自我介绍，对自己学习编程的感悟及想法。
[附源码]java毕业设计博客系统设计
卓杰计算机程序设计
11-11 989
项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。
博客系统项目：设计篇
水布天
12-22 6167
博客系统项目：设计篇1 由来2 需求3 设计3.1 功能设计3.1.1 用例图3.1.2 实体类图3.1.3 实体关系图3.2 数据设计3.2.1 数据模型4 版面设计4.1 首页版面4.2 详情页版面 1 由来 博客在2021年的今天已经不是一个新鲜的词汇，如果用一句话概述，就是电子化信息留存，跟我们以前的日记、摘要、报纸有很多相似之处。其来来源已久，搭载着网络这片土壤，生根发芽，茁壮生长。从最早的文字到图片到音频再到视频，一直是博客的范畴。还有近期火起来的vblog,视频的盛行。作为一个自称是技术出身的
springboot远程心电诊断系统毕业设计源码091759
m0_73244011的博客
08-25 800
患者端 患者注册并登录系统。 登记患者信息， 向基层医疗机构提交预约登记。 查看本人预约信息 查看本人就诊信息（包括心电检查结果）。 个人信息管理。 基层医生端 基层医生登录系统， 为患者分配预约时间。查询指定时间段的预约。 查看登记患者列表。 填写心电检查数据（参考附录示例，要求数据填写项目尽量都有，系统页面排版布局随意）并上传心电图（包括常规心电图图片、动态心电图视频）。 查看上级医生回传的心电检查报告。 编写此次就诊患者的诊断报告，形成病历，保存进入系统。 病历管理。 上级医生端 心电诊断数据到达即时
个人博客系统开发实例
05-16
个人博客系统开发实例 英勇Jsp Servlet DAO Struts等技术
blog-source::black_nib: Kindem的博客 - 博文 Markdown 源文件仓库
04-28
UnrealEngine4 源码剖析 (一) UObject 概览及反射系统 2021-2-10 32 使用 PlantUML 享受流式绘图 2021-2-10 31 JetBrains 激活黑科技 - Open Source License 2021-1-19 30 使用 Emailjs 发送邮件 2021-1-14 29 浅谈 ...
expressjs-blog:用expressjs开发的个人博客系统
03-11
expressjs-blog（初步定为FishBlog）用expressjs开发的个人博客系统＃主要功能和特色文集功能，将文章整理成册文章大纲根据文章的标题自动提取，展现在右上侧，并自动添加锚点链接功能齐全的富文本编辑器，写博客更...
leetcode下载-FE-study-notes::fire:前端技术学习资源汇总！个人博客：https://docs.liujie.fun/欢迎访问
06-29
优质博文 js相关 JS中的算法与数据结构 ES6 HTML5和CSS3 移动端开发 react全家桶 react redux Redux-Saga react-router Webpack HTTP协议 Web安全 Git Node Koa Express Nginx Go Docker TypeScript 数据库 好用工具...
唯爱交友源码java-chenxiao-s-blog::books:以Springboot为主要技术栈搭建的精美博客（适合练手）
06-07
我希望在那里记录一些不经意间收获的“温暖”、可以写日记记录每一段故事、每一折心情、每一个句读，生活中的小事，这就是为什么要建立一个博客网站的意义。 :melon: 博客地址： :watermelon: 博客演示 （1）首先是...
spring-boot-learning::rocket:spring-boot学习历程中的实例
05-14
以下是本人学习Spring Boot的历程总结，前面一部分没有写博文很可惜 只有从第10章才开始写 ：Spring Boot2(一)：使用Spring Boot2集成Mybatis基础搭建 ：Spring Boot2(二)：使用Spring Boot2集成Mybatis缓存机制 ：...
开源 App - 我的音乐 (Musicoco) 用户指南
Duan的博客
08-30 1233
Musicoco 用户指南历史最多播放历史最多播放将播放次数最多的歌曲展示在主页，用户可通过点击最多播放歌曲专辑图片或是点击 [查看更多] 浏览更多信息。 三个主要歌单 [全部歌曲]：存放设备上的所有歌曲。 [最近播放]：存放最近播放的歌曲。 [我的收藏]：存放用户通过 [收藏] 功能添加的歌曲(可通过 [取消收藏] 功能从歌单中移除歌曲)。 创建的歌单用户可通过 [新建] 功能创建自己的歌单，通
写一个简单的前后端分离的个人博客系统
最新发布
07-14
一个简单的前后端分离的个人博客系统可以使用Vue.js作为前端框架，Express作为后端框架，MongoDB作为数据库。下面是一个示例的项目结构和代码： 项目结构： - backend/ - app.js - routes/ - posts.js - models/ - Post.js - frontend/ - src/ - components/ - Home.vue - Post.vue - NewPost.vue - views/ - Home.vue - Post.vue - NewPost.vue - router.js - main.js - public/ - index.html 后端代码（backend/app.js）： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const app = express(); const port = 3000; // 使用中间件 app.use(cors()); app.use(bodyParser.json()); // 导入路由模块 const postsRouter = require('./routes/posts'); // 注册路由 app.use('/api/posts', postsRouter); app.listen(port, () => { console.log(`Server started on port ${port}`); }); ``` 后端路由代码（backend/routes/posts.js）： ```javascript const express = require('express'); const router = express.Router(); const Post = require('../models/Post'); // 获取所有博文 router.get('/', async (req, res) => { try { const posts = await Post.find(); res.json(posts); } catch (err) { res.status(500).json({ message: err.message }); } }); // 创建新博文 router.post('/', async (req, res) => { const post = new Post({ title: req.body.title, content: req.body.content }); try { const newPost = await post.save(); res.status(201).json(newPost); } catch (err) { res.status(400).json({ message: err.message }); } }); module.exports = router; ``` 后端数据模型代码（backend/models/Post.js）： ```javascript const mongoose = require('mongoose'); const postSchema = new mongoose.Schema({ title: { type: String, required: true }, content: { type: String, required: true }, createdAt: { type: Date, default: Date.now } }); module.exports = mongoose.model('Post', postSchema); ``` 前端代码（frontend/src/main.js）： ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 前端路由代码（frontend/src/router.js）： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './views/Home.vue'; import Post from './views/Post.vue'; import NewPost from './views/NewPost.vue'; Vue.use(VueRouter); const routes = [ { path: '/', component: Home }, { path: '/post/:id', component: Post }, { path: '/new-post', component: NewPost } ]; const router = new VueRouter({ mode: 'history', routes }); export default router; ``` 前端视图组件代码（frontend/src/views/Home.vue）： ```html <template> <div> <h1>博客系统</h1> <ul> <li v-for="post in posts" :key="post._id"> <router-link :to="'/post/' + post._id">{{ post.title }}</router-link> </li> </ul> </div> </template> <script> export default { data() { return { posts: [] } }, mounted() { this.fetchPosts(); }, methods: { fetchPosts() { fetch('http://localhost:3000/api/posts') .then(response => response.json()) .then(data => { this.posts = data; }); } } } </script> ``` 前端视图组件代码（frontend/src/views/Post.vue）： ```html <template> <div> <h2>{{ post.title }}</h2> <p>{{ post.content }}</p> </div> </template> <script> export default { data() { return { post: {} } }, mounted() { this.fetchPost(); }, methods: { fetchPost() { const postId = this.$route.params.id; fetch(`http://localhost:3000/api/posts/${postId}`) .then(response => response.json()) .then(data => { this.post = data; }); } } } </script> ``` 前端视图组件代码（frontend/src/views/NewPost.vue）： ```html <template> <div> <h2>创建新博文</h2> <form @submit.prevent="createPost"> <div> <label for="title">标题</label> <input type="text" id="title" v-model="title" required> </div> <div> <label for="content">内容</label> <textarea id="content" v-model="content" required></textarea> </div> <button type="submit">创建</button> </form> </div> </template> <script> export default { data() { return { title: '', content: '' } }, methods: { createPost() { fetch('http://localhost:3000/api/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: this.title, content: this.content }) }) .then(response => response.json()) .then(data => { // 创建成功后跳转到博文详情页 this.$router.push('/post/' + data._id); }); } } } </script> ``` 这是一个简单的前后端分离的个人博客系统示例。前端使用Vue.js进行页面渲染和路由管理，通过axios库与后端API进行交互。后端使用Express框架处理HTTP请求，并使用Mongoose库与MongoDB进行数据交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值