SSM项目整合实现简单用户注册和查询操作

前言:

 此篇文章是我在学习SSM框架入门时写的一个小demo,主要是为了熟悉SSM框架的使用与引入,通过SSM框架的搭建完成对用户需求的注册和查询操作。

同时检验自己对SSM框架的掌握程度,以便进一步完成对SSM框架升级后spring boot框架的学习。

 该项目简单的使用Ajax技术对数据请求的实现,包括简单的前端页面设计等

PS: 项目全部源码免费获取方法写在文章最后

一、项目实现前提(开发环境配置)

1.编程工具:Idea 2020.3

2.编程环境:JDK 1.8

3.数据库:MySQL 8.0.18

4.请求环境:Tomcat 9.0.50

5.浏览器:Firefix、Chrome、Edge等

6.项目框架:Spring + SpringMVC + Mybatis + Mysql

7.maven依赖:apache-maven-3.3.9

8.其他:jquery-3.4.1.js、jackson等

二、项目基本思路

需求简介:教师、学生注册账户,编辑个人信息,存储到数据库中,方便各学校的人员统计和管理,使其信息保留在云端。

A.前期功能的实现

1.教师端注册登录的实现

2.对账户其信息的增删改查等操作

B.后期功能的完善

1.教师对学生进行综合评价

2.学生反馈信息等

3.学生端注册登录的实现

4.权限设定

三、具体实现步骤

1.创建数据库(myssm

1) teacher表

教师号tid

教师姓名tname

教师年龄tage

教授课程tmajor

账户密码tpassword

创建表sql语句

CREATE TABLE `teacher` (
  `tid` int(20) NOT NULL AUTO_INCREMENT,
  `tname` varchar(60) DEFAULT NULL,
  `tage` int(20) DEFAULT NULL,
  `tmajor` varchar(60) DEFAULT NULL,
  `tpassword` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`tid`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8

2) student表(后期完善)

学生学号id

学生姓名name

学生年龄age

所学专业major

账户密码password

辅导员tid

2. Tomcat的配置

  • 1).下载解压Tomcat 9.0.50版本的文件,配置path路径等(不详细叙述)
  • 2).电脑管理员身份打开cmd输入startup 然后回车打开Tomcat 使其运行
  • 3).在idea界面中配置Tomcat启动器并部署项目访问地址等

3. idea中的SSM框架搭建

SSM 编程,即 SpringMVC + Spring + MyBatis 整合,是当前最为流行的 JavaEE 开发技术架构。其实 SSM 整合的实质,仅仅就是将 MyBatis整合入 Spring。因为 SpringMVC原本就是 Spring的一部分,不用专门整合。

SSM 整合的实现方式可分为两种:

  • 基于 XML 配置方式
  • 基于注解方式

3.1  SSM简介:

SpringMVC + Spring + MyBatis

  • SpringMVC:数据处理,视图层和界面层,负责接收请求,显示处理结果的。
  • Spring:Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成
  • MyBatis:持久层, 访问数据库的。

 

3.2 实现逻辑:

用户发起请求--SpringMVC接收--Spring中的Service对象--MyBatis处理数据。

SSM整合也叫做SSI (IBatis也就是mybatis的前身), 整合中有容器。

  • 第一个容器SpringMVC容器, 管理Controller控制器对象的。
  • 第二个容器Spring容器,管理Service,Dao,工具类对象的

需要做的是把使用的对象交给合适的容器创建,管理。 把Controller还有web开发的相关对象交给springmvc容器, 这些web用的对象写在springmvc配置文件中service,dao对象定义在spring的配置文件中,让spring管理这些对象。

springmvc容器和spring容器是有关系的,关系已经确定好了springmvc容器是spring容器的子容器, 类似java中的继承。 子可以访问父的内容,在子容器中的Controller可以访问父容器中的Service对象, 就可以实现controller使用service对象。

3.3 实现步骤:

1)使用myssm的mysql库

 表使用teacher(tid, auto_increment, tname, tage,tmajor,tpassword)

 

 

2)新建maven web项目

