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

为获得更好的阅读体验,可以查看原文:https://www.cnblogs.com/mufengforward/p/9198612.html

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

 

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

 

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

 

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

一、搭建背景及准备条件

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

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

 

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

1. file -> new -> project

 

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

 

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

 

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

 

5. 确定项目名,finish

 

6. 成功后的项目结构

 

三、完善项目结构

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

 

2. 新建资源目录  resources

 

 

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

 

 

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

 

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

 

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

 

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

 

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

 

四、初步配置启动tomcat服务

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

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

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

 

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

选择,点击右下 OK按钮

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

 

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

 

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

添加配置tomcat

添加刚才生成的包

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

 

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

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

 

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

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

 View Code

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

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

 

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

 View Code

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

 

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

 

 spring-mvc.xml

 View Code

 

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

 View Code

  

 spring-mybatis.xml

 View Code

 mybatis-config.xml

 View Code

jdbc.properties

 View Code

 

 log4j.xml

 View Code

 

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

 

六、编写代码测试

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

 新建完结构如图所示

 

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

 

 实体类:TpmTestLog.java

 View Code

 

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

 View Code

 对应的xml:TpmTestLogMapper.xml

 View Code

 

 业务层接口类sercice:TpmTestLogService.java

 View Code

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

 View Code

 

 接口逻辑层controller:TestController.java

复制代码

package com.test.controller;

import com.alibaba.fastjson.JSONObject;
import com.test.model.TpmTestLog;
import com.test.service.TpmTestLogService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class TestController {

    @Autowired
    private TpmTestLogService tpmTestLogService;

    @GetMapping("/test")
    public JSONObject test(){

        JSONObject jsonObject = new JSONObject();

        TpmTestLog tpmTestLog = new TpmTestLog();
        tpmTestLog.setSyscreatedate("asfasgags");
        tpmTestLog.setTestmainUuid("fdasgassfsarew");
        tpmTestLog.setOperation("新增");
        tpmTestLogService.ceshi(tpmTestLog);

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

}

复制代码

 

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

 View Code

 

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

 

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

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

 

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

 View Code

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

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

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

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

 View Code

 

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

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

 

 

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

 

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

 

 

 mapper注入失败问题可以参考:https://www.cnblogs.com/mufengforward/p/11127088.html

 

认真是我们参与这个社会的方式,认真是我们改变这个社会的方式!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值