暂时未有相关云产品技术能力~
暂无个人介绍
我们先来说说CSR CSR的英文全称是Client-Side Rendering 是一种客户端渲染的模式,常见于**传统的前后端分离**的开发模式,渲染的工作交给客户端,而服务端只需要返回不加工的简单的HTML文件就可以。 这种模式常见于B端应用的开发。比如用一些工程化脚手架开发的SPA(single page web application)单页面应用就是这样的,与后台仅仅是数据的交互,不会再请求其它页面。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。典型的单页面的开发框架包括我们常见的React,Vue2
# 引言 最近设计了一些图节点的渲染,比如后端使用neo4j存储了很多图形化的数据,然后传来给前端要求渲染,那么我们该如何以图形的方式来渲染出来,并提供一个友好的交互功能呢?经过我的一番bing,发现了一个很好的渲染引擎----Antv G6 # 介绍 > [G6](https://github.com/antvis/g6) 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。 效果如下:且节点等可自定义或是拖拽等操作。 ![image.png](https://ucc.alicdn.co
# 引言 好多小伙伴的css命名上比较头疼,今天我们来一起学习一下bem规范,并在Vue3项目中封装个函数用于返回bem规范的命名。 # 什么是bem bem是block element modifier的缩写,b对应block(块),e对应element(元素),m对应modifier(修饰符)。 bem是由Yandex团队提出的一种前端命名**css**的命名规范。 > - -中划线,作为连字符使用,用于某个块或者某个子元素的多单词间的连接记号。 > - __ 双下划线:用于连接块和块之间的子元素。 > - _ 单下划线 :用来描述一个块或者块的子元素的一种状态。 # demo
# 引言 大家应该都接触过markdown笔记吧,我们常常见到很多能写文章的网页提供了一个实时的markdown解析的功能----即我们在一侧写下markdown语法,右边能够实时解析,并将解析后的markdown语法渲染到右侧页面上。非常炫酷实用,那么这是如何实现的呢?今天我们来一起探究一下。 # 开始 首先,我们这个演示学习在Vue3+TypeScript下使用的,所以我们预先建议准备一个Vue3+Typescript工程。 对于markdown的解析,我们可以使用`markdown-it`来进行解析。 比如,我们在左侧设置一个输入框,接收用户markdown输入,我们通过`ma
继上一篇文章([nuxt3目录及使用 - 掘金 (juejin.cn)](https://juejin.cn/post/7199265829954715685))之后,我们继续学习Nuxt的相关使用。 # layouts 这次我们先引入一个layouts目录,这个目录是做什么的呢?我们在下面的使用中说清楚。 我们先在根目录下新建一个`layouts`目录,然后我们在`layouts`目录下新建一个`layout1.vue`文件,然后我们开始使用一下神奇的`layouts`。 内容如下: ``` <template> <header> <h1>
# nuxt3 Nuxt 3 是一个开源框架,可以自动整合了很多东西,另外,nuxt3还是Vue3的同构ssr渲染的使用方案。csr,ssr,srg三种渲染方案三种渲染模式可以参考我的[都2023年了,还在用传统的前后端分离?来学习一下CSR,SSR与SRG吧!!! - 掘金 (juejin.cn)](https://juejin.cn/post/7195551013033164855 "https://juejin.cn/post/7195551013033164855")这篇文章。 今天我们来具体使用一下Nuxt,来体验一下这非常神奇的Nuxt开发。 # 初始化项目 我们的host
今天带大家使用nuxt3+vant3搭建一个项目。 # nuxt3 Nuxt 3 是一个开源框架,可以自动整合了很多东西,另外,nuxt3还是Vue3的同构ssr渲染的使用方案。csr,ssr,srg三种渲染方案三种渲染模式可以参考我的[都2023年了,还在用传统的前后端分离?来学习一下CSR,SSR与SRG吧!!! - 掘金 (juejin.cn)](https://juejin.cn/post/7195551013033164855 "https://juejin.cn/post/7195551013033164855")这篇文章。 ## nuxt3初始化 在初始化nuxt项目之前
# 引言 前面文章我介绍了CSR,SSR和SRG的渲染模式。三种渲染模式可以参考我的[都2023年了,还在用传统的前后端分离?来学习一下CSR,SSR与SRG吧!!! - 掘金 (juejin.cn)](https://juejin.cn/post/7195551013033164855) 今天先带来的是Vue的同构SSR的渲染答案-----`nuxt.js` # nuxt的初始化 在初始化nuxt项目之前,我曾想,不就是创建个项目吗?简单,直接终端开搞。然后就报错了,第一时间我以为我可能没开代理,果断科学上网,但是还是无法成功初始化nuxt项目。 纳尼? 上网百度了一番之后,终于
# 引言 今天和大家一起学习一下开发一个脚手架工具,作为我们初始化项目使用,因为我们组件库开发已经接近尾声了,接下来我们想除了正常通过npm下载引入配置之余,能提供一种更方便的模板初始化的途径,现在就让我们一起学习一下如何开发一个脚手架工具吧。 # 初始化 首先我们初始化一个node项目,创建一个空文件夹,然后我们打开终端控制台,输入如下内容`npm init -y`。初始化一个`package.json`文件,我们默认初始化的文件是这样的: ``` { "name": "demo-cli", "version": "1.0.0", "description": "",
# vue-cli 的简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: <ul><li>通过 <code>@vue/cli</code> 实现的交互式的项目脚手架。</li><li>通过 <code>@vue/cli</code> + <code>@vue/cli-service-global</code> 实现的零配置原型开发。</li><li>一个运行时依赖 (<code>@vue/cli-service</code>),该依赖: <ul><li>可升级;</li><li>基于 webpack 构建,并带有合理的默认配置;</li><li>可以通过项目内的
# 引言 不知不觉,我们的文章生成器已经迎来了终章,这是网页版狗屁不通文章生成器的终章,也是本系列的最后一章。接下来我就带着大家完成最后这一部分的学习。 # 项目结构 项目目录如下 ![image.png](https://ucc.alicdn.com/pic/developer-ecology/y3obldvnqeb54_63ca3afcfe4d4491ad90c23e73c0f2e1.png) 上面就是项目的目录,分别是lib文件夹,node_modules目录,resources文件夹,axios文件夹,router文件夹,和router_handle目录。 # lib目
# 引言 经过前面六章的学习,我们已经有了很多知识的储备,本次我们来制作文章生成器的前端部分。 # 数据的传递 接下来这里我们的传递方式主要通过form表单和axios两种方式来传递数据。 ## 传统的form表单传递 传统的form表单传递方式首先通过`<form></form>`标签来完成。 ### 传统的form表单传递---练习测试 我们建立 csss.html和csss.js文件夹 csss.html代码如下: ``` <!DOCTYPE html> <html> <head> <title>xx</title> </head>
# 引言 前面我们已经学完了基于express框架下服务器的启动,get请求的接收与处理还有post请求的接收与处理。同时我们使用接口测试工具完成了接口的测试,响应值和接受值返回值都是正常的。那么为什么还有这一章节呢? # 问题的提出 原来我们之前对于get请求和Post请求的接受与处理,虽然可以实现其功能,但是整体代码都是写在一个js文件中的,这就导致我们js文件很臃肿,很难看,维护和开发成本都会大大的提高。 那么我们有没有一种方法,让我们的代码工整性和复用性都大大提高呢? # 解决的思路 我的解决方案是:抽成模块,进行模块化开发。 # 实例 还是拿我们之前的cs.js作为讲解。
# 引言 这次我们来做网页版文章生成器,首先我们学习一些node.js开发服务器的入门知识。 # 框架的使用与导入 因为node原生开发服务器较麻烦,这里我们采用express框架来开发。 首先我们调出控制台,在控制台中输入 npm i express 然后等待一会儿,我们下载完express之后,通过 import express from 'express';导入 express 模块。 因为我们本项目采取的ES Moudle模块,所以这里我们使用import完成导入。 接下来通过定义app完成初始化 `const app = express();` 之后调用 app中的
> 持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,[点击查看活动详情](https://juejin.cn/post/7147654075599978532 "https://juejin.cn/post/7147654075599978532") # 引言 通过前面的学习,随机句子的选取,段落的生成,文章的生成,我们都已经学会了。接下来我们本次来学习控制台版的狗屁不通文章生成器。 # readline模块的学习与尝试 接下来我们来学习并练习使用readline模块。readline模块是node7之后便开始提供的模块。 接下来我们来详细说说这个模块 #
# 引言 前面我们已经学会了随机抽取语料库,接下来我们来真正意义上的合成句子。 # 生成废话的样子 ![image.png](https://ucc.alicdn.com/pic/developer-ecology/y3obldvnqeb54_0f21b20ff7d8408e8a8743b2911e6076.png) 大概是这样 但是前面我们提取到的data是带有一定占位符的,首先我们就要完成占位符的替换。 # 占位符的替换 接下来我们来做占位符的替换,我们定义一个sentence的函数,然后传入两个参数,pick和replacer,其中,pick函数分为pickFamous,pi
前面已经初始化了项目,同时完成了ES Modules的配置。接下来我们开始正式进入代码层面的学习。 # 语料库 首先在article目录下建立 resources 目录 ,在resources下建立一个data.json的json文件。我们这个demo的核心就是通过随机取一些语料库的文字来组成一篇文章。 data.json如下: ``` { "title": [ ], "famous":[ "爱迪生{{said}},天才是百分之一的勤奋加百分之九十九的汗水。{{conclude}}", "查尔斯·史{{said}}
# 引言 今天带来的是狗屁不通文章生成器第一部分,即输入一个文章题目,和相应的字数,便自动生成一篇对应字数的文章。 ![image.png](https://ucc.alicdn.com/pic/developer-ecology/y3obldvnqeb54_1ef6d9d62323412f9e4edef8737f9f10.png) 如上图 那么这么好玩的文章生成器是怎么制作的,接下来带大家制作这个文章生成器 # 准备 首先创建一个文件夹article,然后切换到article目录下,调出cmd,执行如下代码完成项目的初始化 `npm init -y` 它会在项目目录下生成一个 pac
> 持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第29天,[点击查看活动详情](https://juejin.cn/post/7147654075599978532 "https://juejin.cn/post/7147654075599978532") # 引言 今天我们继续学习NEO4J. # 创建 创建语句我们一般会使用create指令 我们首先在控制台上输入`neo4j.bat console`启动neo4j 然后打开你的浏览器,然后在浏览器地址栏中输入 `http://localhost:7687 - Neo4j Browser](http:
在JavaScript中,我们很常见的是需要掌握**过程抽象**的思想。对于过程抽象,是函数式编程思想的应用。而 **高阶函数(HOF)** 便是过程抽象的体现之一。 接下来我们就来一起学习一下常见的高阶函数。 # Once 在一些场景下,我们可能会遇到这样的需求,我们做了一个报名页面,然后需要用户提交报名成功的个人信息,但是用户可能会因为手抖,或者是一些网络的卡顿之类的原因,造成了用户在短时间内大量点击提交按钮,这时候可能会突然出现很多用户提交的相同的信息,为了避免这种情况,我们可以在前端做出一定的优化。 我们可以利用这样的高阶函数来完成优化: ``` function once
# 引言 今天带来通过springboot来操作neo4j的教程。 # pom.xml的依赖 ``` <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.
# 引言 Spring Security是一个功能强大的安全框架,旨在为Java应用程序提供身份验证和授权功能。它可以很容易地整合到Spring应用程序中,并支持多种身份验证方法,包括基于表单的身份验证、基于HTTP的身份验证以及基于OAuth 2.0的身份验证。 # 依赖 ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> ``` # 第一个例子 要在Spring应用
# 简介 SpringBoot是Pivotal团队提供的全新框架,其设计目的来简化Spring应用的初始搭建以及开发过程。 ## 对比之前的框架 笔者之前也学习应用过很多框架,包括Spring,SpringMVC,MyBatis等等....... 拿SpringMVC来举例,在SpingMVC中配置了处理请求的时候,会遇到静态资源无法访问的问题,这是因为我们对于getSeverletMappings中的设置是控制所有的路由,那么这问题就来了,我们对于访问静态资源这个事情,并不会经手Tomcat,而是经过SpringMVC,他会直接拦截我们的请求,而拦截后springMVC会发现我们并没
# 引言 今天给大家带来第二篇爬虫的文章,主要给大家从爬虫的伪装,数据乱码和视频的爬取三个方面来学习python爬虫 # 爬虫的伪装 这里分别从### **浏览器伪装** **访问地址伪装** **3.ip地址伪装** **4.控制访问速率** **5.伪装用户cookie** **6.被拒绝连接的处理** 六个方面来讲解爬虫的伪装 ## **浏览器伪装** 默认的爬虫是形如Python-[urllib](https://so.csdn.net/so/search?q=urllib&spm=1001.2101.3001.7020)/2.1的形式的,很多网站可能会在校验
> 持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第12天,[点击查看活动详情](https://juejin.cn/post/7147654075599978532 "https://juejin.cn/post/7147654075599978532") # 引言 在 vue-cli组件化开发中,有时候注册使用的组件会渲染到index.html中指定的div区域中,这就导致了样式间可能会因重名或等等原因发生**样式冲突** 接下来我们简单回顾一下组件开发及样式冲突问题。 ## 组件化开发中的样式冲突 我们初始化了一个vue-cli 项目,并在compone
# 引言 在实际开发中,我们为了提高页面的响应速度,也为了优化用户的体验,同时也减少流量和性能的消耗,往往在面对大量数据时会采取分页的操作。 接下来这篇文章我带大家从原生的SQL语句中的分页到MyBatis中去分页,最后我们再看一下MyBatis-plus下的分页操作。 # MySQL的分页(分页在SQL层面的原理) MySQL 分页操作可以使用 `LIMIT` 和 `OFFSET` 子句来实现。 例如,如果想从一个 `users` 表中选择第二页(每页显示 10 条记录)的数据,可以使用以下查询: ``` SELECT * FROM users LIMIT 10 OFFSET
# 引言 今天这篇文章我们来聊一聊cookie,session和token三者的区别和使用场景。 # 区别与使用场景 Cookie、Session 和 Token 是用来在客户端和服务器之间传递信息的三种常见技术。它们的主要区别在于它们的生命周期、位置和安全性。 Cookie 是服务器发送到浏览器的小文本文件,浏览器会在下次访问同一个网站时发送此文件。Cookie 通常用于跟踪用户的浏览器历史记录,例如购物车内的商品或登录状态。Cookie 的生命周期通常是有限的,它可以在浏览器关闭后失效,也可以设置过期时间。 Session 是服务器端的数据结构,用于在客户端和服务器之间存储信息。
# 规则生效问题 ## 优先级 特异度的值来决定的 ### 选择器的特异度 Sqecificity id (伪)类 标签 #id .class tag 百 十 个 # 继承 某些属性会自动继承其父元素的计算值 除非显示的 指定一个值 文字相关的,颜色,字体 不给会继承 一些盒子模型 大小 不会继承 ## css可以和不可以继承的属性 不可继承的:display、margin、border、padding、background、height、min
Vue3中的jsx的简单体验,在vue3中使用jsx语法
这几天在封装组件库,今天和大家一起使用scss,学习一些scss的基础语法。 先来看一下scss的优势 SCSS (Sass) 有以下几个主要优势: - 可维护性:SCSS 允许使用变量、嵌套、混合、继承等特性,从而使样式表变得更加清晰、可读性增强。 - 更高效:SCSS 允许使用函数、循环等高级特性,使得样式定义更加高效。 - 更易扩展:SCSS 提供了组件化和模块化的技巧,可以更方便地扩展和维护代码。 - 更简单:SCSS 的语法比 CSS 更简洁易懂,允许编写更加简洁的样式表。 - 兼容性:SCSS 可以完全兼容 CSS,可以无缝地使用 再来看一下scss和其他对比 | | S
> 开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天,点击查看活动详情 今天继续学习React,这是一篇面向初学者的React文章,大佬可以划走了。 # 引言 历史上,React源于facebook,他对于超大型的项目的编写上,适应非常好。而且具有着非常非常强大的生态环境。React的设计思路就是响应式编程。 这样有以下几个优势。 - 状态更新,UI会自动更新 - 代码组件化,可复用性更强,可以封装,更方便。 - 状态之间的依赖关系,只需要声明即可。 # 初始化项目 我们可以使用`create-react-app`的方式快速创建一个Rea
# 引言 往往在开发中我们可能会遇到一些不平铺的,结构或是嵌套比较复杂的数组数据,那么我们面对这种数据的时候应该怎么优雅高效的处理他们的,今天让我们来学习一下使用flat()和flatMap来打平数组吧 # 使用flat()和flatMap来打平数组吧 今天我们来一起学习一下使用flat()和flatMap打平数组 在ES2019中,flat()方法用于创建并返回一个新数组,这个新数组包含于他调用flat()的数组相同的元素,只不过其中任何本身也是数组的元素会被打平填充到返回的数组中。例如: ``` [1,[2,3]].flat() //会变成[1,2,3] [1,[2,[3]]].
# 引言 我们在开发时,如果将 JavaScript 加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的 JavaScript 代码全都写在一个文件中,并加载到一个 `script` 标签中。尽管可以把 JavaScript 拆分为多个文件,但是所有的变量和函数仍然会被添加到全局作用域中。 由此我们需要使用第三方代码来完成常见任务,并且需要把代码分解为模块化的文件,避免污染全局命名空间。 ECMAScript 2015 规范在 JavaScript 语言中引入了 *module*,也有了 import 和 export 语句。 `import`和`eport`声明共同作用
关于前后端加密的一些了解和认识
基于C++来做一个多项式类的设计与实现
# 何时使用Redis,MySQL和MongoDB MongoDB,MySQL和Redis都是可用于存储和管理数据的数据库管理系统。这些系统中的每一个都有其独特的特性和功能,具体选择哪一种数据库,取决于具体需求的要求。 以下是何时使用这些数据库管理系统的一些一般准则: - MongoDB:MongoDB是一个NoSQL数据库系统,这意味着它旨在处理大量的非结构化数据。它特别适合存储不适合表的数据,例如具有嵌套结构的数据或经常更改的数据。MongoDB还以其水平可扩展性而闻名,这意味着它可以轻松处理大量数据而不会牺牲性能。 - MySQL:MySQL是一种流行的关系数据库管理系统。
# Pinia Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案 Pinia 支持 Vue2 和 Vue3。 # Pinia的优势 1.Pinia拥有完整的 typescript 的支持; 2. 无mutations,相比Vuex更简单,更容易上手。 3. 自动添加Pinia,无需创建store,简化开发。 4. actions对同步异步支持非常好。 5. 代码分割好,非常优雅便于维护。 # pinia的安装 `npm install pinia --save` # srore/index.ts 先看一下store/index.
# 引言 今天带大家学习一下vue-cli中的router(路由)部分。 ## 一点简介 ![image.png](https://ucc.alicdn.com/pic/developer-ecology/y3obldvnqeb54_01fd087ab3f348318f4e4b972a3a9a80.png) 上面这张图片这是vue-cli的官方简介,我们看到了vuecli的很多优点与优势。他作为一个开发的脚手架,大大减少了我们程序员的开发和准备,配置的工作量。 很多初学者所陌生的可能是vue-cli的一些开发,vuecli脚手架开发应用和传统的三件套开发有很多的不同之处,比如便捷
> 持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第21天,[点击查看活动详情](https://juejin.cn/post/7147654075599978532 "https://juejin.cn/post/7147654075599978532") # 引言 今天带来一篇SpringBoot整合MyBatis的文章 # SpringBoot的创建 我们采用Maven项目管理,接下来选择Spring Initializr,接下来我们选择版本这里我们选择java 8,因为本人是JDK 8,当然有高版本的也可以选择高版本的SpringBoot版本。 接下来
>持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第22天,[点击查看活动详情](https://juejin.cn/post/7147654075599978532 "https://juejin.cn/post/7147654075599978532") # 引言 今天带来一篇python的网络爬虫 # 网络爬虫的介绍 > 网络爬虫(又称为网页蜘蛛,[网络](https://baike.baidu.com/item/%E7%BD%91%E7%BB%9C/143243?fromModule=lemma_inlink)机器人,在[FOAF](https://bai
# canvas的介绍 在HTML5中` canvas `元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. `<canvas>` 标签只是图形容器,您必须使用脚本来绘制图形。 可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 # 鼠标事件 我们可以分别控制三个鼠标事件来控制绘画的状态 ## mouseup 这是绑定的鼠标抬起的事件,鼠标抬起后会触发 ## mousedown 这是绑定的鼠标摁下的事件,鼠标摁下后会触发 ## mousemove 这是绑定的鼠标移动的事件,鼠标移动时会触发 ## 一个小实验 ``` <!DOC
# 引言 不知不觉,之前的文章生成器已经迎来了终章,这是网页版狗屁不通文章生成器的终章,也是狗屁不通文章生成器系列的最后一章。所以我决定精心打磨一下最后的终章部分,今天的更文我就写一个springMVC的学习部分。正好今天练习项目的开发在一些springMVC方面也是卡了很久。 # springMVC的简介 Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架,本质上相当于 HttpServlet。一个Spring内置的MVC框架。与Spring有着很好的兼容。 而且SpringMVC比其他的很多 MVC 框架更具扩展性和灵活性。 # s
制作一个针对视觉的产品,快速调出想要的颜色,然后写在给前端程序员的文档里,方便前端程序员进行页面的配色处理[滑稽]
SpringDataRedis和之前介绍的Jedis一样都是Java的redis客户端 SpringData是Spring中数据擦欧总的模块,包括对各种数据库的集成 其中,Redis的集成模块就是SpringDataRedis 当然SpringDataRedis也有很多的版本,这里我们可以选择一个稳定版本来使用。 ## 几个好处 1.提供了对不同的Redis客户端的整合 2.提供了RedisTemplate的统一的API来操作Redis 3.支持Redis哨兵和redis集群 4.支持Redis的发布订阅模型 5.支持基于Lettuce的响应式编程 6.支持基于JDK,JS
NEO4J的入门和一些简单的操作
今天我带大家简单学习一下vite+vue3+ts实现一个超简单的记账本,旨在初步入门 vite,vue3,vuex和ts。
> Redis 全称 Remote Dictionary Server(即远程字典服务),它是一个基于内存实现的键值型非关系(NoSQL)数据库,由意大利人 Salvatore Sanfilippo 使用 C 语言编写。 > > Redis 遵守 BSD 协议,实现了免费开源,其最新版本是 6.20,常用版本包括 3.0 、4.0、5.0。自 Redis 诞生以来,它以其超高的性能、完美的文档和简洁易懂的源码广受好评,国内外很多大型互联网公司都在使用 Redis,比如腾讯、阿里、Twitter、Github 等等。 简单的来说:Redis是一种极其高效的,迅速的一种基于缓存读写的N
一种新型的NoSQL数据库,图数据库------Neo4J
在Spring Boot中使用RESTful服务
nodejs作为一门非常火爆的技术栈,可以做很多事情,那么nodejs和MongoDB碰撞在一起又会产生怎么样的火花呢?接下来我们就来了解一下,在Nodejs下使用MongoDB。