文章目录
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7dd321881dc3bf0562f6cdfc14cb2e80.png#pic_center)
商城系统首页
页面与静态资源处理
不使用前后端分离开发了,管理后台用vue
静态资源处理
1、nginx发给网关集群,网关再路由到微服务
2、静态资源放到nginx中,后面的很多服务都需要放到nginx中
3、index文件放到gulimall-product下的static文件夹
4、把index.html放到templates中
pom依赖
导入thymeleaf依赖、热部署依赖devtools使页面实时生效,修改之后ctrl+f9:build一下
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
关闭thymeleaf缓存,方便开发实时看到更新
thymeleaf:
cache: false
suffix: .html # 后缀
prefix: classpath:/templates/ # 前缀
web开发放到web包下,原来的controller是前后分离对接手机等访问的,所以可以改成app,对接app应用
启动测试:
- 访问页面:http://localhost:10000
- 访问静态资源:http://localhost:10000/index/css/CL.css
渲染一级分类菜单
刚导入index.html时,里面的分类菜单都是写死的,我们要访问数据库拿到放到model中,然后在页面foreach填入
/**
* @author ljy
* @version 1.0.0
* @Description 首页controller
* @createTime 2021年12月16日 16:43:00
*/
@Controller
public class IndexController {
@Autowired
private CategoryService categoryService;
@GetMapping({
"/", "index.html"})
public String getIndex(Model model) {
// 获取所有的一级分类,getLevel1Catagories
List<CategoryEntity> catagories = categoryService.getLevel1Catagories();
// 放给页面取值
model.addAttribute("catagories", catagories);
// 视图解析器进行拼串,classpath:/templates/+返回值+.html
return "index";
}
}
页面遍历菜单数据
<html lang="en" xmlns:th="http://www.thymeleaf.org"> # 导入语法
<li th:each="catagory:${catagories}" >
<a href="#" class="header_main_left_a" ctg-data="3" th:attr="ctg-data=${catagory.catId}"><b th:text="${catagory.name}<