SpringBoot Model 映射到 前臺 顯示圖片

SpringBoot在後臺上傳上圖片之後在前臺有很多方法給顯示出來，我掌握的有model映射和vue獲取這兩種方式，這篇文章我介紹下怎麼寫model映射到前臺圖片。

首先我們需要去新建一個圖片表，或者新建一個圖片字段，我就不麻煩了我直接在表裏新建一個字段，在最後附上表結構

啓動類的/imctemp-rainy/的賦值路徑

@Override
	 public void addResourceHandlers(ResourceHandlerRegistry registry) {
	     registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/E/");
	 }

dao層，在這裏繼承了類庫所以我沒有去寫數據庫查詢的方法

package com.msfh.news.dao;

import com.msfh.news.eneity.News;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;

import java.util.List;
import java.util.Map;

public interface NewsDao extends PagingAndSortingRepository<News, Integer>, JpaSpecificationExecutor<News> {

}

接下來需要些service層 也就是服務層

在service層我們需要實現獲取查詢方法並獲得到數據返回到controller層

package com.msfh.news.service;

import com.msfh.news.dao.NewsDao;
import com.msfh.news.eneity.News;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class NewsService {
    @Autowired
    private NewsDao newsDao;

    /**
     * 從news表查出數據
     * @return 從news表查出數據
     */
    public Iterable<News> findAll(){
        return newsDao.findAll();
    }

   
}

最後我們實現的是controller層也就是我們常說的控制層

控制層寫了很多東西我就只附上核心代碼了

這裏我們不能放開ResponBody因爲放開ResponBody就會返回自己寫的字符串

這裏我們引入了Model model 對象

我們先定義了newsData接受一下數據

然後通過model對象的addAttribute這個方法傳到前臺也面

return返回到你定義的這個路徑！

@RequestMapping("homeIndex")
	//@ResponseBody
	public String homeIndex(Model model) {
		Iterable<News> newsData = newsService.findAll();
    	model.addAttribute("newsData",newsData);
		return "/home/index";
	}

接下來就是html前臺的頁面了！

th:each=""這個用來循環 ${}這個是模板

th:我們加在屬性前面

在最後我會放thymeleaf的一些方法

同時我們需要在th:src=""裏面加入/imctemp-rainy/你自己改的路徑

<div class="bd" >
                <ul class="bannerBox">
                    <li class="show" th:each="vo,key : ${newsData}">
                        <a href="http://www.qwangluo.com/" target="_blank">
                            <img th:src="${'/imctemp-rainy/'+vo.images}" alt="">
                        </a>
                    </li>
               </ul>
</div>

數據庫的字段

 

thymeleaf單選回顯，多選回顯，下拉選回顯，默認選中第一個

//默認選中第一個
<input type ="radio" name="repaymentType"
	th:each ="repaymentType,repaymentState:${repaymentTypeList}"
	th:value="${repaymentType.dictName}"
	th:text ="${repaymentType.dictName}"
	th:attr ="checked=${repaymentState.index==0?true:false}">

//單選回顯
<input type="radio" name="repaymentType"
   th:each ="repaymentType:${repaymentTypeList}"
   th:value="${repaymentType.dictName}"
   th:text ="${repaymentType.dictName}"
   th:attr ="checked=${financeProductDO.repaymentType == repaymentType.dictName?true:false}">

//多選回顯
<input type ="checkbox" name="companyRole"
	th:each ="role : ${companyRoleList}"
	th:value="${role.dictName}"
	th:text ="${role.dictName}"
	th:attr ="checked=${companyInformation.companyRole.contains(role.dictName)?true:false}">

//下拉選回顯默認選中 前臺接收到參數：user對象和businessList集合
<option th:selected="${user.businessId eq busi.businessId}"
		th:each="busi:${businessList}"
		th:value="${busi.businessId}"
		th:text="${busi.businessName}" >
</option>