- 6:显示用户信息
- 7:退出登录
- 总结博客管理系统
6:显示用户信息
这部分;希望是根据用户来显示;如果是博客列表页则显示登录用户的信息;如果是博客详情页则显示作者的信息。
1:前后端交互接口约定
GET /login
响应
HTTP/1.1 200 OK
{
userId :1,
username:‘zhangsan’,
password:‘123’
}
拿到后端响应的数据对着构造就好了
后端代码:就是刚才的判断是否登录;登录了返回这个对象
博客详情页;这里的用户名就应该换成作者名;我们应该把当前的博客id发送过去才能知道这篇文章关联的是哪个用户。数据库可以根据博客id查找用户;返回这个对象;然后我们把用户名取出来添加到这个h3标题里
前端:
package api;
import com.fasterxml.jackson.databind.ObjectMapper;
import model.Blog;
import model.BlogDao;
import model.User;
import model.UserDao;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/author")
public class BLog_AuthorServlet extends HttpServlet {
private ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String blogId = req.getParameter("blogId");
if (blogId == null) {
resp.setContentType("text/html; charset=utf8");
resp.getWriter().write("参数非法, 缺少 blogId");
return;
}
// 根据 blogId 查询 Blog 对象
BlogDao blogDao = new BlogDao();
Blog blog = blogDao.selectById(Integer.parseInt(blogId));
if (blog == null) {
// 博客不存在.
resp.setContentType("text/html; charset=utf8");
resp.getWriter().write("没有找到指定博客: blogId = " + blogId);
return;
}
// 根据 blog 中的 userId 找到对应的用户信息
UserDao userDao = new UserDao();
User author = userDao.selectById(blog.getUserId());
System.out.println("查到了吗"+author.getUsername());
String respJson = objectMapper.writeValueAsString(author);
resp.setContentType("application/json; charset=utf8");
resp.getWriter().write(respJson);
System.out.println("请求发送了吗");
}
}
这里就注意一下;因为刚开始是添加三篇文章;它的userId是1、2、3.但是只有两个用户;所以第三篇文章当前是查询不到的。
7:退出登录
这个功能就得回到博客列表页的右上角;退出登录;跳转到登录页面。还有你的把HttpSession干掉或者把user干掉。这样才不会说用户退出登录后跳转到登录页;它不登录也能直接通过输入URL访问博客列表、博客详情页、博客编辑页。HttpSession还不容易干掉;只有获取/创建会话的getSession方法;没有删除会话的方法;user比较容易删除;使用removeeAtteibute。(因为我们在后端代码两个判定都存在才是登录状态;所以删除一个就能解决问题)
在这个注销的a标签超链接上实现就好了;跳转一个路径;我们可以利用这个路径发送一个GET请求
a标签也是和form一样;可以触发跳转页面的。可以搭配302使用。
GET logout
HTTP/1.1 302
Location:blog_login3.html
8:发布博客
现在到操作最后一个页面:把强制登录的逻辑粘贴过去先;列表页的写博客a标签跳转到博客编辑页;
发布博客这个按钮:就是添加数据到数据库的操作;
1:约定前后端交互接口
POST /blog
title=这是标题&conten=这是正文。搞个form标签就能把这两个数据传过去(使用ajax也可以;但是form表单可以更简单一点。)
一篇博客我们设置有5部分;blogId(自增主键;数据库自己生成);title content就是我们要传的两部分;userId 作者信息;可以从会话拿到;就看提交的是谁。postTime 当前时刻。
响应:
HTTP/1.1 302
Location:blog_list1.html
2:后端代码
package api;
import model.Blog;
import model.BlogDao;
import model.User;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.sql.Timestamp;
import java.io.IOException;
@WebServlet("/writerblog")
public class Blog_writerServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//先获取到这些东西;然后初始化到一个blog对象;然后再存入数据库。
// 因为我们要BlogDao的add方法;里面逻辑可以把一个对象里面东西存数据库里
Blog blog=new Blog();
HttpSession httpSession = req.getSession(false);
if (httpSession == null) {
resp.setContentType("text/html; charset=utf8");
resp.getWriter().write("当前未登录, 无法发布博客!");
return;
}
User user = (User) httpSession.getAttribute("user");
if (user == null) {
resp.setContentType("text/html; charset=utf8");
resp.getWriter().write("当前未登录, 无法发布博客!");
return;
}
// 确保登录之后, 就可以把作者给拿到了.
// 获取博客标题、正文 ;这个名字和form表单的name属性对应
req.setCharacterEncoding("utf8");
String title=req.getParameter("title");
String content=req.getParameter("content");
if (title == null || "".equals(title) || content == null || "".equals(content)) {
resp.setContentType("text/html; charset=utf8");
resp.getWriter().write("当前提交数据有误! 标题或者正文为空!");
return;
}
//现在就构造这个blog对象
blog.setTitle(title);
blog.setContent(content);
blog.setUserId(user.getUserId());
// 发布时间, 在 java 中生成 / 数据库中生成 都行
blog.setPostTime(new Timestamp(System.currentTimeMillis()));
// 插入数据库
BlogDao blogDao = new BlogDao();
blogDao.add(blog);
// 跳转到博客列表页
resp.sendRedirect("blog_list.html");
}
}
3:前端代码
查看结果框怎么这么小去了;前端出问题就开开发者工具;代码能对应到显示。编辑器设置的高度是相对父元素的百分比。现在插入个from表单;是父元素变了。现在编辑框的100%是以from为基准了。给form表单也设置一个相对父元素100%就好了。
这些页面按标签按钮都修改成对应跳转的页面:将a标签的内容路径换成要跳转的页面即可
编辑页的这三个按钮:
还有登录页的这两个按钮:点击后让它们出现返回这个登录页;因为没有登录
注意:如果@WebServlet(“writerblog”)的斜杠没有写;整个tomcat启动都会异常;wbapp下的其它资源都是无法被访问到的。
总结博客管理系统
可扩展功能:
1:保存草稿功能;有时候博客写一半可能遇到别的事情要处理;没写完又不想发布;就迫切的需要一个保存草稿的功能。
2:这个小图标可以修改的美观一些;网上找一个favour文件;放tomcat目录里。但是目前无伤大雅。
3:上传头像
4:注册功能
5:博客评论
6:分类功能
7:修改博客
编写过程:
1:前端先所有的效果实现;通过固定的代码展现效果。
2:数据库操作的封装;这个是和前端页面中想要什么样的功能是相关联的。比如查看全文;我们就需要一个能根据博客id查询这篇文章的数据库操作;我们把这个操作封装;让我们以调用这个方法就能实现改功能。
3:建库建表;属性是和文章、用户的属性相关联。创建实体类;作为存数据和发送数据的载体。实体类和数据库的表是完全想关联对应的。
4:编写前后端交互接口;比如前端的输入URL或者点击查看全文这样的操作;我们要发送请求;做出响应。最后把这些动态的响应结果(每个用户的响应结果可能不一样)替换掉之前写死的页面内容。
部署云服务器上:修改代码中的数据库密码要和云服务器的一样;打war包;pom.mxl配置文件修改打war包形式;将sql文件的数据库操作再去云服务器的数据库执行一遍。复制war包粘贴到tomcat的webapps目录下。部署云服务器具体操作查看前面部署表白墙程序。
用户名:zhangsan 密码:123