草庐IT

JQ 实现对比两个文本的差异并高亮显示差异部分

利用jq对比两段文本的差异,差异的内容用不同颜色表示出来。在线参考demo:http://incaseofstairs.com/jsdiff/项目地址:https://github.com/kpdecker/jsdiff先上效果图:  左侧第一列是原稿,第二列是需要对比稿,第三列是对比后的结果。红色文字删除线表示对比稿相对原稿缺少的文字,绿色下划线文字表示对比稿相对原稿新增的文字。同时支持三种方式:Chars,以字符显示差异;Words,以整句或段显示对比差异;Lines以行显示差异。 html源码:DOCTYPEhtml>html>head>metacharset="utf-8">title

JS实现瀑布流页面布局

个人对瀑布流布局理解:每列的宽度相等而高度不等,且第二行的第一个容器需要放在第一行高度最小的容器下面,依次类推放置。附上代码:代码仅实现了瀑布流的布局方式和resize监听,如果大家有需要,可以自己拓展下:实现监听滚动事件,页面滚动加载图片的功能。代码中写了详细注释,可以直接使用。DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8"/>metahttp-equiv="X-UA-Compatible"content="IE=edge"/>metaname="viewport"content="width=device-width,initial-s

JS实现瀑布流页面布局

个人对瀑布流布局理解:每列的宽度相等而高度不等,且第二行的第一个容器需要放在第一行高度最小的容器下面,依次类推放置。附上代码:代码仅实现了瀑布流的布局方式和resize监听,如果大家有需要,可以自己拓展下:实现监听滚动事件,页面滚动加载图片的功能。代码中写了详细注释,可以直接使用。DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8"/>metahttp-equiv="X-UA-Compatible"content="IE=edge"/>metaname="viewport"content="width=device-width,initial-s

不用Blazor WebAssembly,开发在浏览器端编译和运行C#代码的网站

本文中,我将会为大家分享一个如何用.NET技术开发“在浏览器端编译和运行C#代码的工具”,核心的技术就是用C#编写不依赖于Blazor框架的WebAssembly以及Roslyn技术。一、为什么要开发这样的工具?对于编程初学者来讲,开发环境的安装配置是一个令人头疼的事情,如果能让初学者不用做任何的安装配置,直接打开浏览器就能编写、运行代码,那么这将会大大降低编程初学者的学习门槛。目前已经有一些可以在线编写、运行C#代码的网站了,这些网站的实现思路有如下两种:思路1:把代码从前端提交到在后端服务器上,然后在服务器上进行编译、运行,然后把运行结果再显示到前端。这样做的缺点是无法完成复杂的输入输出、

不用Blazor WebAssembly,开发在浏览器端编译和运行C#代码的网站

本文中,我将会为大家分享一个如何用.NET技术开发“在浏览器端编译和运行C#代码的工具”,核心的技术就是用C#编写不依赖于Blazor框架的WebAssembly以及Roslyn技术。一、为什么要开发这样的工具?对于编程初学者来讲,开发环境的安装配置是一个令人头疼的事情,如果能让初学者不用做任何的安装配置,直接打开浏览器就能编写、运行代码,那么这将会大大降低编程初学者的学习门槛。目前已经有一些可以在线编写、运行C#代码的网站了,这些网站的实现思路有如下两种:思路1:把代码从前端提交到在后端服务器上,然后在服务器上进行编译、运行,然后把运行结果再显示到前端。这样做的缺点是无法完成复杂的输入输出、

Vue的基础知识

作为后端程序员,了解和掌握一些前端知识也是必不可少的,本章就和大家分享Vue的一些基础知识,希望能够对Vue小白有所帮助。话不多说,下面我们直接进入主题。一、Vue简介Vue简介:1、JavaScript框架;2、简化Dom操作;3、响应式的数据驱动(页面是由数据来生成的,当数据改变以后页面会同步的更新)DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8">metahttp-equiv="X-UA-Compatible"content="IE=edge">metaname="viewport"content="width=device-width

基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理

在早期的随笔就介绍过,把常规页面的内容拆分为几个不同的组件,如普通的页面,包括列表查询、详细资料查看、新增资料、编辑资料、导入资料等页面场景,这些内容相对比较独立,而有一定的代码量,本篇随笔介绍基于Vue3+Typescript+Setup语法方式,来拆分页面模块内容为组件,实现分而治之的处理。1、页面模块组件的划分我们先来了解下常规页面的内容的整体界面布局,它包含常规的列表界面,新增、编辑、查看、导入等界面,除了列表页面,其他内容以弹出层对话框的方式进行处理,如下界面示意图所示。这些页面也可以放在一个大页面里面进行处理,逻辑代码也可以整合一起进行管理,大致的页面布局如下所示。我们看到,如果这

Vue的基础知识

作为后端程序员,了解和掌握一些前端知识也是必不可少的,本章就和大家分享Vue的一些基础知识,希望能够对Vue小白有所帮助。话不多说,下面我们直接进入主题。一、Vue简介Vue简介:1、JavaScript框架;2、简化Dom操作;3、响应式的数据驱动(页面是由数据来生成的,当数据改变以后页面会同步的更新)DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8">metahttp-equiv="X-UA-Compatible"content="IE=edge">metaname="viewport"content="width=device-width

基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理

在早期的随笔就介绍过,把常规页面的内容拆分为几个不同的组件,如普通的页面,包括列表查询、详细资料查看、新增资料、编辑资料、导入资料等页面场景,这些内容相对比较独立,而有一定的代码量,本篇随笔介绍基于Vue3+Typescript+Setup语法方式,来拆分页面模块内容为组件,实现分而治之的处理。1、页面模块组件的划分我们先来了解下常规页面的内容的整体界面布局,它包含常规的列表界面,新增、编辑、查看、导入等界面,除了列表页面,其他内容以弹出层对话框的方式进行处理,如下界面示意图所示。这些页面也可以放在一个大页面里面进行处理,逻辑代码也可以整合一起进行管理,大致的页面布局如下所示。我们看到,如果这

前后端分离项目(十):实现"改"功能(前后端)

好家伙,本篇介绍如何实现"改"我们先来看看效果吧 (这可不是假数据哟,这是真数据哟) (忘记录鼠标了,这里是点了一下刷新) FirstOfAll 我们依旧先来理一下思路:首先在"管理"页面中,我能看到所有的书本信息,随后,在每一个信息后都有对应的"修改按钮"当我点击这个按钮时,我要①拿到这个这条数据的id($router传参)然后②跳转到"信息修改界面",(这个界面会像书本添加的那个界面一样,有两个输入框,一个提交按钮,一个重置按钮)这时,我向后端③请求到当前这条"id"的相关数据(举例:{id:1,name:三体1,auther:刘慈欣})将它展示到"信息修改界面"的输入框中,随后,你可以将