SSM环境快速搭建

最新推荐文章于 2023-11-30 16:54:51 发布

专注认真努力

最新推荐文章于 2023-11-30 16:54:51 发布

阅读量907

点赞数

分类专栏：学习文章标签： intellij-idea java maven

本文链接：https://blog.csdn.net/m0_46692607/article/details/123357765

版权

学习专栏收录该内容

42 篇文章 7 订阅

订阅专栏

1. 搭建环境

开发环境
IDE：IDEA 2020.1.1
依赖管理：Maven 3.6.1
数据库：mysql 8.0.23
web服务：Tomcat 9
数据库环境

-- 创建数据库test
CREATE DATABASE test;

-- 创建表user_info
USE test;
CREATE TABLE IF NOT EXISTS user_info(
	id INT(10) UNSIGNED,
	username VARCHAR(30) NOT NULL,
	password VARCHAR(30) NOT NUll,
	PRIMARY KEY (id)
)ENGINE=INNODB DEFAULT CHARSET=utf8;

-- 在表中插入记录
INSERT INTO user_info
(id,username,password)
VALUES
(1,"root","root"),
(2,"hao","123"),
(3,"ren","456");

-- 查看插入结果
SELECT * FROM user_info

在这里插入图片描述
项目环境
1.创建普通Maven项目，添加对web的支持
2.导入pom依赖

	<properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>
    <!--    依赖问题：junit，mysql-connector-java，c3p0，servlet，jsp，jstl，mybatis，mybatis-spring，spring-webmvc，spring-jdbc,
    lombok
    -->
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.2</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </dependency>
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.3</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.9</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.7</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.16</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.3.16</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.22</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>
    <!--    静态资源导出问题-->
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>

2. 项目结构

在这里插入图片描述

3. 数据层配置

创建顺序：User->UserMapper->UserService->UserServiceImpl
在这里插入图片描述

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private int id;
    private String username;
    private String password;
}

public interface UserMapper {
    List<User> findAllUser();
}

public interface UserService {
    List<User> findAllUser();
}

public class UserServiceImpl implements UserService {
    private UserMapper userMapper;
    public void setUserMapper(UserMapper userMapper) {
        this.userMapper = userMapper;
    }

    @Override
    public List<User> findAllUser() {
        return userMapper.findAllUser();
    }
}

使用配置文件实现UserMapper接口中的方法
在这里插入图片描述

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hao.mapper.UserMapper">
    <select id="findAllUser" resultType="User">
        select * from test.user_info
    </select>
</mapper>

注册UserMapper

<!--mybatis-config.xml-->
    <mappers>
        <mapper class="com.hao.mapper.UserMapper"/>
    </mappers>

注册UserServiceImpl

<!--spring-service.xml-->
    <bean id="userServiceImpl" class="com.hao.service.impl.UserServiceImpl">
        <property name="userMapper" ref="userMapper"/>
    </bean>

修改db.properties中数据库名为test
测试结果

public void test() {
        ClassPathXmlApplicationContext context = 
                new ClassPathXmlApplicationContext("applicationContext.xml");
        UserService userServiceImpl = context.getBean("userServiceImpl", UserServiceImpl.class);
        List<User> allUser = userServiceImpl.findAllUser();
        for (User user : allUser) {
            System.out.println(user);
        }
    }

在这里插入图片描述
注意SQL语句的防注入占位符为 #{传递参数}

4. 控制层&视图层配置

配置Tomcat
添加项目war包到tomcat容器中
修改Application context为/
配置web.xml

<!--DispatcherServlet-->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <!--一定要注意:我们这里加载的是总的配置文件，之前被这里坑了！-->
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--encodingFilter-->
    <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>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--Session过期时间-->
    <session-config>
        <session-timeout>15</session-timeout>
    </session-config>

编写jsp
jsp文件中导入jstl标签库

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

jsp文件夹下的jsp文件导入jquery和bootstrap

<!--引入css-->
    <link rel="stylesheet" href="../../ui/bootstrap/css/bootstrap.min.css">
    <!--引入js-->
    <script src="../../js/jquery-3.6.0.min.js"></script>
    <script src="../../ui/bootstrap/js/bootstrap.min.js"></script>

在这里插入图片描述
利用bootstrap可视化布局工具进行jsp布局开发

编写controller

@Controller
@RequestMapping("/user")
public class UserController {

    @Qualifier("userServiceImpl")
    private UserService userService;

    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;
    }

    @RequestMapping("/allUser")
    public String list(Model model) {
        List<User> allUser = userService.findAllUser();
        model.addAttribute("users", allUser);
        return "alluser";
    }
}

