idea ssm框架 mysql_idea搭建简单ssm框架的最详细教程(新)

为开发一个测试程序,特搭建一个简单的ssm框架,因为网上看到很多都是比较老旧的教程,很多包都不能用了,eclipes搭建并且其中还附带了很多的其他东西,所以特此记录一下mac中idea搭建过程。

另:平常开发的项目中其实用的不是mybatis,而是mybatisplus,一款为简化开发而生的基于mybatis的三方,只能说,用起来贼爽,省去了很多的sql语句。

以下为一步步操作,详细可循,完全学习了白居易写诗的风格,堪称傻瓜教程。

目录结构已建好的童鞋,可以直接跳过前几步去看相应配置文件,点击穿越

一、搭建背景及准备条件

不是必须的,保证项目运行只要有这些东西就行,可以不一样

mac下idea,maven3.6.0,jdk1.8,tomcat8,mysql5.7

二、搭建开始——新建项目

1. file -> new -> project

5fc86d74f56068a24fbd07c505985d4c.png

2. 新建maven项目,如图勾选 create from archetype,并选择 maven-archetype-webapp,next

309aba64f51341014ccd6a9714c0e203.png

3. 输入坐标及项目名,next

e099358f51f3da379f1507e74d23fbae.png

4. 选择maven配置,选择你自己的maven,next

27076be06b365121a73e87a14575fb12.png

5. 确定项目名,finish

4093d518369fb5b5e3f2cc90a1536f85.png

6. 成功后的项目结构

11f11614ecb68cd1ef7af7f3b3b41b51.png

三、完善项目结构

1. 新建java目录  src/main/java

90b8418335072a341656537c0db03a76.png

178e0d84c5d2b17d7290888e9685421a.png

2. 新建资源目录  resources

c0992ea045051f53cafa59ed40d192c4.png

3. 新建webapp目录  webapp,同样的方法,不过idea会自动创建里边的WEB-INF等文件

6f8404b15c3f982fecc36c21df8874d4.png

4. 现在基本目录结构已建成,让我们对比一下看是不是一样的,见证奇迹

bb9b89a98957c2b13ff27d836b2cb818.png

5. 将响应目录 右键 设置为对应属性  java标记为Soures Root  resources标记为Resources Root

94206eb4ed9b3e0c7a2f8f0d8514ed52.png

6. 设置为web项目,标记webapp为 web    file -> Project Structure -> Models

777432d86d5bf2b14953b3010c0188eb.png

8d5f4bc9d8169121fed5728d27db8ccb.png

7. 在上图标记的 1,2 处 编辑修改路径 为 自己webapp的路径

0c95c156f360de3a749ca4d706c5b355.png

00b218798f0c53dc0b3242e991f12a0a.png

8. 此时目录结构已经完善完成,移步下图

17f183a165040d823bafeb09e51140b9.png

四、初步配置启动tomcat服务

1.  导入项目包 test2:war exploded  file -> Project Structure -> Models

9bccad95794f69c3755ea0c0f67f6032.png

选择你的项目,点击右下角 open

fa8feab0b400d53fadad79d67f996136.png

选择maven,一路next下去,最后点击神圣的finish按钮,OK。(可能无此步骤,没有则忽略)

db50047179588241ee4b10d4eada9522.png

2. 还是刚才的界面,选择 Artifacts  此时第一次是会默认有两个包,如果没有则进行此步操作 file -> Project Structure -> Artifacts

dc403c2f2d7a78d50240f496cd77893e.png

选择,点击右下 OK按钮

89e8f1462347c14ad0ff217020d123bf.png

最终想要得到的结果如下图:

8e2d00d2a5fb7c6eccc1828477c02bac.png

3. 进行了上述每一步操作后,很关键的要保存,点击apply 或者ok,apply按钮是不可点击状态才能关闭此面板哦,不然刚才所有操作都白费了

70033040ceab754c659b0670fecdcfdf.png

4. 添加tomcat,进行相关配置      点击面板右上角

ea78d5233d74d485bcf79abb2c9d3590.png

添加配置tomcat

