今天讲如何用idea创建一个JavaWeb的Maven SSM项目并且实现简单的登陆功能。
首先简单的介绍一下SSM框架:是Spring + Spring MVC + MyBatis的缩写,这个是继SSH之后,目前比较主流的Java EE企业级框架,适用于搭建各种大型的企业级应用系统。
多的不说,开始搭建:
1、搭建环境 IntelliJ IDEA 2019.3.2
2、创建maven webapp项目 ssm_demo
3、ssm_demo 项目目录结构
4、配置mavem pow.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>ssm_demo</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>ssm_demo Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
<junit.version>4.11</junit.version>
<servlet-api.version>3.1.0</servlet-api.version>
<jsp-api.version>2.3.1</jsp-api.version>
<jstl.version>1.2</jstl.version>
<mybatis.version>3.5.4</mybatis.version>
<mybatis-spring.version>2.0.3</mybatis-spring.version>
<spring.version>4.3.26.RELEASE</spring.version>
<mysql.version>5.1.48</mysql.version>
<log4j.version>1.2.17</log4j.version>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>
<!-- 加入servlet的依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${servlet-api.version}</version>
<scope>provided</scope>
</dependency>
<!-- 加入jsp的依赖 -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>${jsp-api.version}</version>
<scope>provided</scope>
</dependency>
<!-- 加入jstl的依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<!-- 加入mybtais的依赖 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
<!-- 加入mybtais-spring的依赖 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>${mybatis-spring.version}</version>
</dependency>
<!-- 加入spring的依赖 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</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</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-expression</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-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- 加入springmvc的依赖 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- 加入mysql的依赖 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!-- 加入log4j的依赖 -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>${log4j.version}</version>
</dependency>
</dependencies>
<build>
<finalName>ssm_demo</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
5、配置tomcat 8.5
6、启动项目,会自动跳到Hello,World页面,那就是没问题了,接下来进行后面的操作
7、继续创建项目结构和包,具体结构如下:
8、在main下sources中建立各种配置文件:applicationContext.xml、springmvc.xml、application-dao.xml、application-service.xml、mybatis.cfg.xml文件。
9、修改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>manager</display-name>
<!-- 编码过滤器开始 -->
<filter>
<filter-name>encodingFilter</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>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 编码过滤器结束 -->
<!-- 配置spring的监听器开始 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 配置spring的监听器结束 -->
<!-- 配置前端控制器开始 -->
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<!--用来标记是否在项目启动时就加在此Servlet,0或正数表示容器在应用启动时就加载这个Servlet, 当是一个负数时或者没有指定时,则指示容器在该servlet被选择时才加载.正数值越小启动优先值越高 -->
<load-on-startup>1</load-on-startup>
</servlet>
<!--为DispatcherServlet建立映射 -->
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<!-- 拦截所有请求,千万注意是(/)而不是(/*) -->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 配置前端控制器结束 -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
9、修改默认index.jsp页面加上一个jsp:forward,做一个跳转。
<html>
<body>
<jsp:forward page="login/toLogin"></jsp:forward>
</body>
</html>
10、创建一个controller接收这个请求并跳转到login.jsp登陆页面
11、在WEB-INF下创建一个jsp文件夹,并且创建一个login.jsp页面放在jsp文件夹里,页面代码如下:
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2020/2/12
Time: 22:07
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="loginHtml">
<head>
<meta charset="utf-8">
<title>登录系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="${pageContext.request.contextPath }/resources/car.jpg">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/public.css" media="all" />
</head>
<body class="loginBody">
<form class="layui-form" id="frm" method="post" action="${pageContext.request.contextPath }/login/login.action">
<div class="login_face"><img src="${pageContext.request.contextPath }/resources/images/face1.jpg" class="userAvatar"></div>
<div class="layui-form-item input-item">
<label for="userName">用户名</label>
<input type="text" placeholder="请输入用户名" autocomplete="off" name="loginname" class="layui-input" lay-verify="required">
</div>
<div class="layui-form-item input-item">
<label for="password">密码</label>
<input type="password" placeholder="请输入密码" autocomplete="off" name="password" class="layui-input" lay-verify="required">
</div>
<div class="layui-form-item input-item" id="imgCode">
<label for="code">验证码</label>
<input type="text" placeholder="请输入验证码" value="jgmxj" autocomplete="off" id="code" class="layui-input">
<img src="${pageContext.request.contextPath }/resources/images/code.jpg">
</div>
<div class="layui-form-item">
<!-- lay-submit代表这个按钮一个表单提交的按钮 -->
<button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
<font color="red">${error }</font>
</div>
<!-- <div class="layui-form-item layui-row">
<a href="javascript:;" class="seraph icon-qq layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
<a href="javascript:;" class="seraph icon-wechat layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
<a href="javascript:;" class="seraph icon-sina layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
</div> -->
</form>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/layui/layui.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/resources/js/cache.js"></script> --%>
</body>
<script type="text/javascript">
layui.use(['form','layer','jquery'],function(){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer
$ = layui.jquery;
/* $(".loginBody .seraph").click(function(){
layer.msg("这只是做个样式,至于功能,你见过哪个后台能这样登录的?还是老老实实的找管理员去注册吧",{
time:5000
});
}) */
//登录按钮
form.on("submit(login)",function(data){
$(this).text("登录中...").attr("disabled","disabled").addClass("layui-disabled");
setTimeout(function(){
//window.location.href = "/layuicms2.0";
$("#frm")[0].submit();//提交表单
},1000);
return false;
})
//表单输入效果
$(".loginBody .input-item").click(function(e){
e.stopPropagation();
$(this).addClass("layui-input-focus").find(".layui-input").focus();
})
$(".loginBody .layui-form-item .layui-input").focus(function(){
$(this).parent().addClass("layui-input-focus");
})
$(".loginBody .layui-form-item .layui-input").blur(function(){
$(this).parent().removeClass("layui-input-focus");
if($(this).val() != ''){
$(this).parent().addClass("layui-input-active");
}else{
$(this).parent().removeClass("layui-input-active");
}
})
})
</script>
</html>
11、配置 springmvc.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
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/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- 扫描controller -->
<context:component-scan base-package="com.ssm.controller"></context:component-scan>
<!-- 配置映射器和适配器 -->
<mvc:annotation-driven></mvc:annotation-driven>
<!-- 配置视图解析器 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/"></property>
<!--<property name="suffix" value=".jsp"></property>-->
</bean>
<!-- 拦截器 -->
<!-- <mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**" />
<mvc:exclude-mapping path="/user/toLogin*" />
<mvc:exclude-mapping path="/user/login*" />
<bean class="com.sxt.interceptor.SessionInterceptor"></bean>
</mvc:interceptor>
</mvc:interceptors> -->
<!-- 过滤静态资源 -->
<mvc:default-servlet-handler />
</beans>
12、配置login.jsp静态资源文件,在webapp下创建一个resources文件夹,把静态资源文件覆盖
13、启动项目,出现登录界面且页面样式都正常,那就可以下一步了
14、分别建立以下文件:User.java、UserExample.java、UserMapper.java、LoginServiceImpl.java、LoginService.java
并配置UserMapper.xml文件
15、到这里,基本的JDBC操作已经大功告成了,继续更新controller中LoginController.java文件
package com.ssm.controller;
import com.ssm.domain.User;
import com.ssm.service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Map;
@Controller
@RequestMapping("login")
public class LoginController {
@Autowired
private LoginService loginService;
@RequestMapping("toLogin")
public String toLogin() {
return "login.jsp";
}
@RequestMapping("login")
public String login(User user, Model model) {
String loginname = user.getLoginname();
String password = user.getPassword();
Map<String, Object> map = loginService.login(loginname, password);
if (map.get("status").equals("200")) {
return "system/index.jsp";
} else {
model.addAttribute("error", map.get("msg"));
return "login.jsp";
}
}
}
16、通过上面的代码可以看到,当返回的集合里状态码(status)为200的时候就是成功了,跳转到system下的index.jsp页面,那么就在WEB-INF下的jsp文件夹下创建一个system文件夹,在system文件夹里添加一个index.jsp页面,如果跳转到了index.jsp页面那么就登陆成功啦
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2020/2/12
Time: 22:27
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>MaNongXF</title>
</head>
<body>
<h1>Hello,SSM!!!!</h1>
</body>
</html>