java web个人博客开发（四详细设计）

╰+攻爆jí腚メ 2022-06-18 04:06 173阅读 0赞

**1.序言**

详细设计主要内容在这里是接口设计，即html页面请求到，java后台返回数据的接口。预期实用restful风格，所以接口形式是url+请求参数，数据格式为json。由于文章统计阅读量和博主的总阅读量这部分没想好如何去实现，所以暂时先放一下，在以后补上。基本上是每个html加载后进行一次请求获取数据，然后重写页面数据内容。其实，写一大堆接口，单纯就是为了做前端html和后端java两个人同时工作使用。这里基本就一个人做了，直接写代码也可以的，既然写了也只是为了试着写写。

**2.接口设计**

**2.1 主页index**

（1）加载完成后获取数据：10篇博客、5名博客数最多的作者、5名新作者（这数量可能代码实现有调整，根据页面展示情况）

url: "/fblog/ blog/indexData"

请求参数：无

返回：json

blogList: 博客列表，每个元素内容，例

\[\{

id:123        博客id，用于点击进入阅读页定位博客。

title:"create blog"    博客标题

createTime:"2016-06-07"     博客创建时间

nickname:"bjjoy"       作者昵称

summary:"aaaaaa"    博客简介

\}\]

bloggerList:作者列表，每个元素内容，例

\[\{

id:333        作者id，用于点击进入作者主页。

nickname: "bjjoy"       作者昵称

profession: "IT"     行业

blogNum: 3           文章数量

\}\]

newBlogList: 新博客列表，每个元素内容，例

\[\{

id:123        博客id，用于点击进入阅读页定位博客。

title:"create blog"    博客标题

\}\]

**2.2 login页面**

（1）点击登录操作，登录成功跳转到myblog页面，失败给出提示，取消返回index

url: "/fblog/blog/blogger/login"

请求参数：无

返回：json，保存至localStorage，多页面实用比较方便

id: 123     博主id

nickname:   博主昵称

**2.3 myblog页面**

（1）加载完成，发送请求获取数据。个人信息和博客列表。

url: "/fblog/blog/blogger/getBloggerInfo"

请求参数：json

id: 333      作者id(localStorage.bloggerId)

返回：json

blogList: 博客列表，分页形式，每个元素内容，例

\[\{

id:123        博客id，用于点击进入阅读页定位博客

title:"create blog"    博客标题

createTime:"2016-06-07"     博客创建时间

nickname:"bjjoy"       作者昵称

summary:"aaaaaa"    博客简介

category:"web开发"   分类名称

readNum: 0     博客阅读数（暂时没做）

\}\]

profession: "IT"     行业

gender: 0              性别，根据0,1展示男性或女性

address: 火星       地区

birthday: 2017-03-03   生日

summary: 程序猿       作者简介

totalReadNum: 0       总阅读数（暂时没做）

（2）点击博客搜索按钮

url: "/fblog/blog/blog/searchBlog"

请求参数：json

bloggerId: 333      作者id

title:"create"       博客title，模糊查询

gmt\_create:"2016-03-09"     创建博客时间

categoryId: "999"     类别id

返回：json

blogList: 博客列表，分页形式，每个元素内容，例

\[\{

id:123        博客id，用于点击进入阅读页定位博客

title:"create blog"    博客标题

createTime:"2016-06-07"     博客创建时间

nickname:"bjjoy"       作者昵称

summary:"aaaaaa"    博客简介

category:"web开发"   分类名称

readNum: 0     博客阅读数（暂时没做）

\}\]

（3）点击类别，给出类别下拉框

url: "/fblog/blog/category/searchCategory"

请求参数：json

bloggerId: 333      作者id

返回：json

categoryList: 类别列表，每个元素内容，例

\[\{

id:123       类别id

categoryName:"web"    类别名称

\}\]

**2.4 setting页面**

（1）点击保存按钮

url: "/fblog/blog/blogger/save"

请求参数：json

id: 333      作者id

profession: "IT"     行业

gender: 0              性别，根据0,1展示男性或女性

address: 火星       地区

birthday: 2017-03-03   生日

summary: 程序猿       作者简介

返回：json

success: true     保存成功或者失败

（2）点击修改密码弹窗后保存修改密码操作（密码md5加密）

url: "/fblog/blog/blogger/modifyPwd"

请求参数：json

id: 333      作者id

oldPwd:222   旧密码

pwd: 555        新密码

返回：json

success: true     修改成功

**2.5 博客分类页editcategory**

（1）页面加载完成获取分离信息

url: "/fblog/blog/category/getBloggerCategory"

请求参数：json

bloggerId: 333      博主id，localStorage.bloggerId

返回：json

categoryList: 对应博主的分类列表\[\{"id":"123","categoryName":"web"\}\]

（2）删除分类

url: "/fblog/blog/category/del"

请求参数：json

id: 333     分类id

返回：json

success: true     删除成功

（3）添加或修改分类

url: "/fblog/blog/category/save"

请求参数：json

id: 333     分类id（添加值为空）

categoryName: nnn     分类名称（不能为空）

返回：json

success: true     更新完成

**2.6 博客编辑页editblog**

这部分涉及富文本框，可能麻烦一点，需要有图片上传功能，需要制定图片路径规则，这里等做的时候再详细说。暂时还不了解富文本框如何去进行操作。

（1）跟新和保存博客

url: "/fblog/blog/blog/save"

请求参数：json

id: 333     博客id（新博客值为空）

title: "nnn"     博客标题（不能为空）

summary:   "啦啦"      博客简介（不能为空）

content: "123455"      博客内容

返回：json

success: true     更新完成

（2） 添加图片（这部分需要验证）

url: "/fblog/blog/blog/savePicture"

请求参数：json

file: aaa.jpg     图片

返回：json

filePath: /aa/123.jpg      新生成的图片路径

2.7 博客阅读页readblog 与上面类似

2.8 博主个人主页blogger与上面类似

**3.说明**

这里数据格式给的不是很规范，只是简单地写了可能有哪些内容，都是json字符串。数据通信部分采用ajax。图片部分可能需要学习一下，找一个富文本框编辑器，用ueditor或者bootstrap的，也可能是其它，边做边看了。希望格式和预想的一样吧，如果有不同再进行修改。接下来就进入编码实现阶段了。由于本人对前端技术js，html，css不是很了解，所以打算先把前端做好，同样是边做边学吧，可能节奏会慢。