基于 Spring+Spring MVC+Mybatis+Bootstrap+jQuery+MySQL+Maven+Git 技术栈搭建后台管理系统

笔者有话说:话不多说,跟着本文慢慢体会开发的乐趣吧!

背景描述:

近日公司开发了一款后台管理系统,采用目前主流的SMM框架(Spring + Spring MVC + Mybatis )搭建后台,后台前端采用了主流的 Bootstrap,接口数据交互采用 jQuery 处理,项目开发IDE 是 Eclipse,项目的构建使用 Maven ,MySQL作为数据库,采用 Git 做版本控制,整个项目搭建过程还是比较复杂曲折的,对于新手来说各自配置报错,对于老手来说也是各种小心,本文就笔者对基础的框架搭建做个简要的概述,对重点配置做代码公开,以便初学者参考学习。

前置知识:

SSM框架在项目开发中经常使用到,相比于SSH框架,它在仅几年的开发中运用的更加广泛。

  • Spring作为一个轻量级的框架,有很多的拓展功能,最主要的我们一般项目使用的就是IOC和AOP。
  • SpringMVC是Spring实现的一个Web层,相当于Struts的框架,但是比Struts更加灵活和强大!
  • Mybatis是 一个持久层的框架,在使用上相比Hibernate更加灵活,可以控制sql的编写,使用 XML或注解进行相关的配置!

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,官网:http://www.bootcss.com/

jQuery 是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)官网:http://jquery.com/

MySQL 是最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的 RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之一。

Maven 是专门用于构建和管理Java相关项目的工具。

Git(读音为/gɪt/)  是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。

如想深入理解,可自行百度即可,这里不再赘述!

项目搭建:

第一步:创建项目

使用Eclipse 创建 Maven Poject 项目,记得选中 webapp,然后再完善Java工程的必要文件夹,如下图;

至此基本文件夹是有了,然后我们完善必须的项目配置。

第二步,配置文件

1, 配置pom.xml 文件,这是依赖jar包管理的配置文件,直接放上全部代码:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.qunhongtech</groupId>
	<artifactId>PUManage</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>PUManage Maven Webapp</name>
	<url>http://maven.apache.org</url>

	<properties>
		<!-- spring版本号 -->
		<spring.version>4.3.18.RELEASE</spring.version>
		<!-- mybatis版本号 -->
		<mybatis.version>3.4.2</mybatis.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>

		<!-- spring核心包 -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-core</artifactId>
			<version>${spring.version}</version>
		</dependency>
<dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-oxm</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>${spring.version}</version>
        </dependency>
        
         <!-- 添加MyBatis依赖 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.3.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.38</version>
        </dependency>
    <!-- 阿里巴巴的数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.26</version>
        </dependency>
         <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>
        <!-- spring结成mybatis -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.2.3</version>
        </dependency>
        <!-- jsp标准标签库 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.16</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.6.1</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-nop</artifactId>
            <version>1.6.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.8.5</version>
        </dependency>
	</dependencies>
	<build>
		<finalName>PUManage</finalName>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

看到这里,头晕了吧,这就是代码的世界,只有懂的人才知道它的美;

2,配置spring-mvc.xml,核心代码

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="  
     http://www.springframework.org/schema/beans   
     http://www.springframework.org/schema/beans/spring-beans-4.0.xsd  
     http://www.springframework.org/schema/context  
     http://www.springframework.org/schema/context/spring-context-4.0.xsd  
     http://www.springframework.org/schema/mvc  
     http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd  
     ">

	<!-- 启用spring mvc 注解 -->
	<context:annotation-config />
	<!-- 设置使用注解的类所在的jar包 -->
	<context:component-scan base-package="com.qunhong.controller" />

	<!-- JSON转换器 -->
	<bean id="mappingJacksonHttpMessageConverter"
		class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
		<property name="supportedMediaTypes">
			<list>
				<value>text/html;charset=UTF-8</value>
				<value>application/json;charset=UTF-8</value>
			</list>
		</property>
	</bean>

	<!-- 启动SpringMVC的注解功能,完成请求和注解POJO的映射 -->
	<bean
		class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<list>
				<ref bean="mappingJacksonHttpMessageConverter" /> <!-- JSON转换器 -->
			</list>
		</property>
	</bean>

	<!-- 定义跳转的文件的前后缀 ,视图模式配置 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<!-- return的字符串加上前缀和后缀,变成一个 可用的url地址 -->

		<property name="prefix" value="/WEB-INF/view/" />
		<property name="suffix" value=".jsp" />
	</bean>

	<!-- 默认的注解映射 -->
	<mvc:annotation-driven />
	<!-- 解除servlet对静态资源文件访问的限制,使得静态资源先经过 -->
	<mvc:default-servlet-handler />
	<mvc:resources location="/statics/" mapping="/statics/**" />

</beans>

