教研网站建设方案,做网站一年赚多少钱,制作企业网站页面的实训报告,用狐狸做logo的网站文章目录一.需求分析二.API接口三.PageHelper1.PageHelper介绍2.添加依赖3.配置pageHelper四.Dao1.mapper 接口2.mapper.xml映射文件3.测试Dao五.Service六.Controller七.前端1.创建course_list.vue2.路由3.定义API方法4.前端视图course_list.vue详解1#xff09;API调用--在视…
文章目录一.需求分析二.API接口三.PageHelper1.PageHelper介绍2.添加依赖3.配置pageHelper四.Dao1.mapper 接口2.mapper.xml映射文件3.测试Dao五.Service六.Controller七.前端1.创建course_list.vue2.路由3.定义API方法4.前端视图course_list.vue详解1API调用--在视图中调用findCourseList方法2在mounted钩子中调用getCourse方法3在分页方法中调用getCourse方法八.测试结果一.需求分析
课程添加完成后可通过我的课程进入课程修改页面此页面显示我的课程列表如下图所示可分页查询。 上边的查询要实现分页、会存在多表关联查询所以建议使用mybatis实现我的课程查询。
二.API接口
在api工程创建course包创建CourseControllerApi接口。 文件位置xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java
//查询课程列表
ApiOperation(查询我的课程列表)
public QueryResponseResultCourseInfo findCourseList(int page,int size,CourseListRequest courseListRequest
);输入参数页码、每页显示个数、查询条件
输出结果类型QueryResponseResult自定义类型
三.PageHelper
1.PageHelper介绍
PageHelper是mybatis的通用分页插件通过mybatis的拦截器实现分页功能拦截sql查询请求添加分页语句最终实现分页查询功能。
我的课程具有分页功能本项目使用Pagehelper实现Mybatis分页功能开发由于本项目使用springboot开发在springboot上集成pagehelperhttps://github.com/pagehelper/pagehelper-spring-boot
PageHelper的使用方法及原理如下 在调用dao的service方法中设置分页参数PageHelper.startPage(page, size)分页参数会设置在ThreadLocal中PageHelper在mybatis执行sql前进行拦截从ThreadLocal取出分页参数修改当前执行的sql语句添加分页sql。
最后执行添加了分页sql的sql语句实现分页查询。 2.添加依赖
文件位置xcEduService01\xc-service-manage-course\pom.xml
dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper‐spring‐boot‐starter/artifactIdversion1.2.4/version
/dependency3.配置pageHelper
在application.yml中配置pageHelper操作的数据库类型 文件位置xcEduService01\xc-service-manage-course\src\main\resources\application.yml
pagehelper:helper‐dialect: mysql四.Dao
1.mapper 接口
文件位置xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\CourseMapper.java
import com.github.pagehelper.Page;
import com.xuecheng.framework.domain.course.CourseBase;
import com.xuecheng.framework.domain.course.ext.CourseInfo;
import com.xuecheng.framework.domain.course.request.CourseListRequest;
import org.apache.ibatis.annotations.Mapper;
Mapper
public interface CourseMapper {CourseBase findCourseBaseById(String id); PageCourseInfo findCourseListPage(CourseListRequest courseListRequest);
}2.mapper.xml映射文件
文件位置xcEduService01\xc-service-manage-course\src\main\resources\com\xuecheng\manage_course\dao\CourseMapper.xml
select idfindCourseListPage resultTypecom.xuecheng.framework.domain.course.ext.CourseInfo parameterTypecom.xuecheng.framework.domain.course.request.CourseListRequestSELECTcourse_base.*,(SELECT pic FROM course_pic WHERE courseid course_base.id) picFROMcourse_base
/select3.测试Dao
文件位置xcEduService01\xc-service-manage-course\src\test\java\com\xuecheng\manage_course\dao\TestDao.java
//测试分页
Test
public void testPageHelper(){PageHelper.startPage(2, 1);CourseListRequest courseListRequest new CourseListRequest();PageCourseInfo courseListPage courseMapper.findCourseListPage(courseListRequest);ListCourseInfo result courseListPage.getResult();System.out.println(courseListPage);
}五.Service
定义CourseService.java类用于课程管理的service定义
文件位置xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\CourseService.java
//课程列表分页查询
public QueryResponseResultCourseInfo findCourseList(int page,int size,CourseListRequest courseListRequest) {if(courseListRequest null){courseListRequest new CourseListRequest();}if(page0){page 0;} if(size0){size 20;} //设置分页参数PageHelper.startPage(page, size);//分页查询PageCourseInfo courseListPage courseMapper.findCourseListPage(courseListRequest);//查询列表ListCourseInfo list courseListPage.getResult();//总记录数long total courseListPage.getTotal();//查询结果集QueryResultCourseInfo courseIncfoQueryResult new QueryResultCourseInfo();courseIncfoQueryResult.setList(list);courseIncfoQueryResult.setTotal(total);return new QueryResponseResultCourseInfo(CommonCode.SUCCESS, courseIncfoQueryResult);
}六.Controller
文件位置xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\CourseController.java
RestController
RequestMapping(/course)
public class CourseController implements CourseControllerApi {AutowiredCourseService courseService;OverrideGetMapping(/coursebase/list/{page}/{size})public QueryResponseResultCourseInfo findCourseList(PathVariable(page) int page, PathVariable(size) int size,CourseListRequest courseListRequest) {return courseService.findCourseList(page,size,courseListRequest);}
}七.前端
1.创建course_list.vue
使用element 的card组件页面布局代码如下 文件位置xc-ui-pc-teach\src\module\course\page\course_list.vue
templatesectionel-row el-col :span8 :offset2 el-card :body-style{ padding: 10px }img src/static/images/add.jpg classimage height150pxdiv stylepadding: 10px;span课程名称/spandiv classbottom clearfixtime classtime/timerouter-link classmui-tab-item :to{path:/course/add/base}el-button typetext classbutton 新增课程/el-button/router-link/div/div/el-card/el-colel-col :span8 v-for(course, index) in courses :keycourse.id :offsetindex 0 ? 2 : 2el-card :body-style{ padding: 10px }img :srccourse.pic!null?imgUrlcourse.pic:/static/images/nonepic.jpg classimage height150pxdiv stylepadding: 10px;span{{course.name}}/spandiv classbottom clearfixtime classtime/timeel-button typetext classbutton clickhandleManage(course.id)管理课程/el-button/div/div/el-card/el-col!--分页--el-col :span24 classtoolbarel-pagination background layoutprev, pager, next current-changehandleCurrentChange :page-sizesize:totaltotal :current-pagepagestylefloat:right;/el-pagination/el-col/el-row/section
/template
scriptimport * as courseApi from ../api/course;import utilApi from ../../../common/utils;let sysConfig require(/../config/sysConfig)export default {data() {return {page:1,size:7,total: 0,courses: [{id:4028e581617f945f01617f9dabc40000,name:test01,pic:},{id:test02,name:test02,pic:}],sels: [],//列表选中列imgUrl:sysConfig.imgUrl}},methods: {//分页方法handleCurrentChange(val) {this.page val;this.getCourse();},//获取课程列表getCourse() {courseApi.findCourseList(this.page,this.size,{}).then((res) {console.log(res);if(res.success){this.total res.queryResult.total;this.courses res.queryResult.list;}});},handleManage: function (id) {console.log(id)this.$router.push({ path: /course/manager/id})}},created(){},mounted() {//查询我的课程this.getCourse();}}
/script
style scoped.el-col-8{width:20%}.el-col-offset-2{margin-left:2%}.time {font-size: 13px;color: #999;}.bottom {margin-top: 13px;line-height: 12px;}.button {padding: 0;float: right;}.image {width: 100%;display: block;}.clearfix:before,.clearfix:after {display: table;content: ;}.clearfix:after {clear: both}
/style
2.路由
文件位置xc-ui-pc-teach\src\module\course\router\index.js
import course_list from /module/course/page/course_list.vue;
import Home from /module/home/page/home.vue;
export default [{path: /course,component: Home,name: 课程管理,hidden: false,iconCls: el-icon-document,children: [{ path: /course/list, name: 我的课程,component: course_list,hidden: false },}3.定义API方法
文件位置xc-ui-pc-teach\src\module\course\api\course.js
//我的课程列表
export const findCourseList (page,size,params) {//对于查询条件向服务端传入key/value串。//使用工具类将json对象转成key/valuelet queries querystring.stringify(params)return http.requestQuickGet(apiUrl/course/coursebase/list/page/size?queries);
}4.前端视图course_list.vue详解
文件位置xc-ui-pc-teach\src\module\course\page\course_list.vue
1API调用–在视图中调用findCourseList方法
//获取课程列表
getCourse() {courseApi.findCourseList(this.page,this.size,{}).then((res) {console.log(res);if(res.success){this.total res.queryResult.total;this.courses res.queryResult.list;}});
},2在mounted钩子中调用getCourse方法
mounted() {//查询我的课程this.getCourse();
}3在分页方法中调用getCourse方法
//分页方法
handleCurrentChange(val) {this.page val;this.getCourse();
}八.测试结果
页面效果如下 注意由于课程图片服务器没有搭建这里图片暂时无法显示。
