前端
文章平均质量分 59
Javascript:前端,在node中可以做后端
HTML/CSS:标记语言,主要是给前端工程师构建页面使用
Vue.js
有勇气的牛排
CSDN全栈&网络安全领域优质创作者、阿里云社区博客专家。
新时代,新征程,站在AI的肩膀上开启无限可能;学会字典、使用字典、现学现用,技术的价值体现在能否解决实际问题,具有时效性,做不到灵活应用,只懂死记硬背,终将被AI所替代。
写博客是为了系统化构建与盘点知识,并且减小记忆成本;同时,希望本人分享的文章能够帮助到更多的开发者,让编程产生更大价值。非常欢迎热衷于技术的朋友关注,交个朋友,一起探索未知。
展开
-
websockets长连接通信介绍与Python、js实现
WebSocket是一种在Web应用程序中实现双向通信的协议。它提供了一种在客户端和服务器之间进行实时数据传输的方式,允许服务器主动向客户端推送消息,而不需要客户端首先发送请求。建立连接:WebSocket连接是通过HTTP升级实现的。客户端首先发送一个HTTP请求,包含特殊的请求头字段,指示要升级到WebSocket协议。服务器接收到这个请求后,如果支持WebSocket,会返回一个HTTP响应,表示升级成功。之后,客户端和服务器之间建立起全双工的WebSocket连接。原创 2023-06-27 21:49:02 · 1719 阅读 · 1 评论 -
前端 js 操作 Cookie 详细介绍与案例
通过使用Cookie,服务器可以在不同的HTTP请求之间保持会话状态、记录用户首选项、实现购物车功能、进行用户跟踪等。然而,Cookie也有一些限制,包括存储容量的限制、跨域访问的限制以及安全性方面的考虑。原创 2023-06-25 22:45:44 · 6789 阅读 · 1 评论 -
es6语法 高阶函数 filter map reduce
es6语法 高阶函数 filter map reduce。原创 2022-12-03 19:22:12 · 181 阅读 · 0 评论 -
Vue案例入门 列表展示 计数器
作者:有勇气的牛排3 计数器methods:该属性用于在Vue对象中定义方法@click:用于监听某个元素的点击事件,并且需要指定当前发生点击时,执行的方法(方法通常是methods中定义的方法)项目地址https://github.com/courageSteak/vue-framework作者:有勇气的牛排https://www.couragesteak.com/article/153原创 2022-12-03 19:26:37 · 426 阅读 · 0 评论 -
Vue 插槽(slot)使用
组件的插槽组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部一些内容到底展示了什么。举例:移动开发中,几乎每个页面都有导航栏导航栏我们会分装成一个插件,比如nav-bar组件一旦有了这个组件,我们就可以在多个页面中复用了2 具名插槽使用(导航)仓库地址:## 1 为什么使用slot组件的插槽组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部一些内容到底展示了什么。举例:移动开发中,几乎每个页面都有导航栏导航栏我们会分装成一个插件,比如nav-bar组件一旦原创 2022-12-03 19:19:52 · 1197 阅读 · 0 评论 -
webpack搭建本地服务器
基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。deserver也是作为webpack中的一个选项,选项本身可以设置如下属性(1)contentBase:为哪一个文件夹提供本地服务,默认是跟文件夹,我们这里可以填写(2)port:端口号(3)inline:页面实时刷新(4)historyApiFallback:在SPA页面中,依赖HTML5的history模式webpack.config.js3 启动作者有勇气的牛排:https://ww原创 2022-12-03 19:12:22 · 204 阅读 · 0 评论 -
webpack插件plugin 添加版权 打包html js压缩
webpack.config.js2 打包html目前,我们的index.html文件存放在项目的根目录下真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,name打包的js等文件就没有意义了。所以,我们需要将index.html文件导包放到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin插件。自动生成一个index.html文件(可以指定模板来生成)将打包的js文件,自动通过script标签插入到body中。4.使用原创 2022-12-03 18:54:51 · 300 阅读 · 0 评论 -
Vue Webpack介绍及安装
https://webpack.js.org/concepts/https://www.webpackjs.com/安装:首先要安装、版本大于查看node版本全局安装webpack(指定3.6.0、因为vue cli2依赖该版本)局部安装为什么全局安装后,还需要局部安装呢?在终端直接执行webpack命令,使用全局安装的webpack当package.json中定义了scripts时时,其中包含了webpack命令,那么使用的是局部webpack打包3 webpack配置打原创 2022-12-03 19:04:09 · 1222 阅读 · 1 评论 -
node.js安装使用
下载https://nodejs.org/dist/v16.3.0常规修改为淘宝NPM镜像重构项目依赖:原创 2022-12-03 18:48:58 · 315 阅读 · 0 评论 -
前端 js base64解密
本文将使用js-base64进行js base64相关操作。原创 2022-11-03 23:30:00 · 2985 阅读 · 0 评论 -
html5 LocalStorage本地存储介绍
Web存储对象有localStorage和sessionStorage两种,它允许我们以键值对的形式在浏览器上保存数据。相同点属性说明存储键值对获取键的值删除指定键clear删除所有数据key(index)获取对应索引的键名length存储键值对数据localStorage 用于长久保存网站数据,无过期时间,除非删除。在同源的所有标签页与窗口之间数据共享。存储字段类型为字符串,使用需自己转换为所需类型使用方法同数据仅存在于当前浏览器标签页。原创 2022-11-03 22:00:00 · 746 阅读 · 0 评论 -
js实现页面跳转与参数获取加载
【代码】js实现页面跳转与参数获取加载。原创 2022-07-25 20:43:07 · 975 阅读 · 0 评论 -
前端样式布局flex
文章目录1 布局原理2 flex布局父项常见属性2.1 常见父项属性2.2 flex-direction设置主轴的方向2.2.1 主轴与侧轴2.3 justify-content 设置主轴上的子元素排列方式2.4 flex-warp 设置子元素是否换行2.5 align-items 设置侧轴上的子元素排列方式(单行)2.6 align-content 设置侧轴上的子元素的排列方式(多行)2.6 align-content和align-items区别2.7 flex-flow3 flex布局子项常见属性3.1原创 2022-03-29 23:00:59 · 1955 阅读 · 0 评论 -
网站SEO、meta关键词优化
安卓中支持,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px。可用于将PC版页面指向移动版页面,将移动版页面指向PC版页面,这样有利于搜索引擎,对不同设备的用户提供不同类型的页面。主要用于控制网页发送给服务器的referrer信息,可以告诉服务器端用户是从哪个页面来到当前网页的。主要用于控制网页发送给服务器的referrer信息,可以告诉服务器端用户是从哪个页面来到当前网页的。:设置页面的初始缩放值,为一个数字,可以带小数。原创 2022-03-06 21:50:10 · 693 阅读 · 0 评论 -
Vue项目实操cookie相关操作封装
1 介绍在vue中通常使用axios进项http请求,但是axios不带cookie,这里可自己获取cookie,放到参数中进行登录验证等,方法不唯一。2 cookie.js/** * 读取cookie, * 需要注意的是cookie是不能存中文的,如果需要存中文,解决方法是后端先进行编码encode(), * 前端取出来之后用decodeURI('string')解码。(安卓可以取中文cookie,IOS不行) * */export const b_getCookie = (c_name)原创 2022-02-16 22:07:12 · 861 阅读 · 0 评论 -
基于Vue+element设计 经典网站后台管理界面
<template> <el-container> <el-header height="" > <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" tex原创 2022-02-10 00:21:05 · 1323 阅读 · 0 评论 -
Vue引用echarts图表
/ 新增用户 日统计 初始化。// 新增用户 日统计。原创 2022-02-07 01:36:13 · 414 阅读 · 0 评论 -
Vue 脚手架CLI 初始化项目
1 介绍CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架。Vue CLI是一个官方发布vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置2 Vue CLI使用前提 WebpackVue.js官方脚手架工具就使用了webpack模板对所有的资源会压缩等优化操作它在开发的过程中提供了一套完整的功能,能够使得我们开发原创 2022-02-07 00:08:23 · 1362 阅读 · 0 评论 -
vue 路由相关操作
步骤一:安装vue-router步骤二:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)导入路由对象,并且调用Vue.use(VueRouter)创建路由实例,并且传入路由映射配置在Vue实例中挂载创建的路由实例创建路由组件配置路由映射:组件和路径映射的关系使用路由:通过和3 history模式index.js的export中添加4 router-link补充:渲染为指定元素:该属性不会留下history记录,所以指定replace的情况下,后退键返回不能返回原创 2022-02-05 00:51:58 · 402 阅读 · 0 评论 -
Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例
Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同的是,Vue被设定为能够由底往上,逐层应用。其不仅语法简单,而且易于与其他第三方项目集成。在单页应用程序上仍能提供强大的支持也就是双大括号 {{ }}1.2 v-once该指令后面不需要跟任何表达式(比如之前的v-for后面是跟表达式的)该指令表示元素和组件(组件后面才会学习)只会渲染一次,不会随着数据的改变而改变1.3 v-html某些情况下,我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{ }} 来输出,会将原创 2021-11-15 00:53:15 · 1284 阅读 · 0 评论 -
html css常用样式
鼠标选中内容样式/*鼠标选中内容样式*/::selection { /*background: #444;*/ background:blue; color: #FFF;}禁止文字选中/*禁止文字选中*/.user-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;}.原创 2021-08-04 15:48:10 · 101 阅读 · 0 评论 -
html前端 echarts图表使用详解
echarts图表使用详解option详细配置原创 2021-07-28 13:51:04 · 1054 阅读 · 0 评论 -
html 遇到多个class时取当前行参数
<button value='' οnclick='goToLine(this.value);'>录入信息</button><script type="text/javascript"> var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;"><div style="pos原创 2021-07-25 16:24:47 · 201 阅读 · 0 评论 -
html/jquery 常用的输入与获取参数
输入文本<input id="nickname" type="text" placeholder="请输入昵称">密码<input id="password" type="password" placeholder="请输入密码">单选框<input class="sex" checked type="radio" name="sex" value="0"><span class="sexname">男</span><inp原创 2021-02-22 15:06:47 · 1003 阅读 · 0 评论 -
前段html分页模块
导入<!-- 分页模块 --><link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="pagination/css/htmleaf-demo1.css"><script src="http://cdn.bootcss.com/jquery/1.原创 2021-02-20 18:43:46 · 390 阅读 · 0 评论 -
jquery 时间操作
<script src="js/jquery-min.js"></script><script> function time() { dt = new Date(); var h = dt.getHours();//获取时 var m = dt.getMinutes();//获取分 var s = dt.getSeconds();//获取秒 document.getElementById("showTime").innerHTML = "当前时间为原创 2021-02-20 14:19:19 · 473 阅读 · 0 评论 -
js常用代码总结
/加载后隐藏自定义右键菜单 //oMenu.style.display = "none";//菜单鼠标移入/移出样式 for(i = 0;i ++) {//鼠标移入样式 aLi [ i ] . onmouseover = function() {//鼠标移出样式 aLi [ i ] . onmouseout = function() {} //自定义菜单 document . oncontextmenu = function(event) {原创 2021-02-20 13:04:39 · 342 阅读 · 1 评论 -
vue常用语法 渲染数据
v-once该指令后面不需要跟任何表达式(比如之前的v-for后面是又跟表达式的)该指令表示元素和组组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变v- html当服务器传回一个HTML代码时,{{ }} 就会将HTML代码输出,所以需要使用这个解析HTML代码<h2 v-html="url"></h2>data: { url: "<a href='http://www.baidu.com'>百度一下</a>"}v-tex原创 2021-01-27 14:55:31 · 281 阅读 · 0 评论 -
VUE基础
官方文档https://cn.vuejs.org/v2/guide/components-registration.html安装方式一:直接CDN引入对于制作原型或学习,你可以这样使用最新版本:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:<script src="https://cdn原创 2021-01-26 23:34:11 · 119 阅读 · 0 评论 -
html上传图片
方案一<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> </head> <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/j原创 2020-05-30 17:22:12 · 2017 阅读 · 1 评论 -
jquery 获取 IP地址与地理位置
搜狐IP地址查询接口(默认GBK):http://pv.sohu.com/cityjson搜狐IP地址查询接口(可设置编码):http://pv.sohu.com/cityjson?ie=utf-8获取城市位置:http://api.map.baidu.com/location/ip?ak=ia6HfFL660Bvh43exmH9LrI6获取IP地址参考:https://blog.csdn.net/weixin_39570075/article/details/81434513原创 2020-06-05 00:08:04 · 3217 阅读 · 2 评论 -
jquery+html 压缩图片
<html><heard> <title>压缩图片</title> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script></hea原创 2020-06-07 23:58:13 · 362 阅读 · 0 评论 -
boostrap3常用组件集合
原地址:样式:https://v3.bootcss.com/css/#top组件地址:https://v3.bootcss.com/components/#pagination导包<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个原创 2020-12-09 17:56:50 · 251 阅读 · 0 评论 -
前端异步请求 ajax与axios
$(function () { $("#submit").click(function () { var money = $("#money").val() alert(money) $.ajax({ url: '/wallet', type: 'POST', dataT...原创 2020-04-19 21:42:10 · 370 阅读 · 1 评论 -
js 检测浏览器 鼠标状态 页面状态
原理:浏览器判断是否切换页面主要是判断 用户是否切换 选项卡 tab(1) document.hidden 返回值为true:表示被隐藏,不可见 返回值为false:表示未被隐藏,可见(2)document.visibilityState 返回值为 visible:表示是可见状态 返回值为 hidden:表示隐藏状态检测用户是否切换页面原创 2020-07-07 21:44:53 · 2169 阅读 · 1 评论 -
Tampermonkey油猴脚本 jquery 常用组件
// @require http://code.jquery.com/jquery-1.11.0.min.js添加标签$("body").append("<button id='topic_info'>查看</button>");给标签添加样式$("#topic_info").css({ "width":"55px", "color":"red",});获取标签内 文本$("#divSubjectName").text()......原创 2020-07-01 19:20:23 · 6613 阅读 · 0 评论