1. 首页数据banner显示(后端)

1.1 在service创建子模块service_cms

1.2 创建配置文件

在application.properties中

# 服务端口
server.port=8004
# 服务名
spring.application.name=service-cms
# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root
#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/atguigu/cmsservice/mapper/xml/*.xml
#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

1.3 创建数据库表。使用表生成代码生成器

1.3.1数据库的SQL语句

CREATE TABLE `crm_banner` (`id` CHAR(19) NOT NULL DEFAULT '' COMMENT 'ID',`title` VARCHAR(20) DEFAULT '' COMMENT '标题',`image_url` VARCHAR(500) NOT NULL DEFAULT '' COMMENT '图片地址',`link_url` VARCHAR(500) DEFAULT '' COMMENT '链接地址',`sort` INT(10) UNSIGNED NOT NULL DEFAULT '0' COMMENT '排序',`is_deleted` TINYINT(1) UNSIGNED NOT NULL DEFAULT '0' COMMENT '逻辑删除 1（true）已删除， 0（false）未删除',`gmt_create` DATETIME NOT NULL COMMENT '创建时间',`gmt_modified` DATETIME NOT NULL COMMENT '更新时间',PRIMARY KEY (`id`),UNIQUE KEY `uk_name` (`title`)
) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COMMENT='首页banner表';#
# Data for table "crm_banner"
#INSERT INTO `crm_banner` VALUES ('1194556896025845762','test1','https://online-teach-file.oss-cn-beijing.aliyuncs.com/cms/2019/11/14/297acd3b-b592-4cfb-a446-a28310369675.jpg','/course',1,0,'2019-11-13 18:05:32','2019-11-18 10:28:22'),
('1194607458461216769','test2','https://online-teach-file.oss-cn-beijing.aliyuncs.com/cms/2019/11/13/8f80790d-d736-4842-a6a4-4dcb0d684d4e.jpg','/teacher',2,0,'2019-11-13 21:26:27','2019-11-14 09:12:15');