jsp页面获得后台返回数据
在这里插入图片描述
在项目结构中添加lib目录

测试
请添加图片描述

5.增加功能（异步ajax）

添加fastjson依赖

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.79</version>
        </dependency>

（注：在项目结构的lib中添加fastjson）
Ajax异步添加用户信息

<script>
        $(function () {
            //注册新增按钮的事件
            $("#btn_add").on("click",function () {
                $("#myModalLabel").text("新增");
                $('#myModal').modal();
            });
            //ajax异步添加用户信息
            let targetUrl = $("#addForm").attr("action");
            $("#btn_submit").on("click",function () {
                $.ajax({
                    url: targetUrl, // 请求路径
                    type: "POST",
                    data: encodeURI($('#addForm').serialize()),
                    success: function (result) {
                        let user = eval("(" + result + ")");
                        let tr = "<tr>\n" +
                            "                    <td>\n" + user.id +
                            "                        \n" +
                            "                    </td>\n" +
                            "                    <td>\n" + user.username +
                            "                        \n" +
                            "                    </td>\n" +
                            "                    <td>\n" + user.password +
                            "                        \n" +
                            "                    </td>\n" +
                            "                </tr>";
                        $("table").append(tr);
                    },
                    error: function () {
                        alert("出错啦...")
                    }
                })
            })
        });
    </script>

添加弹出表单组件

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增</h4>
                </div>
                <form id="addForm" action="${pageContext.request.contextPath}/user/addUser" method="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="id">编号</label>
                            <input type="text" name="id" class="form-control" id="id"
                                   placeholder="编号">
                        </div>
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" name="username" class="form-control" id="username"
                                   placeholder="用户名">
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="text" name="password" class="form-control" id="password"
                                   placeholder="密码">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

添加异步处理控制器方法

    @RequestMapping("/addUser")
    @ResponseBody
    public String add(User user){
        userService.addUser(user);
        return JSON.toJSONString(user);
    }

添加功能数据流程图
在这里插入图片描述

6.删除功能（同步跳转）

为删除按钮绑定跳转事件，地址映射跳转到控制器中的删除方法，需要传递一个id参数

<button class="btn-link" onclick="window.location.href='${pageContext.request.contextPath}/user/delete?id=${user.id}'">删除</button>

控制器中的删除方法，接收到前端传递来id参数，作为删除的依据

    @RequestMapping("/delete")
    public String delete(int id) {
        userService.deleteUserById(id);
        return "redirect:/user/allUser";
    }

7.修改功能（同步跳转）

为修改按钮绑定单击事件，跳转到修改用户信息界面，要求回显用户数据，传递一个唯一性的参数id

<button class="btn-link" name="updataUser"         onclick="window.location.href='${pageContext.request.contextPath}/user/jumpupdata?id=${user.id}'">修改</button>

跳转到修改用户信息界面

@RequestMapping("/jumpupdata")
    public String jumpupdata(Model model,@Param("id") int id) {
        User userById = userService.findUserById(id);
        model.addAttribute("user", userById);
        return "updatauser";
    }

修改用户信息界面
在这里插入图片描述
修改表单的提交处理控制方法

<form action="${pageContext.request.contextPath}/user/updataUser" method="post">

@RequestMapping("/updataUser")
    public String updata(User user) {
        userService.updataUser(user);
        return "redirect:/user/allUser";
    }

修改提交后重定向学生信息页面
在这里插入图片描述

8.最终项目结构

在这里插入图片描述

9.改进

1.数据源c3p0->druid
删除c3p0依赖，导入druid依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.2.8</version>
</dependency>

项目结构中的lib包添加druid,删除c3p0
修改spring-dao.xml中的数据库连接池配置
2.不能修改用户id
修改用户信息的底层SQL语句以id为修改条件，不能在前端页面修改id
需将其设置为隐藏域提交
3.为一些必填字段设置required属性，防止空指针异常

专注认真努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SSM环境快速搭建

1. 搭建环境开发环境IDE：IDEA 2020.1.1依赖管理：Maven 3.6.1数据库：mysql 8.0.23web服务：Tomcat 9数据库环境-- 创建数据库testCREATE DATABASE test;-- 创建表user_infoUSE test;CREATE TABLE IF NOT EXISTS user_info( id INT(10) UNSIGNED, username VARCHAR(30) NOT NULL, password VARCHA
复制链接

扫一扫