Spring Boot Vue Element入门实战
分享
最近在自学VUE，决定用spring boot vue做一个简单的系统。vue这个前端框架很火，他和传统的Jquery 编程思路完全不一样，Jquery 是事件驱动的，而VUE是数据驱动的。知识纯属自学，如有错误的地方欢迎指出，共同进步！
超级会员免费看
beyondwild
愿你眸有星辰，心有山河，以梦为马，不负韶华！
展开
-
Spring Boot Vue Element入门实战 完结
最近给朋友做一个大学运动会管理系统，用作教学案例，正好自己也在自学VUE，决定用spring boot vue做一个简单的系统。vue这个前端框架很火，他和传统的Jquery 编程思路完全不一样，Jquery 是事件驱动的，而VUE是数据驱动的。以前写页面经常是通过Jquery 操作各种DOM，而VUE不用对DOM进行操作，直接操作绑定的数据即可。接下来我会利用业...原创 2020-02-27 14:46:25 · 460 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十八、完结篇
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 （一）总结 不足和需要改进的地方 权限可以加入shiro 路由可以动态来获取 UI还可以更加完美一些 vuex全局变量状态管理 VUE相关网站Vue.js中文官网Element中文官网 自学vue也有段时间了，也遇到很多问题，踩过很多坑，特别是操作dom不习惯。本系列文章写到这里就基本结束了，这...原创 2020-02-27 14:25:46 · 272 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十七、Nginx+Tomcat前后端部署
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 （一）打包 注意：打包前注意修改各种ip，例如http请求的ip，数据库连接ip,redis连接Ip等等，如果都是本机的话就是localhost，如果是云服务器就改成公网地址，内网就是局域网ip vue打包就是cd进入user工程目录下，然后输入命令npm build就可以了，idea的话直接在term...原创 2020-02-27 14:19:14 · 242 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十六、菜单首页，前后台整合
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 （一）菜单 在main.vue 中加入左侧菜单注意：学生用户登录是看不见教师和基础数据页面的，所有需要加入判断条件 // An highlighted block <el-main> <el-menu :default-active="$route.path" :collaps...原创 2020-02-27 14:15:04 · 334 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十五、注册登录路由跨域拦截
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 （一）完善路由 新建以上页面，然后在index.js中配置路由，并加上路由拦截token // 路由配置如下 import Login from '@/pages/Login' import Main from '@/pages/Main' import Dashboard from '@/pa...原创 2020-02-27 14:09:50 · 213 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十四、前后台整合增删改查
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 新建学生页面，我们来整合前后台增删改查接口 （一）添加 //点击添加按钮，currentLoginType != 'student是权限拦截 <el-form-item v-if="currentLoginType != 'student'"> <el-butt...原创 2020-02-19 13:34:11 · 630 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十三、Spring Boot+Mybatis+Redis+Swagger
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 (一)修改POM文件 打开pom文件 首先在顶部文字加入spring boot的依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot...原创 2020-02-19 11:24:36 · 201 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十二、PowerDesigner数据库建模
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 （一）需求 有学生和老师，超级管理员3个角色，老师登录进去可以编辑学生信息，比赛成绩等等，普通学生登录进去只能查询成绩，修改自己的信息，超级管理员登录进去什么都可以操作，并且有且只能有一个，无法被删除。注意本系统数据库设计都没有考虑索引，严格来说查询字段需要加入索引 首先需要新建5个表， 学生表，里面...原创 2020-02-19 11:11:09 · 282 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十一、后端SpringBoot服务搭建
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 从本章开始将进入后台方面的介绍，包括spring boot，数据库，redis缓存，swagger，Mybatis等集成，以及前后台完成融合，最后完成前后台部署。 准备工作： JDK 1.8+ Maven 3.0+ Tomcat 8 Mysql 5.6+ Redis 5.0+ 环境变量配置 ...原创 2020-02-18 16:43:11 · 232 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 十、Vue生命周期
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 前面9篇文章基本上完成了vue 静态页面的入门，包括列表展示，路由动态加载菜单，echarts图表的一些使用，后面会结合后台，实现登录，退出，以及日志记录，动态增删改查一些功能。 作者通过自身的学习，以及在网上查阅的资料，对VUE的生命周期也有一定的了解，下面就把一些学习笔记分项给大家 （一）生命周...原创 2020-02-18 15:52:09 · 245 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 九、router路由配置
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（...原创 2020-02-18 12:39:52 · 325 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 八、静态列表页面
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 这篇文章主要介绍一个用户管理页面的列表展示，数据搜索，查询，增删改的实现，当然这些都是静态的，后面会介绍结合后台实现真正的数据交互。 页面中间部分主要分为3部分，分别是顶部的搜索，中间的列表，底部的分页，我们先出布局说起 （一）新建用户页面 User.vue <templat...原创 2020-02-18 09:18:53 · 415 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 七、Echart集成
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 图表在数据表现层运用十分广泛，常用的有百度的echartshightchart中文网阿里的antVChart.js 除了这些插件外，开源的收费的还有很多，基本使用方法都类似，作者以echarts为例集成到项目中 （一）安装echarts依赖 //这里使用的是淘宝镜像安装，如果之前已经安装过依赖，...原创 2020-02-17 20:21:47 · 388 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 六、常用工具类封装（持续更新）
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 这里面是一些日常开发中经常用到的一些方法，整理出来，后续回陆续的完善 （一）日期时间工具 //获取当前时间，格式例如yyyy-MM-dd HH:mm:ss，支持多种格式 function getCurrentFormatDate(format){ var date = new Date();...原创 2020-02-17 20:04:21 · 320 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 五、封装axios
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 （一）创建axios.js 在src目录下新建axios文件夹，然后新建axios.js文件 //引入axios import axios from 'axios' //引入element-ui import { Message } from 'element-ui'; import globa...原创 2020-02-17 19:33:17 · 218 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 四、主页面开发
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 （一）页面布局 页面布局分为3个部分： 顶部导航：系统logo，登录信息，退出按钮等 左侧菜单：显示系统菜单 右侧展示：显示页面主要内容 （二）修改布局文件App.vue 主要是一些样式和布局，注意在IDEA下sass语法会报错，忽略即可，后续有时间再研究。 <template&g...原创 2020-02-17 16:10:37 · 234 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 三、Vue Devtools安装
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用浏览器扩展，可以在浏览器开发者工具下调试代码。 （一）devtools下载 首先在github下载devtools源码，地址：https://github.com/vuejs/vue-devtools ...原创 2020-02-17 14:43:13 · 187 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 二、前端框架搭建
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 （一）IDEA开发工具 这里其实推荐Atom或者webstorm，Atom有很多vue的插件，高亮语法检查小地图等等一些很实用的插件。本次实战环境选择IDEA编辑器，导入入门实战（一）中的生成的工程如下图 . VUE工程目录结构 ├── build 构建脚本目录...原创 2020-02-17 14:16:52 · 280 阅读 · 0 评论 -
Spring Boot Vue Element入门实战 一、VUE开发环境搭建
cd admin cnpm install原创 2020-02-16 15:30:27 · 303 阅读 · 1 评论