0b1a0bc8c80e8e4fb4ce16b7c5816d2d.png

添加刚才生成的包

c9db621aa43e19612d766cb42b266017.png

最后点击,apply,ok,好了完事了,准备运行吧

d8cefec93e975f79ad623900626fb071.png

5. 运行tomcat   右上角面板选择debug模式运行(也可以普通模式)

95a3fad461c4b5b7c64d00805d6c9fb0.png

运行成功,页面显示默认生成的index.jsp的内容  http://localhost:8085/

268cd699aa5fdf85b36bb836ca83afe2.png

五、配置spring容器等相关配置文件

1. 在poom.xml(位置:项目的根目录下)中引入必要的poom依赖(其中包括了spring、springmvc、jdbc、mysql、druid连接池、mybatis、lombok插件、juni他、其他工具包 )

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

4.0.0

com.test

test

1.0-SNAPSHOT

war

4.3.7.RELEASE

3.5.0

org.springframework

spring-webmvc

${org.springframework.version}

org.springframework

spring-jdbc

${org.springframework.version}

org.aspectj

aspectjweaver

1.7.4

mysql

mysql-connector-java

5.1.26

com.alibaba

druid

1.0.11

org.mybatis

mybatis

3.4.2

org.mybatis

mybatis-spring

1.3.1

org.springframework

spring-tx

4.3.7.RELEASE

com.fasterxml.jackson.core

jackson-databind

2.5.0

org.projectlombok

lombok

1.18.0

com.alibaba

fastjson

1.1.39

junit

junit

4.12

log4j

log4j

1.2.14

commons-logging

commons-logging

1.2

org.slf4j

slf4j-api

1.6.1

org.slf4j

slf4j-log4j12

1.6.1

src/main/java

**/*.java

src/main/resources

true

src/main/java

**/*.xml

org.apache.maven.plugins

maven-compiler-plugin

1.8

1.8

UTF-8

false

View Code

如果想要自己添加jar包,可以在WEB-INF中新建lib文件夹,然后放入你的jar包(poom依赖下载的jar包编译过后其实也就是在编译包下的lib文件夹中)

每次更改poom依赖后,记得更新jar包,一般右下角都会弹出更新提示

34613a100087e5f74c5649ba152b4921.png

2. 配置web.xml文件(位置:webapp下的WEB-INF中)  tomcat启动时,会加载此文件,从而扫描加载其他的配置文件

9f5f96b669b46d5c6417dc9654973f84.png

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0">

encodingFilter

org.springframework.web.filter.CharacterEncodingFilter

true

encoding

UTF-8

encodingFilter

