课程列表前端 直接复制tree/index.vue到list.vue. <template> <div class="app-container"> <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" /> <el-tree ref="tree2" :data="data2" :props="defaultProps" :filter-node-method="...

第七天主要实现的功能如下。 下面实现课程分类前端 （1）添加路由 router/index.js. { path: '/subject', component: Layout, redirect: '/subject/list', //在页面中访问'/teacher'会被重定向到'/teacher/table' name: '课程分类管理', meta: { title: '课程分类管理', icon: 'example' }, children: [ { path: 'list', name: ...

添加课程功能的实现 添加课程的思路很简单：上传excel表格实现课程添加，我们需要做下面这些事。 (1)引入easyexcel依赖 (2)使用代码生成器生成实体类对应的controller、service和，mapper。 将CodeGenerator的数据库表改为edu_subject即可。 strategy.setInclude("edu_subject");//根据数据库哪张表生成，有多张表就加逗号继续填写 运行生成代码，如果没有生成试着把CodeGenerator移到启动类同一级目录试试。在生成的controller中添加注解@CrossOrigin解决跨域问题。 (3)编写cont...

实现读操作。 先创建实体类，与之前的过程一致，只是注解新加一个index属性，方便进行读操作时按照序号排序依次读取。 //设置表头和添加的数据字段 @Data @ToString public class DemoData { //学生序号 //设置excel表头名称 @ExcelProperty(value = "学生序号", index = 0) private Integer sno; //学生名称 //设置excel表头名称 @ExcelProperty(value = "学生姓名", index = 1) priva...

5.1 需求概述 下面实现课程分类模块。 (1)数据库建表 CREATE TABLE `edu_subject` ( `id` char(19) NOT NULL COMMENT '课程类别ID', `title` varchar(10) NOT NULL COMMENT '类别名称', `parent_id` char(19) NOT NULL DEFAULT '0' COMMENT '父ID', `sort` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '排序字段', `gmt_create` datetime NOT ...

4.头像上传(前端) (1)ui组件 我们使用现有组件来实现头像上传，我们之前下载使用的vue-admin-template-master仅仅100多kb，还有一个vue-element-admin-master有900多kb，功能更加齐全，我们从这个组件的src/components中找到组件ImageCropper与PanThumb，复制到项目的src/components目录。 save.vue中。 <!-- 讲师头像：TODO --> <!-- 讲师头像 --> <el-form-item label="讲师头像"> <!-- 头衔缩...

ngnix nigix是一个反向代理服务器，主要功能有: 请求转发 负载均衡 动静分离 java代码部署到一个服务器，静态资源(图片、网页html等)部署到其它服务器。 可以在官网下载即可(此教程使用windows版本)，官网下不了可以通过此链接下载：软件下载 - NGINX开源社区。解压可用。 我们使用cmd执行exe进行启动，注意直接关闭cmd窗口不会关闭nginx，关闭时也需要使用命令。关闭命令如下。 nginx.exe -s stop 我们后端的eduservice和eduoss两个模块的端口分别是8001，8002，为了使前端模块与后端交互更优雅，我们使用nignx...

接下来写下service和controller。编写service的过程不需要刻意记忆，只需要查阅官网文档改写即可。 @Service public class OssServiceImpl implements OssService { @Override public String uploadFileAvatar(MultipartFile file) { //工具类获取值 String endpoint = ConstantPropertiesUtils.END_POINT; String accessKeyId = C...

在开始写代码前，还需要配置依赖。在后端工程pom文件中之前已经配置了oss相关内容，这里摘录下。 <aliyun-sdk-oss.version>3.1.0</aliyun-sdk-oss.version> 在后端service模块下创建service_oss子模块。在这个模块中引入oss的相关依赖。 <!-- 阿里云oss依赖 --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</a...

1.阿里云oss 我们需要通过云空间来存储讲师头像。在阿里云官网：阿里云-上云就上阿里云 (aliyun.com)注册账号(推荐使用支付宝)并进行实名认证，推荐充值两毛钱，避免因为欠费而被限制功能。在官网开通oss，开通后控制台如下。 点击右下角的创建bucket。存储类型选择低频访问，读写权限选择公共读，其他建议选择不收费的选项。 再点击文件管理就可以上传文件了。不过，在实际工作中我们一般没有权限直接通过阿里云官网上传文件，而是通过java代码来上传文件。先要获得oss的访问密钥，在官网选择AcessKey->继续使用->创建。 阿里云的产品都有详细的学习资源，我们可以基于...

谷粒学院61——讲师修改 1.讲师修改 实现讲师修改功能其实要做两件事：1.显示原来的用户数据 2.更新数据。下面来实现这个功能。 (1)ui实现 首先教师列表要有一个按钮来修改，就是上面那个红色的按钮，前面list.vue代码其实已经写了，这里摘录下来。 <el-table-column label="操作" width="200" align="center"> <template slot-scope="scope"> <router-link :to="'/teacher/edit/' + scope.ro...

讲师的分页、条件查询、删除与添加 1.实现分页 上面成功展示了数据，但是还没有实现分页，下面来实现分页的过程。 有了element-ui，分页简直是太简单了。直接复用它的分页代码即可。在</el-table>组件后面添加分页组件如下。 <!--分页组件--> <el-pagination background layout="prev, pager, next,total,jumper" :total="total" :page-size="l...

展示讲师列表数据 把response中的数据取出来具体展示下。 this.total = response.data.total this.list = response.data.records console.log(this.total) console.log(this.list) 注意一定要使用this.xx，否则会报下面的错哒。 ReferenceError: xx is not defined 使用element-ui的表格组件进行修改。这里将代码复制到list.vue中替换到template即可。 .<template> <div> ...

讲师列表的前端实现 (1)添加前端路由 { path: '/teacher', component: Layout, redirect: '/teacher/table', //在页面中访问'/teacher'会被重定向到'/teacher/table' name: '讲师管理', meta: { title: '讲师管理', icon: 'example' }, children: [ { path: 'table', name: '讲师列表', component: () =&...