今天讲的是如何用idea创建一个JavaWeb的Maven SSM项目并且实现简单的登陆功能~(项目源码在最后,需要的可以自行下载)
本文章过于详细过于面向小白,并且在讲解SSM项目的搭建过程中涉及到了小白们极有可能遇到的Idea的坑!
文章比较啰嗦基本上所有的步骤还有常见问题都会列出来,希望大家能耐心看下去~
首先简单的介绍一下SSM框架
SSM框架,是Spring + Spring MVC + MyBatis的缩写,这个是继SSH之后,目前比较主流的Java EE企业级框架,适用于搭建各种大型的企业级应用系统。
多的不说,开始搭建~
首先把数据库的sql文件导入到你的数据库吧(Mysql)
链接:https://pan.baidu.com/s/1FL013yQ3SLG0x_d5bAKKqw
提取码:59bu
PS:记得设置Idea的JDK,不然会报错(有的设置都是一次性的,设置一次后面就不需要再次设置了。这里我就不一一列出步骤了,网上一搜一大把)
接下来开始项目搭建,点开Idea 创建新项目
选中maven勾选框框,选中webapp模板,然后Next!
然后定义maven坐标
注: GroupID 是项目组织唯一的标识符,实际对应JAVA的包的结构,是main目录里java的目录结构。
ArtifactID是项目的唯一的标识符,实际对应项目的名称,就是项目根目录的名称。
Version指定了项目的当前版本,SNAPSHOT意为快照,说明该项目还处于开发中,是不稳定的版本。
然后设置maven的目录 setting.xml文件的目录 maven库的目录 Next!
然后设置文件夹名称和物理路径 (基本可以直接Finish )
可以直接Close 右下角选中Enable Auto-Import (设置自动导入)
来看看创建完成后的目录结构~
到这一步也许很多小白疑问为什么创建的web项目没有java文件夹,这里我详细说一下,小伙伴们做好笔记!!
首先右键main→New→Directory 然后取名为java(既然没有,那我们就手动建一个!)
创建完后 按照下图设置 然后apply,然后java文件夹变为蓝色就ok了,用来存放java代码
接下来可以直接部署到Tomcat看看成果,按照我的步骤一步步来~
然后按照下图设置,仔细看
继续看图~
然后选择带exploded的这个包
确认没问题后Apply→OK
然后直接点击启动看看
等待项目启动,会自动跳到Hello,World页面,那就是没问题了,接下来进行后面的操作
我比较习惯先把项目结构做好,现在开始创建包~
名称什么的自己起,我的结构如下~
接下来在main下创建一个resources文件夹存放配置文件,操作方式跟上面创建java文件夹一模一样,不同的是选择Resourcess然后Apply→ OK,看图
接下来添加我们要用的依赖,点击pom.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>com.6mai.test</groupId>
<artifactId>ssm</artifactId>
<!--====================================-->
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>ssm </name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<!-- 声明版本 -->
<properties>
<servlet.version>3.1.0</servlet.version>
<jsp.version>2.3.1</jsp.version>
<jstl.version>1.2</jstl.version>
<mybatis.version>3.4.6</mybatis.version>
<mybatis-spring.version>1.3.2</mybatis-spring.version>
<spring.version>4.3.13.RELEASE</spring.version>
<mysql.version>5.1.40</mysql.version>
<log4j.version>1.2.17</log4j.version>
</properties>
<dependencies>
<!-- 加入servlet的依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${servlet.version}</version>
<scope>provided</scope>
</dependency>
<!-- 加入jsp的依赖 -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>${jsp.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>
<!--有时候不添加下面这段代码会报mybatis的错,找不到mapping文件 所以最好加上-->
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</build>
</project>
然后修改web.xml文件的配置(有的人可能用Idea生成项目时发现生成的web.xml没有头文件,不过问题不大,复制我的就行,关于解决没有头文件的问题可以点击这里:解决Idea创建web项目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>
接下来把各种配置文件都添加到main下的resources文件夹中(不是一次性添加所有,这里为了方便我先都展示出来,部分配置文件里指向的类或者文件在接下来的步骤中添加进去),由于文件过多,而且基本都是通用的配置这里就不一一写出来,太占位置,spring、springMVC、mybatis包括数据库等文件都在这里,大家可以下载下来,基本上都是通用的,没什么特别的操作~
链接:https://pan.baidu.com/s/18xv2EXbihXEXZSvth0Zu7w
提取码:u93j
我比较习惯把默认的那个index.jsp页面加上一个jsp:forward,做一个跳转,这样的话访问这个页面他就会自动给你跳转到这个请求路径
<html>
<body>
<jsp:forward page="login/toLogin"></jsp:forward>
</body>
</html>
然后我再创建一个controller接收这个请求并跳转到login.jsp登陆页面
package com.sixmai.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("login")
public class LoginController {
@RequestMapping("toLogin")
public String toLogin() {
return "login.jsp";
}
}
由于在springmvc.xml里视图解析器是这样配置的
所以在WEB-INF下创建一个jsp文件夹,并且创建一个login.jsp页面放在jsp文件夹里,页面代码如下(这是以前项目里的一个登陆页面,我直接copy过来了,你们也可以直接copy过去)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<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>
然后还有就是静态资源文件,在webapp下创建一个resources文件夹,把静态资源放进去
静态资源在这里 链接:https://pan.baidu.com/s/1vgPqhm-QpGVBfdubxlsZgw
提取码:w1ej
然后咱们再启动项目看看,点击绿色箭头启动,发现他自动跳到了登陆页面并且页面样式都正常,那就可以下一步了~
然后掏出我的神器,mybatis自动生成器(这个软件也是java写的,可以自动生成实体类以及mapper文件和mapping映射文件)
有需要的人可以点击下载
使用教程 点击查看教程
生成后的项目结构如下
生成的文件在这里:
链接:https://pan.baidu.com/s/1KI9x3GVgoyLg2JD7yCDXeA
提取码:vtrz
然后在service里写接口
上代码
package com.sixmai.service;
import java.util.Map;
public interface LoginService {
//loginname是登陆名称
//password是密码
Map<String,Object> login(String loginname, String password);
}
在impl中添加实现类(怕大家不懂UserExample如何使用,所以我按照正常的操作手动在mapper里写了一个login的登陆方法,详细的可以点开mapper文件和mapping文件查看)
package com.sixmai.service.impl;
import com.sixmai.domain.User;
import com.sixmai.mapper.UserMapper;
import com.sixmai.service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class LoginServiceImpl implements LoginService {
@Autowired
private UserMapper userMapper;
@Override
public Map<String, Object> login(String loginname, String password) {
HashMap<String, Object> mm = new HashMap<>();
/* UserExample userExample = new UserExample();
userExample.createCriteria().andLoginnameEqualTo(loginname);*/
List<User> users = userMapper.login(loginname);//根据用户名在数据库查找对应的用户
String msg = "";
if ((users.size() == 0)) {//如果size=0就是没找到这个用户
mm.put("status", "401");
mm.put(msg, "用户不存在!");
}
if ((users.size() > 1)) {//如果size>1就是这数据有问题了,不应该存在两个一样的用户名
mm.put("status", "401");
mm.put(msg, "error!");
}
User user = users.get(0);//取集合里第一个
if (!password.equals(user.getPassword())) {
mm.put("status", "401");
mm.put(msg, "密码错误!");
} else {
mm.put("status", "200");
mm.put(msg, "登陆成功!");
}
return mm;//把map集合里的状态码和信息提示返回给controller
}
}
到这里,基本的JDBC操作已经大功告成了
接下来在controller里做操作~
package com.sixmai.controller;
import com.sixmai.domain.User;
import com.sixmai.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";
}
}
}
通过上面的代码可以看到,当返回的集合里状态码(status)为200的时候就是成功了,跳转到system下的index.jsp页面,那么就在
WEB-INF下的jsp文件夹下创建一个system文件夹,在system文件夹里添加一个index.jsp页面,如果跳转到了index.jsp页面那么就登陆成功啦~
<%--
Created by IntelliJ IDEA.
User: XF
Date: 2018/10/25
Time: 16:29
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>
然后改看看成果了,启动项目输入账号密码(我默认的都是admin,验证码只是个装饰,点击验证码会自动赋值)
登陆成功~
项目源码在此,需要的可以自行下载~
链接:https://pan.baidu.com/s/14LCUP42XT45QmazZam-baA
提取码:w3v7
The end!
、