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