新建Maven工程,选择maven-archetype-webapp,

3)进行Next,然后对其项目命名(myfirst-ssm)和工件坐标(com.gob)的编写

4)对Maven的路径配置

5)创建成功后的原始结构

 

3.4加入依赖(pom.xml

  springmvcspringmybatis三个框架的依赖,jackson依赖,mysql驱动,druid连接池jspservlet依赖。

1maven 依赖

 1 <!--servlet--> 
 2 <dependency> 
 3 <groupId>javax.servlet</groupId> 
 4 <artifactId>javax.servlet-api</artifactId> 
 5 <version>3.1.0</version> 
 6 <scope>provided</scope> 
 7 </dependency> 
 8 <!-- jsp 依赖 --> 
 9 <dependency> 
10 <groupId>javax.servlet.jsp</groupId> 
11 <artifactId>jsp-api</artifactId> 
12 <version>2.2.1-b03</version> 
13 <scope>provided</scope> 
14 </dependency> 
15 <!--springmvc--> 
16 <dependency> 
17 <groupId>org.springframework</groupId> 
18 <artifactId>spring-webmvc</artifactId> 
19 <version>5.2.5.RELEASE</version> 
20 </dependency> 
21 <!--事务的--> 
22 <dependency> 
23 <groupId>org.springframework</groupId> 
24 <artifactId>spring-tx</artifactId> 
25 <version>5.2.5.RELEASE</version> 
26 </dependency>
27 <dependency> 
28 <groupId>org.springframework</groupId> 
29 <artifactId>spring-jdbc</artifactId> 
30 <version>5.2.5.RELEASE</version> 
31 </dependency> 
32 <!--aspectj 依赖--> 
33 <dependency> 
34 <groupId>org.springframework</groupId> 
35 <artifactId>spring-aspects</artifactId> 
36 <version>5.2.5.RELEASE</version> 
37 </dependency> 
38 <!--jackson--> 
39 <dependency> 
40 <groupId>com.fasterxml.jackson.core</groupId> 
41 <artifactId>jackson-core</artifactId> 
42 <version>2.9.0</version> 
43 </dependency> 
44 <dependency> 
45 <groupId>com.fasterxml.jackson.core</groupId> 
46 <artifactId>jackson-databind</artifactId> 
47 <version>2.9.0</version> 
48 </dependency> 
49 <!--mybatis 和 spring 整合的--> 
50 <dependency> 
51 <groupId>org.mybatis</groupId> 
52 <artifactId>mybatis-spring</artifactId> 
53 <version>1.3.1</version> 
54 </dependency> 
55 <!--mybatis--> 
56 <dependency> 
57 <groupId>org.mybatis</groupId> 
58 <artifactId>mybatis</artifactId> 
59 <version>3.5.1</version> 
60 </dependency> 
61 <!--mysql 驱动--> 
62 <dependency> 
63 <groupId>mysql</groupId> 
64 <artifactId>mysql-connector-java</artifactId> 
65 <version>5.1.9</version> 
66 </dependency> 
67 <!--druid--> 
68 <dependency> 
69 <groupId>com.alibaba</groupId> 
70 <artifactId>druid</artifactId>
71 <version>1.1.12</version> 
72 </dependency> 
73 </dependencies>

2)插件

 1 <build> 
 2 <resources> 
 3 <resource> 
 4 <directory>src/main/java</directory><!--所在的目录--> 
 5 <includes><!--包括目录下的.properties,.xml 文件都会扫描到--> 
 6 <include>**/*.properties</include> 
 7 <include>**/*.xml</include> 
 8 </includes> 
 9 <filtering>false</filtering> 
10 </resource> 
11 </resources> 
12 <plugins> 
13 <plugin> 
14 <artifactId>maven-compiler-plugin</artifactId> 
15 <version>3.1</version> 
16 <configuration> 
17 <source>1.8</source> 
18 <target>1.8</target> 
19 </configuration> 
20 </plugin> 
21 </plugins> 
22 </build>

3.5web.xml

A.web原版本较低,需要更改版本号,改到4.0版本的

 

