博客系统前端实现
目录
1.预期效果
2.实现博客列表页
3.实现博客正文页
4.实现博客登录页
5.实现博客编辑页面
1.预期效果
对前端html,css,js有大致的了解后,现在我们实现了一个博客系统的前端页面.一共分为四个页面没分别是:登陆页面,博客列表页,博客正文页,博客编辑页
我们看下四个界面
登陆页面
博客列表页
博客正文页
博客编辑页
博客系统前端目录
2.实现博客列表页
我们可以发现上述四个页面的导航栏,背景的样式都是相同的,所以这部分可以单独实现一个css代码,使用时直接引入即可
当实现每个页面不同效果时,再实现单独的css代码
博客列表页的代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客列表页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/blog_list.css">
</head>
<body><!--1. 这是导航栏 --><!-- 先实现导航栏,每个页面都得有导航栏.把导航栏样式单独放到一个common.css中,让各个页面来引用 --><div class = "nav"><img src="image/title.png" alt=""><span class = "title">我的博客系统</span><!-- 这个标签用来占位,将另外三个挤到导航页面右侧 --><span class="spacer"></span><a href="#">主页</a><a href="#">写博客</a><a href="#">注销</a></div><!-- 页面主体部分 --><div class="container"><!-- 左侧信息 --><div class="container-left"><!-- 表示用户信息 --><div class="card"><!-- 头像 --><img src="image/touxiang.jpg" alt=""><!-- 用户名 --><h3>YoLo</h3><a href="#">gitee地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>1</span></div></div></div><!-- 右侧信息 --><div class="container-right"><!--表示一篇博客 --><div class="blog"><!-- 博客标题 --><div class="title">第一篇blog</div><!-- 事件 --><div class="date">2023-3-30</div><!-- 摘要 --><div class="desc">1.接收请求的过程用户在浏览器输入一个URL(统一资源定位器),此时浏览器会构造一个HTTP请求这个请求会经过网络协议栈逐层封装成二进制Bit流,最终通过物理层设备转换成光信号/电信号传输出去这些传输出去的信号,会通过一系列网络设备到达目的主机服务器收到光信号/电信号.通过网络协议栈逐层分用,还原成HTTP请求.并交给Tomcat进程进行处理(通过端口号确定进程)</div><!-- 查看全文 --><a href="#">查看全文>></a></div><!--表示一篇博客 --><div class="blog"><!-- 博客标题 --><div class="title">第二篇blog</div><!-- 事件 --><div class="date">2023-3-30</div><!-- 摘要 --><div class="desc">2.根据请求计算响应调用的方法(doGET/doPOST)中,就能执行到我们编写的代码.我们自己的代码可以根据请求中的一些信息给, 来给HttpServletResponse对象设置一些属性,例如状态码, header, body 等</div><!-- 查看全文 --><a href="#">查看全文>></a></div><!--表示yi篇博客 --><div class="blog"><!-- 博客标题 --><div class="title">第三篇blog</div><!-- 事件 --><div class="date">2023-3-30</div><!-- 摘要 --><div class="desc">3.返回响应被调用的方法执行完毕后,Tomcat就会自动把HttpServletResponse这个我们刚设置好的对象转换成一个符合HTTP协议的字符串,通过Socket将响应发送出去此时响应数据在服务器主机上通过网络协议栈层层封装得到二进制bit流,通过物理层硬件设备转换成光信号/电信号传输出去</div><!-- 查看全文 --><a href="#">查看全文>></a></div></div></div>
</body>
</html>>代表>,直接输入>会被当成标签
common.css
存放的是导航栏,背景的样式.每个页面都会用到,上述详情页直接引入该代码
/* 写样式的起手式,先取出浏览器的公共样式,并且设置border-box,避免元素盒子被内边距和边框撑大 */
*{margin: 0;padding: 0;box-sizing:border-box;
}
html,body{/* html是页面最顶层元素,高度100% (相对父元素来说)和父元素是一样高的 对html标签来说,父元素就是浏览器窗口body父亲是html,设为100%.意思是body和html一样高,此时,body和html的高度都是和浏览器一样高不设置高度,默认设置取决于内部的内容多少*/height: 100%;
}
body{background-image: url(../image/background_image.png);background-repeat: no-repeat;background-size: cover;background-position: center center;
}
.nav{/* 导航栏设置宽度:和父元素相同块级元素默认:width:100%*/width: 100%;height: 50px;background-color: rgba(62, 56, 56, 0.7);color: aliceblue;/*导航栏里面的元素设置弹性布局*/display: flex;/* 垂直居中 */align-items: center;}
.nav img{width: 40px;height: 40px;/* 添加边距 */margin-left: 30px;margin-right: 10px;/* 图标变圆把内切圆半径设置成宽度的一半,就圆形了*/border-radius: 50%;
}.nav a{color: aliceblue;/* 去掉下划线 */text-decoration: none;/* 让几个a标签不要贴在一起,加上内边距 此处使用外边距也行,内边距更好,内边距是元素的内容,可增大用户点击面积*/padding: 0 10px;
}.nav .spacer{width: 70%;
}/* 页面主体部分 */
.container{/* 主体部分宽度 */width: 1000px;/* 主体部分高度.整个页面高度减去设置的导航栏高度 */height: calc(100% - 50px);/* 这里-两端必须有空格 */margin: 0 auto;/* 让我们先能看见 *//* background-color:#505050; *//* 设置弹性布局 */display: flex;/* 水平居中 */align-items: center;justify-content: space-between;
}
.container-left{/* 100%相对于父元素,它的父元素是container,已设置过了 */height: 100%;width: 200px;/* background-color: #fff; */
}
.container-right{/* 100%相对于父元素,它的父元素是container,已设置过了 */height: 100%;/* 留一个缝隙 */width: 795px;/* background-color: #df2222; */background-color: rgb(255, 255, 255,0.8);border-radius: 10px;/* 让元素带滚动条 *//* 如果内容溢出,加上滚动条,如果内容没有溢出,不加滚动条 */overflow: auto;
}/* 左侧信息栏 */
.card{background-color: rgb(255, 255, 255,0.8);border-radius: 10px;padding: 30px;
}/* 用户头像 上下左右留30 长宽140px*/
.card img{width: 140px;height: 140px;border-radius: 50%;
}/* 用户名 */
.card h3{/* 文字居中 */text-align: center;/* 让文字和上下都有边距 建议使用内边距 */padding: 10Px;
}/* 码云地址 a标签是行内元素,设置居中要先设置成块级元素再居中
*/
.card a{text-align: center;display: block;color: #505050;text-decoration: none;padding: 10px;
}/*文章分类 */
.card .counter{
/* 弹性布局 使得元素水平方向均匀排列 */display: flex;justify-content: space-around;padding: 5px;
} 去掉下划线
text-decoration: none;
让元素带滚动条,如果内容溢出,加上滚动条,如果内容没有溢出,不加滚动条
overflow: auto;
blog_list.css
实现的是博客列表专用的样式(题目,日期,段落居中,段落缩进等)
/* 博客列表页专用的实现样式 *//* 设置容器元素样式 */.blog{width: 100%;padding: 20px;
}/* 标题 */
.blog .title{font-size: 24px;font-weight: 700;text-align: center;padding: 10px;
}/* 日期 */
.blog .date{text-align: center;color: #08bc6e;padding: 10px;
}/*缩进 处理摘要 */
.blog .desc{text-indent: 2em;
}/* 查看全文 */
.blog a{/* 转块级元素 */display: block;width: 120px;height: 40px;/* 水平居中 */margin-top: 20px ;margin-left: auto;margin-right: auto;/* 设置边框 */border:2px solid black;/* 文字水平居中 */text-align: center;/* 文字垂直居中 */line-height: 40px;/* 去掉下划线 */text-decoration: none;/* 文字黑色 */color: black;border-radius: 3px;/* 给鼠标悬停加上过渡效果 */transition: all 0.3s;
}/*悬停变色 */
.blog a:hover{color: white;background:#666;
}像a标签这样的行内元素不好处理,先转成块级元素然后再处理
缩进
.blog .desc{
text-indent: 2em;
}
给鼠标悬停加上过渡效果
transition: all 0.3s;
}
悬停变色
.blog a:hover{
color: white;
background:#666;
}
3.实现博客正文页
blog_detail.html
博客正文,引入common.css,添加正文内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客详情页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/blog_detail.css">
</head>
<body><!-- 添加导航栏 --><!--1. 这是导航栏 --><!-- 先实现导航栏,每个页面都得有导航栏.把导航栏样式单独放到一个common.css中,让各个页面来引用 --><div class = "nav"><img src="image/title.png" alt=""><span class = "title">我的博客系统</span><!-- 这个标签用来占位,将另外三个挤到导航页面右侧 --><span class="spacer"></span><a href="#">主页</a><a href="#">写博客</a><a href="#">注销</a></div><div class="container"><!-- 左侧信息 --><div class="container-left"><!-- 表示用户信息 --><div class="card"><!-- 头像 --><img src="image/touxiang.jpg" alt=""><!-- 用户名 --><h3>YoLo</h3><a href="#">gitee地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>1</span></div></div></div><!-- 右侧信息 --><div class="container-right"><!-- 博客标题 --><h3 class = "title">我的第一篇博客</h3><!-- 发布时间 --><div class="date">2023-3-30</div><!-- 正文 --><div class="content"><p>1.接收请求的过程用户在浏览器输入一个URL(统一资源定位器),此时浏览器会构造一个HTTP请求这个请求会经过网络协议栈逐层封装成二进制Bit流,最终通过物理层设备转换成光信号/电信号传输出去这些传输出去的信号,会通过一系列网络设备到达目的主机服务器收到光信号/电信号.通过网络协议栈逐层分用,还原成HTTP请求.并交给Tomcat进程进行处理(通过端口号确定进程)</p><p>2.根据请求计算响应调用的方法(doGET/doPOST)中,就能执行到我们编写的代码.我们自己的代码可以根据请求中的一些信息给, 来给HttpServletResponse对象设置一些属性,例如状态码, header, body 等</p><p>3.返回响应被调用的方法执行完毕后,Tomcat就会自动把HttpServletResponse这个我们刚设置好的对象转换成一个符合HTTP协议的字符串,通过Socket将响应发送出去此时响应数据在服务器主机上通过网络协议栈层层封装得到二进制bit流,通过物理层硬件设备转换成光信号/电信号传输出去</p></div></div></div>
</body>
</html>blog_detail.css
博客详情页使用的样式
/* 这是博客详情页使用 *//* 标题*/
.container-right .title{text-align: center;padding: 10px;
}/*日期 */
.container-right .date{color: #1fbf76;text-align: center;padding: 10px;
}/*缩进 处理摘要 */
.container-right .content p{text-indent: 2em;padding: 10px 30px;
}4.实现博客登录页
login.html
引入commom.css添加对话框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆页面</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body><!-- 这个页面咩有注销按钮 --><!--1. 这是导航栏 --><!-- 先实现导航栏,每个页面都得有导航栏.把导航栏样式单独放到一个common.css中,让各个页面来引用 --><div class = "nav"><img src="image/title.png" alt=""><span class = "title">我的博客系统</span><!-- 这个标签用来占位,将另外三个挤到导航页面右侧 --><span class="spacer"></span><a href="#">主页</a><a href="#">写博客</a><!-- <a href="#">注销</a> --></div><!-- 正文部分 --><!-- 贯穿整个页面的的容器 --><div class="login-container"><!-- 垂直水平居中的对话框 --><div class="login-dialog"><h3>登录</h3><div class="row"><span>用户名</span><!-- placeholder="手机号/邮箱"这个属性用来设置框内默认的文本 --><input type="text" id="username" placeholder="手机号/邮箱"></div><div class="row"><span>密码</span><input type="password" id = "password"></div><div class="row"><button id = "submit">登录</button></div></div></div>
</body>
</html><input type="text" id="username" placeholder="手机号/邮箱">
placeholder="手机号/邮箱"
对话框中显示文本,点击后消失,没有输入内容又会出现
login.css
登录页面的样式
/* 这个文件是写登录页面样式 */.login-container{width: 100%;height: 100%;/* background-color: rgb(130, 0, 0); *//* 使对话框水平垂直居中 */display: flex;justify-content: center;align-items: center;
}.login-dialog{width: 380px;height: 330px;/* background-color: #fff; *//* display: flex; */background-color:rgba(255, 255, 255, 0.8);border-radius: 10px;
}.login-dialog h3{text-align: center;padding: 50px;
}
.login-dialog .row{height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span{width: 100px;}
#username, #password{width: 200px;height: 40px;border-radius: 5px;border: none;/* 放大字体 */font-size: 17px;padding: 5px;
}/* 提交按钮 */
#submit{width: 300px;height: 40px;border-radius: 5px;border: none;color: aliceblue;background-color:#27c079;
}#submit:active{/* 点击变色 */background-color: darkgrey;
}5.实现博客编辑页面
编辑器:markdown
引入 editor.md
editor.md 是一个开源的页面 markdown 编辑器组件
1)从官网上下载到压缩包. 放到目录中. 目录结构如下
2) 引入 editor.md
注意<script src="js/jquery.min.js"></script>要在下面三个之前引入
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="js/jquery.min.js"></script><script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>
3) 初始化 editor.md
// 初始化编辑器
var editor = editormd("editor", {// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.width: "100%",// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度height: "calc(100% - 50px)",// 编辑器中的初始内容markdown: "# 在这里写下一篇博客",// 指定 editor.md 依赖的插件路径path: "editor.md/lib/"
});
blog_edit.html
博客编辑页代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客编辑页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/blog_edit.css"><script src="js/jquery.min.js"></script><!-- 或者直接写网络路径 src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js" --><!-- 引入md的依赖 --><link rel="stylesheet" href="editor.md/css/editormd.min.css" /><script src="editor.md/lib/marked.min.js"></script><script src="editor.md/lib/prettify.min.js"></script><script src="editor.md/editormd.js"></script>
</head>
<body><!-- 这个页面咩有注销按钮 --><!--1. 这是导航栏 --><!-- 先实现导航栏,每个页面都得有导航栏.把导航栏样式单独放到一个common.css中,让各个页面来引用 --><div class = "nav"><img src="image/title.png" alt=""><span class = "title">我的博客系统</span><!-- 这个标签用来占位,将另外三个挤到导航页面右侧 --><span class="spacer"></span><a href="#">主页</a><!-- <a href="#">写博客</a> --><a href="#">注销</a></div><!-- 编辑区的容器 --><div class="blog-edit-container"><div class="title"><input type="text" id="title" placeholder="请输入文章标题"><button id="submit">发布文章</button></div><!-- 博客编辑器,这里用id是为了和markdown编辑器对接而设置的 --><div id="editor"></div></div><script>// 初始化编辑器var editor = editormd("editor", {// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.width: "100%",// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度height: "calc(100% - 50px)",// 编辑器中的初始内容markdown: "# 在这里写下一篇博客",// 指定 editor.md 依赖的插件路径path: "editor.md/lib/"});</script>
</body>
</html>blog_edit.css
博客编辑页专用样式
/* 这个页面用来写编辑文章 */.blog-edit-container{width: 1000px;height: 100%;/* background-color: #ffdc00; */margin: 0 auto;
}.blog-edit-container .title{height: 50px;display: flex;align-items: center;justify-content: space-between;}#title{height: 40px;width: 895px;border-radius: 6px;border: none;font-size: 20px;/* 去掉鼠标悬停后出现的轮廓线 */outline: none;/* 设置输入框半透明 */background-color: rgba(255,255,255,0.6);
}
#submit{height: 40px;width: 100px;border-radius: 6px;border: none;color: black;background-color:orange;
}
/* 使用伪类设置鼠标点击后不再透明 */
/* 伪类选择器选择的是元素的状态,正常选择器选择元素 */
#title:focus{background-color: rgba(255,255,255);
}
#submit:active{/* 点击变色 */background-color: darkgrey;
}
#editor{border-radius: 10px;opacity: 80%;
}
相关文章：
博客系统前端实现
目录 1.预期效果 2.实现博客列表页 3.实现博客正文页 4.实现博客登录页 5.实现博客编辑页面 1.预期效果 对前端html,css,js有大致的了解后,现在我们实现了一个博客系统的前端页面.一共分为四个页面没分别是:登陆页面,博客列表页,博客正文页,博客编辑页 我们看下四个界面…...
ChatGPT技术原理、研究框架，应用实践及发展趋势（附166份报告）
一、AI框架重要性日益突显，框架技术发展进入繁荣期，国内AI框架技术加速发展： 1、AI框架作为衔接数据和模型的重要桥梁，发展进入繁荣期，国内外框架功能及性能加速迭代； 2、Pytorch、Tensorflow占据AI框…...
【屏幕自适应页面适配问题】CSS的@media，为了适应1440×900的屏幕，使用@media解决问题
文章目录bug修改实例CSS3 media 查询CSS 多媒体查询，适配各种设备尺寸bug修改实例 <template><div id"deptAllDown" style"height: 400px;width:880px"/> </template>为了适应1440900的屏幕，使用media解决问题 …...
一篇文章理解堆栈溢出
一篇文章理解堆栈溢出引言栈溢出ret2text答案ret2shellcode答案ret2syscall答案栈迁移答案堆溢出 unlink - UAF堆结构小提示向前合并/向后合并堆溢出题答案引言 让新手快速理解堆栈溢出，尽可能写的简单一些。 栈溢出 代码执行到进入函数之前都会记录返回地址到SP…...
优化模型验证关键代码27：多旅行商问题的变体-多起点单目的地问题和多汉密尔顿路径问题
目录 1 多起点单目的地问题(Multiple departures single destination mTSP) 1.1 符号列表 1.2 数学模型 1.4 解的可视化结果...
快速搭建第一个SpringCloud程序
目录 1、Spring Boot项目脚手架快速搭建 1.1 生成工程基本配置 1.2 生成工程。 1.3 导入开发工具（此处为Idea） 1.4 运行代码 1.5 验证是否能访问 2、Spring Cloud环境搭建 2.1 版本匹配问题 2.2 Spring Cloud环境测试 3、引入Eureka Server 3…...
【离散数学】图论
1、有n个点没有边 零图 2、有1个点没有边 平凡图 3、含有平行边的图 多重图 4、简单图 不含有平行边和自回环的图 5、任意两个结点之间都有边 完全图 6、环贡献 两度 7、所有顶点的度数之和等于边数的两倍 8、在有向图中所有顶点的出度之和 或者 入度之和 等于边数 9、度数为…...
代码随想录算法训练营第三十七天-贪心算法6｜ 738.单调递增的数字 968.监控二叉树 总结
738.单调递增的数字 贪心算法 题目要求小于等于N的最大单调递增的整数，那么拿一个两位的数字来举例。 例如：98，一旦出现strNum[i - 1] > strNum[i]的情况（非单调递增），首先想让strNum[i - 1]--&#…...
【Linux】线程中的互斥锁、条件变量、信号量（数据安全问题、生产消费模型、阻塞队列和环形队列的实现）
文章目录1、线程互斥1.1 线程间频繁切换导致的问题1.2 使用互斥锁1.3 互斥锁的原理1.4 线程中的数据安全问题2、线程同步之条件变量2.1 生产消费模型2.2 条件变量概念和调用函数2.3 阻塞队列的实现3、线程同步之信号量3.1 理解信号量3.2 信号量接口3.3 环形队列的实现4、小结1、…...
MySQL8.0的安装和配置
🎉🎉🎉点进来你就是我的人了 博主主页：🙈🙈🙈戳一戳,欢迎大佬指点!人生格言：当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔🦾&am…...
LinuxGUI自动化测试框架搭建（三）-虚拟机安装（Hyper-V或者VMWare）
（三）-虚拟机安装（Hyper-V或者VMWare）1 Hyper-V安装1.1 方法一：直接启用1.2 方法二：下载安装1.3 打开Hyper-V2 VMWare安装注意：Hyper-V或者VMWare只安装一个，只安装一个，只…...
，包含copypaste、翻转、cutout等八种增强方式)
改进YOLO系列：数据增强扩充(有增强图像和标注)，包含copypaste、翻转、cutout等八种增强方式
这里写目录标题 一、简介二、数据增强方法介绍复制-粘贴（Copy-paste）翻转（Flip）Cutout加噪声（Noise）亮度调整（Brightness）平移（Shift）旋转（Rotation）裁剪（Crop）copy-paste的代码一、简介 数据增强是一种通过对原始数据进行随机变换、扰动等操作来生成新的训练样…...
c++11 标准模板（STL）（std::stack）（一）
定义于头文件 <stack> template< class T, class Container std::deque<T> > class stack;std::stack 类是容器适配器，它给予程序员栈的功能——特别是 FILO （先进后出）数据结构。 该类模板表现为底层容器的包装…...
C++-c语言词法分析器
一、运行截图 对于 Test.c 的词法分析结果 对于词法分析器本身的源代码的分析结果 二、主要功能 经过不断的修正和测试代码，分析测试结果，该词法分析器主要实现了以下功能： 1. 识别关键字 实验要求：if else while do for main…...
Maven工具复习
Maven从入门到放弃Maven概述Maven 的配置Maven的基本使用IDEA 配置MAVENMaven坐标IDEA 创建MavenIDEA 导入Maven关于右侧Maven小标签(也就是Maven面板)找不到问题的解决办法关于不小心把IDEA主菜单搞消失的解决办法依赖管理Maven概述 Maven是一个工具提供了一套标准的项目结构…...
算法总结-深度优先遍历和广度优先遍历
深度优先遍历(Depth First Search，简称DFS) 与广度优先遍历(Breath First Search，简称BFS)是图论中两种非常重要的算法，生产上广泛用于拓扑排序，寻路(走迷宫)，搜索引擎，爬虫等。 一、深度优先遍历 深度优先…...
【Linux】Centos安装mvn命令（maven）
🍁博主简介 🏅云计算领域优质创作者 🏅华为云开发者社区专家博主 🏅阿里云开发者社区专家博主 💊交流社区：运维交流社区 欢迎大家的加入！ 文章目录一、下载maven包方法一：官…...
驱动保护 -- 通过PID保护指定进程
一、设计界面 1、添加一个编辑框输入要保护的进程PID，并添加两个按钮，一个保护进程，一个解除保护 2、右击编辑框，添加变量 二、驱动层代码实现 1、声明一个受保护的进程PID数组 static UINT32 受保护的进程PID[256] { 0 }; 2…...
spring常用注解（全）
一、前言 Spring的一个核心功能是IOC，就是将Bean初始化加载到容器中，Bean是如何加载到容器的，可以使用Spring注解方式或者Spring XML配置方式。 Spring注解方式减少了配置文件内容，更加便于管理，并且使用注解可以大大…...
Axios请求（对于ajax的二次封装）——Axios请求的响应结构、默认配置
Axios请求（对于ajax的二次封装）——Axios请求的响应结构、默认配置知识回调（不懂就看这儿！）场景复现核心干货axios请求的响应结构响应格式详解实际请求中的响应格式axios请求的默认配置全局axios默认值（了解…...
OpenLayers 可视化之热力图
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
JavaScript 中的 ES|QL：利用 Apache Arrow 工具
作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
)
Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学？传统医学奠基期（远古 - 17 世纪）近代医学转型期（17 世纪 - 19 世纪末）现代医学成熟期（20世纪至今） 中医的源远流长和一脉相承远古至…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
日常一水C
多态 言简意赅：就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过，当子类和父类的函数名相同时，会隐藏父类的同名函数转而调用子类的同名函数，如果要调用父类的同名函数，那么就需要对父类进行引用&#…...