- 软件大小
- 46.7 MB
- 开发商
- VUE VIDEO CO., LTD.
- 软件名称
- VUE Vlog
- 更新时间
- 2019年3月30日
- 软件版本
- 3.1.4
- 软件平台
- iOS,Android
- 软件语言
- 英文、简体中文
-
Vue + Spring Boot 项目实战(一):项目简介
2019-03-31 11:19:37白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目,主要帮助 web 开发初学者通过实践方式打通各个环节的知识。
GitHub 地址:https://github.com/Antabot/White-Jotter
教程目录
第一部分
Vue + Spring Boot 项目实战(一):项目简介
Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目
Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发)
Vue + Spring Boot 项目实战(四):数据库的引入
Vue + Spring Boot 项目实战(五):使用 Element 辅助前端开发
Vue + Spring Boot 项目实战(六):前端路由与登录拦截器
Vue + Spring Boot 项目实战(七):导航栏与图书页面设计
Vue + Spring Boot 项目实战(八):数据库设计与增删改查
Vue + Spring Boot 项目实战(九):核心功能的前端实现
Vue + Spring Boot 项目实战(十):图片上传与项目的打包部署第二部分
Vue + Spring Boot 项目实战(十一):用户角色权限管理模块设计
Vue + Spring Boot 项目实战(十二):访问控制及其实现思路
Vue + Spring Boot 项目实战(十三):使用 Shiro 实现用户信息加密与登录认证
Vue + Spring Boot 项目实战(十四):用户认证方案与完善的访问拦截
Vue + Spring Boot 项目实战(十五):动态加载后台菜单
Vue + Spring Boot 项目实战(十六):功能级访问控制的实现
Vue + Spring Boot 项目实战(十七):后台角色、权限与菜单分配
Vue + Spring Boot 项目实战(十八):博客功能开发第三部分
Vue + Spring Boot 项目实战(十九):Web 项目优化解决方案
Vue + Spring Boot 项目实战(二十):前端优化实战
Vue + Spring Boot 项目实战(二十一):缓存的应用开源精选
Erupt Framework:开源神器,助你无需前端代码搞定企业级后台管理系统
AntdFront: React 纯 Hook 多标签微前端管理系统解决方案前言
之前写了一些关于 Java EE 的文章,主要是理论性质的,目的是帮助大家快速了解 Java EE 的核心内容,早日爬出这个陈旧又绕不开的坑,进入 Java Web 开发的新天地。当然只有理论是不够的,有很多细节需要在实践中理解,所以我决定做一个实践教程。
这个项目十分简单,是一个纯粹为教程而生的原型,可以视为一个简陋的带后台的门户网站。所以学习时不用有什么压力,估计你们学的比我写的快很多。
我的目标是根据这个教程,可以帮助 新入行的或是刚开始学习相关技术 的小伙伴们把一个完整的项目还原出来,建立起对前后端分离式 Web 开发的整体认知。
一开始,我会尽量详细地描述开发的过程,帮助大家快速上手。随着项目进展,曾经讲到过的、比较容易搜索到的内容会适当省略。
当然,每个人的理解方式不同,可能有些重要的细节没讲到位,欢迎大家在评论区提问。受限于个人水平,一定有很多说的不对的地方,大家理解一下,友善白嫖哈。
一、项目概述
这个项目我把它命名为 “白卷”,估摸着很多同学会拿它做课程设计之类,建议你们尽量加点自己的东西在里面,直接交白卷,你的良心不会痛吗?(狗头保命)
开个玩笑,叫白卷是因为它随着教程进展逐渐完善,象征着知识的从无到有,从有到多。
另外我还给它起了一个英文名字,叫 White Jotter(白色笔记本),纯粹是为了谐音。
项目遵循敏捷开发原则,会根据大家反馈的意见整理出新的需求,动态扩展、调整、优化。初始阶段按照简单的分层架构设计,具体见下图:
-
应用架构
-
技术架构
项目需要在前后端之间不断穿梭,但在做教程的时候,我会尽量模块化地去讲解。
此外,我把教程分为了几个阶段,是为了循序渐进、由易到难地讲解知识点。
各个阶段的主要内容如下(随教程进展更新):
(一)第一部分
这个项目的第一部分以图书信息管理为示例,主要帮助大家理解以下内容:
- 如何从 0 开始搭建 Web 项目?
- 什么是前后端分离?如何实现前后端分离?
- 单页面应用有哪些特点?
- 如何在 Web 项目中使用数据库并利用网页实现增删改查?
- 在开发中如何利用各种辅助手段?
- Vue.js 的基本概念与用法
- 简单的前端页面设计
- 如何部署 Web 应用?
各个页面的效果大致如下:
登录页面:
首页:
图书馆页面:
(二)第二部分
项目的第二部分是后台管理模块的开发,主要包括以下内容:
- 后台管理模块的常见功能与布局(内容管理、用户\权限管理、运维监控)
- 用户身份验证、授权、会话管理与信息加密存储
- Shiro 框架的使用
- 实现不同粒度的访问控制(动态菜单、功能控制、数据控制)
- 结合内容管理,实现文章的编写与展示
后台基本结构如下:
后台页面效果:Dashboard(from PanJiaChen / vue-element-admin):
图书管理:
用户管理:
笔记本页面效果:文章列表:
文章详情:
(三)第三部分
第三部分是在前面的基础上,分析项目存在的不足,并对其进行由点及面的优化。
当简单的优化无法达到我们想要的目的时,就需要从架构层面进行整体的升级改造,那就是下一套教程的事情了。
(四)开源精选
在做这个项目的过程中结识了一些小伙伴,他们凭借一腔热枕坚持为开源社区做贡献,开发出了许多优秀的项目。我打算在编写教程的同时穿插对这些项目的介绍,以便让更多朋友们了解这个群体,甚至加入到新兴项目的发展壮大过程中去。这样,也算是自己尽了一份绵薄之力吧!
此外,这个教程还有姐妹篇,也就是我正在更新的信息安全方面的教程。在攻防实践阶段,会把我们这个项目当作一号靶机,对黑客技术有兴趣的同学可以走一波关注:
二、技术栈
参考技术架构图,项目使用的主要技术如下:
1.前端技术栈
1.Vue.js
2.ElementUI
3.axios2.后端技术栈
1.Spring Boot
2.Apache Shiro
3.Apache Log4j2
4.Spring Data JPA
5.Spring Data Redis3.数据库
1.MySQL
2.Redis在开发过程中还会不断用到一些新的技术,有必要的我会增添上去。
三、主要参考内容
下一篇:Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目
有兴趣听我扯技术之外的故事的同学可以关注我的公众号。不定期更新,权当和大家聊聊天,图个乐子。
-
-
vue项目打包步骤
2018-06-25 01:04:39vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变,如下图:点击index.html,通过浏览器运行,出现以下报错,如图:那么应该如下修改呢?具体步骤如下:1、查看package.js文件的scripts命令2、打开...vue项目打包
一、终端运行命令 npm run build
二、打包成功的标志与项目的改变,如下图:
3、点击index.html,通过浏览器运行,出现以下报错,如图:
四、那么应该如何修改呢?
具体步骤如下:
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
4、终端运行 npm run build 即可。此时点击index.html,通过浏览器运行便,会发现动态绑定的static的图片找不到,故static必须使用绝对路径。将图片路径修改为绝对路径,至此,打包完成。
五、温馨提示
更多博文,请关注:xssy5431 【小拾岁月】
扫码:
-
vue 关闭vue项目中烦死人的ESlint
2018-04-04 11:44:51【已解决】vue 关闭vue项目中烦死人的ESlint 很多时候,因为一些书写问题,ESlint会报错。目录
温馨提示:ctrl+alt+L可以规范代码格式,比Eslient更是随性一定,适合非强迫症,让那个比教导主任还严的ESlint滚粗
1 问题
每次都红我缩进,
每次都要改,太麻烦了
2 解决
2.1 创建项目避开ESlint
最好的办法就是创建项目的时候不要ESlint
好了!特别清爽的感觉!2.2 使用了别人模板,禁止Disable Eslient
2.3 使用了别人模板,卸载
说实话,以前我觉得Eslient很烦,
后来要维护别人的代码的时候,才发现Eslient很棒
最后的最后发现,理解Eslient的人,没有它也写得工工整整,不理解的朋友,全部代码都红都不会看一眼,伤害的只有自己
npm uninstall eslint --save
2.4 其他办法
2.4.1 关闭软件webstorm 的ESlint
file->settings->搜索ESlint->取消Enable的勾选
2.4.2 注释掉项目内的ESlint
项目目录下build.js->webpack.base.conf.js文件里面有段代码 注释掉!!!
-
Vue UI 创建Vue前端工程(Windows)
2020-09-27 15:56:40Vue ui 创建Vue前端工程1.开启vue ui 服务2.访问 vue ui 界面3.创建项目4. 添加 element-ui 插件4.添加依赖4.启动 Vue 项目5.访问 Vue 项目 1.开启vue ui 服务 快捷键 win+r 打开 cmd 输入下面命令 vue ui 2.访问 ...1.开启vue ui 服务
快捷键 win+r 打开 cmd 输入下面命令
vue ui
2.访问 vue ui 界面
打开浏览器,地址栏输入 localhost:8080
3.创建项目
点击创建
选择你要创建的项目目录,点击 在此创建新项目
输入项目名称,包管理器选择 npm, git 命令填写 init project , 点击下一步
选择手动
把format 去掉, 选中 router, 选中使用配置文件, 点击下一步
点击创建项目点击创建项目,不保存预设
4. 添加 element-ui 插件
先点击左侧导航栏 插件,再点击右上角 添加插件
**搜索 element ,先选中 如图矩形框中的内容,版本不一致没关系, 再点击右下角 安装 **
**安装完成后点击 完成安装 **
4.添加依赖
-
添加 axios 依赖
点击左侧导航条 依赖
点击右上角 安装依赖
搜索框输入 axios ,选中内容如图所示, 再点击 右下角的 安装
-
安装 less-loader 依赖
如上图一样,搜索框中输入 less-loader,再点击右下角安装
3.安装 less 依赖
如上图一样,搜索框中输入 less,再点击右下角安装
到这里所有安装都结束了,接下来启动 Vue 项目
4.启动 Vue 项目
如图操作即可
5.访问 Vue 项目
浏览器地址栏输入 localhost:8080
如果界面和下图一样说明成功
-
-
如何查看vue版本号
2019-02-18 18:31:26在cmd控制台内,输入npm-v 可查看到npm 的版本号; vue -V 可看到vue的版本号。 -
【VUE】vue后台常用模板
2019-04-11 15:30:13vue后台常用模板: element文档: http://element-cn.eleme.io/#/zh-CN/component/installation vue API: https://cn.vuejs.org/v2/api/ 以下是在下收集的三个常用的vue模板 1、vue-manage-system git地址:... -
使用Vue写一个登录页面
2018-07-31 11:24:20上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。 1.构建项目的目录 2.App.vue <template> <div id="app"> <router-view/> &... -
【vue】使用vue-cli4.0快速搭建一个项目
2019-10-25 10:38:43前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然...所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁... -
Vue轻量级富文本编辑器-Vue-Quill-Editor
2018-09-04 19:51:35先看效果图:女神镇楼 ...下载Vue-Quill-Editor npm install vue-quill-editor --save 下载quill(Vue-Quill-Editor需要依赖) npm install quill --save 代码 <template>... -
Vue一到三年面试题总结
2019-08-11 01:16:11于是我就把大家在出去面试的时候遇到的vue面试题以粉丝们投稿的方式收集了起来做个汇总,希望能帮助到更多的朋友们~ Vue面试题正文: 1.vue全家桶包含哪些? 答案:vue全家桶与react全家桶介绍 2.v-model是什么?... -
vue之vue-cookies
2019-06-24 10:48:39npm链接:https://www.npmjs.com/package/vue-cookies 安装: ...import Vue from ‘Vue’ import VueCookies from ‘vue-cookies’ Vue.use(VueCookies) Api: 设置 cookie: this.cookies.set... -
vue cli 3 升级到 vue cli 4 方法步骤及升级点总结
2019-10-26 18:45:44vue cli 3 升级到 vue cli 4 指南 vue cli 3 升级到 vue cli 4 方法步骤及升级点总结 vue-cli 3升级vue-cli 4 官方英文升级文档,中文滞后 一.首先,在全局安装最新的 Vue CLI: npm install -g @vue/cli # OR yarn ... -
Vue第二篇之在HTML中引入Vue.js,快速使用Vue
2018-10-16 11:19:27对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。 先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。 下载... -
Vue进阶(三十六):vue.js中created方法的使用详解
2019-01-30 14:36:54这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下。这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被... -
Vue02_第一个vue-cli项目
2020-08-31 16:21:43Vue02_第一个vue-cli项目 nodejs 的下载和安装 官网下载(选择windows64位的版本):http://nodejs.cn/download/ 安装:无脑下一步 测试是否安装成功: 安装淘宝镜像: npm install cnpm -g 使用淘宝镜像安装 ... -
vue cli3 兼容ie8以上浏览器
2019-11-28 17:49:421当我们使用 vue-cli3 搭建的脚手架开发项目时,一般浏览器都可以支持,唯独ie浏览器,运行时页面一片空白 首先,下载 babel-polyfill 模块 npm install babel-polyfill -s 2 配置 polyfill,在根目录下新增babel.... -
vue cli3配置image-webpack-loader
2019-12-04 12:08:04vue cli3配置image-webpack-loader对图片进行压缩优化 安装 npm install image-webpack-loader --save-dev 配置vue.config.js chainWebpack: config => { config.plugins.delete('prefetch') config.plugin('... -
紧跟尤大的脚步提前体验Vue3新特性,你不会还没了解过Vue3吧
2020-08-05 17:12:58随着前端框架的快速更新迭代,现在的主流前端框架之一Vue.js迎来了它的新版本3.0。在今年2020的5月28日,Vue.js的作者尤雨溪公布了Vue3的整个设计过程,让我们来了解一下吧。 简单的来说,这个框架的版本更新一定是... -
vue监听input输入事件-oninput
2017-05-25 19:14:06.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址: .vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput。... -
-
Vue3.0和Vue2.0的区别
2019-11-01 20:33:00Vue3.0和Vue2.0的区别 默认进行懒观察(lazy observation)。 在 2.x 版本里,不过数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染... -
Vue刷新页面的三种方式
2019-06-08 10:54:18我们在写项目的时候,经常会遇到,...vue自带的路由跳转: this.$router.go(0); 用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。 所以,我们选择第三种方式: 3. 首先在App里面... -
Vue 全家桶介绍
2018-01-10 16:00:24Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https://github.com/pagekit/vue-resource)。再加上构建工具vue-cli,... -
vue.获得同胞元素,子元素,父元素
2019-11-22 10:58:27vue.获得同胞元素,子元素,父元素 $parent 该组件实例的父级组件实例 $children 该组件实例的子组件实例 -
Vue 使用Vue-CLI4 创建Vue项目
2019-11-07 10:23:31安装vue-cli npm install -g @vue/cli-service-global 创建项目 vue create 项目名称 选择手动配置(如果喜欢使用eslint可以选择默认) 键盘上下键即可切换,刚开始其实有两个选项,我之前曾经自定义过,所以... -
vue中使用vuex(超详细)
2019-07-15 14:23:08vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,... -
vue中如何创建自定义组件并引入组件【详细教程】
2019-04-25 15:49:42今日,怂怂就为带来一篇前端vue干货,如何在vue中创建自定义组件,并且在项目中引入自定义的组件;具有很好的参考价值,一起跟怂怂过来吧,如若对您有所帮助,别忘了在文章右上角点个赞哦。 1,在你的项目中专门... -
vue 组件 Vue.component 用法
2018-10-02 23:04:10可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用 1. 定义一个新组件。命名为 counter 格式: 1.组件名为"conter"; 2.data 数据属性:写函数; 3.template 模板:写... -
搭建VUE项目(三)VUE项目实现页面跳转
2018-06-27 10:26:17打开一个VUE项目,目录结构是这样的:如现在有两个页面aaa和HelloWorld,路由配置在index.js中:import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import ... -
-
springboot中使用JdbcTemplate
-
OpenLand“实体资产映射NFT赋予链上价值”的完善生态体系
-
数字后端基本技能之:绕线Congestion怎么解?
-
kernel-headers-4.14.63-201.el7.x86_64.rpm
-
MPPT太阳能充放电控制器.zip
-
【数据分析-随到随学】数据可视化
-
虚拟机字节码执行引擎 —— 运行时栈帧
-
kernel-headers-4.14.116-200.el7.x86_64.rpm
-
ipad-mini 2维修原理图PCB位置图(PDF格式)
-
Netty 快速入门
-
k8s初级实战11--ingress案例
-
自我理解人生观
-
【数据分析-随到随学】Hive详解
-
21年新消息队列RabbitMQ视频教程AMQP教程
-
Netty TaskQueue 自定义任务
-
【2021】Python3+Selenium3自动化测试(不含框架)
-
IPAD4维修原理图PCB位置图(PDF格式)
-
slam十四讲之带你看懂g2o
-
hadoop自动化运维工具Ambari应用实践
-
微信支付2021系列之扫码支付一学就会java版