目录

后台登录功能

前端页面

 后端开发

前端界面设计

详情首页

js脚本

SSM整体设计

Dao层

 Service层

Mapper.xml

Controller

子博文界面

部署至服务器

后台登录功能

登录页面：用户名和密码

通过用户名密码来判断用户登录成功还是失败：

登录成功：跳转到新增博客页面

登录失败：错误信息提示，在登录页面

前端页面

login.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<%--通过form表单将登录用户名/密码提交后台--%>
博客系统登录后台
登 录

前端页面通过form表单收集用户名以及密码，点击登录按钮后，调转至js中的login()方法进行处理。

在填写信息时，规定用户名和密码不能为空，当返回的状态码为success时，说明输入的用户和密码匹配成功，此时跳转至新增界面，否则的话就弹窗显示用户名和密码输入错误，这里的弹窗使用的是JQuery的toastr弹窗插件。

  function login(){var loginId = $("#loginId").val();var password = $("#password").val();if(isEmpty(loginId)){toastr.error("账户不能为空");return false;}if(isEmpty(password)){toastr.error("密码不能为空");return false;}$.ajax({url : "checklogin",data: $("#form").serialize(),method : "post",dataType : "json",success : function(data) {if (data.resultCode == 'success') {window.location.href = "../article/add";}else{toastr.error(data.errorInfo);return false;}}})}

效果如下：

输入为空：

用户名或密码错误：

 后端开发

 在UserMapper中定义获取用户名以及密码的方法。

public interface UserMapper {public User getUserById(Integer id);public User getUserByNameAndPwd(@Param("name") String name, @Param("pwd") String pwd);
}

Service层进行实现登录检查操作。

@Service
public class UserService {@Autowiredprivate UserMapper userMapper;public User getUserById(Integer id){if(id < 0)return new User();return userMapper.getUserById(id);}public boolean checkLogin(String name, String pwd){if(userMapper.getUserByNameAndPwd(name, pwd) != null){return true;}return false;}
}

在UserMapper.xml中通过SQL查找t_manager中的用户名以及密码.

select * from t_manager where id=#{id}select * from t_manager where userName=#{name} and password=#{pwd}

在Controller层中实现登录操作的url映射，以及登录检查操作，当从数据库能够查询到与输入匹配的用户名以及密码，就返回一个成功的Result对象，否则就返回一个失败对象。

package com.tulun.controller;
import com.tulun.config.Config;
import com.tulun.model.Result;
import com.tulun.model.User;
import com.tulun.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpSession;/*** Description :* Created by Resumebb* Date :2021/4/22*/
@Controller
public class UserController {@Autowiredprivate UserService userService;@RequestMapping("/login")public String login(){return "user/login";}@RequestMapping("/checklogin")@ResponseBodypublic Result checkLogin(User user, HttpSession session){System.out.println("user = " + user);boolean checkLogin = userService.checkLogin(user.getName(), user.getPasswd());Result result = new Result("fail", "用户名或密码错误");if (checkLogin) {result = new Result("success","成功");//登录成功记录登录的缓存信息session.setAttribute(Config.LoginKey, user);}return result;}}

当前端的js接收到返回的Result对象后进行判断，如果Result的状态码为success就跳转至新增页面，说明登录成功，如果接收到的是fail，那么就还是在login页面。

登录成功：

前端界面设计

前面设计了博客的新增功能，数据库存储功能，以及登录验证功能，接下来需要在前端界面将存储到数据库中的博文信息进行展示，浏览，分类查询等，如下。

详情首页

页面左边栏为栏目类别，可以通过点击对文章进行分类查询显示，页面仅显示所选类别的文章。

页面中间为文章预览，显示包过文章的类别，标题，作者，发布时间，标签，阅读量等多种信息，通过点击文章标题可以进入到博文详情页面。

文章右边显示了当前的热门标签，根据数量进行排序显示。

index.jsp如下；

<%--<%@ page language="java" import="java.util.*, java.net.URLEncoder, com.tulun.blog.model.*" pageEncoding="UTF-8"%>--%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> --%>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



博客系统
首页
<%--类别--%>
${category.categoryName}
最新发布
${tag.tagName}
<%--从本项目的指定路径获取js文件--%>

<%--自定义js--%>

js脚本

该js主要实现了通过ajax实现url拼接，然后加载不同的文章详情页。

$(function(){loadNextPage(99);$(window).scroll(function(){checkload();});//建立加载判断函数
function checkload(){totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());if ($(document).height() <= totalheight) {if($("#lastId").val() != 'undefined' && $("#lastId").val() != null && $("#lastId").val() != ''){loadNextPage($("#lastId").val());}}
}//创建ajax加载函数，并设置变量C，用于输入调用的页面频道,请根据实际情况判断使用，非必要。
function loadNextPage(lastId){$.ajax({url : '../loadPage1/'+$("#categoryId").val(),type : "get",success : function(data) {if($.trim(data) != ''){$("#lastId").remove();$("#content").append(data);$('img').lazyload();}}});	
}  
});  function goTag(tagName){window.location.href = "http://coriger.com/tag/"+encodeURI(encodeURI(tagName))
}function getRootPath() {//获取当前网址，如： http://localhost:8080/GameFngine/share/meun.jspvar curWwwPath = window.document.location.href;//获取主机地址之后的目录，如： GameFngine/meun.jspvar pathName = window.document.location.pathname;var pos = curWwwPath.indexOf(pathName);//获取主机地址，如： http://localhost:8080var localhostPaht = curWwwPath.substring(0, pos);//获取带"/"的项目名，如：/GameFnginevar projectName = pathName.substring(0,pathName.substr(1).indexOf('/') + 1);return (localhostPaht + projectName + "/");
}

SSM整体设计

Dao层

新增两个接口，用于获取文章的标签以及类别信息。

public interface ArticleTagMapper {public List getTagByArticleId(Integer articleId);
}

