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

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不是很了解，所以打算先把前端做好，同样是边做边学吧，可能节奏会慢。