B.更改版本的方法

方法一:复制粘贴之前项目的文档

方法二:在模块组件中更改版本4.0(推荐)

更改后的web4.0

 

 1)注册DispatcherServlet ,目的:

a.创建springmvc容器对象,才能创建Controller类对象。

b.创建的是Servlet,才能接受用户的请求。

 1 <!--注册中央调度器-->
 2   <servlet>
 3     <servlet-name>myweb</servlet-name>
 4     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 5     <init-param>
 6       <param-name>contextConfigLocation</param-name>
 7       <param-value>classpath:conf/dispatcherServlet.xml</param-value>
 8     </init-param>
 9     <load-on-startup>1</load-on-startup>
10   </servlet>
11   <servlet-mapping>
12     <servlet-name>myweb</servlet-name>
13     <url-pattern>*.do</url-pattern>
14   </servlet-mapping>

 2)注册spring的监听器:

ContextLoaderListener,目的: 创建spring的容器对象,才能创建servicedao等对象。

1 <!--注册spring的监听器-->
2   <context-param>
3     <param-name>contextConfigLocation</param-name>
4     <param-value>classpath:conf/applicationContext.xml</param-value>
5   </context-param>
6   <listener>
7     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
8   </listener>

  3)注册字符集过滤器,解决post请求乱码的问题

 1  <filter>
 2     <filter-name>characterEncodingFilter</filter-name>
 3     <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
 4     <init-param>
 5       <param-name>encoding</param-name>
 6       <param-value>utf-8</param-value>
 7     </init-param>
 8     <init-param>
 9       <param-name>forceRequestEncoding</param-name>
