SSM框架實(shí)戰(zhàn)-搭建自己的個(gè)人博客1-基礎(chǔ)架構(gòu)搭建

2021-4-30    前端達(dá)人

前言

本系列文章主要通過從零開始搭建自己的個(gè)人博客,來加深對SSM框架的學(xué)習(xí)與使用,了解一個(gè)系統(tǒng)從提出到設(shè)計(jì)-到開發(fā)-到測試-部署運(yùn)行的過程,并記錄在搭建過程中的學(xué)習(xí)心得、遇見的錯(cuò)誤及解決方式。

個(gè)人博客的主要功能有:

  1. 博客列表展示:文章按照時(shí)間順序(時(shí)間倒序:最新最先展示)列表展示
  2. 博客文章詳情展示:展示文章全部內(nèi)容,包含:作者、創(chuàng)建時(shí)間、所屬目錄、標(biāo)簽、文章標(biāo)題、內(nèi)容
  3. 用戶權(quán)限管理:游客只能瀏覽文章、管理員可以發(fā)布文章、文章下線處理
  4. 添加文章功能:支持富文本編輯??梢哉{(diào)整字體大小、樣式、鍵入代碼等功能

界面展示:

前臺博客列表界面

前臺博客列表頁面.png

博客詳情頁面

博客詳情頁面.png

后臺管理頁面 

 

登錄頁面

 

后臺管理頁面.png

項(xiàng)目技術(shù)簡介

系統(tǒng)實(shí)現(xiàn)的功能點(diǎn)

  1. 用戶權(quán)限管理:普通的用戶(游客)只能瀏覽文章、管理員用戶可以發(fā)布文章、文章管理
  2. 博客列表展示:文章按照發(fā)布時(shí)間順序(按照時(shí)間倒敘)展示 :博客類別、標(biāo)簽、博客名稱、作者名、發(fā)布時(shí)間、閱讀數(shù)量、博客的內(nèi)容概括
  3. 博客詳情頁面:博客名稱、作者、時(shí)間、博客內(nèi)容、標(biāo)簽
  4. 博客后臺列表:博客檢索(類別、標(biāo)簽、博客名稱)、博客列表(博客id、博客類別、標(biāo)簽、時(shí)間)、博客操作
  5. 新增博客功能:支持富文本編輯:可以調(diào)整大小、樣式等

服務(wù)端技術(shù)

核心框架:Spring:5.2.8.RELEASE

web框架:SpringMVC:5.2.8.RELEASE

持久層框架:Mybatis 3.2.4

數(shù)據(jù)庫連接池:阿里druid:0.2.6

數(shù)據(jù)庫:MySQL5.XX

JSON數(shù)據(jù)處理:谷歌gson 2.3

前端技術(shù)

jsp

Ajax

前端框架:bootstrap

富文本編輯器:百度UEditor

數(shù)據(jù)庫的設(shè)計(jì)

  • 用戶表:賬號id、賬號名稱、賬號密碼
  • 博客表:博客id、博客名稱、博客內(nèi)容、發(fā)布時(shí)間、閱讀量、類別id、狀態(tài)
  • 博客/標(biāo)簽對應(yīng)表:博客id、標(biāo)簽的id
  • 標(biāo)簽表:標(biāo)簽id、標(biāo)簽名稱(博客和標(biāo)簽:一對多:一個(gè)博客可以對應(yīng)多個(gè)標(biāo)簽)
  • 類別表:類別ID、類別名稱(博客和類別:一對一:一個(gè)博客對應(yīng)一個(gè)類別)

創(chuàng)建SQL語句:

 
  1. DROP TABLE IF EXISTS `t_article`;
  2. CREATE TABLE `t_article` (
  3. `id` int(11) NOT NULL AUTO_INCREMENT,
  4. `categoryId` int(11) NOT NULL COMMENT '分類Id',
  5. `title` varchar(40) NOT NULL COMMENT '標(biāo)題',
  6. `content` blob NOT NULL COMMENT '內(nèi)容',
  7. `description` varchar(500) NOT NULL COMMENT '文章簡介 用于列表顯示',
  8. `statue` int(11) NOT NULL DEFAULT '0' COMMENT '狀態(tài) 0:正常 1:不可用',
  9. `author` varchar(15) DEFAULT 'tulun' COMMENT '作者',
  10. `createTime` datetime NOT NULL COMMENT '發(fā)表時(shí)間',
  11. `showCount` int(11) NOT NULL DEFAULT '0' COMMENT '瀏覽量',
  12. PRIMARY KEY (`id`)
  13. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章表';
  14. -- ----------------------------
  15. -- Table structure for t_article_image
  16. -- ----------------------------
  17. DROP TABLE IF EXISTS `t_article_image`;
  18. CREATE TABLE `t_article_image` (
  19. `id` int(11) NOT NULL AUTO_INCREMENT,
  20. `imageUrl` varchar(100) NOT NULL COMMENT '圖片地址',
  21. `articleId` int(11) NOT NULL COMMENT '文章Id',
  22. PRIMARY KEY (`id`,`articleId`)
  23. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章圖 主要用于列表瀏覽';
  24. -- ----------------------------
  25. -- Table structure for t_tag
  26. -- ----------------------------
  27. DROP TABLE IF EXISTS `t_tag`;
  28. CREATE TABLE `t_tag` (
  29. `id` int(11) NOT NULL AUTO_INCREMENT,
  30. `tagName` varchar(25) NOT NULL COMMENT '標(biāo)簽名稱 唯一',
  31. PRIMARY KEY (`id`),
  32. UNIQUE KEY `tagName_UNIQUE` (`tagName`)
  33. ) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8 COMMENT='標(biāo)簽表';
  34. -- ----------------------------
  35. -- Table structure for t_article_tag
  36. -- ----------------------------
  37. DROP TABLE IF EXISTS `t_article_tag`;
  38. CREATE TABLE `t_article_tag` (
  39. `articleId` int(11) NOT NULL COMMENT '文章Id',
  40. `tagId` int(11) NOT NULL COMMENT '標(biāo)簽Id',
  41. PRIMARY KEY (`articleId`,`tagId`)
  42. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章標(biāo)簽中間表';
  43. -- ----------------------------
  44. -- Table structure for t_category
  45. -- ----------------------------
  46. DROP TABLE IF EXISTS `t_category`;
  47. CREATE TABLE `t_category` (
  48. `id` int(11) NOT NULL AUTO_INCREMENT,
  49. `categoryName` varchar(20) NOT NULL COMMENT '分類名稱 唯一',
  50. `iconClass` varchar(45) NOT NULL COMMENT '圖標(biāo)樣式',
  51. `aliasName` varchar(20) NOT NULL COMMENT '別名 唯一 比如新聞 就用News 代替 欄目Id不顯示在url中',
  52. `sort` int(11) NOT NULL DEFAULT '0' COMMENT '排序 (0-10)',
  53. PRIMARY KEY (`id`),
  54. UNIQUE KEY `aliasName_UNIQUE` (`aliasName`),
  55. UNIQUE KEY `categoryName_UNIQUE` (`categoryName`)
  56. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='分類表 只支持一級分類 如果需要分多個(gè)層次 用標(biāo)簽來協(xié)助實(shí)現(xiàn)';
  57. -- ----------------------------
  58. -- Table structure for t_manager
  59. -- ----------------------------
  60. DROP TABLE IF EXISTS `t_manager`;
  61. CREATE TABLE `t_manager` (
  62. `id` int(11) NOT NULL AUTO_INCREMENT,
  63. `userName` varchar(25) NOT NULL COMMENT '用戶名',
  64. `password` varchar(45) NOT NULL,
  65. PRIMARY KEY (`id`)
  66. ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

image.png

框架結(jié)構(gòu)搭建

SSM項(xiàng)目腳手架搭建

搭建如下框架結(jié)構(gòu):

目錄說明:

 
  1. 目錄說明:
  2. |-src
  3. |--mian
  4. |---java JAVA源代碼根目錄
  5. |----com
  6. |-----tulun
  7. |------model 存放pogo類:基本基本的getter和setter方法
  8. |------controller 展示層類包路徑:前端用戶請求映射到該包路徑下類的實(shí)現(xiàn)
  9. |------service 業(yè)務(wù)邏輯層包路徑:業(yè)務(wù)邏輯實(shí)現(xiàn),調(diào)用dao層服務(wù)
  10. |------dao 數(shù)據(jù)庫操作層包路徑:提供對數(shù)據(jù)庫的操作類與方法
  11. |------util 工具類包路徑
  12. |---resource 配置文件根目錄
  13. |----myatis mybatis接口對應(yīng)配置文件目錄
  14. |----spring-XXX.xml SSM中mybatis、spring核心、springMVC的全局配置文件
  15. |--webapp 前端頁面內(nèi)容根目錄
  16. |---WEB-INF
  17. |----web.xml 前端頁面必要配置文件
  18. |-pom.xml maven的配置文件

測試Demo

主要完成各個(gè)層之間的連接映射,完成從t_manager表中讀取數(shù)據(jù)并進(jìn)行回顯

 

POJO類

根據(jù)數(shù)據(jù)庫表t_manager,創(chuàng)建User類

 
  1. package com.tulun.model;
  2. /**
  3. * Description :
  4. * Created by Resumebb
  5. * Date :2021/4/17
  6. */
  7. public class User {
  8. private Integer id;
  9. private String name;
  10. private String passwd;
  11. public Integer getId() {
  12. return id;
  13. }
  14. public void setId(Integer id) {
  15. this.id = id;
  16. }
  17. public String getName() {
  18. return name;
  19. }
  20. public void setName(String name) {
  21. this.name = name;
  22. }
  23. public String getPasswd() {
  24. return passwd;
  25. }
  26. public void setPasswd(String passwd) {
  27. this.passwd = passwd;
  28. }
  29. }

Spring核心配置文件

這里用到了阿里巴巴的druid連接池

 
  1. <beans xmlns="http://www.springframework.org/schema/beans"
  2. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xmlns:context="http://www.springframework.org/schema/context"
  4. xsi:schemaLocation="http://www.springframework.org/schema/beans
  5. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
  6. http://www.springframework.org/schema/context
  7. http://www.springframework.org/schema/context/spring-context-3.0.xsd">
  8. <!--開啟注解-->
  9. <context:component-scan base-package="com.tulun"/>
  10. <!--配置數(shù)據(jù)源:借助連接池druid-->
  11. <bean id ="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
  12. <!--注入屬性-->
  13. <property name="url" value="jdbc:mysql://localhost:3306/test"/>
  14. <property name="username" value="root"/>
  15. <property name="password" value="123456"/>
  16. </bean>
  17. <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
  18. <property name="dataSource" ref="dataSource"/>
  19. <!--注入mapper映射文件-->
  20. <property name="configLocation" value="classpath:spring-mybatis.xml"></property>
  21. <property name="mapperLocations" value="classpath:mapper/*.xml"/>
  22. </bean>
  23. <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
  24. <property name="basePackage" value="com.tulun.dao"/>
  25. <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
  26. </bean>
  27. </beans>

Spring-Mybatis配置文件

 
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE configuration
  3. PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  4. "http://mybatis.org/dtd/mybatis-3-config.dtd">
  5. <!--根標(biāo)簽-->
  6. <configuration>
  7. </configuration>

SpringMVC配置文件

 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4. xmlns:context="http://www.springframework.org/schema/context"
  5. xmlns:mvc="http://www.springframework.org/schema/mvc"
  6. xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
  7. http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
  8. http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">
  9. <!--掃描controller寫注解-->
  10. <context:component-scan base-package="com.tulun.controller"/>
  11. <!--配置映射器-->
  12. <mvc:annotation-driven/>
  13. <!--配置視圖解析器-->
  14. <!--視圖解析器-->
  15. <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  16. <!--jsp頁面前綴-->
  17. <property name="prefix" value="/WEB-INF/jsp/"/>
  18. <!--jsp后綴-->
  19. <property name="suffix" value=".jsp"/>
  20. <property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerView"/>
  21. </bean>
  22. </beans>

web配置文件

 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  5. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  6. <context-param>
  7. <param-name>contextConfigLocation</param-name>
  8. <param-value>classpath:spring-core.xml</param-value>
  9. </context-param>
  10. <listener>
  11. <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  12. </listener>
  13. <!--前端控制器-->
  14. <servlet>
  15. <servlet-name>myBolg</servlet-name>
  16. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  17. <!--將springMVC的配置文件進(jìn)行配置-->
  18. <init-param>
  19. <param-name>contextConfigLocation</param-name>
  20. <param-value>classpath:spring-mvc.xml</param-value>
  21. </init-param>
  22. </servlet>
  23. <servlet-mapping>
  24. <servlet-name>myBolg</servlet-name>
  25. <url-pattern>/</url-pattern>
  26. </servlet-mapping>
  27. </web-app>

pom依賴

 
  1. <dependencies>
  2. <dependency>
  3. <groupId>junit</groupId>
  4. <artifactId>junit</artifactId>
  5. <version>4.11</version>
  6. <scope>test</scope>
  7. </dependency>
  8. <!-- spring依賴-->
  9. <dependency>
  10. <groupId>org.springframework</groupId>
  11. <artifactId>spring-core</artifactId>
  12. <version>5.2.8.RELEASE</version>
  13. </dependency>
  14. <dependency>
  15. <groupId>org.springframework</groupId>
  16. <artifactId>spring-context</artifactId>
  17. <version>5.2.8.RELEASE</version>
  18. </dependency>
  19. <dependency>
  20. <groupId>org.springframework</groupId>
  21. <artifactId>spring-beans</artifactId>
  22. <version>5.2.8.RELEASE</version>
  23. </dependency>
  24. <dependency>
  25. <groupId>org.springframework</groupId>
  26. <artifactId>spring-expression</artifactId>
  27. <version>5.2.8.RELEASE</version>
  28. </dependency>
  29. <!--web依賴/spring mvc依賴-->
  30. <dependency>
  31. <groupId>org.springframework</groupId>
  32. <artifactId>spring-webmvc</artifactId>
  33. <version>5.2.8.RELEASE</version>
  34. </dependency>
  35. <dependency>
  36. <groupId>org.springframework</groupId>
  37. <artifactId>spring-web</artifactId>
  38. <version>5.2.8.RELEASE</version>
  39. </dependency>
  40. <dependency>
  41. <groupId>javax.servlet</groupId>
  42. <artifactId>javax.servlet-api</artifactId>
  43. <version>3.1.0</version>
  44. </dependency>
  45. <!--tomcat servlet api -->
  46. <dependency>
  47. <groupId>jstl</groupId>
  48. <artifactId>jstl</artifactId>
  49. <version>1.2</version>
  50. </dependency>
  51. <dependency>
  52. <groupId>taglibs</groupId>
  53. <artifactId>standard</artifactId>
  54. <version>1.1.2</version>
  55. </dependency>
  56. <!--mybatis依賴-->
  57. <dependency>
  58. <groupId>org.mybatis</groupId>
  59. <artifactId>mybatis</artifactId>
  60. <version>3.4.1</version>
  61. </dependency>
  62. <dependency>
  63. <groupId>mysql</groupId>
  64. <artifactId>mysql-connector-java</artifactId>
  65. <version>5.1.39</version>
  66. </dependency>
  67. <!-- 整合-->
  68. <dependency>
  69. <groupId>org.mybatis</groupId>
  70. <artifactId>mybatis-spring</artifactId>
  71. <version>1.3.0</version>
  72. </dependency>
  73. <!-- 連接池-->
  74. <dependency>
  75. <groupId>com.mchange</groupId>
  76. <artifactId>c3p0</artifactId>
  77. <version>0.9.5.2</version>
  78. </dependency>
  79. <dependency>
  80. <groupId>org.springframework</groupId>
  81. <artifactId>spring-tx</artifactId>
  82. <version>5.2.8.RELEASE</version>
  83. </dependency>
  84. <dependency>
  85. <groupId>org.springframework</groupId>
  86. <artifactId>spring-jdbc</artifactId>
  87. <version>5.2.8.RELEASE</version>
  88. </dependency>
  89. <dependency>
  90. <groupId>javax.servlet.jsp.jstl</groupId>
  91. <artifactId>jstl</artifactId>
  92. <version>1.2</version>
  93. </dependency>
  94. <dependency>
  95. <groupId>javax.servlet</groupId>
  96. <artifactId>servlet-api</artifactId>
  97. <version>2.5</version>
  98. </dependency>
  99. <dependency>
  100. <groupId>com.google.code.gson</groupId>
  101. <artifactId>gson</artifactId>
  102. <version>2.3</version>
  103. </dependency>
  104. <dependency>
  105. <groupId>com.alibaba</groupId>
  106. <artifactId>druid</artifactId>
  107. <version>0.2.6</version>
  108. </dependency>
  109. <dependency>
  110. <groupId>commons-logging</groupId>
  111. <artifactId>commons-logging</artifactId>
  112. <version>1.1.1</version>
  113. </dependency>
  114. <dependency>
  115. <groupId>commons-configuration</groupId>
  116. <artifactId>commons-configuration</artifactId>
  117. <version>1.9</version>
  118. </dependency>
  119. </dependencies>

UserMapper

 
  1. import com.tulun.model.User;
  2. /**
  3. * Description :
  4. * Created by Resumebb
  5. * Date :2021/4/22
  6. */
  7. public interface UserMapper {
  8. public User getUserById(Integer id);
  9. }

UserService

 
  1. package com.tulun.service;
  2. import com.tulun.model.User;
  3. import com.tulun.dao.UserMapper;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Service;
  6. /**
  7. * Description :
  8. * Created by Resumebb
  9. * Date :2021/4/19
  10. */
  11. @Service
  12. public class UserService {
  13. @Autowired
  14. private UserMapper userMapper;
  15. public User getUserById(Integer id){
  16. if(id < 0)
  17. return new User();
  18. return userMapper.getUserById(id);
  19. }
  20. }

UserController

查詢t_manager中的id為1的數(shù)據(jù)進(jìn)行顯示

 
  1. package com.tulun.controller;
  2. import com.tulun.model.User;
  3. import com.tulun.service.UserService;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.ResponseBody;
  8. /**
  9. * Description :
  10. * Created by Resumebb
  11. * Date :2021/4/22
  12. */
  13. @Controller
  14. public class UserController {
  15. @Autowired
  16. private UserService userService;
  17. @RequestMapping("/testUser")
  18. @ResponseBody
  19. public User testUser(){
  20. User user = userService.getUserById(1);
  21. return user;
  22. }
  23. }

UserMapper.xml

 
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper
  3. PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4. "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <mapper namespace="com.tulun.dao.UserMapper">
  6. <resultMap id="UserMap" type="com.tulun.model.User">
  7. <result property="id" column="id"></result>
  8. <result property="name" column="userName"></result>
  9. <result property="passwd" column="password"></result>
  10. </resultMap>
  11. <select id="getUserById" parameterType="int" resultMap="UserMap">
  12. select * from t_manager where id=#{id}
  13. </select>
  14. </mapper>

運(yùn)行結(jié)果

 

錯(cuò)誤記錄

運(yùn)行的界面顯示unkown the request

 原因是因?yàn)槎丝诒徽加昧?,更改服?wù)器的端口號就可以了。

出現(xiàn)這個(gè)錯(cuò)誤就要檢查SQL查詢語句,數(shù)據(jù)源的配置是否正確,經(jīng)檢查我報(bào)這個(gè)錯(cuò)是因?yàn)镾QL查詢語句manager寫成了manger,用戶名密碼不對也會報(bào)這個(gè)錯(cuò)。

類似這種錯(cuò),一是檢查@Service有沒有加上,二是檢查映射文件有沒有頂行寫,第一行不能有空行。

轉(zhuǎn)自:csdn。作者:resumebb

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