使用springboot+vue+element-ui模仿蓝墨云班课

声明:前端大量CSS样式从原网站复制来的，蓝墨云班课也十分好用，大家可以了解下

项目地址：前端+后端+数据库 https://gitee.com/cao-qiangqiang/a04test07/tree/master/

（前端代码不是很规范，没写server层，听说有许多实用工具可以不用手写get、set、sql语句）

没什么难点，解决跨域后，完成登录后都是差不多的操作

欢迎上传

1.创建后端项目连接上数据库 | 创建前端首页，登录界面，喜欢精细的同学可以使用element-ui添加表单验证，简洁方便。

application.yml

# DataSource Config
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driver  //这个驱动适用于mysql版本，如果这里报错可以换成com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/weareone?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456   //这里的密码也需要注意  大部分都是 123456 或者 空servlet:multipart:max-request-size: 100MB  # 上传文件总的最大值 默认10MBmax-file-size: 25MB #单个文件最大值 默认10MB
mybatis-plus:mybatis.mapper-locations: classpath*:mapper/*.xml  //路径注意type-aliases-package: boot.weareone.bean
server:port: 9000

跨域：前端的端口是8081，后端是9000，有时候前端8000，所有如果搭配不上留意下

.allowedOrigins("Http://localhost:8081","null")

package com.boot.weareone.util;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
//全局配置类-配置跨域请求
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {@Overridepublic void addCorsMappings(CorsRegistry registry) {/*** 1.预防问路径* 2.请求来源* 3.方法* 4.允许携带* 5.最大时间* **/registry.addMapping("/**").allowedOrigins("Http://localhost:8081","null").allowedMethods("GET","POST","PUT","OPTIONS","DELETE").allowCredentials(true).maxAge(3600);}
}

Vue项目中的main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import ElementUI from 'element-ui'

import axios from 'axios'

Vue.prototype.$http = axios

axios.defaults.baseURL = "http://localhost:9000"

import 'element-ui/lib/theme-chalk/index.css'

import VideoPlayer from 'vue-video-player'

Vue.use(VideoPlayer)

import 'videojs-contrib-hls';

import 'video.js/dist/video-js.css'

Vue.use(ElementUI)

Vue.prototype.$axios=axios

Vue.config.productionTip = false

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

附上高仿图（里面的图片和下载都是写死的代码，可以考虑更换，另外游览器的缩放会改变组件布局略有瑕疵）

表单验证

模糊查询

使用springboot+vue+element-ui模仿蓝墨云班课相关推荐

蓝墨云班课与中职计算机课,蓝墨云环境下中职《计算机应用基础》的对分课堂教学研究...
摘要: 中职<计算机应用基础>课程着重让学生了解计算机基础知识,掌握计算机基本操作能力,以及培养学生综合能力,并引导学生学以致用.同时培养学生能够利用计算机开展自主学习的能力,为终身学习奠 ...
基于蓝墨云平台的计算机教学,基于蓝墨云班课的中职计算机“分层教学”模式探究...
崔月娇一.教学现状概述一方面,我校是面向全国招生,部分欠发达地区的学生由于资源配置导致计算机基础相当薄弱,而来自发达地区的学生早早地接触了计算机,部分计算机基础操作已相当熟练,学生的计算机水平参差 ...
补交20145226蓝墨云班课 -- MyCP
蓝墨云班课 -- MyCP.java 具体描述: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt ...
蓝墨云班课计算机测试题答案,20155317 第一周蓝墨云班课考题
20155317 2016-2017-2 蓝墨云班课考题第2周上周蓝墨云班课考题 1 ( 单选题 | 1 分) Amdahl定律说明,我们对系统的某个部分做出重大改进,可以显著获得一个系统的加速比. ...
20155317 2016-2017-2 蓝墨云班课考题第2周
20155317 2016-2017-2 蓝墨云班课考题第2周三: 1.用gcc -g编译vi输入的代码 2.在main函数中设置一个行断点 3.在main函数增加一个空循环,循环次数为自己学号后4 ...
补交20145226蓝墨云班课 -- MyOD
蓝墨云班课 -- MyOD.java 具体描述: 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能. 提交测试代码和运行结果截图,加上学号水印,提 ...
20162330 第十周蓝墨云班课十字链表
作业要求画出附件中有向图的十字链表:(附件见下图) 示例分析示例如下: 分析: ① 首先可以标出各个顶点的序号: ② 找到每个顶点对应的入弧和出弧,可以进行标注: ③ 对于每一行的链表,都会有对应 ...
补交20145226蓝墨云班课 -- 正则表达式作业
蓝墨云班课 -- 正则表达式作业具体描述: 参考老师在博客园的 Intellj IDEA 简易教程中的单元测试,以TDD的放式学习云班课中"正则表达式简易教程.pdf",在此贴出 ...
补交20145226蓝墨云班课 -- 后缀表达式
蓝墨云班课 -- 后缀表达式具体描述: 后缀表达式内容: ###基本概念后缀表达式,也叫逆波兰式,不包含括号,运算符放在两个运算对象的后面,所有的计算按运算符出现的顺序,严格从左向右进行(不再考 ...

使用springboot+vue+element-ui模仿蓝墨云班课

使用springboot+vue+element-ui模仿蓝墨云班课相关推荐

最新文章

热门文章