/*

org.springframework.web.context.ContextLoaderListener

org.springframework.web.util.IntrospectorCleanupListener

contextConfigLocation

classpath*:spring-applicationContext.xml

log4jConfigLocation

classpath:log4j.xml

springmvc

org.springframework.web.servlet.DispatcherServlet

contextConfigLocation

classpath*:spring-mvc.xml

1

springmvc

/

/index.jsp

/index.html

/reg.html

View Code

其中包括了编码过滤、监听器、springmvc配置、spring容器中其他配置包括mybatis等、log4j配置、项目访问默认欢迎页,如需添加自定义过滤器,也许在此配置

3. 新建其他配置文件(位置:resoures下) applicationContext.xml、springmvc.xml、mybatis.xml、jdbc.properties、日志配置(log4j.properties和log4j.xml二选一,我用的log4j.xml)

2dba225adc67f137e01ff83a7ded64b2.png

spring-mvc.xml

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

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

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop.xsd

http://www.springframework.org/schema/task

http://www.springframework.org/schema/task/spring-task-3.0.xsd">

text/html;charset=UTF-8

500

org.springframework.web.servlet.handler.SimpleMappingExceptionResolver

View Code

spring-applicationContext      后来的其他配置文件也可以在这个里边引入比如:shiro、redis集群、cache-redis缓存、自定义组件等等(优点:不用再去动web.xml的配置)

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

http://www.springframework.org/schema/beans/spring-beans-4.0.xsd">

View Code

spring-mybatis.xml

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd

http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd

http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd

http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd">

View Code

mybatis-config.xml

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

/p>

"http://mybatis.org/dtd/mybatis-3-config.dtd">

View Code

jdbc.properties

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

#mysql

jdbc.driver=com.mysql.jdbc.Driver

jdbc.url=jdbc:mysql://192.168.0.156:3306/test?useUnicode=true&characterEncoding=utf-8

jdbc.username=root

jdbc.password=root

jdbc.initialSize=3jdbc.maxActive=1000jdbc.minIdle=0jdbc.maxWait=6000jdbc.removeAbandoned=truejdbc.removeAbandonedTimeout=1800jdbc.timeBetweenEvictionRunsMillis=60000jdbc.minEvictableIdleTimeMillis=25200000jdbc.validationQuery=selectgetdate()

jdbc.testWhileIdle=falsejdbc.testOnBorrow=falsejdbc.testOnReturn=false

View Code

log4j.xml

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

View Code

好了,经过以上一套噼里啪啦的操作,配置基本算是好了,接下来让我们写代码检验一下我们的配置到底对不对呢,激动人心的时刻就要来了

六、编写代码测试

1. java文件夹下,新建package包com.test,另外再新建包括controller、mapper、model、service的四个包

883bfd1c61a8ab3c945e1aa58a0f6d6c.png

新建完结构如图所示

d3bef60349dcc664faebba3bb281dac3.png

2. 在每个包下分别新建代码文件:TestController.java、TpmTestLogService.java、TpmTestLogServiceImpl.java、TpmTestLogMapper.java、TpmTestLogMapper.xml、TpmTestLog

09d98cad97152f59c9888f0ab3f08c1f.png

实体类:TpmTestLog.java

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

packagecom.test.model;importlombok.Data;importjava.io.Serializable;/*** @TpmTestLog

* @(TPM_TEST_LOG)

*@version: Ver 1.0*/@Datapublic class TpmTestLog implementsSerializable {/*** @备注: 主键

* @字段:LOG_UUID bigint*/

privateLong logUuid;/*** @备注:

* @字段:TESTMAIN_UUID CHAR(32)*/

privateString testmainUuid;/*** @备注:

* @字段:OPERATION VARCHAR(20)*/

privateString operation;/*** @备注:

* @字段:SYSCREATEDATE VARCHAR(25)*/

privateString syscreatedate;

}

View Code

数据库交互层dao接口:TpmTestLogMapper.java

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

packagecom.test.mapper;importcom.test.model.TpmTestLog;/*** @TpmTestLogMapper

* @Mapper

*@version: Ver 1.0*/

public interfaceTpmTestLogMapper {

Long insert(TpmTestLog tpmTestLog);

}

View Code

对应的xml:TpmTestLogMapper.xml

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

LOG_UUID AS logUuid,

TESTMAIN_UUID AS testmainUuid,

OPERATION AS operation,

SYSCREATEDATE AS syscreatedate

INSERT INTO TPM_TEST_LOG (LOG_UUID,

TESTMAIN_UUID,

OPERATION,

SYSCREATEDATE)