1.3.2代码生成器

 @Testpublic void run() {// 1、创建代码生成器AutoGenerator mpg = new AutoGenerator();// 2、全局配置GlobalConfig gc = new GlobalConfig();String projectPath = System.getProperty("user.dir");gc.setOutputDir("D:\\尚硅谷在线教育项目\\在线教育--谷粒学院\\项目源码\\day10\\后端代码\\后端代码\\guli_parent\\service\\service_cms" + "/src/main/java");gc.setAuthor("smile");gc.setOpen(false); //生成后是否打开资源管理器gc.setFileOverride(false); //重新生成时文件是否覆盖//UserServiegc.setServiceName("%sService"); //去掉Service接口的首字母Igc.setIdType(IdType.ID_WORKER_STR); //主键策略gc.setDateType(DateType.ONLY_DATE);//定义生成的实体类中日期类型gc.setSwagger2(true);//开启Swagger2模式mpg.setGlobalConfig(gc);// 3、数据源配置DataSourceConfig dsc = new DataSourceConfig();dsc.setUrl("jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8");dsc.setDriverName("com.mysql.cj.jdbc.Driver");dsc.setUsername("root");dsc.setPassword("199866");dsc.setDbType(DbType.MYSQL);mpg.setDataSource(dsc);// 4、包配置PackageConfig pc = new PackageConfig();pc.setModuleName("educms"); //模块名//包  com.atguigu.eduservicepc.setParent("com.blb");//包  com.atguigu.eduservice.controllerpc.setController("controller");pc.setEntity("domain");pc.setService("service");pc.setMapper("mapper");mpg.setPackageInfo(pc);// 5、策略配置StrategyConfig strategy = new StrategyConfig();strategy.setInclude("crm_banner");strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略strategy.setTablePrefix(pc.getModuleName() + "_"); //生成实体时去掉表前缀strategy.setColumnNaming(NamingStrategy.underline_to_camel);//数据库表字段映射到实体的命名策略strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter链式操作strategy.setRestControllerStyle(true); //restful api风格控制器strategy.setControllerMappingHyphenStyle(true); //url中驼峰转连字符mpg.setStrategy(strategy);// 6、执行mpg.execute();}

1.4 banner接口的编写

1.4.1. 后台管理员接口的编写

controller层

@RestController
@CrossOrigin
@RequestMapping("/educms/banneradmin")
public class BannerAdminController {@Autowiredprivate CrmBannerService crmBannerService;//1.分页查询banner@GetMapping("/pageBanner/{page}/{limit}")public R pageBanner(@PathVariable long page,@PathVariable long limit){Page<CrmBanner> crmBannerPage = new Page<>(page,limit);crmBannerService.page(crmBannerPage,null);return R.ok().data("items",crmBannerPage.getRecords()).data("total",crmBannerPage.getTotal());}//添加banner@PostMapping("/addbanner")public R addBanner(@RequestBody CrmBanner crmBanner){crmBannerService.save(crmBanner);return R.ok();}//根据id查询banner@GetMapping("/get/{id}")public R getBanner(@PathVariable String id){CrmBanner crmBanner = crmBannerService.getById(id);return R.ok().data("item",crmBanner);}//修改banner@PutMapping("/update")public R updateBanner(@RequestBody CrmBanner banner){crmBannerService.updateById(banner);return R.ok();}//根据id删除banner@DeleteMapping("/delete/{id}")public R deleteBanner(@PathVariable("id") String id){crmBannerService.removeById(id);return R.ok();}}

1. 前台显示banner接口的编写
   controller层

@RestController
@RequestMapping("/educms/bannerfront")
@CrossOrigin
public class BannerFrontController {@Autowiredprivate CrmBannerService bannerService;//查询所有banner@GetMapping("/getAllBanner")public R getAllBanner(){List<CrmBanner> list= bannerService.selectAllBanner();return R.ok().data("list",list);}}

service层的编写

@Service
public class CrmBannerServiceImpl extends ServiceImpl<CrmBannerMapper, CrmBanner> implements CrmBannerService {@Overridepublic List<CrmBanner> selectAllBanner() {List<CrmBanner> list = baseMapper.selectList(null);return list;}
}

1.4.2 热门课程和名师的编写

在service_edu的module下在controller层创建一个名为IndexFrontController的controller，实现热门课程和名师的查询
创建一个IndexFrontController类

@RestController
@RequestMapping("/eduservice/indexfront")
@CrossOrigin
public class IndexFrontController {@Autowiredprivate EduCourseService eduCourseService;@Autowiredprivate EduTeacherService eduTeacherService;@GetMapping("/index")public R index(){//查询前八门热门课程List<EduCourse> courseList =eduCourseService.getFrontClass();//查询前四名讲师List<EduTeacher> teacherList= eduTeacherService.getFrontTeacher();return R.ok().data("courseList",courseList).data("teacherList",teacherList);}
}

service实现
EduCourseServiceImpl

//查询前八门热门课程@Overridepublic List<EduCourse> getFrontClass() {QueryWrapper<EduCourse> wrapper = new QueryWrapper<>();wrapper.orderByDesc("id");wrapper.last("limit 8");List<EduCourse> list = baseMapper.selectList(wrapper);return list;}

EduTeacherServiceImpl

@Service
public class EduTeacherServiceImpl extends ServiceImpl<EduTeacherMapper, EduTeacher> implements EduTeacherService {@Overridepublic List<EduTeacher> getFrontTeacher() {QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();wrapper.orderByDesc("id");wrapper.last("limit 4");List<EduTeacher> list = baseMapper.selectList(wrapper);return list;}
}

2.首页数据banner显示（前端）

2.1前端页面准备工作

1. 使用命令下载axios依赖npm install axios
2. 封装axios
   创建一个utils文件夹，文件夹下面创建request.sj
   
   request.js里面的代码

import axios from 'axios'//创建axios实例
const service = axios.create({baseURL: 'http://localhost:9001',//api的base_urltimeout:20000 //请求超时时间
})
export default service

2.2首页banner数据显示

1. 创建aip文件夹，在api文件夹创建js文件，定义调用接口的路径
   
   banner.js

import request from '@/utils/request.js'export default{//查询前两条banner数据getListBanner(){return request({url: '/educms/bannerfront/getAllBanner',method: 'GET'})}
}

1. 在页面调用接口得到数据进行显示
   在pages/index.vue中进行调用
   创建bannerList数组
   
   banner数据的调用

created(){//调用查询banner的方法this.getBannerList()},methods:{//查询banner数据getBannerList(){banner.getListBanner().then(response => {this.bannerList=response.data.data.list})}     }

1. 轮播图数据的改变
   轮播图数据改成后台传过来的数据

    <div class="swiper-wrapper"><div v-for="banner in bannerList" :key="banner.id" class="swiper-slide" style="background: #040B1B;"><a target="_blank" :href="banner.linkUrl"><img :src="banner.imageUrl" :alt="banner.title"></a></div>

1. nginx路由的配置
   加上后台接口的地址转发
   

2.3热门课程和名师的显示

1. 添加路由
   在api文件夹下建一个名为index.js的文件

import request from '@/utils/request.js'export default{//查询热门课程和名师getIndexData(){return request({url: '/eduservice/indexfront/index',method: 'GET'})}}

1. 在页面调用接口得到数据进行显示
   在pages/index.vue中进行调用
   创建eduList数组和teacherList数组
   
   访问接口

 //获得热门课程和名师getHotCourseTeacher(){index.getIndexData().then(response=>{this.eduList=response.data.data.courseListthis.teacherList=response.data.data.teacherList})}

1. 热门课程和名师循环数组显示

//热门课程<ul class="of" id="bna"><li v-for="course in eduList" :key="course.id"><div class="cc-l-wrap"><section class="course-img"><img:src="course.cover"class="img-responsive":alt="course.title"><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><a href="#" :title="course.title" class="course-title fsize18 c-333">{{course.title}}</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green" v-if="Number(course.price) === 0"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">{{course.buyCount}}人学习</i>|<i class="c-999 f-fA">{{course.viewCount}}评论</i></span></section></div></li></ul>
//名师
<ul class="of"><li v-for="teacher in teacherList" :key="teacher.id"><section class="i-teach-wrap"><div class="i-teach-pic"><a href="/teacher/1" :title="teacher.name"><img :alt="teacher.name" :src="teacher.avatar"></a></div><div class="mt10 hLh30 txtOf tac"><a href="/teacher/1" :title="teacher.name" class="fsize18 c-666">{{teacher.name}}</a></div><div class="hLh30 txtOf tac"><span class="fsize14 c-999">{{teacher.career}}</span></div><div class="mt15 i-q-txt"><pclass="c-999 f-fA">{{teacher.intro}}</p></div></section></li></ul>

3.首页数据加redis

3.1redis特点

1. 基于key-value进行存储
2. 支持多种数据结构：string（字符串），list（列表），hash（哈希），set（集合），zset（有序集合）
3. 支持持久化，通过内存进行存储，也可以存到硬盘里面
4. 支持过期时间，支持事务
   一般来讲，把经常经常查询，不经常修改，不是特别重要是数据放到redis作为缓存

3.2 项目集成redis

1. 在common的pom中引入依赖

 <!-- redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><!-- spring2.X集成redis所需common-pool2--><dependency><groupId>org.apache.commons</groupId><artifactId>commons-pool2</artifactId><version>2.6.0</version></dependency>

1. 在service_base中加入redis的配置信息
   放在com.atguigu.servicebase包下面
   创建一个RedisConfig类

@Configuration //配置类
@EnableCaching //开启缓存
public class RedisConfig extends CachingConfigurerSupport {@Beanpublic RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {RedisTemplate<String, Object> template = new RedisTemplate<>();RedisSerializer<String> redisSerializer = new StringRedisSerializer();Jackson2JsonRedisSerializer jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer(Object.class);ObjectMapper om = new ObjectMapper();om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);jackson2JsonRedisSerializer.setObjectMapper(om);template.setConnectionFactory(factory);//key序列化方式template.setKeySerializer(redisSerializer);//value序列化template.setValueSerializer(jackson2JsonRedisSerializer);//value hashmap序列化template.setHashValueSerializer(jackson2JsonRedisSerializer);return template;}@Beanpublic CacheManager cacheManager(RedisConnectionFactory factory) {RedisSerializer<String> redisSerializer = new StringRedisSerializer();Jackson2JsonRedisSerializer jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer(Object.class);//解决查询缓存转换异常的问题ObjectMapper om = new ObjectMapper();om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);jackson2JsonRedisSerializer.setObjectMapper(om);// 配置序列化（解决乱码的问题）,过期时间600秒RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig().entryTtl(Duration.ofSeconds(600)).serializeKeysWith(RedisSerializationContext.SerializationPair.fromSerializer(redisSerializer)).serializeValuesWith(RedisSerializationContext.SerializationPair.fromSerializer(jackson2JsonRedisSerializer)).disableCachingNullValues();RedisCacheManager cacheManager = RedisCacheManager.builder(factory).cacheDefaults(config).build();return cacheManager;}
}

3.3 在接口中添加redis缓存

由于首页中数据变化不是很频繁,而且首页访问量较大，所有我们有必要把首页接口的数据缓存到redis缓存中，减少数据库的压力和提高访问速度
改造service-cms莫快递首页banner接口

3.3.1 redis在Spring Boot缓存注解

1. 缓存@Cacheable
   根据方法对其返回结果进行缓存，下次请求时，如果缓存存在，则直接读取缓存数据返回；如果缓存不存在，则执行方法，并把返回的结果存入缓存中。一般用在查询方法上。查看源码，属性值如下：
   

2. 缓存@CachePut
   使用该注解标志的方法，每次都会执行，并将结果存入指定的缓存中。其他方法可以直接从响应的缓存中读取缓存数据，而不需要再去查询数据库。一般用在新增方法上。
   查看源码，属性值如下：

（3）缓存@CacheEvict
使用该注解标志的方法，会清空指定的缓存。一般用在更新或者删除方法上
查看源码，属性值如下：

在application.properties中添加redis配置

spring.redis.host=localhost
spring.redis.port=6379
spring.redis.database= 0
spring.redis.timeout=1800000
spring.redis.lettuce.pool.max-active=20
spring.redis.lettuce.pool.max-wait=-1
#最大阻塞等待时间(负数表示没限制)
spring.redis.lettuce.pool.max-idle=5
spring.redis.lettuce.pool.min-idle=0

Redis添加
在CrmBannerServiceImpl接口中添加redis

@Service
public class CrmBannerServiceImpl extends ServiceImpl<CrmBannerMapper, CrmBanner> implements CrmBannerService {@Cacheable(value = "banner",key = "'selectIndexList'")@Overridepublic List<CrmBanner> selectAllBanner() {//根据id降序排序查询前两条数据QueryWrapper<CrmBanner> queryWrapper = new QueryWrapper<>();queryWrapper.orderByDesc("id");//用last方法实现SQL语句的拼接queryWrapper.last("limit 2");List<CrmBanner> list = baseMapper.selectList(queryWrapper);return list;}
}

尚硅谷在线教育十：首页数据显示相关推荐

1. 尚硅谷在线教育十二：微信登录

   文章目录 1.OAuth2.0 2. 微信扫描登录的准备 3. 微信登录 3.1 在service-ucenter模块配置文件 微信id,密钥和域名地址 3.2创建读取配置文件的类 3.3 生成微信扫 ...

2. 尚硅谷在线教育十四:微信支付

   文章目录 1. 前期准备工作 1.1 创建订单相关的表 2.2 创建service_order模块 2. 微信支付后端相关的接口 2.1 生成订单的接口 2.2 根据订单id查询订单信息 2.3 微信 ...

3. 尚硅谷在线教育五：尚硅谷在线教育讲师管理开发

   文章目录 1. 前端登录功能的地址改变 1.1. 修改配置文件的请求地址 2.2登录调用的两个方法 2.2.1编写login和info接口 3 最终测试以及出现的问题 3.1跨域问题 3.2 跨域解决 ...

4. 尚硅谷在线教育十一：登录注册业务

   文章目录 1. 用户登录业务介绍 1.1 单一服务器模式登录 1.2 单点登录 1.3 单点登录的常用三种方式 1.3.1. session广播机制实现 1.3.2 使用cookie+redis实现 ...

5. 尚硅谷在线教育项目的坑

   尚硅谷 在线教育总结 8/28 nginx启动不了 安装路径不能有中文 vscode 修改的代码必须C+S 9/4 正常启动前后端项目还得启动nginx Chrome(谷歌)浏览器跨域请求被阻止,CO ...

6. 尚硅谷在线教育九：尚硅谷在线教育NUXT搭建前台环境以及相关页面的编写

   文章目录 1.服务端渲染技术NUXT 1.1什么是服务端渲染 1.2什么是NUXT 2.NUXT环境初始化 2.1下载压缩包 2.2解压 2.3安装ESLint 2.4修改package.json 2 ...

7. 尚硅谷在线教育一：尚硅谷在线教育相关的基本搭建配置以及讲师管理模块

   文章目录 1.项目的总体说明 1.1项目的功能模块说明 1.2项目设计的技术 2创建一个名为guli的springboot的父项目 3. 在guli的项目下创建一个子模块common用于公共使用的模块 ...

8. 尚硅谷在线教育十三：讲师、课程功能完善

   文章目录 1. 名师列表功能 1.1分页查询名师接口 2.2整合前端页面 2.讲师详情功能 2.1修改讲师页面的超链接,改成讲师id 2.2编写讲师详情接口 2.3讲师详情的前端 3.课程列表功能 3 ...

9. 尚硅谷在线教育视频点播

   文章目录 1. 开通阿里云视频点播服务 2.阿里云点播SDK实现 2.1上传视频到阿里云视频点播服务 2.2整合阿里云上传视频的接口 3. 课程信息的完善(为每个课程的小节添加视频) 3.1 添加上传 ...

最新文章

1. (004) java后台开发之Eclipse(Neon) 版本安装Java EE插件
2. [转]颠覆式前端UI开发框架：React
3. 人工智能的发展趋势和行业岗位
4. 第五节 面向对象相关特性
5. salt-api配置
6. 数据结构与算法 | 树与二叉树
7. UDP穿透NAT原理解析
8. OnlineJudge 离线题库采集
9. 超级简易法上传本地文件到github上
10. 基于 vue + zhengAdmin 的一套后台模板
11. POJ3253 Fence Repair【哈夫曼树+优先队列】
12. 计算机的组成 —— VGA
13. Linux - vim安装 配置与使用
14. AI头发笔刷_笔刷不够用？给你送1000款~快来拿走
15. 多项目管理中PMO的作用
16. 关于苹果MFI认证那些事
17. 民间文学【0006】
18. 以麒麟音乐为例，教你如何构建专属自己的音乐播放器
19. javamail发送邮件到qq邮箱图片不能显示问题
20. 对于栈内存和堆内存的理解

热门文章

1. 【精益生产】精益知识大全
2. 基于STM32的HAL库的倒立摆控制（一）PWM输出
3. windows虚拟机安装Mac OS系统（操作图解）
4. 将指定的正整数n分解成若干个互不相同的自然数的和，且使这些自然数的乘积最大
5. cloudflare免费证书_久违的百度云加速免费版终于支持 HTTPS 了！
6. 【中学教师资格证-教育知识与能力】简答题
7. 【对比+转载】麦子:我奋斗了18年才和你坐在一起喝咖啡清华大学硕士: 我奋斗了18年，不是为了和你一起喝咖啡
8. mysql数据库学习之锁模块
9. spring实战学习（四）AOP及其实现方式
10. 嵌入式系统设计---实时系统与嵌入式操作系统