    public Category getCategoryById(Integer id);

 Service层

@Service
public class CategoryService {@Autowiredprivate CategoryMapper categoryMapper;public List selectAllCategory(){return categoryMapper.getAllCategory();}public Category getCategoryById(Integer id){return categoryMapper.getCategoryById(id);}
}

Mapper.xml

根据之前数据库的设计，t_article_tag表中存储了文章id以及标签id，通过联合查询获取到标签表中的信息。

select tt.* from t_article_tag ta, t_tag tt where ta.tagId =tt.id and ta.articleId = #{articleId}

Controller

控制层中一是实现详情主页面的url映射，而是实现点击不同的类别，加载相应的子博文详情页面。

package com.tulun.controller;import com.tulun.model.Article;
import com.tulun.model.Category;
import com.tulun.model.Tag;
import com.tulun.service.ArticleService;
import com.tulun.service.CategoryService;
import com.tulun.service.TagService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.List;/*** Description :* Created by Resumebb* Date :2021/5/2*/
@Controller
public class HomeController {@Autowiredprivate CategoryService categoryService;@Autowiredprivate TagService tagService;@Autowiredprivate ArticleService articleService;@RequestMapping("/index")public String index(Model model){List categories = categoryService.selectAllCategory();List tags = tagService.selectAllTag();model.addAttribute("categoryList", categories);model.addAttribute("tagList", tags);return "/home/index";}@RequestMapping("/loadPageAll")public String loadAll(Model model){List
 allArticle = articleService.getAllArticle();model.addAttribute("articleList", allArticle);return "/home/articlepager";}//按照类别进行加载@RequestMapping("/loadPage/{id}")public String loadPage(Model model, @PathVariable("id") Integer id) {//通过类别id来加载类别信息Category category = categoryService.getCategoryById(id);//当前类别信息model.addAttribute("ca", category);List  categories = categoryService.selectAllCategory();List  tags = tagService.selectAllTag();model.addAttribute("categoryList", categories);model.addAttribute("tagList",tags);return "/home/articlepager1";}//加载指定类别的内容@RequestMapping("/loadPage1/{id}")public String loadPage1(Model model, @PathVariable("id") Integer id) {List 
 articles = articleService.getAllArticleByCategoryId(id);model.addAttribute("articleList", articles);return "/home/articlepager";}
}

子博文界面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

博客系统
首页
current_page_item">${category.categoryName}
		
${ca.categoryName}



<%--自定义的路径--%>

部署至服务器

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！