前端
编程周记
这个作者很懒,什么都没留下…
展开
-
图书馆管理系统(springboot+thymeleaf+jquery+ajax+bootstrap)
图书馆管理系统(springboot+thymeleaf+jquery+ajax+bootstrap)不同用户角色,登录后有不同的菜单权限普通学生:可以借书、还书管理员:新增图书、修改图书、新增用户、角色等。原创 2022-08-07 22:36:18 · 566 阅读 · 2 评论 -
列表页面实现是几种方式(前后端)
这种方式呢就是前后台不分离,table数据是通过theymeleaf来显示,后台model赋值。更新和保存通过ajax请求后台,form方式提交。原创 2022-08-07 22:26:50 · 625 阅读 · 0 评论 -
总结:前后台接口参数接收的几种方式(form表单、ajax、restful、requestParam等)
知识前言:1.Content-Type: 一个请求都会有请求的内容类型,默认是application/x-www-form-urlencoded; charset=UTF-8常见的接种请求数据类型:application/x-www-form-urlencoded1)浏览器的原生form表单2) 提交的数据按照 key1=val1&key2=val2 的方式进行编码,key和val都进行了URL转码multipart/form-data常见的 POST 数据提交的方式。我.原创 2022-01-02 00:29:29 · 5551 阅读 · 0 评论 -
bootstrap-table表格实现
方式一:jquery+bootstrap不足:分页能力不行效果:<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>商品列表</title> <script type="text/javascript" th:src=.原创 2021-12-31 00:38:08 · 966 阅读 · 0 评论 -
修改van-dropdown-menu默认高度
class="van-popup van-popup--top van-dropdown-item__content"可以看到默认的高度是 80%修改后:<style scoped> /deep/ .van-dropdown-item__content { position: absolute; max-height: 40%; }</style> /deep/ 深度选择器当你想在父组件修改子组件的...原创 2021-10-20 10:09:03 · 1929 阅读 · 0 评论 -
js中两个数组连接
两个数组连接this.list = this.list.concat(tmpList)还有一种方法:this.list = [...this.list,...tmpList]... 是深拷贝原创 2021-10-11 23:58:53 · 831 阅读 · 0 评论 -
记录一个van-list不断onLoad加载的坑
van-list 下拉的时候,不断请求后台加载数据,真的是坑。。。。this.$http.post(url,params).then(function(res){ this.list=[];if(res.data.data.length==0){that.finished=true}else{...原创 2021-10-11 22:23:58 · 892 阅读 · 0 评论 -
vue滚动列表,从详情返回不刷新,回到滚动位置
网上一堆文章,太难找到一个真正有用的....但大体思路一致。步骤1.router.js中的跳转页面增加keepAlive,这没问题path: '/test', name: 'test', component: () => import('@/views/test.vue'), meta: { title: 'xxx', keepAlive: true }},步骤2(错误❌):加scrollBehavior方法,这可能是对的,但我的项目比较奇怪,用不了这个原创 2021-10-05 14:37:49 · 432 阅读 · 0 评论 -
el-tree横向、纵向滚动条
<div class="left_block"> <el-input v-model="filterText" placeholder="输入关键字进行过滤"></el-input> <el-tree class="terminal_tree" ref="s...原创 2021-09-16 00:07:22 · 1665 阅读 · 0 评论 -
vue axios同步请求的案例解析
先看异步: test2(){ console.log("111") // 模拟1s后返回数据 setTimeout(()=>{ console.log("222") },1000) console.log("333") },执行结果:111 333 222再看个异步的例子:test3(){ ...原创 2021-09-10 00:18:30 · 857 阅读 · 0 评论 -
vue父子组件传值
one.vue<template> <div> <two ref="two" :obj="objData" :funcTest="funcTest" @onTestEvent="onTest"> </two> <div style="border: #1d90e6 solid 0.75px;height: 120px;margin-bottom: 5px">原创 2021-09-07 00:02:04 · 85 阅读 · 0 评论 -
vue笔记
一、搭环境https://mp.weixin.qq.com/s/ookJSyAxRjWl62B-yViGwQ安装node环境、安装vue/node_modules总结:下载:https://nodejs.org/en/安装nodenpm install -g cnpm –registry=https://registry.npm.taobao.org安装脚手架:npm install --global vue-cli创建一个基于 webpack 模板的新项目: vue init we原创 2021-08-07 14:30:35 · 74 阅读 · 0 评论 -
vue报错
NO1.Module build failed: TypeError: this.getOptions is not a function版本太高,改成:npm install [email protected] --save-dev npm install [email protected] --save-dev NO2.TypeError: this.getResolve is not a function同样是版本问题,改成:npm install [email protected].原创 2021-08-07 13:52:12 · 692 阅读 · 0 评论 -
vue-element(一)搭建vue环境
一、安装node环境下载地址为:https://nodejs.org/en/是一个exe应用程序,直接安装即可检查安装结果: node -v出现版本号,说明安装成功!!为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。二、搭建vu原创 2021-07-28 11:55:06 · 238 阅读 · 0 评论 -
html div区域划分、居中各种前端技巧笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页</title></head><body><div class="aa" style="background: red;"> <div class="bb" style="background: blue;">bb&.原创 2021-06-04 21:25:34 · 1427 阅读 · 0 评论 -
弹出框 dialog带遮罩
弹出框 dialog<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>弹窗遮罩1</title> <script src="js/jquery-1.9.1.min.js"></script> <style> /* 登录弹窗 */ #login{ height: 100%; .原创 2021-04-11 12:08:55 · 348 阅读 · 0 评论 -
RequestBody多个参数Map实现以及前端json传参方式
后台用Map<String,String>接: @RequestMapping("/save") public void saveFile(@RequestBody Map<String,String> map){ //map.get("path") //map.get("content") }前台:var...原创 2018-12-20 22:00:40 · 6998 阅读 · 0 评论 -
textarea编辑状态无法更新内容的解决方法
<textarea spellcheck="false" id="content" rows="42" cols="420" style="width:99%;float:left;border: solid #f7f7f9;"> </textarea>1.初始textarea内容2.编辑状态,键盘输入文字3.此时一个按钮原创 2018-12-20 22:15:44 · 2090 阅读 · 0 评论 -
解决html按键事件与浏览器快捷键ctrl+s冲突问题
document.onkeydown=function (e) { event=event||window.event; var currKey=0, e=e||event||window.event; currKey = e.keyCode||e.which||e.charCode; //检测按下哪个键,作相应处理 ...原创 2018-12-20 21:45:03 · 3502 阅读 · 0 评论 -
angular将表单数据传到后台的方法
【每日学习】 angular将表单数据传到后台的方法。html:<input type="text" ng-model="myform.userId" ><input type="text" ng-model="myform.userName" > <button type="submit" class="btn原创 2018-12-05 21:35:13 · 2454 阅读 · 0 评论 -
史上最low的css大全
1.网页居中<div style="width:50%;border: 0.75px solid gray;margin: 0 auto;"> 我居中了,你呢?</div>原创 2019-03-18 15:16:37 · 96 阅读 · 0 评论 -
jquery-ztree从后台获取数据的例子
引入: <link rel="stylesheet" href="../plugins/jquery-ztree/css/demo.css" /> <link rel="stylesheet" href="../plugins/jquery-ztree/css/zTreeStyle.css" /> <script type="原创 2018-12-20 21:38:20 · 2986 阅读 · 4 评论 -
bootstrap-treeview demo (树形展示与后台数据交互)
实现读取本地e盘下的一个学习目录,通过树形展现出来,并且点击节点就可以打开文本内容。html 引入: <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="../plugins/bootstrap/css...原创 2018-12-16 12:01:44 · 5507 阅读 · 2 评论 -
给bootstrap-treeview添加滚动条
bootstrap-treeview默认是不加滚动条的,如果你内容多,出现的滚动条是浏览器自动的滚动条(就是全屏的)。增加滚动条很简单,外面包一层这个div即可。<div style=" overflow:scroll; width:20%; height:680px;float:left"><div id="tree"></div></d...原创 2018-12-15 21:57:14 · 2518 阅读 · 0 评论 -
bootstrap-treeview踩坑记
错误例子: <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap-treeview.min.css" /> <scr原创 2018-12-14 22:16:47 · 963 阅读 · 0 评论 -
解决js添加的标签hover不起作用
我在做一个页签的时候,有一个关闭的X,需要实现一个功能,就是鼠标移入的时候变颜色。首先,这个元素是在js里面动态添加的,这里我定义一个class=my_close $("#myTab").append("<a class='my_close'>X</a>"); css实现hover: .my_close:hover { color...原创 2018-11-22 21:57:14 · 3535 阅读 · 1 评论 -
href 区别
<a href="#">与<a href="####">与<a href="javascript:void(0)">的区别<a href="#" 整个页面会刷新,跳转到主页<a href="####" 局部刷新时使用,在iframe里面与#没区别<a href="javascript:void(0)" 什么也不做...原创 2020-05-05 12:45:35 · 155 阅读 · 0 评论 -
Java如何设计不同角色的动态菜单
drop table menu;create table menu(menu_id number(10),menu_name varchar2(256),paerent_id number(10),is_leaf char);drop table role_menu;create table role_menu(menu_id number(10),role_id numb...原创 2020-05-05 10:25:56 · 1189 阅读 · 0 评论 -
后端Java开发适合学什么前端框架知识
一、前端小白对于前端框架的感受 后端学了一些东西以后,如果不是在大公司那种前后端分离的情况下,还是需要偶尔自己搭建一个简单的前后端web应用。所以就必须要懂点前端的框架。现在市面上前端框架太多了,而且也已经有了一些类似spring全家桶的框架,比如vue。我印象中的前端是这样的:原生dom操作+jquery+ajax+extjs,曾经jquery+ajax走天下好像行不通了。UI停...原创 2020-05-01 22:56:02 · 1614 阅读 · 1 评论 -
jquery DataTables进阶(二)控制表格文字长度
jquery DataTables进阶(二)控制表格文字长度 几年前在论坛问别人怎么让鼠标移过去显示所有内容,没人回答我,后来自己搞出来了。也分享在论坛帖子里,几年后的今天有小哥回复说要看完成代码,可是电脑已经换了一台,所以重新搞个demo,写篇博客分享。1.限制表格显示长度不控制长度,就会变形,如下图:HTML:<%@ page language="java"...原创 2019-05-07 21:27:45 · 872 阅读 · 0 评论 -
DataTables warning: table id=example - Ajax error. For more information about this error, please see
错误原因:Ajax没有找到目标文件<script type="text/javascript"> $(document).ready(function() { var table = $('#example').DataTable( { "ajax": "/arrays.txt", "columnDefs": [ { ...原创 2019-05-07 21:07:11 · 4118 阅读 · 0 评论 -
jquery DataTables进阶(一)HelloWorld
官方下载jquery datatable需要引入的文件:jquery.dataTables.min.jsjquery.dataTables.min.cssjquery1.8.3.js一、静态Html<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%...原创 2019-05-07 21:14:48 · 161 阅读 · 0 评论