- 博客(48)
- 收藏
- 关注
RSS订阅原创 在线教育项目（二十三）----课程封面
一、整合上传组件参考 http://element-cn.eleme.io/#/zh-CN/component/upload 用户头像上传1、上传默认封面创建文件夹cover，上传默认的课程封面2、定义默认封面 <!-- 课程封面--> <el-form-item label="课程封面"> <el-upload :show-file-list="false" :on-success="ha
2020-12-31 16:16:22
146
原创 在线教育项目（二十二）----讲师下拉列表(前端)
一、前端实现1、组件模板<!-- 课程讲师 --><el-form-item label="课程讲师"> <el-select v-model="courseInfo.teacherId" placeholder="请选择"> <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name"
2020-12-31 11:55:44
116
原创 在线教育项目（二十一）----课程发布步骤导航(前端)
一、需求二、配置路由1、添加路由// 课程管理{ path: '/edu/course', component: Layout, redirect: '/edu/course/list', name: 'Course', meta: { title: '课程管理', icon: 'form' }, children: [ { path: 'list', name: 'EduCourseList', component: ()
2020-12-31 11:30:07
314
原创 在线教育项目（二十）----课程发布（后端）
课程添加一、后台api1、定义CourseInfoVo 表单对象2、修改CourseDescription主键生成策略3、定义控制层接口4、定义业务层方法5、实现：CourseServiceImpl.java6、Swagger测试一、后台api1、定义CourseInfoVo 表单对象CourseInfoVo .java@Datapublic class CourseInfoVo { @ApiModelProperty(value = "课程ID") private Strin
2020-12-30 17:14:09
386
1
原创 在线教育项目（十九）----课程分类管理分类列表
一、后端实现1、创建vo//一级分类@Datapublic class OneSubject { private String id; private String title; //一个一级分类有多个二级分类 private List<TwoSubject> children=new ArrayList<>();}//二级分类@Datapublic class TwoSubject { private String
2020-12-30 14:26:48
397
原创 在线教育项目（十八）----课程分类管理接口前端
课程分类管理接口前端一、Excel模板1、编辑Excel模板2、将文件上传至阿里云OSS二、配置路由1、添加路由2、添加vue组件三、表单组件save.vue1、js定义数据2、template3、js上传方法4、回调函数一、Excel模板1、编辑Excel模板2、将文件上传至阿里云OSS二、配置路由1、添加路由在src目录下的route中的index.js中加入路由 { path: '/subject', component: Layout, redirect:
2020-12-30 10:39:16
228
原创 在线教育项目（十七）----课程分类管理接口后端功能实现
课程分类管理接口后端功能实现一、添加依赖1、service-edu模块配置依赖二、业务处理1、SubjectController2、创建和Excel对应的实体类3、SubjectService（1）接口（2）实现类4、创建读取Excel监听器一、添加依赖1、service-edu模块配置依赖 <dependencies> <!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel -->
2020-12-29 23:53:12
361
原创 EasyExcel(二)----读
EasyExcel一、实现EasyExcel对Excel读操作1、
2020-12-29 15:54:00
239
原创 EasyExcel(一)----写
EasyExcel一、Excel导入导出的应用场景二、EasyExcel简介1、EasyExcel特点三、创建项目，实现EasyExcel对Excel写操作1、创建一个普通的maven项目2、pom中引入xml相关依赖3、创建实体类4 、实现写操作（1）创建方法循环设置要添加到Excel的数据（2）实现最终的添加操作一、Excel导入导出的应用场景1、数据导入：减轻录入工作量2、数据导出：统计信息归档3、数据传输：异构系统之间数据传输二、EasyExcel简介1、EasyExcel特点Java
2020-12-29 15:38:22
364
2
原创 在线教育项目（十六）----头像上传阿里云oss（前端操作）
头像上传阿里云oss（前端操作）一、前端整合图片上传组件1、复制头像上传组件2、前端参考实现3、前端添加文件上传组件4、设置默认头像5、js脚本实现上传和图片回显二、测试文件上传一、前端整合图片上传组件1、复制头像上传组件从vue-element-admin复制组件：vue-element-admin/src/components/ImageCroppervue-element-admin/src/components/PanThumb2、前端参考实现src/views/components-
2020-12-29 14:47:46
434
1
原创 在线教育项目（十六）----头像上传阿里云oss
头像上传阿里云oss新建云存储微服务1、在service模块下创建子模块service-oss3、配置application.properties4、logback-spring.xml5、创建启动类6、启动项目二、实现文件上传1、从配置文件读取常量2、文件上传3、控制层4、重启oss服务5、5、Swagger中测试文件上传6、配置nginx反向代理新建云存储微服务1、在service模块下创建子模块service-oss2、配置pom.xmlservice-oss上级模块service已经引入se
2020-12-29 14:38:46
148
原创 在线教育项目（十五）----配置nginx反向代理
一、安装window版的nginx将nginx-1.12.0.zip解压到开发目录中如：E:\development\nginx-1.12.0-guli-api双击nginx.exe运行nginx访问：localhost二、配置nginx代理在Nginx中配置对应的微服务服务器地址即可注意：最好修改默认的 80端口到81 server { listen 9001; server_name localhost; location ~ /eduser
2020-12-29 14:24:17
306
原创 阿里云存储OSS
阿里云存储OSS一、对象存储OSS1、开通“对象存储OSS”服务2、创建Bucket3、上传默认头像4、创建RAM子用户一、对象存储OSS为了解决海量数据存储与弹性扩容，项目中我们采用云存储的解决方案- 阿里云OSS。1、开通“对象存储OSS”服务（1）申请阿里云账号（2）实名认证（3）开通“对象存储OSS”服务（4）进入管理控制台2、创建Bucket选择：标准存储、公共读、不开通3、上传默认头像创建文件夹avatar，上传默认的用户头像4、创建RAM子用户...
2020-12-28 16:03:57
157
原创 在线教育项目（十四）---讲师管理列表组件--新增，修改
讲师管理列表组件--新增，修改一、新增1、定义api2、初始化组件3、实现新增功能二、回显1、定义api2、组件中调用api3、页面渲染前调用getTeacherInfo三、更新1、定义api2、组件中调用api3、完善saveOrUpdate方法四、存在问题一、新增1、定义apisrc/api/edu/teacher.js //3添加讲师 addTeacher(teacher){ return request({ url:`/edu/teach
2020-12-28 15:55:52
413
原创 在线教育项目（十三）---讲师管理列表组件--查询，删除
讲师管理列表组件--查询，删除一、分页列表1、定义api2、初始化vue组件3、定义data4、定义methods5、表格渲染6、分页组件7、顶部查询表单8、测试二、删除1、定义api2、定义methods一、分页列表1、定义api创建文件 src/api/edu/teacher.jsimport request from '@/utils/request'export default{ //1 讲师列表（条件查询分页） //current当前页，limit每页记录数，teach
2020-12-28 15:32:22
186
原创 项目中的路由
项目中的路由一、后台系统路由实现分析1、入口文件中调用路由2、路由模块中定义路由二、学院路由定义1、复制icon图标2、修改路由3、创建vue组件4、form.vue5、list.vue一、后台系统路由实现分析1、入口文件中调用路由src/main.jsimport Vue from 'vue'import 'normalize.css/normalize.css' // A modern alternative to CSS resetsimport ElementUI from 'ele
2020-12-28 14:56:19
309
原创 vue-element-admin&vue-admin-template
vue-element-admin&vue-admin-template 一、vue-element-admin1、简介1、安装二、vue-admin-template1.简介2.安装一、vue-element-admin1、简介而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能GitHub地址：https://gi
2020-12-27 15:50:04
1036
原创 Webpack
Webpack一、什么是Webpack二、Webpack安装1.全局安装2.安装后查看版本号三、初始化项目1.创建webpack文件夹2.创建src文件夹3.src下创建common.js4.src下创建utils.js5.src下创建main.js四、JS打包1.webpack目录下创建配置文件webpack.config.js2.命令行执行编译命令3.webpack目录下创建index.html4.浏览器中查看index.html四、CSS打包1.安装style-loader和 css-loaderWe
2020-12-27 14:13:36
376
原创 模块化
模块化一、模块化简介1、模块化产生的背景2、什么是模块化开发二、CommonJS模块规范1、创建“module”文件夹2、导出模块3、导入模块4、运行程序三、ES6模块化规范1、导出模块2、导入模块3、运行程序三、ES6模块化的另一种写法1、导出模块2、导入模块一、模块化简介1、模块化产生的背景随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载
2020-12-27 13:22:03
97
原创 Babel
Babel一、简介二、安装三、Babel的使用1、初始化项目2、创建文件3、配置.babelrc4、安装转码器5、转码一、简介Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。二、安装安装命令行转码工具Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：npm install --global babel-cli#查看是否安装成功babel --versio
2020-12-26 23:38:02
182
原创 NPM
NPM一、简介1、什么是NPM2、NPM工具的安装位置二、使用npm管理项目1、创建文件夹npm2、项目初始化3、修改npm镜像4、npm install命令的使用5、其它命令一、简介1、什么是NPMNPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。2、NPM工具的安装位置我们通过npm 可以很方便地下载js库，管理前端工程。Node.js默认安装的np
2020-12-26 16:29:52
166
原创 Node.js
Node.js一、简介1、什么是Node.js1、Node.js有什么用二、安装一、简介1、什么是Node.js简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。1、Node.js有什么用如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。
2020-12-26 16:09:56
262
原创 element-ui简介
element-ui一、引入css二、引入js三、编写html四、编写js五、测试element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建官网： http://element-cn.eleme.io/#/zh-CN创建 06-element-ui.html将element-ui引入到项目一、引入css<!-- import CSS --><link rel="stylesheet" href="element-ui/lib/t
2020-12-26 15:17:31
6623
原创 Vue---(二)---组件，生命周期，路由，axios操作
Vue一、组件（重点）1、局部组件1、定义组件2、使用组件2、全局组件1、定义组件2、使用组件二、实例生命周期三、路由1、引入js2、编写html3、编写js四、axios1、获取数据2、显示数据一、组件（重点）组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：1、局部组件创建 01-1-局部组件.html1、定义组件 <
2020-12-26 15:09:57
251
原创 Vue
Vue一、介绍1、Vue.js 是什么2、初始Vue.js3、在vs code中创建代码片段：二、基本语法1、基本数据渲染和指令2、双向数据绑定3、事件4、修饰符5、条件渲染6、列表渲染一、介绍1、Vue.js 是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官方网站：https:
2020-12-26 13:28:36
312
原创 ECMAScript 6简介+基础语法
自学参考：http://es6.ruanyifeng.com/ECMAScript 6简介+基础语法一、ECMAScript 6 简介1、ECMAScript 和 JavaScript 的关系2、ES6 与 ECMAScript 2015 的关系一、基本语法1、let声明变量2、const声明常量（只读变量）3、结构赋值4、模板字符串5、声明对象简写6、定义方法简写7、对象拓展运算符8、箭头函数一、ECMAScript 6 简介ECMAScript 6.0（以下简称 ES6）是 JavaScript
2020-12-26 00:05:19
451
原创 前端开发工具
前端开发一、下载和安装VS Code1、下载地址2、安装二、初始设置1、中文界面配置2、插件安装3、创建项目4、保存工作区5、新建文件夹和网页6、预览网页7、设置字体大小8、开启完整的Emmet语法支持前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能
2020-12-25 23:12:15
707
原创 在线教育项目（十一）---讲师模块----日志
日志一、日志1、配置日志级别二、Logback日志1、配置日志级别2、将错误日志输出到文件3、将日志堆栈信息输出到文件一、日志1、配置日志级别日志记录器（Logger）的行为是分等级的。如下表所示：分为：OFF、FATAL、ERROR、WARN、INFO、DEBUG、ALL默认情况下，spring boot从控制台打印出来的日志级别只有INFO及以上级别，可以配置日志级别在配置文件application.properties中加入# 设置日志级别logging.level.root=WARN
2020-12-25 15:53:18
91
1
原创 在线教育项目--讲师模块（十）---异常处理
异常处理一、什么是统一异常处理1、制造异常2、什么是统一异常处理二、统一异常处理1、创建统一异常处理器2、测试三、处理特定异常1、添加异常处理方法2、测试四、自定义异常1、创建自定义异常类2、业务中需要的位置抛出MyException3、添加异常处理方法4、测试一、什么是统一异常处理1、制造异常随便找个方法，插入int i = 10/0;2、什么是统一异常处理我们想让异常结果也显示为统一的返回结果对象，并且统一处理系统的异常信息，那么需要统一异常处理二、统一异常处理1、创建统一异常处理器
2020-12-25 14:38:23
216
原创 在线教育项目--讲师模块（九）----新增，删除，修改操作
新增，删除，修改操作一、新增一、自动填充封装1、在service-base模块中添加2、在实体类添加自动填充注解二、controller方法定义1、新增方法①方法②二、修改1、根据id查询方法①方法②2、根据id修改方法①方法②三、 删除四、swagger中测试一、新增一、自动填充封装1、在service-base模块中添加创建包handler，创建自动填充类 MyMetaObjectHandler@Componentpublic class MyMetaObjectHandler impl
2020-12-25 11:48:02
445
原创 在线教育项目--讲师模块（八）----分页条件查询
分页条件查询一、创建查询对象二、service1、接口2、实现3、controller一、创建查询对象创建com.guli.edu.query包，创建TeacherQuery.java查询对象@ApiModel(value = "Teacher查询对象", description = "讲师查询对象封装")@Datapublic class TeacherQuery implements Serializable { @ApiModelProperty(value = "教师名称,模糊查
2020-12-25 00:08:16
220
原创 在线教育项目--讲师模块（七）----讲师分页查询
讲师分页查询一、分页1、MyBatisPlusConfig中配置分页插件一、pandas是什么？二、使用步骤1.引入库2、分页Controller方法3、Swagger中测试若不清楚分页查询的，可看之前博客种Mybatis-plus中的分页查询相关内容一、分页1、MyBatisPlusConfig中配置分页插件一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：/** * 分页插件 */
2020-12-24 16:20:39
341
1
原创 在线教育项目--讲师模块（六）----统一返回数据格式
统一返回数据格式一、统一返回数据格式二、创建统一结果返回类1、在common模块下创建子模块common-utils2、创建接口定义返回码3、创建结果类二、统一返回结果使用1、在service模块中添加依赖2、修改Controller中的返回结果一、统一返回数据格式项目中我们会将响应封装成json返回，一般我们会将所有接口的数据格式统一， 使前端(iOS Android, Web)对数据的操作更一致、轻松。一般情况下，统一返回数据格式没有固定的格式，只要能描述清楚返回的数据状态以及要返回的具体数据就可
2020-12-24 15:52:43
404
1
原创 在线教育项目--讲师模块（五）----Swagger2的使用
Swagger2一、Swagger2介绍二、配置Swagger21、创建common模块2、在common中引入相关依赖3、在common下面创建子模块service-base
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人