尚硅谷在线教育十：首页数据显示
作者：互联网
文章目录
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代码生成器
@Test
public 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); //重新生成时文件是否覆盖
//UserServie
gc.setServiceName("%sService"); //去掉Service接口的首字母I
gc.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.eduservice
pc.setParent("com.blb");
//包 com.atguigu.eduservice.controller
pc.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 {
@Autowired
private 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();
}
}
- 前台显示banner接口的编写
controller层
@RestController
@RequestMapping("/educms/bannerfront")
@CrossOrigin
public class BannerFrontController {
@Autowired
private 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 {
@Override
public 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 {
@Autowired
private EduCourseService eduCourseService;
@Autowired
private 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
//查询前八门热门课程
@Override
public 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 {
@Override
public 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前端页面准备工作
- 使用命令下载axios依赖
npm install axios - 封装axios
创建一个utils文件夹，文件夹下面创建request.sj
request.js里面的代码
import axios from 'axios'
//创建axios实例
const service = axios.create({
baseURL: 'http://localhost:9001',//api的base_url
timeout:20000 //请求超时时间
})
export default service
2.2首页banner数据显示
- 创建aip文件夹，在api文件夹创建js文件，定义调用接口的路径
banner.js
import request from '@/utils/request.js'
export default{
//查询前两条banner数据
getListBanner(){
return request({
url: '/educms/bannerfront/getAllBanner',
method: 'GET'
})
}
}
- 在页面调用接口得到数据进行显示
在pages/index.vue中进行调用
创建bannerList数组
banner数据的调用
created(){
//调用查询banner的方法
this.getBannerList()
},
methods:{
//查询banner数据
getBannerList()
{
banner.getListBanner()
.then(response => {
this.bannerList=response.data.data.list
})
}
}
- 轮播图数据的改变
轮播图数据改成后台传过来的数据
<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>
- nginx路由的配置
加上后台接口的地址转发
2.3热门课程和名师的显示
- 添加路由
在api文件夹下建一个名为index.js的文件
import request from '@/utils/request.js'
export default{
//查询热门课程和名师
getIndexData(){
return request({
url: '/eduservice/indexfront/index',
method: 'GET'
})
}
}
- 在页面调用接口得到数据进行显示
在pages/index.vue中进行调用
创建eduList数组和teacherList数组
访问接口
//获得热门课程和名师
getHotCourseTeacher()
{
index.getIndexData()
.then(response=>{
this.eduList=response.data.data.courseList
this.teacherList=response.data.data.teacherList
})
}
- 热门课程和名师循环数组显示
//热门课程
<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">
<p
class="c-999 f-fA"
>{{teacher.intro}}</p>
</div>
</section>
</li>
</ul>
3.首页数据加redis
3.1redis特点
- 基于key-value进行存储
- 支持多种数据结构：string（字符串），list（列表），hash（哈希），set（集合），zset（有序集合）
- 支持持久化，通过内存进行存储，也可以存到硬盘里面
- 支持过期时间，支持事务
一般来讲，把经常经常查询，不经常修改，不是特别重要是数据放到redis作为缓存
3.2 项目集成redis
- 在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>
- 在service_base中加入redis的配置信息
放在com.atguigu.servicebase包下面
创建一个RedisConfig类
@Configuration //配置类
@EnableCaching //开启缓存
public class RedisConfig extends CachingConfigurerSupport {
@Bean
public 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;
}
@Bean
public 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缓存注解
-
缓存@Cacheable
根据方法对其返回结果进行缓存，下次请求时，如果缓存存在，则直接读取缓存数据返回；如果缓存不存在，则执行方法，并把返回的结果存入缓存中。一般用在查询方法上。查看源码，属性值如下：
-
缓存@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'")
@Override
public 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;
}
}
标签：缓存,spring,redis,在线教育,首页,new,硅谷,banner,public 来源： https://blog.csdn.net/m0_45432976/article/details/120679390