SpringBoot Model 映射到 前台 显示图片

原创
2019/11/13 20:27
阅读数 455

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>

 

本文分享 CSDN - msfh。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部