前端
前端开发工具,技术,框架
water_java
这个作者很懒,什么都没留下…
展开
-
3d相册
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>3d相册</title> </head> <style> #box1 { /* 宽 */ width: 300px; /* 高 */ height: 300px; /* 边框 */ border: 1px solid black;原创 2020-06-14 00:13:31 · 491 阅读 · 1 评论 -
vue之tab的变化
state.js options: [],//存放tab页的容器 activeIndex: '',////激活的tab页路由路径 showName: 'show',//tab页的标题 role: ""//用来区分是否是因为左侧菜单被点击造成的路由路径发生改变,是:pass;不是:nopassgetters.jsgetShowName:(state) => { re...原创 2019-11-29 17:38:10 · 346 阅读 · 0 评论 -
webStorm部署项目到Tomcat
进入setting我的ok点击不了是因为我这里已经有了一个tomcat,可以换一个名字再操作,起了名字后点击点击ok设置connection设置mapping要将文件上传到tomcat目录下到这里就配置好了vue前后台交互处理可以参考我博文:https://blog.csdn.net/water_java/article/details/101454595...原创 2019-12-03 14:24:55 · 867 阅读 · 1 评论 -
webStorm搭建vue-cli(不用cmd命令窗口建)
我们用webStorm搭建vue项目可以有两种,一种是用cmd命令窗口建,可以参考我博文:https://mp.csdn.net/mdeditor/103264739还有一种就是直接在webStorm创建,不用cmd命令窗口建现在我就是用第二种方式在建项目之前需要安装好git(当然node.js必要的环境,这里我就不说了,我博客里有),可以参考我博文:https://mp.csdn.net/...原创 2019-12-01 20:54:28 · 658 阅读 · 0 评论 -
webStorm配置git,github
webStorm配置git,github关于git简单介绍git安装git配置git使用git的好处配置github关于git简单介绍gitGit 是用于 Linux内核开发的版本控制工具。与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持(wingeddevil注:这得分是用什么样的服务端,使用http协议或者git协议等不太一样...原创 2019-11-27 16:51:28 · 780 阅读 · 0 评论 -
webStorm创建vue项目
需要node.js环境可以看我博文:https://mp.csdn.net/mdeditor/101055914项目名不能有大写字母|-- build // 项目构建(webpack)相关代码| |-- build.js // 生产环境构建代码| |-- check-versi...原创 2019-11-27 14:48:32 · 307 阅读 · 0 评论 -
WebStorm的setting设置
webStorm的安装网上教程很多,我就不展示了创建项目2019年版的webStorm支持的项目Empty Project ----一个空的项目HTML5 Boilerplate ----HTML5开发框架React App ----基于React.js用来开发iOS和Android原生App。Bootstrap ----Boo...原创 2019-11-26 20:03:49 · 5130 阅读 · 0 评论 -
Vuex
Vuex简单理解Vuexvue中各个组件之间传值了解Vuex中的各个js文件的用途Vuex组成使用vuexvuex的核心概念:store、state、getters、mutations、actions简单理解VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”(数据仓库),让其在各个页面上实现数据的共享包括状态,并且可操作Vuex用于解决传值问...原创 2019-10-10 11:51:20 · 99 阅读 · 0 评论 -
Spa之表单验证+增删改查
Spa之表单验证+增删改查表单验证完成CRUD表单验证<template> <div> <!-- 模糊查询 --> <el-form :inline="true" :model="formInline" class="user-search"> <el-form-item label="搜索:"> <el...原创 2019-09-30 11:26:02 · 161 阅读 · 0 评论 -
Spa之动态树+数据表格+分页
Spa之动态树+数据表格+分页动态树数据表格数据分页结合我的博文https://blog.csdn.net/water_java/article/details/101567997观看动态树LeftNav.vue:<template> <el-menu default-active="2" class="el-menu-vertical-demo" backgroun...原创 2019-09-28 19:45:24 · 171 阅读 · 0 评论 -
几个比较常用的Vue.js的全局API
Vue.nextTick( [callback, context] )参数:{Function} [callback]{Object} [context]用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。代码示例://html<div id="app"> {{msg}} </div>...原创 2019-09-29 19:30:33 · 1114 阅读 · 0 评论 -
Spa之首页导航与左侧菜单栏
结合我的博文https://blog.csdn.net/water_java/article/details/101454595观看不需要再启动eclipse的Tomcat1、mock.js模拟响应ajax请求前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而mockjs就可以做到这一点Mock.js是一个模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来...原创 2019-09-28 09:40:45 · 611 阅读 · 0 评论 -
Spa完成用户登录与注册
完成用户登录与注册完成登录与注册的布局配置使用element-ui框架改变main.js创建login.vue引入样式,调整格式路由配置测试结果设置登录与注册来回切换后台交互axiosqsvue-axios实现登录注册功能引入帮助文档修改main.js文件写登录与注册的提交方法结果完成登录与注册的布局配置使用element-ui框架打开package.josn文件,观察上线的依赖:这是引入...原创 2019-09-26 22:17:54 · 3501 阅读 · 0 评论 -
使用vue-cli来搭建vue项目
使用vue-cli来搭建vue项目介绍vue-cli安装vue-cli和webpack测试安装是否成功使用脚手架vue-cli(2.X版)来构建项目package.json详解npm install/npm install xxx -S/npm install xxx -D/npm install xxx -g的区别vue项目结构说明在spa项目里使用路由路由嵌套介绍vue-clivue-cl...原创 2019-09-25 14:18:49 · 213 阅读 · 0 评论 -
利用计算属性完成购物车(带删除和新增)
我做的购物车不太美观,有兴趣的话可以引入好看的一些样式我所实现的功能有遍历水果,数量加减的修改,各个商品小计,所有商品总计,还有商品的添加与删除我的代码如下:html代码:<div id="app"> <div style="text-align: center;"> <button style="text-align: center;" @c...原创 2019-09-21 18:55:43 · 523 阅读 · 0 评论 -
Node.js环境搭建
Node.js环境搭建ElementUI简介Vue+ElementUI安装Node.js的简介npm简介Node.js环境搭建如何运行下载的Node.js项目ElementUI简介基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件ElementUI官网:http://element-cn.eleme.io/#/zh-CN注1:类似前端框架还有iviewVu...原创 2019-09-20 12:22:58 · 138 阅读 · 0 评论 -
Vue之SPA
Vue之SPASPA是什么单页面应用程序传统多页面应用程序SPA的优势SPA实现思路和技术点路由router-link相关属性SPA是什么单页Web应用(single page application,SPA),就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序单页面应用程序只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要...原创 2019-09-19 17:07:46 · 267 阅读 · 0 评论 -
vue之v-for的各种使用
vue之v-for的各种使用用 v-for 把一个数组对应为一组元素在 v-for 里使用对象维护状态数组更新检测变异方法 (mutation method)替换数组注意事项对象变更检测注意事项显示过滤/排序后的结果在 v-for 里使用值范围在 上使用 v-forv-for 与 v-if 一同使用在组件上使用 v-for用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基...原创 2019-09-19 15:58:25 · 3826 阅读 · 0 评论 -
VUE的模板语法(二)
VUE的模板语法(二)样式绑定事件处理器vue表单vue组件自定义事件样式绑定1 class绑定使用方式:v-bind:class=“expression”expression的类型:字符串、数组、对象2 style绑定v-bind:style=“expression”expression的类型:字符串、数组、对象事件处理器事件监听可以使用v-on 指令1 事件修饰符Vue通...原创 2019-09-18 23:29:45 · 119 阅读 · 0 评论 -
VUE的模板语法(一)
VUE的模板语法(一)插值指令核心指令参数动态参数修饰符简写过滤器计算属性监听属性计算属性和监听属性的区别插值1, 插入文本2, html使用v-html指令用于输出html代码3, 属性HTML属性中的值应使用v-bind指令4 ,表达式Vue提供了完全的JavaScript表达式支持下面的具体的用法:<!DOCTYPE html><html> &...原创 2019-09-17 19:45:43 · 207 阅读 · 0 评论 -
ES6之函数
ES6之函数函数默认值默认值的基本用法和解构赋值默认值结合使用参数默认值的位置函数的 length 属性箭头函数箭头函数的基本用法使用箭头函数的注意点箭头函数的不适用场合嵌套的箭头函数函数默认值默认值的基本用法ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。function log(x, y = 'World') { console.log(x, y);}log('...原创 2019-09-16 15:19:09 · 328 阅读 · 0 评论 -
ES6之变量的解构赋值
ES6之变量的解构赋值1,数组的解构赋值(1) 基本用法(2) 解构赋值允许指定默认值。2,对象的解构赋值(1) 默认值(2)注意3,字符串的解构赋值4,数值和布尔值的解构赋值5,函数参数的解构赋值6,变量的解构赋值用途ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。1,数组的解构赋值(1) 基本用法以前,为变量赋值,只能直接指定...原创 2019-09-15 12:03:36 · 112 阅读 · 1 评论 -
ES6的声明变量的方法:let and const
let and constES6六种声明变量的方法letlet的特点:constconst的本质ES6六种声明变量的方法ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加let和const命令外,还有另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。今天我就介绍let和const命令let它的用法类似于v...原创 2019-09-15 10:58:51 · 128 阅读 · 0 评论 -
初学Vue
初学Vue库和框架的区别Vue的简介Vue的特点1,易用2,灵活3,性能教程文档Vue的解决方案:MVVM安装Vue什么是CDN加速?什么是BootCDNVue的开发模式Vue的数据双向绑定及指令Vue的生命周期钩子函数库和框架的区别1 库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者代表:jQueryjQuery这个库的核心:DOM操...原创 2019-09-14 12:20:06 · 218 阅读 · 0 评论 -
layUi的重要组件之一--------------弹出层
在layUi中弹出层是最常用的组件之一,今天我就简单介绍一下它的基础参数1,内置方法:layer.open、layer.msg2,type - 基本层类型5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)3,title - 标题3-1:传...原创 2019-09-05 19:32:08 · 617 阅读 · 0 评论 -
layUi数据表格绑定返回数据类型不正确问题
出现这样的问题,可能是json数据转化格式有问题我用的是response参数所以我的后台数据代码如下:private FootWorker footWorker=new FootWorker(); private FootWorkerDao footWorkerDao=new FootWorkerDao(); public String findWorkerByWname() {...原创 2019-09-02 09:58:25 · 1404 阅读 · 0 评论 -
layui的基本元素之一-----面板
layui的基本元素之一-----面板卡片面板折叠面板手风琴面板面板嵌套卡片面板<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>卡片面板</legend></fieldset> <!-- 卡片式...原创 2019-08-29 11:56:31 · 5154 阅读 · 1 评论 -
layui的基本元素之一-----选项卡
layui的基本元素之一-----选项卡默认风格的Tab动态操作TabHash地址定位简洁风格的Tab卡片风格的TabTab数超过一定宽度选项卡:class=“layui-tab”JavaScript代码需加载element模块,才可以实现tab的功能默认风格的Tab<fieldset class="layui-elem-field layui-field-title" style=...原创 2019-08-29 10:54:31 · 788 阅读 · 0 评论 -
layui的基本元素之一-----导航
layui的基本元素-----导航水平导航带徽章和图片的导航导航主题垂直导航菜单左侧导航默认面包屑自定义分隔符的面包屑用于门户频道的面包屑导航:class=“layui-nav”如果需要hover效果,或呼出二级菜单需加载element模块水平导航<fieldset class="layui-elem-field layui-field-title" style="margin-to...原创 2019-08-29 09:52:55 · 1998 阅读 · 0 评论 -
layui的基本元素之一-----表单
layui的基本元素之一-----表单以下是我个人的表单验证代码,视图显示层<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E...原创 2019-08-28 20:47:51 · 410 阅读 · 0 评论 -
layui的基本元素之一-----按钮
layui的基本元素-----按钮按钮主题按钮尺寸图标按钮圆角按钮混搭按钮按钮组按钮容器导入css样式文件:是使用者本地的路径<link rel="stylesheet" href="layui/css/layui.css" media="all">按钮主题默认按钮: class=“layui-btn”原始按钮: class=“layui-btn layui-btn-pri...原创 2019-08-28 14:08:33 · 17058 阅读 · 1 评论 -
对layui的初步认识
对layui的初步认识1.简介2.使用场景3.兼容性4.存在价值5.元素6.下载6-1.官网首页下载6-2.Git 仓库下载:6-3. npm 安装:1.简介layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过...原创 2019-08-24 11:41:12 · 1218 阅读 · 0 评论