将二手车的品牌、编号、图片存储到数据库,给出html代码css样式,以及后台controller层、mapping、mapper等的代码
时间: 2024-06-12 11:04:20 浏览: 11
数据库设计:
创建表cars,包括以下列:
- id,int类型,主键,自增长
- brand,varchar类型,表示车的品牌
- number,varchar类型,表示车的编号
- image,varchar类型,表示车的图片路径
创建表的SQL语句如下:
```
CREATE TABLE `cars` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`brand` varchar(255) NOT NULL,
`number` varchar(255) NOT NULL,
`image` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>二手车列表</title>
<style>
img {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>二手车列表</h1>
<table>
<tr>
<th>品牌</th>
<th>编号</th>
<th>图片</th>
</tr>
{{#each cars}}
<tr>
<td>{{this.brand}}</td>
<td>{{this.number}}</td>
<td><img src="{{this.image}}"></td>
</tr>
{{/each}}
</table>
</body>
</html>
```
CSS样式:
```css
img {
width: 200px;
height: 150px;
}
```
Controller层代码:
```java
@Controller
public class CarController {
@Autowired
private CarMapper carMapper;
@GetMapping("/cars")
public String list(Model model) {
List<Car> cars = carMapper.findAll();
model.addAttribute("cars", cars);
return "car/list";
}
}
```
Mapping代码:
```xml
<mapper namespace="com.example.mapper.CarMapper">
<resultMap id="carMap" type="com.example.entity.Car">
<id column="id" property="id"/>
<result column="brand" property="brand"/>
<result column="number" property="number"/>
<result column="image" property="image"/>
</resultMap>
<select id="findAll" resultMap="carMap">
SELECT * FROM cars
</select>
</mapper>
```
Mapper代码:
```java
@Mapper
public interface CarMapper {
List<Car> findAll();
}
```
注意事项:
- 数据库连接的配置需要在application.properties文件中进行,这里不再赘述。
- HTML代码中使用了handlebars模板引擎,需要在pom.xml文件中添加相关依赖。
- CSS样式需要在HTML文件中引入,这里省略了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)