3,配置 applicationContent.xml,这是Spring的相关配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
	xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
     http://www.springframework.org/schema/beans/spring-beans.xsd
     http://www.springframework.org/schema/context
     http://www.springframework.org/schema/context/spring-context.xsd
     http://www.springframework.org/schema/aop
     http://www.springframework.org/schema/aop/spring-aop.xsd
     http://www.springframework.org/schema/tx 
     http://www.springframework.org/schema/tx/spring-tx.xsd">

 	<!-- 组件扫描 -->
	<context:component-scan base-package="com.qunhong">
		<context:exclude-filter type="annotation"
			expression="org.springframework.stereotype.Controller" />
	</context:component-scan>

	<!--sping的配置文件和业务逻辑有关的 -->
	<context:property-placeholder location="classpath:jdbc.properties" />

	<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
		<property name="jdbcUrl" value="${jdbc.url}"></property>
		<property name="driverClass" value="${jdbc.driver}"></property>
		<property name="user" value="${jdbc.username}"></property>
		<property name="password" value="${jdbc.password}"></property>
	</bean>

	<!-- Mybatis文件 -->
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="configLocation" value="classpath:mybatis-config.xml" />
		<property name="dataSource" ref="dataSource" />
		<!-- 映射文件路径 -->
		<property name="mapperLocations" value="classpath:com/qunhong/mapping/*.xml" />
	</bean>

	<!-- 配置扫描器 -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="com.qunhong.dao" />
		<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
	</bean>

	<!-- 事务管理器 -->
	<bean id="transactionManager"
		class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource" />
	</bean>

	<tx:annotation-driven transaction-manager="transactionManager" />
	

</beans>

4,配置mybatis-config.xml ,这是Mybatis 绑定的类,设置别名,后面就不要全部名称了

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration  
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"  
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

	<typeAliases>
		<typeAlias type="com.qunhong.model.Person" alias="Person" />
		<typeAlias type="com.qunhong.model.Company" alias="Company" />
		<typeAlias type="com.qunhong.model.User" alias="User" />
		<typeAlias type="com.qunhong.model.CompanyGroup" alias="CompanyGroup" />
	</typeAliases>


</configuration>

5,配置 jdbc.properties,这是数据库的相关配置

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/PU_MANAGE_DB?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=123456
jdbc.initialSize=1
jdbc.minIdle=1
jdbc.maxActive=20
jdbc.maxWait=60000
jdbc.removeAbandoned=true
jdbc.removeAbandonedTimeout=180
jdbc.timeBetweenEvictionRunsMillis=60000
jdbc.minEvictableIdleTimeMillis=300000
jdbc.validationQuery=SELECT 1
jdbc.testWhileIdle=true
jdbc.testOnBorrow=false
jdbc.testOnReturn=false

6, 配置log4j.properties,这是调试输出的相关配置

log4j.rootLogger=DEBUG, stdout
log4j.logger.org.mybatis=DEBUG
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p %d %C: %m%n

7,配置web.xml,这里配置整个项目的一个配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">

	<display-name>Play Union Manage WebSite</display-name>

	<!-- 解决工程编码过滤器 -->
	<filter>
		<filter-name>characterEncodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>characterEncodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	<!-- 启动spring的容器 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- SpringMVC配置 -->
	<servlet>
		<servlet-name>springDispatcherServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring-mvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springDispatcherServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>


	<!-- 使用Rest风格的URI,将页面普通的post请求转为指定的delete或者put请求 -->
	<filter>
		<filter-name>HiddenHttpMethodFilter</filter-name>
		<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>HiddenHttpMethodFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	<!--HttpPutFormContentFilter:将请求体中的数据解析包装成一个map -->
	<filter>
		<filter-name>HttpPutFormContentFilter</filter-name>
		<filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>HttpPutFormContentFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	<!-- 启动页面 -->
	<welcome-file-list>
		<welcome-file>/WEB-INF/view/login.jsp</welcome-file>
	</welcome-file-list>

</web-app>

综上,基本配置就这些了,大概意思里面有注释,应该能看明白,笔者就不赘述了,网上对各个配置文件都有更详细的说明,可查阅去深读。

第三步,编写前端页面,即Jsp页面

项目初期搭建,会创建基本最简单的测试页面,这里直接截图给大家看下本项目的文件结构,如下图:

如上图,大概都能看明白吧,静态文件,各个页面,如登录页面、管理员页面等;

第四步,编写Java代码,采用MVC结构,如下是代码结构

展开结构,大致包括了用户管理,公司管理,登录几个模块,如下图

里面的具体代码就不这里列出来了,太多了...

第五步,配置MySQL数据库,创建必要的表,如下图

第六步,项目运行,配置好Tomcat等这些,就可以看到如下的后台管理系统页面了,列举部分如下图:

登录页面:

后台页面:

管理员页面:

公司列表页面:

公司列表详情页面:

排行榜前端页面:

至于编辑,新增这些页面就不展示了,为什么选新白娘子传奇呢,因为最近正在看赵雅芝版的,新版的无法看,真是浪费资源;

部署项目

配置好服务器,可以购买阿里云、腾讯云什么的,笔者部署到了搬瓦工,安装了宝塔做管理,比较方便,安装Tomcat、MySQL数据库后,打包项目war 包,导出数据库,然后顺利部署到了公司服务器。

项目尾声:

本项目因一些原因没有最终交付给客户,所以这里就把框架基础部分给大家做个示范记录,如果想体验此系统,可以直接登录网站体验,如需要源码在此基础上做二次开发,可单独联系我们做授权使用(备注:源码不免费提供,请酌情考虑,希望理解)。

体验地址:后台管理系统,用户名/密码:admin/123456

联系我们:[email protected]

附言:因笔者能力技术有限,疏漏之处在所难免,如有错误请批评指正,非常感谢!

发布了71 篇原创文章 · 获赞 51 · 访问量 26万+

猜你喜欢

转载自blog.csdn.net/mapboo/article/details/89459997
今日推荐