10       <param-value>true</param-value>
11     </init-param>
12     <init-param>
13       <param-name>forceResponseEncoding</param-name>
14       <param-value>true</param-value>
15     </init-param>
16   </filter>
17   <filter-mapping>
18     <filter-name>characterEncodingFilter</filter-name>
19     <url-pattern>/*</url-pattern>
20   </filter-mapping>

3.6创建项目整体结构和各种包

创建包

1)Controller请求类包

2)Service业务类包

3dao接口类包

4entity实体类包

注:向数据库中添加数据需要用mybatis和实体类,

Dao Mapper和处理业务逻辑的service

最后接收请求的controller

 

3.7springmvcspringmybatis的配置文件

 1springmvc配置文件(springssm.xml)

 2spring配置文件(applicationContext.xml

 3mybatis主配置文件(mybatis.xml)

 4)数据库的属性配置文件(jdbc.properties

注:具体参考文件夹内配置文件。

 

3.8写代码, dao接口和mapper文件, service和实现类,controllerentity 实体类。

1entity 实体类

Teacher中的属性名可以与数据库中的属性名不同,但需要起别名或者用resultype进行配置。

1  private Integer tid;
2  private String tname;
3  private Integer tage;
4  private String tmajor;
5  private String tpassword;

2dao接口

TeacherDao

1 public interface TeacherDao {
2     int insertTeacher(Teacher teacher);
3     List<Teacher> selectTeachers();
4 }

注:selectTeachers();相当于查询所有教师,自定义名称。

 

TeacherDao.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.gob.dao.TeacherDao">
 6     <select id="selectTeachers" resultType="Teacher">
 7         select tid,tname,tage,tmajor,tpassword from teacher order by tid desc
 8     </select>
 9     <insert id="insertTeacher">
10         insert into teacher(tid,tname,tage,tmajor,tpassword) values(#{tname},#{tage},#{tmajor},#{tpassword})
11     </insert>
12 </mapper>

注:a.查询id和返回类型起别名或者用(全限定路径com/gob/entity/Teacher)进行配置

b.要养成习惯在select 和from之间一定要写列名,不要写星*,这样方便运行,防止出错节约网络流量,提升效率等

3service

TeacherService

1 public interface TeacherService {
2     int addTeacher(Teacher teacher);
3     List<Teacher> find Teachers();  
4 } 

TeacherServiceImpl:接口的实现

找到TeacherService类然后Ait+Enter进行接口的实现放在package com.gob.service.impl;路径下,需新建impl包;

 1 @Service
 2 public class TeacherServiceImpl implements TeacherService {
 3     @Resource
 4     private TeacherDao teacherDao;
 5     @Override
 6     public int addTeacher(Teacher teacher) {
 7        int nums = teacherDao.insertTeacher(teacher);
 8         return nums;
 9     }
10     @Override
11     public List<Teacher> findTeachers() {
12         return teacherDao.selectTeachers();
13     }
14 }

注://引用类型自动注入@Autowired, @Resource

4controller(重点)

TeacherController:首先加注解@Controller

 1 @Controller
 2 @RequestMapping("/teacher")
 3 public class TeacherController {
 4 
 5     @Resource
 6     private TeacherService service;
 7     //注册教师
 8     @RequestMapping("/addTeacher.do")
 9     public ModelAndView addTeacher(Teacher teacher ){
10         ModelAndView mv = new ModelAndView();
11         String tips= "注册失败";
12         //调用service处理teacher
13         int nums = service.addTeacher(teacher);
14         if (nums >0){
15             tips = "教师【"+teacher.getTname()+"】注册成功";
16         }
17         //添加数据
18         mv.addObject("tips",tips);
19         //指定结果页面
20         mv.setViewName("result");
21         return mv;
22 
23     }
24     //处理查询,响应ajax
25     @RequestMapping("/queryTeacher.do")
26     @ResponseBody
27     public List<Teacher> queryTeacher(){
28         //参数检查, 简单的数据处理
29         List<Teacher> teachers = service.findTeachers();
30         return teachers;
31     }
32 }

注:返回结果页面需要在web页面类中声明

3.9.1jsp页面

result.jsp:

1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4     <title>Title</title>
5 </head>
6 <body>
7    result.jsp 结果页面,注册结果: ${tips}
8 </body>
9 </html>

至此,后端内容基本上全部写完和配置好了

======================================

3.9.2前端页面

1)首页

Index.jsp:

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <%
 3     String basePath = request.getScheme() + "://" +
 4             request.getServerName() + ":" + request.getServerPort() +
 5             request.getContextPath() + "/";
 6 %>
 7 <html>
 8 <head>
 9     <title>功能入口</title>
10     <base href="<%=basePath%>" />
11 </head>
12 <body>
13     <div align="center">
14     <p>我的第一个SSM整合项目的实现</p>
15     <img src="images/ssm.jpg" />
16     <table>
17         <tr>
18             <td><a href="addTeacher.jsp"> 注册教师</a></td>
19         </tr>
20         <tr>
21             <td><a href="listTeacher.jsp">查询教师</a></td>
22         </tr>
23     </table>
24     </div>
25 </body>
26 </html>

A.项目部署成功:

B.主页面:

 

2)注册页面

A. addTeacher:

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <%
 3     String basePath = request.getScheme() + "://" +
 4             request.getServerName() + ":" + request.getServerPort() +
 5             request.getContextPath() + "/";
 6 %>
 7 <html>
 8 <head>
 9     <title>教师注册</title>
10     <base href="<%=basePath%>" />
11 </head>
12 <body>
13     <div align="center">
14         <form action="teacher/addTeacher.do" method="post">
15             <table>
16                 <tr>
17                     <td>姓名:</td>
18                     <td><input type="text" name="tname"></td>
19                 </tr>
20                 <tr>
21                     <td>年龄:</td>
22                     <td><input type="text" name="tage"></td>
23                 </tr>
24                 <tr>
25                     <td>教授课程:</td>
26                     <td><input type="text" name="tmajor"></td>
27                 </tr>
28                 <tr>
29                     <td>登录密码:</td>
30                     <td><input type="text" name="tpassword"></td>
31                 </tr>
32                 <tr>
33                     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
34                     <td><input type="submit" value="注册"></td>
35                 </tr>
36             </table>
37         </form>
38     </div>
39 </body>
40 </html>

教师张三注册:

 

 注册成功返回结果页面:

 

 

 注册信息存储到数据库:

注:1.在写注册页面时,<td>姓名:</td> <td><input type="text" name="tname"></td>的类型和实体类的属性相对应,作为映射。

2.项目请求实现路径 index.jsp--addTeacher.jsp---teacher/addTeacher.do( service的方法,调用dao的方法)--result.jsp

 

B.查询页面

listTeacher

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <%
 3     String basePath = request.getScheme() + "://" +
 4             request.getServerName() + ":" + request.getServerPort() +
 5             request.getContextPath() + "/";
 6 %>
 7 <html>
 8 <head>
 9     <title>查询教师ajax</title>
10     <base href="<%=basePath%>" />
11     <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
12     <script type="text/javascript">
13         $(function(){
14             //在当前页面dom对象加载后,执行loadTeacherData()
15             loadTeacherData();
16             $("#btnLoader").click(function(){
17                 //loadTeacherData();
18                 alert($("#country > option:selected").val());
19                 alert($("#country > option:selected").text());
20             })
21         })
22        function loadTeacherData(){
23             $.ajax({
24                 url:"teacher/queryTeacher.do",
25                 type:"get",
26                 dataType:"json",
27                 success:function(data){
28                     //清除旧的数据
29                     $("#info").html("");
30                     //增加新的数据
31                     $.each(data,function(i,n){
32                         $("#info").append("<tr>")
33                             .append("<td>"+n.tid+"</td>")
34                             .append("<td>"+n.tname+"</td>")
35                             .append("<td>"+n.tage+"</td>")
36                             .append("<td>"+n.tmajor+"</td>")
37                             .append("</tr>")
38                     })
39                 }
40             })
41         }
42     </script>
43 </head>
44 <body>
45 <div align="center">
46     <table>
47         <thead>
48         <tr>
49             <td>学号</td>
50             <td>姓名</td>
51             <td>年龄</td>
52             <td>教授课程</td>
53         </tr>
54         </thead>
55         <tbody id="info">
56         </tbody>
57     </table>
58     <input type="button" id="btnLoader" value="查询数据">
59     <select id="country">
60         <option value="1">北京</option>
61         <option value="2">上海</option>
62         <option value="3">深圳</option>
63         <option value="4">天津</option>
64         <option value="5">成都</option>
65     </select>
66 </div>
67 </body>
68 </html>

3.9.3使用ajax实现查询教师的功能

Controller中:

1 //处理查询,响应ajax
2     @RequestMapping("/queryTeacher.do")
3     @ResponseBody
4     public List<Teacher> queryTeacher(){
5         //参数检查, 简单的数据处理
6         List<Teacher> teachers = service.findTeachers();
7         return teachers;
8     }

查询路径:http://localhost:8088/myfirst_ssm/teacher/queryTeacher.do

 四、项目整体架构

                                              

 五、知识点扩展:

@Resource注解类的使用

1.首先在resources目录下的spring的配置文件applicationContext.xml中写包扫描路径配置文件,扫描该com.gob.service路径下的所有类。

<!--声明service的注解@Service所在的包名位置-->

    <context:component-scan base-package="com.gob.service" />

2.然后在service包路径下,编写接口和其实现类,在此类前加@Service注解,用于该类被扫描,可以被实例化。

@Service

public class TeacherServiceImpl  implements  TeacherService {};

3.最后在使用此方法时,@Resource标注在声明的变量上,根据类型将实例化的对象注入到声明的变量中,就可以使用了。

@Resource

    private TeacherService service;

 

 

写在最后:

写文章不易,对你有帮助的话,希望给个三连(点赞、关注、评论)

文章转载请注明出处链接,有其他想法可在评论区留言,谢谢!

项目源码(百度网盘):

链接:https://pan.baidu.com/s/1O1Ak00_h9o9Z0WPvunO_Rw
提取码:1234

 

其他随笔推荐(作者力推):

1. 十大排序算法(Java实现):https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

 

posted @ 2022-02-28 12:58  智博程序园  阅读(816)  评论(0编辑  收藏  举报