小白的代码日常Day1

---

前言

为了巩固和加强对spring Cloud的学习，今天对着How2j的站长完成了一个初步的小练习…其实就只是一个单框架练习，不过希望跟我一样的小白也能够通过这个练习对框架能够有进一步的了解

一、运行效果

因为这是一个非常入门的小Dome，所以我们可以先来看看我们运行结果后，再考虑要不要学习哦，提取码为1234。而对于spring还不够熟练的朋友们也可以一起学习spring哦

---

二、进入练习，修改pom文件

1.声明聚合工程

我们当前使用的spring boot版本是2.0.3.RELEASE，所以我们先做一个修改

	<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.3.RELEASE</version>
        <relativePath/>
    </parent>
    <packaging>war</packaging> # 需要war包

2.引入类库

无论是创建Maven项目还是直接使用Spring骨架，我们都要将pom文件加入下面这些包：

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
                 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>    
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
        </dependency>   
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>4.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>            
    </dependencies>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>    
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
        </plugins>
    </build>

如此一来我们的环境就配置完毕了，接下来让我们编写实体类

---

二、编写程序实体类

1.启动类DomApplication

Dom启动类

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;

@SpringBootApplication
public class DomApplication {
    public static void main(String[] args) {
        SpringApplication.run(runApplication.class);
    }
}

2.实体类Product

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Product {
    private int id;
    private  String name;
    private  int price;
}

3.ProductService

import cn.how2j.czq.pojo.Product;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

@Service
public class ProductService {
    public List<Product> listProduct(){
        List<Product> ps=new ArrayList<>();
        ps.add(new Product(1,"product a", 50));
        ps.add(new Product(2,"product b", 100));
        ps.add(new Product(3,"product c", 150));
        return ps;
    }
}

4.ProductController

import cn.how2j.czq.pojo.Product;
import cn.how2j.czq.service.ProductService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;
import java.util.List;

@Controller
public class ProductController {
    @Resource
    private  ProductService productService;
    @RequestMapping("/prodeucts")
    public Object products(Model m){
        List<Product> ps=productService.listProduct();
        m.addAttribute("ps",ps);
        return "prodeucts";
    }
}

三、配置文件与前端HTML页面

1.先做做配置

server:
  port: 8002 #这里将启动端口修改为8002，避免端口被占用
  servlet:
    context-path: /
spring:
  thymeleaf:
    cache: false #将thymeleaf的缓存关闭，实现热部署
    mode: HTML5
    encoding: UTF-8
    servlet:
      content-type: text/html

2.编写HTNL页面

thymeleaf模板引型的配置需要配置在resources/templates下，否者将不会被识别出来，而且要注意这里的网页名称要与Controller返回的名称要一样，否则页面也会因为没有数据儿报错。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>products</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        table {
            border-collapse:collapse;
            width:400px;
            margin:20px auto;
        }
        td,th{
            border:1px solid gray;
        }
    </style>
</head>
<body>
<div class="workingArea">
    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>产品名称</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="p: ${ps}">
            <td th:text="${p.id}"></td>
            <td th:text="${p.name}"></td>
            <td th:text="${p.price}"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

总结

由于第一次发帖而且还是小白 ，希望大家一起努力学习，早日成为项目总监
有兴趣的同学们可以跟我一样前往How2j网站一起学习，这也会对你很有帮助。