![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 50
35哥
大龄男自学
展开
-
web项目中修改密码的实现
项目以springboot,springsecurity等技术为后端,vue+elementUI为前端。需求,增加密码的修改。打开修改密码dialog对话框,原密码中要输入并验证是否正确,新密码和确认新密码是验证是否一致和正则匹配,然后修改按钮提交到后端进行数据库中user表的密码更新。一、后端部分1、原密码的校验:a.控制器@PostMapping("/selectByUserNameAndPassword")@ResponseBodypublic Result<B原创 2021-01-21 14:31:49 · 6424 阅读 · 1 评论 -
关于前后端分离中CORS跨域问题
在前后端分离中,前端的域或端口与后端的域或端口不一致的情况下,浏览器默认会阻止前端请求后端,因此我们为了使前端请求能够得到服务器响应并返回数据,需要做一些设置。基于springboot+vue一.CORS服务器端设置@Configurationpublic class MyConfig implements WebMvcConfigurer { //静态资源URI和位置映射 @Override public void addResourceHandlers(Resou原创 2020-09-10 14:50:46 · 1229 阅读 · 0 评论 -
自写项目总结(传统CRUD,前端+后端)
项目需求:一个客户管理系统、制作单生成、报价表(xls)生成及下载后端:springboot、springSecurity、Mybatis-Plus、devtools、thymeleaf、poi、lombox、swagger2前端:vue、elementUI采用前后端分离开发,实装将前端build的文件复制到后端static下,使用maven打包成一个单独的jar文件,放到服务器上双击即可运行。一、后端知识点:1.pom.xml文件<?xml version="1.0" en原创 2020-09-07 11:12:04 · 503 阅读 · 0 评论 -
Vuex-Vue.js的状态管理插件
一、引言在Vue.js的组件基础中,我们在两个组件之间传值使用的是props(父组件向子组件传值),自定义事件this.$emit方法(子组件向父组件传值),对于简单的组件比较少的,而且依赖不复杂的我们可以使用,但是,如果组件很多,而且依赖很复杂,两个组件不一定是父子关系,而且关系比较远的时候,如果我们还是使用传统的传值方式,那将会是一场灾难(两个距离比较远的组件如果使用传统方式,需要通过可能比较多的中间组件进行传值),因此Vuex诞生了,Vuex可以看作是一个基于缓存的状态管理工具,我们在其store原创 2020-08-04 09:42:36 · 294 阅读 · 0 评论 -
Vue.js之监听器和计算属性
一、监听器:watch监听某个data数据或者监听路由地址,当data数据或者路由地址发生了变化,就会触发其中的方法执行。1.监听data数据<div id="app"> <input type="text" v-model="t1"> {{t2}}</div>new Vue({ el:"#app", data:{ t1:"", t2:"" }, watch:{原创 2020-07-30 12:28:45 · 524 阅读 · 0 评论 -
Vue.js之路由(router)
一、router简介在后端程序中,我们是使用的servlet或者springMVC来匹配前端的http请求,并响应相关的数据发送给前端。在前端程序中,一个单应用程序,通过一个hash(#号)改变来切换页面的展示。http://localhost:63342/mywebpack/index.html#/loginhttp://localhost:63342/mywebpack/index.html#/register前端路由的优点在于,我们只是展示页面可以不需要通过http来请求后端响应,原创 2020-07-27 14:48:34 · 553 阅读 · 0 评论 -
Vue.js之组件基础
一、为什么使用组件?组件是将一个html片段抽取出来,它有自己的html标签、css样式、js行为,通过对外的属性暴露(父组件向子组件传值)和方法传值(子组件向父组件传值),组件主要作用是代码的复用。二、关于组件的三种创建方式1.全局性的定义组件和注册组件<body> <div id="app"> <!--4.组件使用--> <com></com></div></body><原创 2020-07-26 09:27:40 · 160 阅读 · 0 评论 -
Vue.js之动画
一、关于css3的transition属性:transition:翻译为“过渡”,过渡是一个持续性的动作,因此必须定义一个持续时间。transition属性:1.transition-property属性:指定CSS属性的过渡效果,常用于鼠标悬停在一个元素上时指定属性的变化效果; none:没有属性会获得过渡效果。 all:所有属性都会获得过渡效果,此值为默认值。 <property>:指定属性获得过渡效果,多个属性用逗号分隔,如 width,c...原创 2020-07-23 12:19:03 · 251 阅读 · 0 评论 -
Vue之生命周期和生命周期钩子
生命周期:指的是vm实例创建、运行、销毁期间的各种事件。生命周期钩子:生命周期事件、生命周期函数。生命周期主要分为三类:1.创建:这些函数均只在创建阶段运行一次beforeCreate:此阶段vm实例在内存在创建出来(只有默认的生命周期函数和一些默认的事件),但是data和method属性没有初始化好;created:实例已经在内存中创建并且初始化好了data和method属性,但是还没有编译,此生命周期函数可操作data和method属性,一般在vm创建的时候从服务器获取数据并加载初始原创 2020-07-19 17:32:00 · 132 阅读 · 0 评论 -
Vue之自定义指令(directive)
目录自定义一个获取焦点的指令 v-focus钩子函数:钩子函数参数:自定义指令的简写在Vue中,指令都是以 v-xxx 命令,因此自定义指令也是如此自定义指令时,指令名称不需要加前缀v-,但在调用的时候一定要加前缀v-自定义一个获取焦点的指令 v-focus//定义一个全局的指令(directive:指令)//参数1为指令名称,定义的时候,不需要加 v- ,调用时需要v- ,//参数2是对象,对象中有指令相关函数,在特定时候运行,Vue.directive('fo..原创 2020-07-19 15:52:20 · 279 阅读 · 0 评论 -
Vue自定义按键修饰符
自定义按键修饰馆//当输入文字后,按Enter键时触发add方法<intput type="text" v-model="text" @keyup.enter="add">//如果要改成f2,由于Vue没有定义的有f2的键盘修饰符,因此@keyup.f2是无效的//f2换键盘码为113<intput type="text" v-model="text" @keyup.113="add">//113不好记忆,因此我们自定义一个f2的修饰符Vue.config.Ke原创 2020-07-19 13:27:16 · 203 阅读 · 0 评论 -
Vue.js过滤器
Vue的过滤器,主要作用是将一个字符串(入参)通过一个过滤器函数来改变字符串的格式化显示,对原数据是没有影响的,主要是用在显示上。1.全局过滤器定义全局过滤器,在所有引用此js的html的vm实例中都有效。Vue.filter('过滤器名称',function(被过滤的参数,其他参数...){ 代码; return 返回值})使用<div id="app"> {{msg | 过滤器名称(参数...)}}</div>全局过滤器的实例:定原创 2020-07-19 11:25:00 · 106 阅读 · 0 评论 -
Vue的样式(class和style)绑定
vue.js中使用样式绑定,有class属性和内联样式class属性的绑定:<style> .red{ color:red; } .bold{ font-weight: bold; }</style><!--直接使用style中定义的class样式,采用的是数组对象--><p :class="['bold','red']">这是cl原创 2020-07-15 12:24:46 · 193 阅读 · 0 评论 -
Vue.js表单控件的使用
指令v-model用于双向数据绑定,只能使用在表单控件中:1.text文本框和password密码框控件请输入:<input type="text" v-model="text"><br/>输入的内容:{{text}}请输入:<input type="password" v-model="text"><br/>输入的内容:{{text}}vm中data: text:"",如果input中有value属性,value属性会被忽略原创 2020-07-15 10:28:25 · 408 阅读 · 0 评论 -
Vue.js基础指令使用
1.Vue.js简介vue.js是基于数据驱动的,它是响应式的,而非操作DOM,因此我们重点在操作数据,而非视图的渲染。前端的MVVM模型,指的是M ——VM ——V,模型——视图模型——视图,这里的模型M一般指的是vm实例中的data数据,视图V指的是html文件,视图模型VM指的是Vue实例2.Vue.js指令1.v-cloak:防止闪现当我们使用插值{{msg}}的时候,如果网络状态不好,html中显示出“{{msg}}”,而非替换为vm实例的data数据msg,因此我们使用这原创 2020-07-14 14:56:37 · 223 阅读 · 0 评论 -
关于Vue的事件修饰符
Vue的事件修饰符:.stop 阻止事件的冒泡,阻止事件继续传播 .prevent 阻止事件原来默认事件 .capture 捕获监听器,可理解为改变冒泡的顺序 .self 只在事件本身的元素及以上触发,不在子元素的事件链中 .once 只触发一次 .prevent为阻止元素的默认事件,一般有<a>、<submit>这些标签原生带有自己的默认事件,在其中的自定义事件中 @click.prevent="fun" ,会阻止原生的默认事件原创 2020-07-14 14:18:55 · 248 阅读 · 0 评论 -
关于Vue.js的引入方式(页面引入与webpack构建引入)
目录一、页面引入方式:组件的注册引入:采用render函数来渲染组件:二、webpack引入方式vue的安装: 1、组件的注册引入2、render函数渲染方式三、使用.vue自定义组件文件一、页面引入方式:组件的注册引入:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tit...原创 2020-07-10 14:19:06 · 1975 阅读 · 0 评论 -
前端之webpack构建工具的基础使用
一、Node.js下载下载地址:https://nodejs.org/zh-cn/download/下载后并安装后在cmd控制台中输入Node,显示版本号,则安装成功二、准备工作1、新建文件夹mywebpack2、cmd到当前目录,并输入 npm init (npm init -y),一路默认,目录中生成文件 package.json三、安装webpack1、安装全局和本地项目的webpack,安装本地时将webpack-cli一并安装 附:安装n...原创 2020-07-08 21:52:46 · 396 阅读 · 0 评论 -
原始ajax的编码
1.servletpackage a;@WebServlet(name = "MyServlet2")public class MyServlet2 extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.g原创 2020-05-25 15:16:40 · 125 阅读 · 0 评论