Vue
yzli_dev
一名自由的编码师
展开
-
Vue+SpringBoot实践(十):父子组件以及前端导航栏实现
CarmenSystem前言一、路由配置二、导航栏组件实现三、父组件使用子组件前言前面介绍了如何从前端设置路由拦截,本章开始将注重页面的开发,其实就是学习html和CSS之类的知识了一、路由配置本次项目我们做的是一个单页面的应用,从设计的角度看,我们应该要有一个父组件,而App.vue是所有组件的父组件,如果直接把导航栏放在父组件上会导致影响到Login.vue的显示,所有我们先建一个主页的父组件。新建文件夹home,并在文件夹下新建Home.vue文件,写入一个<router-view/&原创 2020-11-12 21:38:54 · 513 阅读 · 0 评论 -
Vue+SpringBoot实践(九):前端路由与登录拦截器
CarmenSystem前言一、使用History模式路由页面二、页面拦截1.引入Vuex2.通过钩子函数判断是否拦截3.修改Login组件判断逻辑前言经过前面几章,我们已基本知道如何前后端分离开发项目,细心的同学会发现在打开我们的项目时,url带有#号,这是由于我们做的是单页面开发,通过监听 # 号后面内容的变化(hashChange),从而动态改变页面内容,这种模式称之为Hash模式。另一种常用的方式被称为 History 模式,这种模式的原理先把页面的状态保存到一个对象(state)里,当页面的原创 2020-11-07 16:49:03 · 1171 阅读 · 0 评论 -
Vue+SpringBoot实践(八):使用Element-UI优化界面
CarmenSystem前言一、引入Element-UI二、以登录界面优化为例三、额外知识前言前面几章主要专注与后端开发,以及前后端项目调通,本章开始将注重前端界面的优化,由于本人不是专门做UI设计的,没必要花过多时间在界面优化上面,故我们需要借助Element-UI工具。一、引入Element-UIElement 的官方地址为 http://element-cn.eleme.io/#/zh-CN,该网站为我们提供了丰富的组件样例,点击网站中的“显示代码”,复制需要部分。使用npm进行安装npm i原创 2020-10-31 19:57:16 · 1209 阅读 · 1 评论 -
Vue+SpringBoot实践(七):前后端分离项目结合开发
CarmenSystem前言一、前端开发前端登录页面开发主页页面设置反向代理配置页面路由跨域支持成果显示二、 坑点前言前面几个章节主要介绍了后端开发的一些基础内容,本节开始将着手前端开发,并根据实际情况调整后端代码。在开发过程中,我会把前端的请求通过前端服务器转发给后端(称为反向代理)。一、前端开发这次前端项目我们用到vue脚架进行开发,项目搭建完毕后,一般情况下,我们只需要关注src\components 文件夹、src\main.js 、src\router\index.js 这几个部分即可。原创 2020-10-24 20:28:29 · 433 阅读 · 0 评论 -
Vue+SpringBoot实践番外篇(1):IDEA RESTful Api利器Http Client使用
CarmenSystem使用教程使用教程Http Client是IDEA默认安装好的插件,用于后端自测接口的调用,是一个很方便的工具点击菜单:Tools — HTTP Client — Test RESTful Web Service单接口调试可直接在使用界面进行:如果是多接口调试,可点击右侧的 Convert request to new format ,进行文本编辑界面:...原创 2020-10-10 16:34:53 · 179 阅读 · 0 评论 -
Vue+SpringBoot实践(六):后端SpringBoot RESTful API开发
CarmenSystem前言以用户管理为例前言正如第二章所介绍,我们这次项目主要是要做一个前后端分离的项目,前端和后端之间是通过RESTful API进行数据交互。RESTful API 就可以通过一套统一的接口为所有客户端提供web服务,实现前后端分离。RESTful API充分利用了Http现有方法来对应4种行为:get(获取),post(新增),put(修改)和delete(删除)eg.get /users:列出所有用户get /users/id:根据id获取用户post /user:新增原创 2020-10-03 16:49:11 · 830 阅读 · 0 评论 -
Vue+SpringBoot实践(五):业务处理Service层开发
CarmenSystem前言一、用户处理二、系统角色处理三、愿望管理前言上一章已经讲解了如何使用mybatis实现数据库的操作,本章将注重业务处理逻辑的实现,即Service层开发,一般SpringBoot框架下Service层都会加上@Service标注,以便由框架统一管理。一、用户处理为了简单描述这里不做太过于复杂的处理逻辑,用户处理就仅仅是用户的增删改查基本操作。@Servicepublic class UserManagerService { @Autowired Use原创 2020-10-03 11:48:33 · 680 阅读 · 0 评论 -
Vue+SpringBoot实践(三):数据模型
CarmenSystem前言一、数据库设计工具二、愿望清单表前言上一章节已经介绍了项目的创建,本章节正式开始编码,本章节主要目标为数据库设计一、数据库设计工具由于本人是在deepin上做的开发,无法使用power designer,经过苦苦寻求后,决定使用PDMan代替。二、愿望清单表...原创 2020-09-19 15:29:50 · 556 阅读 · 0 评论 -
Vue+SpringBoot实践(四):使用mybatis操作数据
CarmenSystem前言一、引入pom二、配置application.properties三、生成xml配置文件四、编写dao层(即对应的mapper)五、使用前言上一章已经简单建立了相关数据表,这一章将介绍如何使用mybatis操作数据,本人其实一向比较喜欢Jpa这种简单的东西,但学习嘛,还是想用点新的,所以最终决定使用可以灵活调试动态Sql的Mybatis。纯用Mybatis需要配置很多文件,但Springboot就是牛逼,任何框架只要关联上它都能化繁为简,mybatis-spring-boo原创 2020-09-27 15:55:57 · 731 阅读 · 0 评论 -
Vue+SpringBoot实践(二):项目创建
CarmenSystem前言一、SpringBoot后端项目创建二、Vue前端项目创建前言上一篇文章主要介绍了做项目的目的,本章开始正式进入实战阶段,在开始之前,我们先来了解一下什么是前后端分离,简单来说,前后端分离就是前端通过ajax调用后端实现的restful api进行数据交互。本章主要实现目标如下:一、创建Springboot后端项目二、创建Vue前端项目一、SpringBoot后端项目创建Java项目的创建方式有很多,主要流派分为编辑器和IDE流,本人倾向于IDE,因为编辑器的开发效原创 2020-09-19 12:34:58 · 433 阅读 · 0 评论 -
Vue+SpringBoot实践(一):CarmenSystem项目简述
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-09-13 10:49:24 · 226 阅读 · 0 评论