前端
文章平均质量分 79
lucky.麒麟
一样魔前千古间,独看桑蝶化人间。一叹求魔千万年,几多轮回古葬边。
展开
-
用React给XXL-JOB开发一个新皮肤(四):实现用户管理模块
此篇文章介绍 xxl-job的用户管理模块的开发工程,重点介绍了下 antd 的表格组件、模态框组件和表单组件,快速实现一个 CRUD 模块。原创 2024-01-30 23:11:02 · 1098 阅读 · 2 评论 -
用React给XXL-JOB开发一个新皮肤(三):实现登录页和Layout骨架
此篇文章介绍 xxl-job管理接口的兼容实现,接着将实现登录页面并对接登录接口,最后将搭建管理页面的Layout骨架,完成退出登录和修改密码。原创 2024-01-12 17:15:42 · 1072 阅读 · 0 评论 -
用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化
此篇文章我们会先介绍下当前项目的目录规划,接着对vite配置以便我们后续的开发,最后会根据 xxl-job 的页面创建我们项目的页面并配置路由信息。原创 2024-01-10 12:14:23 · 1204 阅读 · 0 评论 -
用React给XXL-JOB开发一个新皮肤(一):环境搭建和项目初始化
本文介绍 xxl-job 本来开发环境配置,使用vite初始化React 项目,添加项目必要的依赖,清理不需要代码,搭建React 前端项目。原创 2024-01-09 17:45:30 · 1134 阅读 · 0 评论 -
Golang之Gin打包React/Vue项目
一. 传统打包痛点Golang作为api接口服务非常方便,日常将Gin的项目打包是二进制文件直接部署是很方便。但是作为前段的Vue或者React项目需要在nginx或者tomcat转发才可以。这样对于一些中小项目就很麻烦,尤其我们写一下小工具。如果在使用前后端分离通过nginx转发代理部分,就很麻烦,失去了golang项目的便捷性。二. golang新特性在golang的1.16版本增加了embed的标签,肯方便我们将静态资源文件打包为二进制文件。这样有了原生支持就可以省去引入一些第三方关于静态资源原创 2021-10-08 11:52:09 · 5187 阅读 · 0 评论 -
React整合redux并开启持久化
React整合redux并开启持久化一、添加相关依赖yarn add redux # 增加reduxyarn add react-reduxyarn add @babel/plugin-proposal-decorators # 开启注解的支持yarn add babel-plugin-transform-decorators-legacyyarn add redux-persist原创 2021-06-20 17:11:44 · 255 阅读 · 0 评论 -
Vue使用汇总之el-table实现鼠标拖动表格滚动
有时候我们需要在Element-UI中实现这样的一个效果,鼠标水平拖动,表格也水平滚动,这样可以隐去滚动条!一、元素增加三个事件<template> <el-table @mousedown.native="mouseDownHandler" @mouseup.native="mouseUpHandler" @mousemove.native="mouseMoveHandler" ref=原创 2021-02-25 17:26:43 · 2289 阅读 · 1 评论 -
Vue中Vuex的使用
VUEX的使用安装vuexnpm install vuex --save创建vue的store文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { city: '北京' }})在main.js中添加// ---...原创 2019-01-30 17:54:32 · 278 阅读 · 0 评论 -
二次封装POI实现一行代码导出Excel
引入依赖包&lt;!--excel导出--&gt;&lt;dependency&gt; &lt;groupId&gt;org.apache.poi&lt;/groupId&gt; &lt;artifactId&gt;poi&lt;/artifactId&gt; &lt;version&a原创 2019-03-02 11:49:45 · 262 阅读 · 0 评论 -
Vue之自定义UI库
1. 什么UI组件库个人认为,UI组件库是一个将一些常用的dom分装为一个可以多种样式切换、可扩展、使用方便的一套工具。现在比较好的如: Vuetify、Element;但是也存在我们一些在我们自己项目中需要实现自己的特定需求。2. vue的组件前端组件化是现在前端框架中一个非常重要的思想元素,将页面内容进行拆分之后,可独立维护,可复用性大大提高。哪个地方出问题,直接去修改的对应的组件即可...原创 2019-03-11 12:04:06 · 1065 阅读 · 0 评论 -
vuex项目使用方法
安装vuexnpm install vuex --save-dev // 或者yarn add vuex在main.js中添加store// 引入import store from './store'// 使用new Vue({ el: '#app', router, store: store, components: { App }, template: '...原创 2019-03-20 09:55:13 · 253 阅读 · 0 评论 -
vue自定义指令
局部指令1. 定义指令export default { name: 'StandardLevel', directives: { focus: { // 自定义聚焦指令 inserted: function (el) { el.getElementsByTagName('input')[0].focus() } } ...原创 2019-03-20 10:09:18 · 101 阅读 · 0 评论 -
vuex刷新数据丢失方法
vuex问题: 当刷新页面的时候vuex仓库中的数据丢失解决方法1、使用localStorage2、使用sessionStorage个人建议对于localStorage的数据是永久保存(自己不去删除的时候),所以个人觉得不是很安全,所以使用sessionStorage比较合适。具体使用mutations: { // 菜单信息 getMenuItems (stat...原创 2019-04-02 15:35:43 · 310 阅读 · 0 评论 -
小程序之数据缓冲的封装
未使用缓冲的请求将请求添加到小程序的生命周期函数,每次加载数据都会请求数据。Page({ data : { imgList: [] }, onLoad: function() { carouselModel.getAll((res) => { let imgList = res.object; ...原创 2018-12-24 16:13:17 · 477 阅读 · 0 评论 -
小程序之登录授权(小程序端处理)
登录组件组件的UI&lt;!--components/login/index.wxml--&gt;&lt;button bind:getuserinfo="onGetUserInfo" open-type='{{openType}}' plain='{{true}}' class="container"&gt; &lt;slot name=&am原创 2018-12-18 09:49:53 · 7828 阅读 · 0 评论 -
小程序之图片的上传、删除和预览和视频的上传和删除
最近在做一个小程序,帖子中用到了一个关于文字、图片和视频的一些操作。最终的样式原始样式上传图片上传视频这个可以实现输入文字的统计和限制,图片的上传、预览和删除,视频的上传和删除功能。如何实现上面的那些样式呢?大家可以先阅读下面的文档,会发现其实很简单。小程序关于图片操作的api文档:https://developers.weixin.qq.com/min...原创 2018-12-22 23:19:56 · 4760 阅读 · 3 评论 -
SMM框架整合layui关于数据表格返回对象属性的显示
一般来说我们使用layui的数据表格的时候需要返回这样的数据结构: 但是我们使用SSM框架时候通过@ResponseBody返回对象的json串时候会包含这样的数据结构:public class Course { private Integer courseLong; private Integer courseAge; private Integer new...原创 2018-07-10 08:54:59 · 4200 阅读 · 2 评论 -
SSM框架整和layui的二级级联下拉框实现
初始样子: 级联选择: 级联选择没有课程时: 需要封装的数据结构: 接下来是实现过程前端代码<form class="layui-form" onclick="return false;"> <button class="layui-btn layui-btn-normal" id="add_course">新增课程&原创 2018-07-10 19:58:45 · 2848 阅读 · 1 评论 -
ssm 登录验证码使用
今天在写一个页面的时候用到了验证码,就自己搞了一下,随便发出来,方便大家参考使用,不对的请指正! 首先在ssm的common的工具包中增加一个生成验证码的类:import java.awt.*;import java.awt.font.FontRenderContext;import java.awt.geom.Rectangle2D;import java.awt.image.B...原创 2018-07-06 18:00:42 · 4959 阅读 · 12 评论 -
SSM 登录验证控制
思路:将表单中提交的数据交给登录控制器,先验证是否有错误,如过错误返回错误信息,如果没有这将用户名密码查询数据库获取的对象保存在session中,然后将页面跳转。 控制器:@Controllerpublic class LoginController { @Resource LoginService loginService; // 加载登录页面 @...原创 2018-07-16 09:15:37 · 3398 阅读 · 0 评论 -
bootstrap时间组件使用
引入的css和js<link rel="stylesheet" href="/static/bootstrap3.3.7/css/bootstrap.css"><link rel="stylesheet" href="/static/bootstrap3.3.7/css/bootstrap-theme.css"><link rel="st原创 2018-08-09 16:47:46 · 2955 阅读 · 0 评论 -
SpringBoot2 静态文件的处理
处理方式对于静态文件一般我们会引入诸如bootstrap和jq等一些前段的UI框架,我们通常的使用方法是放到静态文件夹之中。另一种我们可以添加webjar文件进行使用网址: https://www.webjars.org/使用:直接映入pom文件,然后在前段去使用<!--jq--><dependency> <groupId>or...原创 2018-08-10 10:38:32 · 2132 阅读 · 0 评论 -
SpringBoot2 Jpa具有关联关系的表单提交
前言在使用Jpa的时候,对几个实体类做了关联关系,在进行update操作时候,需要提交表单,除了封装一个相关属性的DTO之外,我们也可以这样子操作:首先,对于jpa来时底层使用的hibernate的ORM框架,实体类和数据库中的表是做了映射的,那么在我们提交表单的时候,如果做了关联关系,我们提交具有外键的数据是无法提交的,如果我们相拥需要在实体类中定义一个只具有关联表的主键的构造函数。具体...原创 2018-08-10 11:33:37 · 791 阅读 · 0 评论 -
阻止事件冒泡
JS事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。阻止Jquery事件冒泡...原创 2018-09-04 13:20:41 · 113 阅读 · 0 评论 -
小程序之flex布局
构建一个页面的骨架wxml<view class="chunck color_1">1</view><view class="chunck color_2">2</view><view class="chunck color_3">3</view>wxss.chunck原创 2018-10-19 16:02:01 · 721 阅读 · 0 评论 -
小程序之组件
组件的目录结构目录一目录二注册组件{ "usingComponents": { "v-like": "/components/like/index" }}在使用组件的页面的json文件中注册组件使用<!--pages/pan/open.wxml--><v-like />...原创 2018-10-19 18:42:28 · 116 阅读 · 0 评论 -
Canvas动态加载图片、画线、画点
HTML代码:&lt;canvas id="cvs" width="400" height="400" style="margin:20px auto; display: block;"&gt;&lt;/canvas&gt;JS代码&lt;script type=&a原创 2018-11-06 10:59:25 · 7506 阅读 · 0 评论 -
Springboot之表单验证
实体类@TableName("lh_admin")public class Admin extends Model<Admin> { private static final long serialVersionUID = 1L; /** * 管理员ID */ @TableId(value="admin_id", type= IdType....原创 2018-12-13 13:46:41 · 1045 阅读 · 0 评论 -
修改layui的后台模板的左侧导航栏可以伸缩
原生的左侧导航栏代码:<div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay原创 2018-03-09 20:36:54 · 37770 阅读 · 31 评论