VALUES (#{logUuid},

#{testmainUuid},

#{operation},

#{syscreatedate})

View Code

业务层接口类sercice:TpmTestLogService.java

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

packagecom.test.service;importcom.test.model.TpmTestLog;/*** @TpmTestLogService

* @Service

*@version: Ver 1.0*/

public interfaceTpmTestLogService{

Long ceshi(TpmTestLog tpmTestLog);

}

View Code

业务层的实现类impl:TpmTestLogServiceImpl.java

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

packagecom.test.service.impl;importcom.test.mapper.TpmTestLogMapper;importcom.test.model.TpmTestLog;importcom.test.service.TpmTestLogService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;importorg.springframework.transaction.annotation.Transactional;/*** @TpmTestLogServiceImpl

* @ServiceImpl

*@version: Ver 1.0*/@Service

@Transactionalpublic class TpmTestLogServiceImpl implementsTpmTestLogService {

@AutowiredprivateTpmTestLogMapper tpmTestLogMapper;

@OverridepublicLong ceshi(TpmTestLog tpmTestLog) {returntpmTestLogMapper.insert(tpmTestLog);

}

}

View Code

接口逻辑层controller:TestController.java

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

packagecom.test.controller;importcom.alibaba.fastjson.JSONObject;importcom.test.model.TpmTestLog;importcom.test.service.TpmTestLogService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;

@RestController

@RequestMapping("/api")public classTestController {

@AutowiredprivateTpmTestLogService tpmTestLogService;

@GetMapping("/test")publicJSONObject test(){

JSONObject jsonObject= newJSONObject();

TpmTestLog tpmTestLog= newTpmTestLog();

tpmTestLog.setSyscreatedate("asfasgags");

tpmTestLog.setTestmainUuid("fdasgassfsarew");

tpmTestLog.setOperation("新增");

tpmTestLogService.ceshi(tpmTestLog);

jsonObject.put("title", "测试成功" +tpmTestLog.getLogUuid());returnjsonObject;

}

}

View Code

3. 数据库交互,测试表以及数据库连接文件jdbc中的配置(文中5.3已有配置文件)  Table:TPM_TEST_LOG

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

SETNAMES utf8mb4;SET FOREIGN_KEY_CHECKS = 0;--------------------------------Table structure for `TPM_TEST_LOG`------------------------------

DROP TABLE IF EXISTS`TPM_TEST_LOG`;CREATE TABLE`TPM_TEST_LOG` (

`LOG_UUID`bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',

`TESTMAIN_UUID`varchar(32) COLLATE utf8_bin DEFAULT NULL,

`OPERATION`varchar(20) COLLATE utf8_bin DEFAULT NULL,

`SYSCREATEDATE`varchar(25) COLLATE utf8_bin DEFAULT NULL,PRIMARY KEY(`LOG_UUID`)

) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;SET FOREIGN_KEY_CHECKS = 1;

View Code

4. 测试接口  因为是写的测试是get请求,所以可以直接在浏览器中测试,地址栏输入接口地址(4.4中你配置的地址),回车访问,如下图

3951c00e81829ba201b1de56fae4b00e.png

七、前端页面和接口交互测试

1. 编写前端页面测试代码(不要说你是后台,不会写前端代码,不会也没关系,直接copy吧,有问题找google)

26a2179c3d79665770afd942cbd80301.png

前边生成的index.jsp我们稍加改动

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

Hello World!

$(document).ready(function(){

$.getJSON("/api/test",function(res){

console.log(res)

$("h2").text(res.title)

});

})

})

View Code

由于页面中引用了万能的jquery语法,所以在webapp下新建js文件夹,并放入jquery文件,点击下载

不要问为什么要用jquery,怎么不用原生js,因为我愿意。

好吧,其实是为了代码的简洁高效,毕竟封装了很多方法,让我们可以更注重逻辑

当然原生的也不是不能写,下面是原生的js方法,只需将此方法放入index.jsp里边的script标签中即可,如果没有引入jquery,记得注释掉原来的方法

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

window.onload = function() {//步骤一:创建异步对象

var ajax = newXMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端

ajax.open('get', '/api/test');//步骤三:发送请求

ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用

ajax.onreadystatechange = function() {if (ajax.readyState == 4 && ajax.status == 200) {//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的

console.log(ajax.responseText);//输入相应的内容

console.log(JSON.parse(ajax.responseText).title);

console.log(document.getElementsByTagName("h2")[0])

document.getElementsByTagName("h2")[0].innerText =JSON.parse(ajax.responseText).title;

}

}

}

View Code

2. 接下来见证奇迹,打开页面地址:http://localhost:8085/index.jsp

44d309dafb57a2faacb0ca96e73c7ca0.png

后台经过与数据库交互后,把插入数据库后生成的主键4返回给前端,前端显示在页面中

到这里这个简单的ssm框架就算搭建完成了,看起来过程很长,但实际操作起来应该是很快的,有问题欢迎留言,大家可以一起探讨!

码字不易,且行且珍惜,如发现问题,欢迎指正,java深似海,小白在路上!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值