小白入门之 Springboot整合SSM

深藏阁楼爱情的钟 2021-09-11 02:20 428阅读 0赞

### 文章目录 ###

*   *  1.1 创建SSM模块
     *   *  1.1.1 系统架构图
         *  1.1.2 项目结构
         *  1.1.3 需求
         *  1.1.4 准备表，数据
         *  1.1.5 pom.xml
         *  1.1.6 Car.java
         *  1.1.7 CarDao接口
         *  1.1.8 CarMapper.xml
         *  1.1.9 CarService接口
         *  1.1.10 CarServiceImpl.java
         *  1.1.11 CarController.java
         *  1.1.12 application.yml
         *  1.1.13 RunApp.java
         *  1.1.15 测试
         *  1.1.14 \[新增网页\]
         *  新增需求:

## 1.1 创建SSM模块 ##

### 1.1.1 系统架构图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]

### 1.1.2 项目结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]

### 1.1.3 需求 ###

访问:http://localhost:8080/car/get
    返回:{ "name":"BMW","color":"red","price":9.9}

### 1.1.4 准备表，数据 ###

CREATE TABLE `car` (
      `id` int(11) NOT NULL auto_increment,
      `name` varchar(10) default NULL,
      `color` varchar(10) default NULL,
      `price` double default NULL,
      PRIMARY KEY  (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

### 1.1.5 pom.xml ###

<?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">
        <parent>
            <artifactId>springbootcgb2103</artifactId>
            <groupId>cn.tedu</groupId>
            <version>0.0.1-SNAPSHOT</version>
        </parent>
        <modelVersion>4.0.0</modelVersion>
    
        <artifactId>testSSM</artifactId>
    
        <dependencies>
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.4</version>
            </dependency>
    
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>5.1.48</version>
                <scope>runtime</scope>
            </dependency>
        </dependencies>
    
    </project>

### 1.1.6 Car.java ###

package cn.tedu.pojo;
    
    import org.springframework.stereotype.Component;
    
    @Component
    public class Car { 
        private int id;
        private String name;
        private String color;
        private double price;
    
        public int getId() { 
            return id;
        }
    
        @Override
        public String toString() { 
            return "Car{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", color='" + color + '\'' +
                    ", price=" + price +
                    '}';
        }
    
        public void setId(int id) { 
            this.id = id;
        }
    
        public String getName() { 
            return name;
        }
    
        public void setName(String name) { 
            this.name = name;
        }
    
        public String getColor() { 
            return color;
        }
    
        public void setColor(String color) { 
            this.color = color;
        }
    
        public double getPrice() { 
            return price;
        }
    
        public void setPrice(double price) { 
            this.price = price;
        }
    
    }

### 1.1.7 CarDao接口 ###

package cn.tedu.dao;
    
    import cn.tedu.pojo.Car;
    import org.springframework.stereotype.Repository;
    
    public interface CarDao { 
        Car get();
    }

### 1.1.8 CarMapper.xml ###

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="cn.tedu.dao.CarDao">
        <select id="get" resultType="cn.tedu.pojo.Car">
            select * from car where price=9.9
        </select>
    </mapper>

### 1.1.9 CarService接口 ###

package cn.tedu.service;
    
    import cn.tedu.pojo.Car;
    
    public interface CarService { 
        Car get() ;
    }

### 1.1.10 CarServiceImpl.java ###

package cn.tedu.service;
    
    import cn.tedu.dao.CarDao;
    import cn.tedu.pojo.Car;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    @Service
    public class CarServiceImpl implements CarService{ 
    
        @Autowired
        private CarDao carDao;
    
        @Override
        public Car get() { 
            return carDao.get();
        }
    }

### 1.1.11 CarController.java ###

package cn.tedu.controller;
    
    import cn.tedu.pojo.Car;
    import cn.tedu.service.CarService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    @RequestMapping("/car/")
    public class CarController { 
    
        @Autowired
        private CarService carService;
    
        @RequestMapping("get")
        public Car get(){ 
            return carService.get();
        }
    }

### 1.1.12 application.yml ###

#SpringBoot配置mysql信息
    spring:
      datasource:
        driver-class-name: com.mysql.jdbc.Driver
        url: jdbc:mysql:///mybatisdb?useUnicode=true&characterEncoding=utf8&useSSL=false
        username: root
        password: root
    #SpringBoot整合Mybatis配置
    mybatis:
      #指定UserMapper.xml文件的位置
      mapper-locations: classpath:*.xml
      #开启驼峰映射
      configuration:
        map-underscore-to-camel-case: true

### 1.1.13 RunApp.java ###

package cn.tedu;
    
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    @MapperScan("cn.tedu.dao")//扫描DAO接口文件所在的包
    public class Runapp { 
        public static void main(String[] args) { 
            SpringApplication.run(Runapp.class);
        }
    }

### 1.1.15 测试 ###

访问:http://localhost:8080/car/get
    返回:{ "name":"BMW","color":"red","price":9.9}

### 1.1.14 \[新增网页\] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js"></script>
    		<script src="axios.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<table style="font-size: 20px;" cellspacing="0" border="1px" bgcolor="lightgray">
    				<h3 align="center">京淘电商平台</h3>
    				<button>新增</button>
    			   <head>
    			      <tr>
    			         <th style="text-align: center;" width="320">姓名</th>
    			         <th style="text-align: center;" width="280">年龄</th>
    			         <th style="text-align: center;">爱好</th>
    			         <th style="text-align: center;">学历</th>
    			         <th style="text-align: center;">入学时间</th>
    			         <th style="text-align: center;">[操作]</th>
    			      </tr>
    			   </head>
    			   <body>
    			      <tr v-for="o in msg" align="center">
    			         <td>{
       {o.name}}</td>
    			         <td>{
       {o.age}}</td>
    			         <td align="right"><span style="color: red;">{
       {o.hobby}}</span></td>
    					 <td v-if="o.edu==3">本科</td>
    					 <td>{
       {o.intime.substring(0,9)}}</td>
    					 <td>
    						 <button>修改</button>
    						 <button>删除</button>
    					 </td>
    			      </tr>
    			   </body>
    			</table>	
    		</div>
    	</body>
    	<script> new Vue({ el:"#app", data:{ msg: "暂无数据" }, mounted() { axios({ method: "post", url: "http://localhost:8080/car/get" }) .then( res => { this.msg = res.data; } ) } }) </script>
    </html>

注意:::::Controller层要加一个注解才行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]

### 新增需求: ###

访问:http://localhost:8080/car/getById?id=2
    返回: { "id":2,"name":"Audi","color":"black","price":0.3}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]: /images/20210911/e2564789f3544533b33860aeac9d080e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]: /images/20210911/c9b812e15bd740f29fbaa741a33295f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]: /images/20210911/2e4ceedeefe0477a9ad3f3235fc9f186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]: /images/20210911/19515ef62b0b4eaa90006c536cdc2c9e.png