尚硅谷：使用eclipse进行SSM整合准备

红太狼 2023-06-23 07:56 31阅读 0赞

# 搭建一个maven工程 #

1、new —> Maven Project ----> 选中"Create a simple project(skip archetype selection)" ----> next  
2、填写Artifact

*  Group Id： com.atguigu
 *  Artifact id：ssm-crud
 *  Packaging：war

3、选中finish

4、补全项目

*  右键单击项目名称 ----> Properties----》 Project Facets—> 去掉Dynamic Web Module的对勾—> Apply---->选中Dynamic Web Module----> 点击 Further configuration available —> 将Context directory的内容改为src/main/webapp，然后一路确定
 *  然后项目就会自动在src/main/webapp下补全目录WEB-INF。
 *  打开WEB-INF下的web.xml，在文件末尾补全结束标签：

</web-app>

# 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/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <groupId>com.atguigu</groupId>
      <artifactId>ssm-crud</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <packaging>war</packaging>
      
      <dependencies>
            
      		<dependency>
    			<groupId>org.springframework</groupId>
    			<artifactId>spring-webmvc</artifactId>
    			<version>4.3.7.RELEASE</version>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>org.springframework</groupId>
    			<artifactId>spring-jdbc</artifactId>
    			<version>4.3.7.RELEASE</version>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>org.springframework</groupId>
    			<artifactId>spring-aspects</artifactId>
    			<version>4.3.7.RELEASE</version>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>org.mybatis</groupId>
    			<artifactId>mybatis</artifactId>
    			<version>3.4.2</version>
    		</dependency>
    		
    		
    		<dependency>
    			<groupId>org.mybatis</groupId>
    			<artifactId>mybatis-spring</artifactId>
    			<version>1.3.1</version>
    		</dependency>
    
    		
    		
    		<dependency>
    			<groupId>c3p0</groupId>
    			<artifactId>c3p0</artifactId>
    			<version>0.9.1</version>
    		</dependency>
    		
    		<dependency>
    			<groupId>mysql</groupId>
    			<artifactId>mysql-connector-java</artifactId>
    			<version>5.1.41</version>
    		</dependency>
            
    		
    		<dependency>
    			<groupId>jstl</groupId>
    			<artifactId>jstl</artifactId>
    			<version>1.2</version>
    		</dependency>
    
    		
    		<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>javax.servlet-api</artifactId>
    			<version>3.0.1</version>
    			<scope>provided</scope>
    		</dependency>
    
    
    		
    		
    		<dependency>
    			<groupId>junit</groupId>
    			<artifactId>junit</artifactId>
    			<version>4.12</version>
    		</dependency>
      
      </dependencies>
    </project>

# 引入bootstap前端框架 #

## 下载 ##

[https://v3.bootcss.com/getting-started/\#download][https_v3.bootcss.com_getting-started_download]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]  
然后解压

## 引入 ##

**引入样式**  
1、在web-app下创建一个文件夹static，然后将解压得到的目录复制到这个目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]  
2、在web-app下创建一个index.jsp的文件，然后引入样式

<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

**引入jquery**  
1、在src/main/webapp/static下创建一个js文件夹，然后复制jquery-1.12.4.min.JS复制到js文件夹下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]  
2、在web-app\\index.jsp的文件中引入js

<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>

**使用**  
1、修改/ssm-crud/src/main/webapp/index.jsp

备注： index.jsp的内容：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    
    
    <script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
    
    
    <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    
    </head>
    <body>
    	<button class="btn btn-success"> 按钮</button>
    	
    </body>
    </html>

2、运行：  
![在这里插入图片描述][20191218120911699.png]  
![在这里插入图片描述][20191226124753319.png]

[https_v3.bootcss.com_getting-started_download]: https://v3.bootcss.com/getting-started/#download
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191218115256929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191218115349206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191218120253575.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[20191218120911699.png]: https://img-blog.csdnimg.cn/20191218120911699.png
[20191226124753319.png]: https://img-blog.csdnimg.cn/20191226124753319.png