首先:
你需要去Layui官网下载UI框架。你可能会问,为什么用Layui实现页面效果?简单来说就是:简单、好用、上手快,作为JAVA后端开发人员,Layui无疑是非常友好的,拿来即用。
页面效果图:
练习用的数据库表格:emp和dept 员工和部门
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210502222809482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzUwNDE0Mg==,size_16,color_FFFFFF,t_70
*
SQLyog Ultimate v11.24 (32 bit)
MySQL - 5.6.30 : Database - exam
*********************************************************************
*/
/*!40101 SET NAMES utf8 */;
/*!40101 SET SQL_MODE=''*/;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`exam` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `exam`;
/*Table structure for table `dept` */
DROP TABLE IF EXISTS `dept`;
CREATE TABLE `dept` (
`deptno` int(11) NOT NULL,
`dname` varchar(50) DEFAULT NULL,
`loc` varchar(50) DEFAULT NULL,
PRIMARY KEY (`deptno`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*Data for the table `dept` */
insert into `dept`(`deptno`,`dname`,`loc`) values (10,'教研部','北京'),(20,'学工部','上海'),(30,'销售部','广州'),(40,'财务部','武汉'),(50,'发展部','南京'),(60,'研发部','深圳'),(70,'客服部','杭州'),(80,'国际部','广州'),(90,'本部','东京');
/*Table structure for table `emp` */
DROP TABLE IF EXISTS `emp`;
CREATE TABLE `emp` (
`empno` int(11) NOT NULL,
`ename` varchar(50) DEFAULT NULL,
`job` varchar(50) DEFAULT NULL,
`mgr` int(11) DEFAULT NULL,
`hiredate` date DEFAULT NULL,
`sal` decimal(7,2) DEFAULT NULL,
`COMM` decimal(7,2) DEFAULT NULL,
`deptno` int(11) DEFAULT NULL,
PRIMARY KEY (`empno`),
KEY `fk_emp` (`mgr`),
KEY `fk_dept` (`deptno`),
CONSTRAINT `fk_emp` FOREIGN KEY (`mgr`) REFERENCES `emp` (`empno`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*Data for the table `emp` */
insert into `emp`(`empno`,`ename`,`job`,`mgr`,`hiredate`,`sal`,`COMM`,`deptno`) values (1001,'甘宁','文员',1013,'2000-12-17','8000.00',NULL,20),(1002,'黛绮丝','销售员',1006,'2001-02-20','16000.00','3000.00',30),(1003,'殷天正','销售员',1006,'2001-02-22','12500.00','5000.00',30),(1004,'刘备','经理',1009,'2001-04-02','29750.00',NULL,20),(1005,'谢逊','销售员',1006,'2001-09-28','12500.00','14000.00',30),(1006,'关羽','经理',1009,'2001-05-01','28500.00',NULL,30),(1007,'张飞','经理',1009,'2001-09-01','24500.00',NULL,10),(1008,'诸葛亮','分析师',1004,'2007-04-19','30000.00',NULL,20),(1009,'曾阿牛','董事长',NULL,'2001-11-17','50000.00',NULL,10),(1010,'韦一笑','销售员',1006,'2001-09-08','15000.00','0.00',30),(1011,'周泰','文员',1008,'2007-05-23','11000.00',NULL,20),(1012,'程普','文员',1006,'2001-12-03','9500.00',NULL,30),(1013,'庞统','分析师',1004,'2001-12-03','30000.00',NULL,20),(1014,'黄盖','文员',1007,'2002-01-23','13000.00',NULL,10),(1015,'赵云','经理',1009,'1970-01-01','29500.00',NULL,80),(1016,'路人甲','经理',1009,'2021-05-02','12345.00','1000.00',20),(1017,'路人乙','经理',1009,'2021-05-02','12345.00','1000.00',20),(1018,'路人丙','经理',1009,'2021-05-02','12345.00','1000.00',20),(1019,'路人丁','经理',1009,'2021-05-02','12345.00','1000.00',20),(1020,'路人戊','经理',1009,'2021-05-01','12345.00','1000.00',20),(1021,'路人己','经理',1009,'2021-05-01','12345.00','1000.00',20),(1022,'许褚','经理',1009,'2021-05-01','12345.00','1500.00',20),(1023,'路人庚','经理',1009,'2021-05-02','12345.00','1000.00',20),(1024,'胡青牛','文员',1013,'2021-05-02','5000.00','1500.00',70),(1025,'东方不败','董事长',NULL,'2021-05-02','30000.00','5000.00',50);
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
接下来,让我们开始编程吧!
一、使用maven创建web项目,这里就不详细描述创建过程了,相信很多小伙伴觉得so easy。我把自己快速创建的方法介绍一下,供参考:
1.创建工程:为什么不选择骨架,因为两点:自动创建的web.xml和jsp配置过低,需要手动修改;第二,可能会出现out目录和target目录同时存在的问题,无法统一解析路径。所以,我们选择自己搭建,快速完成!
2.在porm依赖中加入java<packing>war</packing>
,这一步很关键:
3.点击File选择project structure,你也可以直接ctrl+alt+shift+s
4.web项目路径设置
5.完成后的样子!Tomcat自己配,你既然学到了springssm,这个还让人教的话,我只能说,大侠你骨骼精奇,天赋异禀!
二、结构搭建,如图:
1.generatorConfig.xml是引入的逆向工程配置,不熟悉的小伙伴们可以选择不使用,这里不详细介绍了,自己去了解。
2.logback.xml是日志整合配置
3.spring-config.xml对应spring配置
4.springmvc.xml对应mvc配置
5.sqlMapConfig.xml对应mybatis
以上,可以根据自己的习惯来命名和搭建结构层次,不同公司有不同规范,大同小异。
三、porm依赖,及SSM核心配置
以下依赖项和xml配置能看懂,知道是什么意思即可,以后依赖的更多,你记得下来吗?所以没有必要自己去配一遍,直接复制粘贴。进公司后,根据项目的不同,公司会统一提供,你大概率没有机会自己写。
1.porm配置
<?xml version="1.0" encoding="UTF-8"?>
<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>org.example</groupId>
<artifactId>layui_ssm</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<!-- jdk版本 -->
<jdk.version>15</jdk.version>
<!-- spring版本号 RELEASE 正式版,经过测试更加稳定-->
<spring.version>5.0.3.RELEASE</spring.version>
<!--mybatis版本-->
<mybatis.version>3.5.4</mybatis.version>
<!--spring-mybatis-->
<mybatis-spring.version>1.3.1</mybatis-spring.version>
<!--mysql数据库驱动版本-->
<mysql.version>5.1.47</mysql.version>
<!--junit测试包版本号-->
<junit.version>4.12</junit.version>
<!--日志包版本号-->
<log4j.version>1.2.17</log4j.version>
<druid-version>1.1.10</druid-version>
<logback.version>1.1.3</logback.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${
spring.version}</version>
</dependency>
<!--spring-web容器功能模块-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${
spring.version}</version>
</dependency>
<!--整合操作对象与数据库之间的-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${
spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${
spring.version}</version>
</dependency>
<!-- MyBatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${
mybatis.version}</version>
</dependency>
<!-- MyBatis/Spring -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>${
mybatis-spring.version}</version>
</dependency>
<!-- 数据库驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${
mysql.version}</version>
</dependency>
<!--alibaba druid datasource-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>${
druid-version}</version>
</dependency>
<!--spring的事务-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${
spring.version}</version>
</dependency>
<!--切面配置-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${
spring.version}</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.6</version>
</dependency>
<dependency>
<groupId>com.github.jsqlparser</groupId>
<artifactId>jsqlparser</artifactId>
<version>0.9.5</version>
</dependency>
<!--springmvc的依赖-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${
spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${
spring.version}</version>
</dependency>
<!--jsp的相关依赖-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<!--把对象转换成json格式-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.4</version>
</dependency>
<!--引入阿里的json依赖,解决json传递时的日期问题-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
<!--文件上传相关依赖-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>
<!-- junit测试包 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${
junit.version}<