Vue
java_augur
这个作者很懒,什么都没留下…
展开
-
跟着JHipster学做项目 (18) 国际化i18n实现
跟着JHipster学做项目 (18) 国际化i18n实现原创 2022-04-22 13:59:03 · 567 阅读 · 0 评论 -
跟着JHipster学做项目 (17) Spring Boot处理分页和排序
JHipster利用了Spring Boot的Pageable分页机制,前端排序是针对数据库数据,而非当前页面数据,充分满足了实际需求。下面分前端和后端两部分分别介绍一下它的实现方式。前端利用两个辅助函数,向后端传递了分页参数:当前页page,每页条目size,排序属性prop,direction。本文以mongoDB为例。sort函数中接收了排序属性和排序方向,同序情况下以id降序。 public sort(): any { const result = [this.propOrd原创 2022-01-21 18:13:02 · 1321 阅读 · 0 评论 -
Spring boot + Vue 文档下载
前端Vue代码:downloadDocument (row) { let vm = this this.$ajax.post('/api/downloadDocument', row, {responseType: 'blob'}) .then(function (res) { if (!res.data) { return } let url = window.URL.crea原创 2021-03-12 13:07:48 · 125 阅读 · 0 评论 -
跟着JHipster学做项目 (13) 控制Vue前端在完成加载数据后展现页面
对于用Vue开发的前端页面,通常采用Ajax进行数据通讯,页面的控件往往存储在本地。我们直观的感觉是页面组件出现后,数据再显示在组件上,如果网络有延迟,数据滞后显示会更加明显。更严重的情况是上次缓存的数据会出现在页面,对用户造成困扰。下面就讲述一下JHipster的两种方式实现数据加载完成后,再展现页面。利用beforeRouteEnter,代码如下: beforeRouteEnter(to, from, next) { next(vm => { vm.initAu原创 2020-09-26 23:14:22 · 488 阅读 · 0 评论 -
跟着JHipster学做项目 (12) 分页处理(下)前端进行分页及排序查询
JHipster的前端分页组件由两部分组成:分页信息组件,分页加载组件。<div v-show="users && users.length > 0"> <div class="row justify-content-center"> <jhi-item-count :page="page" :total="queryCount" :itemsPerPage="itemsPerPage"&g原创 2020-09-23 18:14:07 · 380 阅读 · 0 评论 -
跟着JHipster学做项目 (9) 处理用户登录超期
JHipster登录有Remember Me选项,配置项中不勾选session可以保持24小时,勾选则为10天。下面讲述一下JHipster对于登录超期的处理方法,这里登陆超期是指JWT的超期。对于超期有两种情况,一种是对账户进行操作,另一种是非账户操作。前端代码如下: intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { re原创 2020-09-11 21:12:20 · 341 阅读 · 0 评论 -
跟着JHipster学做项目 (8) 前后端分离项目刷新页面避免出现 white label
前后端分离项目最常见问题就是前端的router和后端的controller path之间的矛盾,这个矛盾在刷新页面时显露出来。通常页面跳转是交给前端router来控制,但是当页面刷新时,前端router的路径请求直接传递给后端,此时后端一定无法处理,因此转到white label报错页面。之前Vue项目部署在Spring Boot出现页面空白问题的解决方案中提到将error page指向Vue的index.html页面,这个方案缺点很明显,NOT_FOUND请求将跳转至index.html, 而不是提供原创 2020-06-26 01:41:00 · 763 阅读 · 0 评论 -
跟着JHipster学做项目 (5) 异常处理(下)Vue前端
JHipster前端处理异常主要包括三个方面,异常获取,异常显示,以及异常信息国际化。异常获取JHipster通常放在组件类中实现,比如register.component.tsthis.registerService() .processRegistration(this.registerAccount) .then(() => { this.success = true; }) .catch(error原创 2020-05-25 16:40:08 · 810 阅读 · 0 评论 -
跟着JHipster学做项目(1)- MockMvc用法技巧
如何找到项目target路径?1利用Maven的pom.xml文件给出属性 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-surefire-plugin</...原创 2020-04-30 16:12:39 · 560 阅读 · 1 评论 -
vue + spring boot项目的favicon解决方案
对于Spring boot通常我们会采用maven方式统一将前后台代码打包在一起进行部署,往往页面的favicon是默认的绿叶图标,下面讲一下如何自定义favicon.在Vue的项目代码中build文件夹,修改文件webpack.prod.conf.jsnew HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'te...原创 2020-04-03 12:14:19 · 390 阅读 · 0 评论 -
Vue动态加载巨量模板组件
对于一些特殊的软件系统会涉及大量模板,比如不同的设备采集原始数据的页面,如果存在成千种类的设备,那么对应原始数据采集模板页面也会有上千个, 对于普通的vue文件import上千个modules是不可想象的,下面介绍一个利用循环语句加载模板的方法。<template> <div id="example"> <input v-model="pointed...原创 2019-06-22 12:10:05 · 1444 阅读 · 0 评论 -
Spring Boot前后端分离项目Maven一键部署配置
需要完成的任务 包括:1 java项目默认的clean install2 npm run install && npm run build生成前端distribution文件3 额外清理resource/static目录下的文件, 该目录用于存放前端生成的文件4 拷贝前端文件到resource/static目录下面是完成以上任务的pom.xml文件(做了一个...原创 2018-12-10 23:17:04 · 2094 阅读 · 0 评论 -
Vue项目部署在Spring Boot出现页面空白问题的解决方案
网上流行的解决方案是将assetsPublicPath: '/'改成'./',下面说一下这个解决方案的弊端:通常页面空白的问题出现大多数是由于Spring Boot端配置了server.servlet.context-path,上下文改变了css, js等文件的访问路径,文件无法加载导致index.html显示空白。'/'改成'./'是将绝对路径变为相对路径,可以动态适应Spring Boot...原创 2018-11-24 21:12:46 · 9732 阅读 · 4 评论 -
前后端分离项目处理异常最佳实践方法推荐(vue, Java)
如何处理异常是项目中极为头痛的一件事,尤其是在前后端分离的项目中,Exception必须作为Restful来处理,这里包括如何避免处理Exception的代码分散在项目代码,这样对于异常处理的重构和多语言支持都会造成很大的麻烦;还包括如何正确定义异常信息,使得用户所看到的错误提示信息是有效的,而不是一些数据库的error-code, 或者是500的HTTP STATUS。当异常能够作为JSON...原创 2018-07-29 22:23:37 · 5957 阅读 · 2 评论 -
spring + VUE 前后端分离绕不过去的技术栈
首先感谢Spring在框架层面实现了多年构件重用的夙愿,不仅如此还有Spring Boot 这样的大大大红包,java成就了Spring, 目前有点像Spring反哺Java, 让Java看起来仍然活力四射。另一方面Vue的出现,以及Vue基础上构建的Element-UI终于让一个手残党也能实现头脑中出现的界面,出现的操作,出现的动画等等,Vue的动态绑定数据让JS代码走出了代码管理的泥沼,终于J...原创 2018-05-17 14:38:03 · 3487 阅读 · 2 评论 -
Vue开发中出现对话框被遮罩层挡住问题解决方案
在Vue的开发中,一旦我们用到对话框,经常出现的问题是对话框被遮罩层挡住,无论是Element-UI dialog还是bootstrap的Modal,如下图所示:造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值,比较简单易行的办法如下:对于bootstrap Modal需要添加css语句.modal-backdrop { z-index: -1;}而对于...原创 2018-05-17 02:43:18 · 11803 阅读 · 4 评论 -
Element-UI中上传的文件前端处理
Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性。但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件,利用JSON文件在前端进行动态展示等等。下面就展示一下具体做法:首先定义一个jsonContent, 我们的目标是将本地选取的文件转换为JSON赋值给jsonContent然后我们的模板文件是利用e...原创 2018-03-30 22:20:12 · 29752 阅读 · 4 评论