
前端总结(es6 vue layui )
文章平均质量分 52
开源模块化前端 UI 框架
似锦_
王锡豪,code是爱好,有兴趣的可以关注,定不负代码不负卿。java开发工程师
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue+Element UI 生鲜管理系统简介及项目搭建,页面布局(一)
项目所需要的各种配置文件,类似java中的pom文件。这个文件是在执行在npm install的时候自动生成,用以记录当前状态下实际安装的各个依赖包的具体来源和版本号以及这个模块又依赖了哪些依赖。你可以简单的理解为对 package.json 里 dependencies 和 devDependencies 的精确描述。babel作为转译工具使我们的 JavaScript 代码正常运行在旧的或不支持新语法和api的环境。原创 2023-06-24 23:04:23 · 8797 阅读 · 1 评论 -
前端 vue-element-admin、前端项目的创建和基本配置 (四)
文章目录一、vue-element-admin二、vue-admin-template三、项目的创建和基本配置四、登录页修改五、页面零星修改六、Eslint语法规范型检查一、vue-element-admin1、简介而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。功能:https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能GitHub地址:https://github.com/Pa原创 2022-02-10 08:34:18 · 8946 阅读 · 1 评论 -
Cron在前端的使用,vue与element ui的vue-cron插件的使用及将定时任务cron表达式解析成中文
如图中生成的cron表达式 * * * 1L *?* 是错误的表达式,应为 * * *?在vue页面“style scoped”中通过控制样式去掉秒年。输出:* * *?原创 2023-06-06 11:20:52 · 7671 阅读 · 0 评论 -
Vue基础,Vue前端工程化,vue element,vue-admin
Vue基础: https://shimo.im/docs/tEK4gmy1xIc1wOwHVue前端工程化 : https://shimo.im/docs/DWTM54iDs4YKqtxdvue element 跨域https://shimo.im/docs/tJkjYuoH0eYiXTvNvue-admin https://shimo.im/docs/obbqYbpLCjQYy3e8原创 2022-04-20 08:24:34 · 419 阅读 · 1 评论 -
vue请求头header带token过程,为单点登录sso铺垫
今天准备做sso的时候,突然发现vue请求头还是要记录一下的,虽然不是专业前端。后端生成token导入依赖:<!--jwt--><dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version></dependency>自己写原创 2022-04-15 08:30:00 · 1550 阅读 · 0 评论 -
Vue定时器设置 Vue简单定时任务
创建定时器Vue的定时器分为好几种的呢,在这里我简单的写了三种来看一下,这三种分别是一次性定时器、指定时间间隔触发定时器、清除定时器。1.1一次性定时器//第二个参数是毫秒数let timer = setTimeout(() => { //需要定时执行的代码 console.debug("Hello World"); }, 3000)1.2 指定时间间隔触发定时器let timer = setInterval(() => { //需要定时执行的代码},500原创 2022-04-14 22:33:32 · 48639 阅读 · 0 评论 -
HTML5+Ajax上传文件
#HTMLinput类型设为file:<label for="img_input"></label><input id="img_input" type="file"/>如果想上传多文件,可添加multiple<input type="file" name="img" multiple="multiple" />用accept="MIME_type"限制提交的文件类型,用逗号隔开的 MIME 类型列表(服务器端也要最好类型检测双保险),如:&原创 2022-03-07 08:28:20 · 672 阅读 · 0 评论 -
html5表单上传控件Files筛选指定格式的文件,accept属性过滤excel文件
1、允许上传文件数量允许选择多个文件:只允许上传一个文件:2、上传指定的文件格式这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式,可手动修改成其它文件格式。如果不限制上传图片的格式可写成:accept=“image/*”其它格式参考如下:这里要慎重说明的是:网上好多教程都说 excel过滤要用“accept=“application/msexcel”” ,其实是大错特错!测试了,不行! 我也是在做phpExcel导出excel文件是,看到了,有一行代码:header(‘Con原创 2022-02-14 08:18:17 · 2164 阅读 · 0 评论 -
layui 表单模块事件触发,select事件触发,checkbox事件,switch事件,sunmit提交等等
表单模块文档:https://www.layuiweb.com/doc/modules/form.html#onselectlayui 针对各种表单元素做了较为全面的UI支持,你无需去书写那些 UI 结构,你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点,你必须给表单体系所在的父元素加上class=“layui-form”,一切的工作都会在你加载完form模块后,自动完成。如下是一个最基本的例子:<!DOCTYPE ht原创 2022-02-05 20:21:07 · 2411 阅读 · 0 评论 -
layui框架中格式化日期,table中的日期时间数据的格式化
layui框架中格式化日期,table中的日期时间数据的格式化 //第一个实例 table.render({ elem: '#demo' ,height: 315 ,url: 'http://localhost:8080/oes/teacher/examlist.do' //数据接口 ,page: true //开启分页 ,cols: [[ //表头 {fiel原创 2022-02-04 20:35:52 · 2528 阅读 · 0 评论 -
layui数据表格的按钮事件
可以参考layui官网https://www.layuiweb.com/demo/table/form.html获取的数据:table.render({ elem: '#test' , url: '/StoreServlet/get'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/ , where: {"name": name, "address原创 2022-02-02 14:34:59 · 4936 阅读 · 0 评论 -
SimpleDateFormat 类,格式化和解析日期
SimpleDateFormat 类如果使用 DateFormat 类格式化日期/时间并不能满足要求,那么就需要使用 DateFormat 类的子类——SimpleDateFormat。SimpleDateFormat 是一个以与语言环境有关的方式来格式化和解析日期的具体类,它允许进行格式化(日期→文本)、解析(文本→日期)和规范化。SimpleDateFormat 使得可以选择任何用户定义的日期/时间格式的模式。SimpleDateFormat 类主要有如下 3 种构造方法。SimpleDateF原创 2022-01-29 10:16:25 · 560 阅读 · 0 评论 -
JS 对象(Object)和字符串(String)互转方法
利用原生JSON对象,将对象转为字符串var jsObj = {};jsObj.testArray = [1,2,3,4,5];jsObj.name = 'CSS3';jsObj.date = '8 May, 2011';var str = JSON.stringify(jsObj);alert(str);从JSON字符串转为对象var jsObj = {};jsObj.testArray = [1,2,3,4,5];jsObj.name = 'CSS3';jsObj.date =原创 2022-01-28 22:28:39 · 11351 阅读 · 0 评论 -
js如何获取当前页面url网址信息
在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结。下面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=11、window.location.href(设置或获取整个 URL 为字符串)var test = window.location.href;alert(test);返回:http://i.cnblogs.com/EditPosts.aspx?opt原创 2022-01-27 10:10:40 · 17180 阅读 · 0 评论 -
Node.js的使用、NPM、Babel的使用、模块化以及ES5、ES6模块化规范
文章目录一、Node.js简介二、安装三、快速入门四、NPM简介五、使用npm管理项目六、Babel简介七、安装Babel八、Babel的使用九、模块化简介十、CommonJS模块规范(转es5)十一、ES6模块化规范十二、ES6模块化的另一种写法一、Node.js简介1、什么是Node.js简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性原创 2022-01-25 10:48:41 · 642 阅读 · 0 评论 -
layui 表格的属性的显示转换方法,状态转换
layui.render({ url:'/xxxxx' ,cols:[[ {field:'status',title:'状态'} ]] ,done:function(res, curr, count){ //res 接口返回的信息 $("[data-field = 'status']").children().each(function(){ if($(this).text() == '1'){ $(this).text("发布");原创 2022-01-24 17:52:28 · 1419 阅读 · 0 评论 -
webpack打包js以及打包css
一、什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。二、Webpack安装1、全局安装npm install -g webpack webpack-cli2、安装后查看版本号webpack -v三、初始化项目1、创建webpack文件夹进入webpack目录,执行命原创 2022-01-23 11:25:11 · 1536 阅读 · 0 评论 -
Vue进阶篇、Vue组件、axios、-element-ui
文章目录一、组件(重点)二、实例生命周期三、路由四、axios五、element-ui:一、组件(重点)组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:1、局部组件创建 01-1-局部组件.html定义组件var app = new Vue({ el: '#app', // 定义局部组件,这里可以定义多个局部组件原创 2022-01-22 14:16:31 · 584 阅读 · 0 评论 -
Vue快速入门~Vue总结
文章目录一、介绍1、Vue.js 是什么2、初始Vue.js二、基本语法1、基本数据渲染和指令2、双向数据绑定3、事件4、修饰符5、条件渲染6、列表渲染一、介绍1、Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。官方网站:https://cn.vuejs.org2、原创 2022-01-21 10:58:41 · 125 阅读 · 0 评论 -
ECMAScript 6 简介,ES6的最少必要知识
自学参考:http://es6.ruanyifeng.com/一、ECMAScript 6 简介ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。1、ECMAScript 和 JavaScript 的关系一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?要讲清楚这个问题,需要回顾历史。199原创 2022-01-21 10:57:26 · 202 阅读 · 0 评论 -
使用layui的弹出层表单,在页面弹出表单
弹出层表单很常见,也很实用,无论是在pc端网页还是在移动端.现在用layui来实现一下这个表单吧.html<form class="layui-form" id="test" style="display:none"> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"&g原创 2022-01-20 09:14:50 · 9081 阅读 · 0 评论