SpringBoot Model 映射到前台显示图片

男娘i 2023-06-13 04:40 10阅读 0赞

**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/你自己改的路径**

**数据库的字段**

![20191113203421961.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70][]

### 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>

[20191113203421961.png]: https://img-blog.csdnimg.cn/20191113203421961.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113203426333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0,size_16,color_FFFFFF,t_70