前端
关注
分享
扫一扫
江夏、
关注微信公众号：1024笔记；可免费领取海量学习资源和资料
展开
-
Springboot+Vue整合笔记【超详细】
| 作者：江夏| 微信公众号：1024笔记| 知乎：https://www.zhihu.com/people/qing-ni-chi-you-zi-96| GitHub：https://github.com/JiangXia-1024?tab=repositoriesPart 1目前很多公司的开发模式都是前后的分离的分工模式，这样能够做到各司其职，提高开发的效率。之前也有文章介绍了springboot项目和vue创建一个简单的前端项目，这篇文章则是将springboot和vue进行简单的整合，实现原创 2020-12-05 16:59:02 · 11286 阅读 · 4 评论 -
＜input＞ 标签的 accept 属性
在项目中有些时候需要进行文件的上传，这时候在前端页面可以使用 标签的 accept 属性，定义和用法accept 属性只能与 配合使用。它规定能够通过文件上传进行提交的文件类型。<input accept="value">比如：输入字段可以接受 gif和 jpeg 两种图像<form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /></form>原创 2020-10-18 20:05:49 · 1215 阅读 · 0 评论 -
jquery遍历table中每个td的值
最近有个需求，需要对一个table在特定情况下修改第几个td的样式，这里需要使用到jquery选择器了，我的写法是，这里改为直接隐藏元素了： $('.divdemo>table tr').each(function(){ //每个tr下的第4个th $(this).find('th:eq(3)').hide(); $(this).find原创 2020-10-16 16:29:16 · 1270 阅读 · 0 评论 -
使用jquery给a标签加上或去掉下划线
记录下如何个a标签地址加上下划线和取消下划线$("a").css("text-decoration", "none"); //去掉下划线$("a").css("text-decoration", "underline"); //加上下划线原创 2020-10-16 16:21:19 · 1844 阅读 · 0 评论 -
js判断浏览器类型是pc端还是手机端进行样式自适应
最近公司有个页面需要做pc端和手机端的页面自适应，即手机打开是指定的样式，pc打开则是pc指定的样式，样式是前端ui已经设计好了的。所以这里需要通过Navigator userAgent 属性判断浏览器的类型。userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。比如：edge浏览器chrome浏览器：所以只需要写一个函数function isComputerOrPhone() { var sUserAgent = navigator.原创 2020-09-13 21:09:01 · 1256 阅读 · 0 评论 -
Vue学习笔记(一)：从零开始创建一个Vue前端项目
一、开篇最近公司的老的项目重构，改成了前后端分离的架构，前端采用的是vue.js前端框架，所以接触到vue.js。Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库，它是以数据驱动和组件化的思想构建的。相较于其他的前端框架，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用。Vue.js不同于以前的jQuery操作DOM，因为Vue.js是数据驱动的，所以无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起原创 2020-09-02 20:04:10 · 10226 阅读 · 2 评论 -
jQuery：选择器使用详解
1都说不会前端的测试不是一个好的后端开发。最近维护一个老的项目，其中的前端代码使用到了JQuery，由于自己以前对前端的了解并不是很多，没有系统的学习，都是遇到了问题才学习一下， 所以这次对Jquery进行了一次学习。jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，能够大大提高开发效率。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。而使用jQuery较多的就是进行DOM操作，其中就涉及到了选择器的使用。所以这篇文章就整理一下，JQ原创 2020-08-25 22:35:55 · 1185 阅读 · 0 评论 -
Postman接口测试图文教程
**Part 1**现在很多公司的项目都使用前后端分离的开发模式，这样不仅仅能提高开发效率，还能方便维护。在进行前后端分离开发时，后端的开发人员完成系统接口开发后，需要与前端人员对接，测试调试接口，验证接口的正确性可用性，这就需要前后端的开发人员的开发进度保持一致，但是就算是这样也提高了测试的难度，不利于及时完成功能模块的测试。所以后端开发人员，在独立开发完成某个接口后，需要自己先进行测试，这样不仅能提高开发的效率，而且还能减少送测时的bug。我们都知道前后端分离的开发模式就是前端页面的某个功能调用后原创 2020-08-01 21:19:57 · 18935 阅读 · 10 评论 -
几种常见跨域解决方案
一、同源策略现在很多的项目开发，都实现了前后端分离开发，能够大大提高效率，但是导致前端向后端发送请求，会出现跨域错误。先说说什么是跨域当访问一个网站时，一个完整的域名由传输协议、网络名、域名主体和域名后缀四个部分组成，如下图所示：相同后缀的域名主体是不能重复。http://www.baidu.com和http://www.google.cn就是两个不同的域。跨域就是在当前域去访问其他域的资源。就比如我们在自己的机器上通过ajax去调用百度地图提供的API接口数据，这就是跨域请求。<!DOCT原创 2020-05-12 16:42:17 · 1518 阅读 · 0 评论 -
修改Button中字体的颜色
修改button中字体的颜色需要用到ForeColor。background和ForeColor一个是背景色，一个是前景色；背景色即指的是背景的顔色；而前景色指的就是背景前面的物体的顔色，一般指文本的颜色。他们两的关系就好比拍照：后面幕布的颜色即背景色，而拍照的你就是前景色。实例设置背景为红色，字体为蓝色的按钮：<input type="button" id="Button1" ...原创 2020-03-16 16:38:42 · 15366 阅读 · 0 评论 -
jQuery获得内容和属性
jquery通过id和attr方法获取a标签的href属性的地址，并实现跳转：<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ ...原创 2020-03-10 21:46:03 · 158 阅读 · 0 评论 -
JavaScript打开新页面的两种方式：当前页面打开和新页面跳转
在前台开发中会涉及页面跳转的问题，页面跳转有两种：一种是当前页面打开新的页面，一种是新的标签页跳转到新的页面。1、跳转到新页面打开页面：window.open('http://www.baidu.com','_blank');2、当前页面打开新的地址：window.open('http://www.baidu.com','_self');如果在a标签中进行跳转那么就是用到了targe...原创 2020-03-10 16:04:56 · 7443 阅读 · 1 评论 -
jquery 控制 select下拉框option的文字显示，超过一定长度用...代替显示
select 下拉框的值有时候如果文字过长会是的select 下拉框被拉长，所以需要控制select下的option文字的显示，实现当文字过长时用省略号代替超出部分的文字，鼠标移上去会显示实际的值 $(document).ready(function () { for (var i = 0; i < $("#select option").length;...原创 2019-12-13 15:47:29 · 3556 阅读 · 3 评论 -
SpringBoot入门：SpringBoot整合Freemarker和Thymeleaf模板
1、创建springboot项目关于springboot项目的创建可以看下面这篇文章，这里不进行叙述。SpringBoot入门：使用IDEA和Eclipse构建第一个SpringBoot项目2、Freemarker模板首先在pom文件中引入freemarker的依赖，代码如下：<!-- Spring Boot Freemarker 依赖 --> <dependenc...原创 2019-10-28 17:33:45 · 324 阅读 · 0 评论 -
vue实例的生命周期
一、Vue实例的生命周期官网上有张图详细的讲解了Vue实例的完整生命周期，如下：Vue实例的生命周期函数主要可以分为三个部分：创建期间、运行期间以及销毁期间的生命周期函数创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods属性created：实例已经在内存中创建OK，此时 data 和 methods 已经创建O...原创 2019-10-22 15:47:42 · 238 阅读 · 0 评论 -
Vue.js中时间的格式化
在Vue.js中并没有对于时间的格式化方法。比如，新建一个Vue文件，然后在页面输出当前时间。<template> <p>{{shijian}}</p></template><script>export default { name:"shijian", data() { return ...原创 2019-10-18 18:02:22 · 2718 阅读 · 0 评论 -
Vue.Js过滤器的简单使用
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：{{ message | filter}}接下来通过一个具体是示例，分析Vue.Js中过滤器的简单使用，在component文件夹下新建一个vue.js文件，具体代码如下：<template> <div class = "Demo1"> &l...原创 2019-10-17 18:04:53 · 451 阅读 · 0 评论 -
jquery控制td的内容长度，显示8个字，多出的文字用……表示，鼠标移上去展示全部备注内容。
想实现一个功能，一个table中有N行数据来源于数据库，然后每个columns中的数据字数字显示一部分，比如只显示8个字符，多余的字符用...代替，当鼠标移上去的时候能够显示全部数据。就像百度的实时热点一样。点进去能显示完整的标题// //控制导出内容备注的显示 $(document).ready(function(){ var rows =...原创 2019-09-24 21:41:41 · 897 阅读 · 0 评论 -
js限制input的输入字符的长度，区分中英文
在一个项目中，需要在input输入框中添加placeholder属性，并且限制输入框的字符长度，最大长度为中文25个，英文50个字符，一般的如果不区分中英文则直接添加maxlength属性，然后赋值最大的长度即可，但并不区分中英文字符的长度，于是想着通过js代码来控制placeholder提示语的显示和隐藏以及输入框输入字符长度的限制，区分中英文。//jquery控制placeholder...原创 2019-09-23 10:40:23 · 5002 阅读 · 0 评论 -
C#中如何将后台的变量的值传到前台页面
比如我这里声明一个label，想获取后台的变量的值，然后动态的显示到前端<font face="宋体">当前记录有:</font><Label ID="result" ForeColor="Red"></Label><font face="宋体"> 条</font>然后在后台声明一个全局变量：比如public ...原创 2019-09-19 18:12:05 · 5440 阅读 · 5 评论 -
jquery获取父级元素、同级元素以及子元素的方法
有文件的结构如下： <div class="level-1"> <tr class="tr1"> <td class="td1">1</td> <td class="td2">2</td> <td class="td3">3</td> <td...原创 2019-09-12 18:32:46 · 2242 阅读 · 0 评论 -
Js中Promise用法
promise是用来解决Js中的异步问题的。基本结构如下： function a() { return new Promise((resolve, reject) => { //dosomething resolve() }} 前提是要通过新建一个Promise的对象，然后传参一个函数（resolve,reject）=&...原创 2019-09-12 17:41:07 · 1038 阅读 · 0 评论 -
页面自动加载js的方法
一、前言 公司有个项目里面有搜索功，根据多个搜索框的条件来进行搜索，产品提了个需求，需要对其中的一个搜索框加一个提示，比如用红色字体，要求对该输入框的搜索字数不能超过5个字符，然后看了一圈，这个搜索项是一起封装写好的，通过输入的数据类型的不同来调用不同的搜索类型，这就导致如果我对该项修改的话，那么其他和这个一样类型的样式也会发生改变，所以想了个办法，如果能够在页面一加载的时候我就...原创 2019-09-12 10:22:20 · 1126 阅读 · 0 评论 -
label设置宽度无效的原因以及处理方式【内联元素和块级元素总结】
今天在写前端代码的时候给label标签设置宽度，代码如下<label class="label" style="color: red;width: 200px ;height: 20px;line-height: 20px;text-align: center;border-radius: 10px; font-size: 12px;"></label> 结果在前...原创 2019-09-11 18:26:27 · 4510 阅读 · 0 评论 -
Jquery对checkbox搜索的实现
checkbox 和 label组成的选项由于checkbox和label是两个单独的元素，所以在对其进行搜索得时候，样式会出现一些问题，比如将lable的值和输入框输入的值做比较，如果label中存在input输入的元素则显示label和checkbox常用的做法则不存在的label会被隐藏但checkbox还是会显示，而且由于td和tr样式的要求，会出现断层，不联系显示。所以对此的处理办法如...原创 2019-09-11 18:11:47 · 750 阅读 · 0 评论 -
Jquery对前端页面进行排序
有这样一个需求，一个select元素，每个option代表一中排序方式，通过选择不同的option对前端的页面进行重新排序显示，代码如下，注释在代码里写的很详细： //对前端页面进行排序 //通过juqery每次改变select的option来触发事件，live使得事件能够多次触发，直接change会 导致触发一次就不能再点击 $(".opt").liv...原创 2019-09-11 16:09:44 · 1353 阅读 · 0 评论 -
通过js获得input文本框输入的值
如何通过js获得input文本框输入的值。前言我们编写的被载入浏览器的HTML页面都是一个 Document 对象。对于Document对象可以使我们通过代码(比如javascript)对HTML页面中的所有元素进行访问。比如div标签元素、span元素、input元素等等。Document对象具有以下的属性：Body：提供对 <body> 元素的直接访问。对于定义了...原创 2019-08-30 11:59:10 · 27720 阅读 · 1 评论 -
如何在vue项目中引入使用bootstrap前端框架并实现模糊搜索【图文步骤+效果详解】
一.引言 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。在Vue项目中引用Bootstrap可以快速的构建出良好的前端样式，比使用Vue的Element—UI和CSS手写样式来的快捷美观的多。接下来介绍如何在Vue项目中引入Bootstrap框架。二.步骤 Bootstrap框架使用的前提是基于jQuery的，所以我们想要在项目中引入jQu...原创 2019-08-20 23:53:59 · 1150 阅读 · 0 评论 -
Vue-devtools安装及使用
在vue开发过程中使用vue-devtools调试工具进行开发能够大大的方便我们的开发过程，但vue-devtools开发插件需要我们额外安装，一种是在线翻墙搜索安装chrome插件，前提是能够翻墙的，这里针对不能翻墙的提供一种离线安装方式，即找vue-devtools工具资源，我这里在我的资源里面上传了一份，有需要的可以下载，下载下来解压后按照以下方式进行安装安装好了以后就可以在菜单...原创 2019-08-14 18:05:44 · 331 阅读 · 0 评论 -
setinterval方法和clearInterval方法实现跑马灯效果
今天在学习前端的时候看到了setinterval函数，写了一个小的Demo来练练手，祝祖国母亲70周年生日快乐！下面是代码，注释和分析在代码里<template> <div id="Demo3"> <button @click="run">滚动</button> <button @click="st...原创 2019-08-07 14:54:22 · 652 阅读 · 0 评论 -
Vue中用CSS翻转动画的实现
今天女朋友给我提了个需求，一张图片实现鼠标滑过翻转到背面是介绍图片的内容，代码如下<template> <div class="Demo"> <div class="Before" ></div> <div class="After" style="font-size:20px;color:black">这个是...原创 2019-08-06 16:47:07 · 3594 阅读 · 0 评论 -
Vue ESLint检测问题的解决办法
在创建vue项目的时候,有些时候会一不注意就把ESLint 检测勾上了，虽然对编码规范很好，但其中的痛苦可能只有经历过得人才懂，如果勾选上了可以按照下面的步骤 去除ESLint检测，在build文件夹下找到webpack.base.conf.js文件，将creatLintingRule方法下面的代码注释掉即可。 或者后面在创建Vue项目的时候在Use ESLint to lint yo...原创 2019-08-05 17:21:45 · 1041 阅读 · 0 评论 -
安装vue-cli 脚手架
开发vue项目的时候一般是通过vue-cli脚手架进行开发。之所以成为脚手架就是因为他通过webpack搭建的开发环境直接生成开发所需要的基本模板，我们只需要在模板中进行开发即可。接下啦详细记录下在自己的电脑上安装vue-cli脚手架的步骤以及问题。一.前提安装vue-cli首先需要在自己的电脑上安装node.js环境，可以通过node -v命令来查看自己的电脑是否安装了node.js。如...原创 2019-07-31 16:21:39 · 317 阅读 · 0 评论 -
Vue.js的事件(单双击、鼠标和键盘)以及阻止事件冒泡
自己随便琢磨了一个小的Demo，实现了一些事件和阻止事件冒泡，具体的代码如下，注释在代码里html文件<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"></meta> <title>VueDemo</title> <li...原创 2019-07-30 16:01:56 · 3995 阅读 · 0 评论 -
Vue的数据绑定
Vue简单的数据绑定，就是在根容器中添加一个标签，然后用{{}}中引入具体的数据名这里主要讲利用v-bind进行属性的绑定。在app.js的data中添加site。 注意这里的地址一定要加http，不然后面跳转的时候回出现找不到文件，如下在html文件中引入一个a标签，标签中引入site，如果不添加v-bind，直接类似上面的name进行绑定的话，...原创 2019-07-30 10:59:56 · 228 阅读 · 0 评论 -
Vue的方法的调用以及传参
前面讲到了如何用CDN的方式引入vue.js。在Vue中方法(methods)和data属于同一量级的属性，所以在Vue中有methods模块，对于方法的定义都定义在这个区域内。如下，在methos内定义一个say的方法，返回，他说要好好学习同样在html的根容器的标签下，引入say方法，同data中name的调用，因为say是个方法，方法后面应该加(),如下：用浏览器打开inde...原创 2019-07-30 09:58:34 · 17030 阅读 · 2 评论 -
使用CDN方法的方式进行Vue.js的安装
最近公司需要进行一些前端的开发工作用到了Vue前端框架，所以准备自学Vue，顺便几下学习的过程以及一些问题。使用Vue框架的话，首先需要在自己的电脑上安装Vue.js。安装Vue.js有两种方式，一种是直接下载进行独立安装，另一种则是是用CDN的方式。独立版本的话，可以直接去在Vue.js的官网直接下载 vue.min.js 并在用<script>标签中引入即可，比较简单，这...原创 2019-07-29 17:42:00 · 6290 阅读 · 0 评论