• 基于HTML语言的环保网站的设计与实现 前后端分离 Java毕业设计·文档报告·代码讲解·安装调试

    🍊作者：计算机编程-吉哥
    🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。
    🍊心愿：点赞 👍 收藏 ⭐评论 📝
    🍅 文末获取源码联系

    👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~
    Java毕业设计项目~热门选题推荐《1000套》

    目录

    1.技术选型

    2.数据库表结构

    3.开发工具

    4.功能介绍

    4.1【角色】

    4.2【前台功能模块】

    4.3【后台功能模块】

    5.项目演示截图

    5.1 首页

    5.2濒危生物

    ​5.3 论坛信息

    ​5.4 环保健康

    ​5.5 环境保护

    ​5.6 公告信息

    ​5.7 个人中心

    ​5.8 濒危生物留言管理

    ​5.9 论坛管理

    ​5.10 环保健康类型管理

    6.数据库文件设计

    7.核心代码 

    7.1 环保健康Controller

    7.2 环保健康Service

    7.3 环保健康ServiceImpl

    7.4 环保健康Dao

    7.5 环保健康list.html

    8.参考文档

    1.技术选型

    springboot、mybatisplus、vue、elementui、html、css、js、mysql、jdk1.8

    2.数据库表结构

    14张 

    3.开发工具

    idea、navicat

    4.功能介绍

    4.1【角色】

    管理员、用户

    4.2【前台功能模块】

    • 登录注册
    • 首页
    • 濒危生物
    • 论坛
    • 环保健康
    • 环境保护
    • 濒危生物法
    • 公告信息
    • 个人中心
    • 后台管理

    4.3【后台功能模块】

    • 登录
    • 首页
    • 个人中心
    • 管理员管理
    • 濒危生物管理
    • 基础数据管理
    • 论坛管理
    • 环保健康管理
    • 环境保护管理
    • 环境保护法管理
    • 公告信息管理
    • 轮播图管理

    5.项目演示截图

    5.1 首页

    5.2濒危生物

     5.3 论坛信息

     5.4 环保健康

     5.5 环境保护

     5.6 公告信息

     5.7 个人中心

     5.8 濒危生物留言管理

     5.9 论坛管理

     5.10 环保健康类型管理

     

    6.数据库文件设计

    1.  
    2. CREATE TABLE `binweishengwu` (
    3.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    4.   `binweishengwu_name` varchar(200) DEFAULT NULL COMMENT '动物 Search111',
    5.   `address_types` int(11) DEFAULT NULL COMMENT '所在地区 Search111',
    6.   `binweishengwu_photo` varchar(200) DEFAULT NULL COMMENT '图片',
    7.   `binweishengwu_size` varchar(200) DEFAULT NULL COMMENT '现存数量',
    8.   `zan_number` int(11) DEFAULT NULL COMMENT '赞',
    9.   `cai_number` int(11) DEFAULT NULL COMMENT '踩',
    10.   `binweishengwu_content` text COMMENT '介绍',
    11.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '添加时间',
    12.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show1 show2 photoShow',
    13.   PRIMARY KEY (`id`)
    14. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='濒危生物';
    15.  
    16.  
    17. CREATE TABLE `binweishengwu_collection` (
    18.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    19.   `binweishengwu_id` int(11) DEFAULT NULL COMMENT '濒危生物',
    20.   `yonghu_id` int(11) DEFAULT NULL COMMENT '用户',
    21.   `binweishengwu_collection_types` int(11) DEFAULT NULL COMMENT '类型',
    22.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '收藏时间',
    23.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show3 photoShow',
    24.   PRIMARY KEY (`id`)
    25. ) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8 COMMENT='濒危生物收藏';
    26.  
    27.  
    28. CREATE TABLE `binweishengwu_liuyan` (
    29.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    30.   `binweishengwu_id` int(11) DEFAULT NULL COMMENT '濒危生物',
    31.   `yonghu_id` int(11) DEFAULT NULL COMMENT '用户',
    32.   `binweishengwu_liuyan_text` text COMMENT '留言内容',
    33.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '留言时间',
    34.   `reply_text` text COMMENT '回复内容',
    35.   `update_time` timestamp NULL DEFAULT NULL COMMENT '回复时间',
    36.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间',
    37.   PRIMARY KEY (`id`)
    38. ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COMMENT='濒危生物留言';
    39.  
    40.  
    41. CREATE TABLE `config` (
    42.   `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
    43.   `name` varchar(100) NOT NULL COMMENT '配置参数名称',
    44.   `value` varchar(100) DEFAULT NULL COMMENT '配置参数值',
    45.   PRIMARY KEY (`id`)
    46. ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 COMMENT='配置文件';
    47.  
    48.  
    49.  
    50. CREATE TABLE `dictionary` (
    51.   `id` int(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
    52.   `dic_code` varchar(200) DEFAULT NULL COMMENT '字段',
    53.   `dic_name` varchar(200) DEFAULT NULL COMMENT '字段名',
    54.   `code_index` int(11) DEFAULT NULL COMMENT '编码',
    55.   `index_name` varchar(200) DEFAULT NULL COMMENT '编码名字  Search111 ',
    56.   `super_id` int(11) DEFAULT NULL COMMENT '父字段id',
    57.   `beizhu` varchar(200) DEFAULT NULL COMMENT '备注',
    58.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间',
    59.   PRIMARY KEY (`id`)
    60. ) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8 COMMENT='字典表';
    61.  
    62.  
    63. CREATE TABLE `forum` (
    64.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    65.   `forum_name` varchar(200) DEFAULT NULL COMMENT '帖子标题  Search111 ',
    66.   `yonghu_id` int(11) DEFAULT NULL COMMENT '用户',
    67.   `users_id` int(11) DEFAULT NULL COMMENT '管理员',
    68.   `forum_content` text COMMENT '发布内容',
    69.   `super_ids` int(11) DEFAULT NULL COMMENT '父id',
    70.   `forum_state_types` int(11) DEFAULT NULL COMMENT '帖子状态',
    71.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '发帖时间',
    72.   `update_time` timestamp NULL DEFAULT NULL COMMENT '修改时间',
    73.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show2',
    74.   PRIMARY KEY (`id`)
    75. ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='论坛';
    76.  
    77.  
    78.  
    79. CREATE TABLE `huanbaojiankang` (
    80.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    81.   `huanbaojiankang_name` varchar(200) DEFAULT NULL COMMENT '标题 Search111',
    82.   `huanbaojiankang_types` int(11) DEFAULT NULL COMMENT '环保健康类型 Search111',
    83.   `huanbaojiankang_photo` varchar(200) DEFAULT NULL COMMENT '封面',
    84.   `zan_number` int(11) DEFAULT NULL COMMENT '赞',
    85.   `cai_number` int(11) DEFAULT NULL COMMENT '踩',
    86.   `huanbaojiankang_content` text COMMENT '介绍',
    87.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '添加时间',
    88.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show1 show2 photoShow',
    89.   PRIMARY KEY (`id`)
    90. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='环保健康';
    91.  
    92.  
    93.  
    94. CREATE TABLE `huanbaojiankang_collection` (
    95.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    96.   `huanbaojiankang_id` int(11) DEFAULT NULL COMMENT '环保健康',
    97.   `yonghu_id` int(11) DEFAULT NULL COMMENT '用户',
    98.   `huanbaojiankang_collection_types` int(11) DEFAULT NULL COMMENT '类型',
    99.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '收藏时间',
    100.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show3 photoShow',
    101.   PRIMARY KEY (`id`)
    102. ) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8 COMMENT='环保健康收藏';
    103.  
    104.  
    105. CREATE TABLE `huanbaojiankang_liuyan` (
    106.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    107.   `huanbaojiankang_id` int(11) DEFAULT NULL COMMENT '环保健康',
    108.   `yonghu_id` int(11) DEFAULT NULL COMMENT '用户',
    109.   `huanbaojiankang_liuyan_text` text COMMENT '留言内容',
    110.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '留言时间',
    111.   `reply_text` text COMMENT '回复内容',
    112.   `update_time` timestamp NULL DEFAULT NULL COMMENT '回复时间',
    113.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间',
    114.   PRIMARY KEY (`id`)
    115. ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COMMENT='环保健康留言';
    116.  
    117.  
    118.  
    119. CREATE TABLE `huanjingbaohu` (
    120.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    121.   `huanjingbaohu_name` varchar(200) DEFAULT NULL COMMENT '名称 Search111',
    122.   `address_types` int(11) DEFAULT NULL COMMENT '地区 Search111',
    123.   `huanjingbaohu_photo` varchar(200) DEFAULT NULL COMMENT '图片',
    124.   `huanjingbaohu_size` varchar(200) DEFAULT NULL COMMENT '大小',
    125.   `zan_number` int(11) DEFAULT NULL COMMENT '赞',
    126.   `cai_number` int(11) DEFAULT NULL COMMENT '踩',
    127.   `huanjingbaohu_content` text COMMENT '介绍',
    128.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '添加时间',
    129.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show1 show2 photoShow',
    130.   PRIMARY KEY (`id`)
    131. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='环境保护';
    132.  
    133.  
    134. CREATE TABLE `huanjingbaohu_collection` (
    135.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    136.   `huanjingbaohu_id` int(11) DEFAULT NULL COMMENT '环境保护',
    137.   `yonghu_id` int(11) DEFAULT NULL COMMENT '用户',
    138.   `huanjingbaohu_collection_types` int(11) DEFAULT NULL COMMENT '类型',
    139.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '收藏时间',
    140.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show3 photoShow',
    141.   PRIMARY KEY (`id`)
    142. ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COMMENT='环境保护收藏';
    143.  
    144.  
    145. CREATE TABLE `huanjingbaohu_liuyan` (
    146.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    147.   `huanjingbaohu_id` int(11) DEFAULT NULL COMMENT '环境保护',
    148.   `yonghu_id` int(11) DEFAULT NULL COMMENT '用户',
    149.   `huanjingbaohu_liuyan_text` text COMMENT '留言内容',
    150.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '留言时间',
    151.   `reply_text` text COMMENT '回复内容',
    152.   `update_time` timestamp NULL DEFAULT NULL COMMENT '回复时间',
    153.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间',
    154.   PRIMARY KEY (`id`)
    155. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='环境保护留言';
    156.  
    157.  
    158.  
    159. CREATE TABLE `huanjingbaohufa` (
    160.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    161.   `huanjingbaohufa_name` varchar(200) DEFAULT NULL COMMENT '标题 Search111',
    162.   `huanjingbaohufa_types` int(11) DEFAULT NULL COMMENT '保护法类型 Search111',
    163.   `huanjingbaohufa_photo` varchar(200) DEFAULT NULL COMMENT '封面',
    164.   `huanjingbaohufa_content` text COMMENT '详情',
    165.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '添加时间',
    166.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show1 show2 nameShow',
    167.   PRIMARY KEY (`id`)
    168. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='濒危生物法';
    169.  
    170.  
    171.  
    172. CREATE TABLE `news` (
    173.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    174.   `news_name` varchar(200) DEFAULT NULL COMMENT '公告标题  Search111 ',
    175.   `news_types` int(11) DEFAULT NULL COMMENT '公告类型  Search111 ',
    176.   `news_photo` varchar(200) DEFAULT NULL COMMENT '公告图片',
    177.   `insert_time` timestamp NULL DEFAULT NULL COMMENT '添加时间',
    178.   `news_content` text COMMENT '公告详情',
    179.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间 show1 show2 nameShow',
    180.   PRIMARY KEY (`id`)
    181. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='公告信息';
    182.  
    183.  
    184. CREATE TABLE `token` (
    185.   `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
    186.   `userid` bigint(20) NOT NULL COMMENT '用户id',
    187.   `username` varchar(100) NOT NULL COMMENT '用户名',
    188.   `tablename` varchar(100) DEFAULT NULL COMMENT '表名',
    189.   `role` varchar(100) DEFAULT NULL COMMENT '角色',
    190.   `token` varchar(200) NOT NULL COMMENT '密码',
    191.   `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '新增时间',
    192.   `expiratedtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '过期时间',
    193.   PRIMARY KEY (`id`)
    194. ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COMMENT='token表';
    195.  
    196.  
    197.  
    198. CREATE TABLE `users` (
    199.   `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
    200.   `username` varchar(100) NOT NULL COMMENT '用户名',
    201.   `password` varchar(100) NOT NULL COMMENT '密码',
    202.   `role` varchar(100) DEFAULT '管理员' COMMENT '角色',
    203.   `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '新增时间',
    204.   PRIMARY KEY (`id`)
    205. ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COMMENT='用户表';
    206.  
    207.  
    208.  
    209. CREATE TABLE `yonghu` (
    210.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
    211.   `username` varchar(200) DEFAULT NULL COMMENT '账户',
    212.   `password` varchar(200) DEFAULT NULL COMMENT '密码',
    213.   `yonghu_name` varchar(200) DEFAULT NULL COMMENT '用户姓名 Search111 ',
    214.   `yonghu_photo` varchar(200) DEFAULT NULL COMMENT '头像',
    215.   `yonghu_phone` varchar(200) DEFAULT NULL COMMENT '手机号',
    216.   `yonghu_email` varchar(200) DEFAULT NULL COMMENT '电子邮箱',
    217.   `sex_types` int(11) DEFAULT NULL COMMENT '性别 Search111 ',
    218.   `yonghu_delete` int(11) DEFAULT '1' COMMENT '假删',
    219.   `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间',
    220.   PRIMARY KEY (`id`)
    221. ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 COMMENT='用户';
    222.

    7.核心代码 

    7.1 环保健康Controller

    1.  
    2. package com.controller;
    3.  
    4. import java.io.File;
    5. import java.math.BigDecimal;
    6. import java.net.URL;
    7. import java.text.SimpleDateFormat;
    8. import com.alibaba.fastjson.JSONObject;
    9. import java.util.*;
    10. import org.springframework.beans.BeanUtils;
    11. import javax.servlet.http.HttpServletRequest;
    12. import org.springframework.web.context.ContextLoader;
    13. import javax.servlet.ServletContext;
    14. import com.service.TokenService;
    15. import com.utils.*;
    16. import java.lang.reflect.InvocationTargetException;
    17.  
    18. import com.service.DictionaryService;
    19. import org.apache.commons.lang3.StringUtils;
    20. import com.annotation.IgnoreAuth;
    21. import org.slf4j.Logger;
    22. import org.slf4j.LoggerFactory;
    23. import org.springframework.beans.factory.annotation.Autowired;
    24. import org.springframework.stereotype.Controller;
    25. import org.springframework.web.bind.annotation.*;
    26. import com.baomidou.mybatisplus.mapper.EntityWrapper;
    27. import com.baomidou.mybatisplus.mapper.Wrapper;
    28. import com.entity.*;
    29. import com.entity.view.*;
    30. import com.service.*;
    31. import com.utils.PageUtils;
    32. import com.utils.R;
    33. import com.alibaba.fastjson.*;
    34.  
    35. /**
    36.  * 环保健康
    37.  * 后端接口
    38.  * @author 计算机编程-吉哥
    39.  * @email
    40. */
    41. @RestController
    42. @Controller
    43. @RequestMapping("/huanbaojiankang")
    44. public class HuanbaojiankangController {
    45.     private static final Logger logger = LoggerFactory.getLogger(HuanbaojiankangController.class);
    46.  
    47.     @Autowired
    48.     private HuanbaojiankangService huanbaojiankangService;
    49.  
    50.  
    51.     @Autowired
    52.     private TokenService tokenService;
    53.     @Autowired
    54.     private DictionaryService dictionaryService;
    55.  
    56.     //级联表service
    57.  
    58.     @Autowired
    59.     private YonghuService yonghuService;
    60.  
    61.  
    62.     /**
    63.     * 后端列表
    64.     */
    65.     @RequestMapping("/page")
    66.     public R page(@RequestParam Map params, HttpServletRequest request){
    67.         logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
    68.         String role = String.valueOf(request.getSession().getAttribute("role"));
    69.         if(false)
    70.             return R.error(511,"永不会进入");
    71.         else if("用户".equals(role))
    72.             params.put("yonghuId",request.getSession().getAttribute("userId"));
    73.         if(params.get("orderBy")==null || params.get("orderBy")==""){
    74.             params.put("orderBy","id");
    75.         }
    76.         PageUtils page = huanbaojiankangService.queryPage(params);
    77.  
    78.         //字典表数据转换
    79.         List list =(List)page.getList();
    80.         for(HuanbaojiankangView c:list){
    81.             //修改对应字典表字段
    82.             dictionaryService.dictionaryConvert(c, request);
    83.         }
    84.         return R.ok().put("data", page);
    85.     }
    86.  
    87.     /**
    88.     * 后端详情
    89.     */
    90.     @RequestMapping("/info/{id}")
    91.     public R info(@PathVariable("id") Long id, HttpServletRequest request){
    92.         logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
    93.         HuanbaojiankangEntity huanbaojiankang = huanbaojiankangService.selectById(id);
    94.         if(huanbaojiankang !=null){
    95.             //entity转view
    96.             HuanbaojiankangView view = new HuanbaojiankangView();
    97.             BeanUtils.copyProperties( huanbaojiankang , view );//把实体数据重构到view中
    98.  
    99.             //修改对应字典表字段
    100.             dictionaryService.dictionaryConvert(view, request);
    101.             return R.ok().put("data", view);
    102.         }else {
    103.             return R.error(511,"查不到数据");
    104.         }
    105.  
    106.     }
    107.  
    108.     /**
    109.     * 后端保存
    110.     */
    111.     @RequestMapping("/save")
    112.     public R save(@RequestBody HuanbaojiankangEntity huanbaojiankang, HttpServletRequest request){
    113.         logger.debug("save方法:,,Controller:{},,huanbaojiankang:{}",this.getClass().getName(),huanbaojiankang.toString());
    114.  
    115.         String role = String.valueOf(request.getSession().getAttribute("role"));
    116.         if(false)
    117.             return R.error(511,"永远不会进入");
    118.  
    119.         Wrapper queryWrapper = new EntityWrapper()
    120.             .eq("huanbaojiankang_name", huanbaojiankang.getHuanbaojiankangName())
    121.             .eq("huanbaojiankang_types", huanbaojiankang.getHuanbaojiankangTypes())
    122.             .eq("zan_number", huanbaojiankang.getZanNumber())
    123.             .eq("cai_number", huanbaojiankang.getCaiNumber())
    124.             ;
    125.  
    126.         logger.info("sql语句:"+queryWrapper.getSqlSegment());
    127.         HuanbaojiankangEntity huanbaojiankangEntity = huanbaojiankangService.selectOne(queryWrapper);
    128.         if(huanbaojiankangEntity==null){
    129.             huanbaojiankang.setInsertTime(new Date());
    130.             huanbaojiankang.setCreateTime(new Date());
    131.             huanbaojiankangService.insert(huanbaojiankang);
    132.             return R.ok();
    133.         }else {
    134.             return R.error(511,"表中有相同数据");
    135.         }
    136.     }
    137.  
    138.     /**
    139.     * 后端修改
    140.     */
    141.     @RequestMapping("/update")
    142.     public R update(@RequestBody HuanbaojiankangEntity huanbaojiankang, HttpServletRequest request){
    143.         logger.debug("update方法:,,Controller:{},,huanbaojiankang:{}",this.getClass().getName(),huanbaojiankang.toString());
    144.         String role = String.valueOf(request.getSession().getAttribute("role"));
    145.         //根据字段查询是否有相同数据
    146.         Wrapper queryWrapper = new EntityWrapper()
    147.             .notIn("id",huanbaojiankang.getId())
    148.             .andNew()
    149.             .eq("huanbaojiankang_name", huanbaojiankang.getHuanbaojiankangName())
    150.             .eq("huanbaojiankang_types", huanbaojiankang.getHuanbaojiankangTypes())
    151.             .eq("zan_number", huanbaojiankang.getZanNumber())
    152.             .eq("cai_number", huanbaojiankang.getCaiNumber())
    153.             ;
    154.  
    155.         logger.info("sql语句:"+queryWrapper.getSqlSegment());
    156.         HuanbaojiankangEntity huanbaojiankangEntity = huanbaojiankangService.selectOne(queryWrapper);
    157.         if("".equals(huanbaojiankang.getHuanbaojiankangPhoto()) || "null".equals(huanbaojiankang.getHuanbaojiankangPhoto())){
    158.                 huanbaojiankang.setHuanbaojiankangPhoto(null);
    159.         }
    160.         if(huanbaojiankangEntity==null){
    161.             huanbaojiankangService.updateById(huanbaojiankang);//根据id更新
    162.             return R.ok();
    163.         }else {
    164.             return R.error(511,"表中有相同数据");
    165.         }
    166.     }
    167.  
    168.  
    169.  
    170.     /**
    171.     * 删除
    172.     */
    173.     @RequestMapping("/delete")
    174.     public R delete(@RequestBody Integer[] ids){
    175.         logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
    176.         huanbaojiankangService.deleteBatchIds(Arrays.asList(ids));
    177.         return R.ok();
    178.     }
    179.  
    180.  
    181.     /**
    182.      * 批量上传
    183.      */
    184.     @RequestMapping("/batchInsert")
    185.     public R save( String fileName, HttpServletRequest request){
    186.         logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
    187.         Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId")));
    188.         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    189.         try {
    190.             List huanbaojiankangList = new ArrayList<>();//上传的东西
    191.             Map> seachFields= new HashMap<>();//要查询的字段
    192.             Date date = new Date();
    193.             int lastIndexOf = fileName.lastIndexOf(".");
    194.             if(lastIndexOf == -1){
    195.                 return R.error(511,"该文件没有后缀");
    196.             }else{
    197.                 String suffix = fileName.substring(lastIndexOf);
    198.                 if(!".xls".equals(suffix)){
    199.                     return R.error(511,"只支持后缀为xls的excel文件");
    200.                 }else{
    201.                     URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
    202.                     File file = new File(resource.getFile());
    203.                     if(!file.exists()){
    204.                         return R.error(511,"找不到上传文件，请联系管理员");
    205.                     }else{
    206.                         List> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
    207.                         dataList.remove(0);//删除第一行，因为第一行是提示
    208.                         for(List data:dataList){
    209.                             //循环
    210.                             HuanbaojiankangEntity huanbaojiankangEntity = new HuanbaojiankangEntity();
    211.  
    212.                             huanbaojiankangList.add(huanbaojiankangEntity);
    213.  
    214.                         }
    215.  
    216.                         //查询是否重复
    217.                         huanbaojiankangService.insertBatch(huanbaojiankangList);
    218.                         return R.ok();
    219.                     }
    220.                 }
    221.             }
    222.         }catch (Exception e){
    223.             e.printStackTrace();
    224.             return R.error(511,"批量插入数据异常，请联系管理员");
    225.         }
    226.     }
    227.  
    228.  
    229.     /**
    230.     * 前端列表
    231.     */
    232.     @IgnoreAuth
    233.     @RequestMapping("/list")
    234.     public R list(@RequestParam Map params, HttpServletRequest request){
    235.         logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
    236.  
    237.         // 没有指定排序字段就默认id倒序
    238.         if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
    239.             params.put("orderBy","id");
    240.         }
    241.         PageUtils page = huanbaojiankangService.queryPage(params);
    242.  
    243.         //字典表数据转换
    244.         List list =(List)page.getList();
    245.         for(HuanbaojiankangView c:list)
    246.             dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
    247.         return R.ok().put("data", page);
    248.     }
    249.  
    250.     /**
    251.     * 前端详情
    252.     */
    253.     @RequestMapping("/detail/{id}")
    254.     public R detail(@PathVariable("id") Long id, HttpServletRequest request){
    255.         logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
    256.         HuanbaojiankangEntity huanbaojiankang = huanbaojiankangService.selectById(id);
    257.             if(huanbaojiankang !=null){
    258.  
    259.  
    260.                 //entity转view
    261.                 HuanbaojiankangView view = new HuanbaojiankangView();
    262.                 BeanUtils.copyProperties( huanbaojiankang , view );//把实体数据重构到view中
    263.  
    264.                 //修改对应字典表字段
    265.                 dictionaryService.dictionaryConvert(view, request);
    266.                 return R.ok().put("data", view);
    267.             }else {
    268.                 return R.error(511,"查不到数据");
    269.             }
    270.     }
    271.  
    272.  
    273.     /**
    274.     * 前端保存
    275.     */
    276.     @RequestMapping("/add")
    277.     public R add(@RequestBody HuanbaojiankangEntity huanbaojiankang, HttpServletRequest request){
    278.         logger.debug("add方法:,,Controller:{},,huanbaojiankang:{}",this.getClass().getName(),huanbaojiankang.toString());
    279.         Wrapper queryWrapper = new EntityWrapper()
    280.             .eq("huanbaojiankang_name", huanbaojiankang.getHuanbaojiankangName())
    281.             .eq("huanbaojiankang_types", huanbaojiankang.getHuanbaojiankangTypes())
    282.             .eq("zan_number", huanbaojiankang.getZanNumber())
    283.             .eq("cai_number", huanbaojiankang.getCaiNumber())
    284.             ;
    285.         logger.info("sql语句:"+queryWrapper.getSqlSegment());
    286.         HuanbaojiankangEntity huanbaojiankangEntity = huanbaojiankangService.selectOne(queryWrapper);
    287.         if(huanbaojiankangEntity==null){
    288.             huanbaojiankang.setInsertTime(new Date());
    289.             huanbaojiankang.setCreateTime(new Date());
    290.         huanbaojiankangService.insert(huanbaojiankang);
    291.             return R.ok();
    292.         }else {
    293.             return R.error(511,"表中有相同数据");
    294.         }
    295.     }
    296.  
    297.  
    298. }

    7.2 环保健康Service

    1. package com.service;
    2.  
    3. import com.baomidou.mybatisplus.service.IService;
    4. import com.utils.PageUtils;
    5. import com.entity.HuanbaojiankangEntity;
    6. import java.util.Map;
    7. import javax.servlet.http.HttpServletRequest;
    8.  
    9. /**
    10.  * 环保健康 服务类
    11.  */
    12. public interface HuanbaojiankangService extends IService {
    13.  
    14.     /**
    15.     * @param params 查询参数
    16.     * @return 带分页的查询出来的数据
    17.     */
    18.      PageUtils queryPage(Map params);
    19. }

    7.3 环保健康ServiceImpl

    1. package com.service.impl;
    2.  
    3. import com.utils.StringUtil;
    4. import org.springframework.stereotype.Service;
    5. import java.lang.reflect.Field;
    6. import java.util.*;
    7. import com.baomidou.mybatisplus.plugins.Page;
    8. import com.baomidou.mybatisplus.service.impl.ServiceImpl;
    9. import org.springframework.transaction.annotation.Transactional;
    10. import com.utils.PageUtils;
    11. import com.utils.Query;
    12. import org.springframework.web.context.ContextLoader;
    13. import javax.servlet.ServletContext;
    14. import javax.servlet.http.HttpServletRequest;
    15. import com.dao.HuanbaojiankangDao;
    16. import com.entity.HuanbaojiankangEntity;
    17. import com.service.HuanbaojiankangService;
    18. import com.entity.view.HuanbaojiankangView;
    19.  
    20. /**
    21.  * 环保健康 服务实现类
    22.  */
    23. @Service("huanbaojiankangService")
    24. @Transactional
    25. public class HuanbaojiankangServiceImpl extends ServiceImpl implements HuanbaojiankangService {
    26.  
    27.     @Override
    28.     public PageUtils queryPage(Map params) {
    29.         if(params != null && (params.get("limit") == null || params.get("page") == null)){
    30.             params.put("page","1");
    31.             params.put("limit","10");
    32.         }
    33.         Page page =new Query(params).getPage();
    34.         page.setRecords(baseMapper.selectListView(page,params));
    35.         return new PageUtils(page);
    36.     }
    37.  
    38.  
    39. }

    7.4 环保健康Dao

    1. package com.dao;
    2.  
    3. import com.entity.HuanbaojiankangEntity;
    4. import com.baomidou.mybatisplus.mapper.BaseMapper;
    5. import java.util.List;
    6. import java.util.Map;
    7. import com.baomidou.mybatisplus.plugins.pagination.Pagination;
    8.  
    9. import org.apache.ibatis.annotations.Param;
    10. import com.entity.view.HuanbaojiankangView;
    11.  
    12. /**
    13.  * 环保健康 Dao 接口
    14.  *
    15.  * @author 
    16.  */
    17. public interface HuanbaojiankangDao extends BaseMapper {
    18.  
    19.    List selectListView(Pagination page,@Param("params")Map params);
    20.  
    21. }

    7.5 环保健康list.html

    1. html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="utf-8">
    5.     <title>环保健康title>
    6.     <meta name="keywords" content=""/>
    7.     <meta name="description" content=""/>
    8.     <meta name="renderer" content="webkit">
    9.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    10.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    11.     <link rel="stylesheet" href="../../layui/css/layui.css">
    12.     <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
    13.     <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
    14.     <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js">script>
    15.     <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js">script>
    16.     <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
    17.  
    18.     <link rel="stylesheet" href="../../css/theme.css"/>
    19. head>
    20. <style>
    21.     html::after {
    22.         position: fixed;
    23.         top: 0;
    24.         right: 0;
    25.         left: 0;
    26.         bottom: 0;
    27.         content: '';
    28.         display: block;
    29.         background-attachment: fixed;
    30.         background-size: cover;
    31.         background-position: center;
    32.     }
    33.  
    34.     /*轮播图相关 start*/
    35.     #swiper {
    36.         overflow: hidden;
    37.     }
    38.  
    39.     #swiper .layui-carousel-ind li {
    40.         width: 20px;
    41.         height: 10px;
    42.         border-width: 0;
    43.         border-style: solid;
    44.         border-color: rgba(0, 0, 0, .3);
    45.         border-radius: 6px;
    46.         background-color: #f7f7f7;
    47.         box-shadow: 0 0 6px rgba(255, 0, 0, .8);
    48.     }
    49.  
    50.     #swiper .layui-carousel-ind li.layui-this {
    51.         width: 30px;
    52.         height: 10px;
    53.         border-width: 0;
    54.         border-style: solid;
    55.         border-color: rgba(0, 0, 0, .3);
    56.         border-radius: 6px;
    57.     }
    58.     /*轮播图相关 end*/
    59.  
    60.     /*列表*/
    61.     .recommend {
    62.         padding: 10px 0;
    63.         display: flex;
    64.         justify-content: center;
    65.         background-repeat: no-repeat;
    66.         background-position: center center;
    67.         background-size: cover;
    68.     }
    69.  
    70.     .recommend .box {
    71.         width: 1002px;
    72.         margin: 0 auto;
    73.     }
    74.  
    75.     .recommend .box .title {
    76.         padding: 10px 5px;
    77.         display: flex;
    78.         justify-content: space-between;
    79.         align-items: center;
    80.         box-sizing: border-box;
    81.     }
    82.  
    83.     .recommend .box .title span {
    84.         padding: 0 10px;
    85.         font-size: 16px;
    86.         line-height: 1.4;
    87.     }
    88.  
    89.     .recommend .box .filter {
    90.         padding: 0 10px;
    91.         display: flex;
    92.         align-items: center;
    93.         box-sizing: border-box;
    94.         width: 100%;
    95.         flex-wrap: wrap;
    96.     }
    97.  
    98.     .recommend .box .filter .item-list {
    99.         display: flex;
    100.         align-items: center;
    101.     }
    102.  
    103.     .recommend .box .filter .item-list .lable {
    104.         font-size: 14px;
    105.         color: #333;
    106.         box-sizing: border-box;
    107.     }
    108.  
    109.     .recommend .box .filter .item-list input {
    110.         padding: 0 10px;
    111.         box-sizing: border-box;
    112.         outline: none;
    113.     }
    114.  
    115.     .recommend .box .filter button {
    116.         display: flex;
    117.         padding: 0 10px;
    118.         box-sizing: border-box;
    119.         align-items: center;
    120.         justify-content: center;
    121.         outline: none;
    122.     }
    123.  
    124.     .recommend .box .filter button i {
    125.         margin-right: 4px;
    126.     }
    127.  
    128.     .recommend .box .list {
    129.         display: flex;
    130.         flex-wrap: wrap;
    131.     }
    132.  
    133.     .recommend .box .list .list-item {
    134.         flex: 0 0 25%;
    135.         padding: 0 5px;
    136.         box-sizing: border-box;
    137.     }
    138.  
    139.     .recommend .box .list .list-item .list-item-body {
    140.         cursor: pointer;
    141.         border: 1px solid rgba(0, 0, 0, 3);
    142.         padding: 5px;
    143.         box-sizing: border-box;
    144.     }
    145.  
    146.     .recommend .box .list .list-item-body img {
    147.         width: 100%;
    148.         height: 100px;
    149.         display: block;
    150.         margin: 0 auto;
    151.     }
    152.  
    153.     .recommend .box .list .list-item-body .info {
    154.         display: flex;
    155.         flex-wrap: wrap;
    156.     }
    157.  
    158.     .recommend .box .list .list-item-body .info .price {
    159.         padding-top: 5px;
    160.         color: red;
    161.         font-size: 14px;
    162.         text-align: center;
    163.         box-sizing: border-box;
    164.     }
    165.  
    166.     .recommend .box .list .list-item-body .info .name {
    167.         padding-top: 5px;
    168.         color: red;
    169.         font-size: 14px;
    170.         text-align: center;
    171.         box-sizing: border-box;
    172.     }
    173.  
    174.     .recommend .box .list .list-item3 {
    175.         flex: 0 0 33.33%;
    176.     }
    177.  
    178.     .recommend .box .list .list-item5 {
    179.         flex: 0 0 25%;
    180.     }
    181.  
    182.     .recommend .box .news {
    183.         display: flex;
    184.         flex-wrap: wrap;
    185.         padding: 0;
    186.         width: 100%;
    187.     }
    188.  
    189.     .recommend .box .news .list-item {
    190.         flex: 0 0 50%;
    191.         padding: 0 10px;
    192.         box-sizing: border-box;
    193.     }
    194.  
    195.     .recommend .box .news .list-item .list-item-body {
    196.         cursor: pointer;
    197.         border: 1px solid rgba(0, 0, 0, 3);
    198.         padding: 10px;
    199.         box-sizing: border-box;
    200.         display: flex;
    201.     }
    202.  
    203.     .recommend .box .news .list-item .list-item-body img {
    204.         width: 120px;
    205.         height: 100%;
    206.         display: block;
    207.         margin: 0 auto;
    208.     }
    209.  
    210.     .recommend .box .news .list-item .list-item-body .item-info {
    211.         flex: 1;
    212.         display: flex;
    213.         justify-content: space-between;
    214.         flex-direction: column;
    215.         padding-left: 10px;
    216.         box-sizing: border-box;
    217.     }
    218.  
    219.     .recommend .box .news .list-item .list-item-body .item-info .name {
    220.         padding-top: 5px;
    221.         color: red;
    222.         font-size: 14px;
    223.         box-sizing: border-box;
    224.         overflow: hidden;
    225.         text-overflow: ellipsis;
    226.         display: -webkit-box;
    227.         -webkit-line-clamp: 1;
    228.         -webkit-box-orient: vertical;
    229.     }
    230.  
    231.     .recommend .box .news .list-item .list-item-body .item-info .time {
    232.         padding-top: 5px;
    233.         color: red;
    234.         font-size: 14px;
    235.         overflow: hidden;
    236.         text-overflow: ellipsis;
    237.         display: -webkit-box;
    238.         -webkit-line-clamp: 1;
    239.         -webkit-box-orient: vertical;
    240.         box-sizing: border-box;
    241.     }
    242.  
    243.     .recommend .box .news .list-item1 {
    244.         flex: 0 0 100%;
    245.     }
    246.  
    247.     .recommend .box .news .list-item3 {
    248.         flex: 0 0 33.33%;
    249.     }
    250.  
    251.      .index-pv1 .animation-box:hover {
    252.          transform: perspective(1000px) translate3d(0px, 0px, 0px) scale(1.01) rotate(0deg) skew(-2deg, 0deg);
    253.          transition: all 0.3s;
    254.      }
    255.  
    256.  
    257.     .layui-laypage .layui-laypage-count {
    258.         padding: 0 10px;
    259.     }
    260.  
    261.     .layui-laypage .layui-laypage-skip {
    262.         padding-left: 10px;
    263.     }
    264. style>
    265. <body>
    266. <div id="app">
    267.     <div class="banner">
    268.         <div class="layui-carousel" id="swiper"
    269.              :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
    270.             <div carousel-item>
    271.                 <div v-for="(item,index) in swiperList" :key="index">
    272.                     <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
    273.                 div>
    274.             div>
    275.         div>
    276.     div>
    277.  
    278.     <div class="recommend index-pv1"
    279.          :style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
    280.         <div class="box" style='width:80%'>
    281.             <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"10px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
    282.                 <div style="display: inline-block;text-align: center;cursor: pointer;"
    283.                      class="thisTableType-search main_backgroundColor" index=""
    284.                      :style='searchForm.huanbaojiankangTypes==""?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'>
    285.                     环保健康类型全部
    286.                 div>
    287.                 <div v-for="(item,index) in huanbaojiankangTypesList" :key="item.codeIndex"
    288.                      class="thisTableType-search main_backgroundColor" :index="item.codeIndex"
    289.                      :style='searchForm.huanbaojiankangTypes==item.codeIndex?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
    290.                      style="display: inline-block;text-align: center;cursor: pointer;">
    291.                     {{item.indexName}}
    292.                 div>
    293.             div>
    294.  
    295.             <div class="title sub_backgroundColor sub_borderColor"
    296.                  :style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
    297.                     <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>
    298.                         环保健康
    299.                     span>
    300.                 <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
    301.                         您现在的位置：环保健康
    302.                     span>
    303.             div>
    304.  
    305.             <form class="layui-form filter main_backgroundColor"
    306.                   :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
    307.  
    308.                  
    309.                 <div class="item-list">
    310.                     <div class="lable"
    311.                          :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
    312.                         标题
    313.                     div>
    314.                     <input type="text" v-model="searchForm.huanbaojiankangName"
    315.                            :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"8px","textAlign":"center","borderWidth":"0","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
    316.                            placeholder="标题" autocomplete="off"
    317.                            class="layui-input">
    318.                 div>
    319.          
    320.                                                 
    321.                 <button id="btn-search" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn layui-btn-normal sub_backgroundColor">
    322.                     <i v-if="true" class="layui-icon layui-icon-search">i>搜索
    323.                 button>
    324.                 <button v-if="isAuth('huanbaojiankang','新增')" @click="jump('../huanbaojiankang/add.html')" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn btn-theme">
    325.                     <i v-if="true" class="layui-icon">i>添加
    326.                 button>
    327.             form>
    328.  
    329.                     <div class="travel-gallery-wrapper">
    330.                         <div class="row">
    331.                             <div v-for="(item,index) in dataList" v-bind:key="index" class="col-md-3 col-sm-6 col-xs-6 col-lg-3 single-box">
    332.                                 <div @click="jumpCheck('../huanbaojiankang/detail.html?id='+item.id , item.aaaaaaaaaa == null?'':item.aaaaaaaaaa , item.shangxiaTypes == null?'':item.shangxiaTypes)">
    333.                                     <div class="part-img">
    334.                                         <img :src="item.huanbaojiankangPhoto?item.huanbaojiankangPhoto.split(',')[0]:''" style="height: 350px;width:100%;">
    335.                                     div>
    336.                                     <div class="part-txt">
    337.                                         <a href="javascript:return false;" style="font-size: 24px"><i class="layui-icon layui-icon-link">i>a>
    338.  
    339.                                         <div class="title">
    340.                                             <h3>{{item.huanbaojiankangName}}h3>
    341.                                             <p v-if="item.huanbaojiankangNewMoney">
    342.                                                 {{item.huanbaojiankangNewMoney}} RMB
    343.                                             p>
    344.                                             <p v-else>
    345.                                                 {{item.huanbaojiankangValue}}
    346.                                             p>
    347.                                         div>
    348.                                     div>
    349.                                 div>
    350.                             div>
    351.                         div>
    352.                     div>
    353.         div>
    354.     div>
    355.     <div class="pager" id="pager" :style="{textAlign:'center'}">div>
    356. div>
    357.  
    358. <script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8">script>
    359. <script src="../../layui/layui.js">script>
    360. <script src="../../js/vue.js">script>
    362. <script src="../../xznstatic/js/element.min.js">script>
    364. <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
    365. <script src="../../js/config.js">script>
    366. <script src="../../modules/config.js">script>
    367. <script src="../../js/utils.js">script>
    368.  
    369. <script type="text/javascript">
    370.     var vue = new Vue({
    371.         el: '#app',
    372.         data: {
    373.             swiperList: [],
    374.             huanbaojiankangTypesList: [],
    375.  
    376.             //查询条件
    377.             searchForm: {
    378.                 page: 1
    379.                 ,limit: 8
    380.                 ,huanbaojiankangName: ""
    381.                 ,huanbaojiankangTypes: ""
    382.                 ,huanbaojiankangPhoto: ""
    383.                 ,huanbaojiankangContent: ""
    384.             },
    385.  
    386.  
    387.             dataList: [],
    388.         },
    389.         filters: {
    390.             subString: function(val) {
    391.                 if (val) {
    392.                     val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
    393.                     if (val.length > 60) {
    394.                         val = val.substring(0, 60);
    395.                         val+='...';
    396.                     }
    397.                     return val;
    398.                 }
    399.                 return '';
    400.             }
    401.         },
    402.         computed: {
    403.         },
    404.         methods: {
    405.             isAuth(tablename, button) {
    406.                 return isFrontAuth(tablename, button);
    407.             }
    408.             ,jump(url) {
    409.                 jump(url);
    410.             }
    411.             ,jumpCheck(url,check1,check2) {
    412.                 if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
    413.                     layui.layer.msg("已经被删除", {
    414.                         time: 2000,
    415.                         icon: 2
    416.                     });
    417.                     return false;
    418.                 }
    419.                 if(check2 == "2"  || check2 == 2){//是否下架[1:上架 2:下架]
    420.                     layui.layer.msg("已经下架", {
    421.                         time: 2000,
    422.                         icon: 2
    423.                     });
    424.                     return false;
    425.                 }
    426.                 this.jump(url);
    427.             }
    428.         }
    429.     });
    430.  
    431.     layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
    432.         var layer = layui.layer;
    433.         var element = layui.element;
    434.         var carousel = layui.carousel;
    435.         var laypage = layui.laypage;
    436.         var http = layui.http;
    437.         var laydate = layui.laydate;
    438.         var tinymce = layui.tinymce;
    439.         window.jQuery = window.$ = jquery = layui.jquery;
    440.  
    441.         // var id = http.getParam('id');
    442.  
    443.         // 获取轮播图 数据
    444.         http.request('config/list', 'get', {
    445.             page: 1,
    446.             limit: 5
    447.         }, function (res) {
    448.             if (res.data.list.length > 0) {
    449.                 let swiperList = [];
    450.                 res.data.list.forEach(element => {
    451.                     if(element.value != null){
    452.                         swiperList.push({
    453.                             img: element.value
    454.                         });
    455.                     }
    456.                 });
    457.                 vue.swiperList = swiperList;
    458.  
    459.                 vue.$nextTick(() => {
    460.                     carousel.render({
    461.                         elem: '#swiper',
    462.                         width: '100%',
    463.                         height: '450px',
    464.                         arrow: 'hover',
    465.                         anim: 'default',
    466.                         autoplay: 'true',
    467.                         interval: '3000',
    468.                         indicator: 'inside'
    469.                     });
    470.                 });
    471.             }
    472.         });
    473.  
    474.         //环保健康类型的动态搜素
    475.         $(document).on("click", ".thisTableType-search", function (e) {
    476.             vue.searchForm.huanbaojiankangTypes = $(this).attr('index');
    477.             pageList();
    478.         });
    479.  
    480.  
    481.             //当前表的 环保健康类型 字段 字典表查询
    482.             huanbaojiankangTypesSelect();
    483.            //当前表的 环保健康类型 字段 字典表查询方法
    484.            function huanbaojiankangTypesSelect() {
    485.                http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=huanbaojiankang_types", 'get', {}, function (res) {
    486.                    if(res.code == 0){
    487.                        vue.huanbaojiankangTypesList = res.data.list;
    488.                    }
    489.                });
    490.            }
    491.  
    492.  
    493.             // 分页列表
    494.             pageList();
    495.  
    496.             // 搜索按钮
    497.             jquery('#btn-search').click(function (e) {
    498.                 pageList();
    499.             });
    500.  
    501.             function pageList() {
    502.                 // 获取列表数据
    503.                 http.request('huanbaojiankang/list', 'get', vue.searchForm, function (res) {
    504.                     vue.dataList = res.data.list;
    505.                     // 分页
    506.                     laypage.render({
    507.                         elem: 'pager',
    508.                         count: res.data.total,
    509.                         limit: vue.searchForm.limit,
    510.                         groups: 3,
    511.                         layout: ["prev", "page", "next"],
    512.                         jump: function (obj, first) {
    513.                             vue.searchForm.page = obj.curr;//翻页
    514.                             //首次不执行
    515.                             if (!first) {
    516.                                 http.request('huanbaojiankang/list', 'get', vue.searchForm, function (res1) {
    517.                                     vue.dataList = res1.data.list;
    518.                                 })
    519.                             }
    520.                         }
    521.                     });
    522.                 });
    523.             }
    524.     });
    525.  
    526.     window.xznSlide = function () {
    527.         jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
    528.         jQuery("#ifocus").slide({
    529.             titCell: "#ifocus_btn li",
    530.             mainCell: "#ifocus_piclist ul",
    531.             effect: "leftLoop",
    532.             delayTime: 200,
    533.             autoPlay: true,
    534.             triggerTime: 0
    535.         });
    536.         jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
    537.         jQuery(".product_list").slide({
    538.             mainCell: ".bd ul",
    539.             autoPage: true,
    540.             effect: "leftLoop",
    541.             autoPlay: true,
    542.             vis: 5,
    543.             trigger: "click",
    544.             interTime: 4000
    545.         });
    546.     };
    547. script>
    548. body>
    549. html>

    8.参考文档

    你可能还有感兴趣的项目👇🏻👇🏻👇🏻

    更多项目推荐:计算机毕业设计项目

    如果大家有任何疑虑，请在下方咨询或评论

  • 相关阅读:
    CodeForces Round #501 (div.3) A~E2
    RK3568平台开发系列讲解（驱动基础篇）驱动模块传参
    GitHub 下载量过百万，阿里 P8 秘密分享的「亿级并发系统设计」
    C++ 12：函数模板，模板函数，类模板
    IP协议-NAT机制（理解网络结构的关键要点）
    认证授权双保驾 身份管理的选择关键 ——华为云OneAccess应用身份管理服务 （第一篇 工具介绍）
    【HackTheBox】dancing（SMB）
    （学习日记）2022.7.26
    flutter系列之:在flutter中使用媒体播放器
    制作linux下grup启动背景图片
  • 原文地址：https://blog.csdn.net/weixin_51966461/article/details/133769847