【Web 三件套】个人简单博客系统页面搭建（附源码）

news2025/2/25 10:37:01

文章目录

  • 1. 成品展示
  • 2. 知识准备
  • 3. 博客系统页面搭建
    • 3.1 基本介绍
    • 3.2 博客列表页
    • 3.3 博客详情页
    • 3.4 博客登录页
    • 3.5 博客编辑页
    • 3.6 公共页面样式
    • 3.7 markdown 编辑器引入
  • 4. 总结

1. 成品展示

以下为个人搭建的一个简单博客系统页面，以后会不断改进，并且与后端结合，形成一个完整的博客系统

在这里插入图片描述

2. 知识准备

该博客系统页面是由 HTML + CSS + JavaScript 搭建的，如果没有了解过这些知识的友友，可以通过本人之前写好的几篇相关文章入门

  • 文章一：《超多动图带你入门 HTML》

  • 文章二：《两万字入门 CSS》

  • 文章三：《JavaScript 入门知识》

  • 文章四：《JavaScript 的数组、函数、对象》

  • 文章五：《JavaScript WebAPI 介绍》

3. 博客系统页面搭建

3.1 基本介绍

该博客系统页面现由4个部分组成，分别为：博客列表页、博客详情页、博客登录页、博客编辑页

针对每个页面后面都会进行页面和代码的展示，并且代码中含有个人的注释。为了方便下载使用，下面附上该博客系统页面的 Gitee 链接

Gitee 链接： https://gitee.com/bbbbbge/blog-system

3.2 博客列表页

页面展示：

image-20220218063339426

页面元素 HTML 代码： blog_list.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_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/log.png" alt="">
        <span class="title">我的博客系统</span>
         <!-- 使用 span 把左右两侧的元素给撑开 -->
         <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="blog_login.html">注销</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧区域，显示用户信息 -->
        <div class="container-left">
            <!-- 用户详情 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="image/head.jpg" alt="">
                <!-- 用户名 -->
                <h3>吞吞吐吐大魔王</h3>
                <!-- 其它信息 -->
                <a href="https://blog.csdn.net/weixin_51367845?type=blog">CSDN 地址</a>
                <a href="#">GitHub 地址</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">
            <!-- 每个 blog 代表一篇博客 -->
            <div class="blog">
                <div class="title">第一篇博客</div>
                <div class="date">2022-2-16</div>
                <div class="desc">
                    中国人的性情是喜欢调和折中的，譬如你说，这屋子太暗，须在这里开一个窗，大家一定不允许的。但如果你主张拆掉屋顶他们就来调和，愿意开窗了。
                </div>
                <a href="blog_detail.html" class="detail">查看全文&gt;&gt;</a>
            </div>
            <div class="blog">
                <div class="title">第二篇博客</div>
                <div class="date">2022-2-16</div>
                <div class="desc">
                    中国人的性情是喜欢调和折中的，譬如你说，这屋子太暗，须在这里开一个窗，大家一定不允许的。但如果你主张拆掉屋顶他们就来调和，愿意开窗了。
                </div>
                <a href="blog_detail.html" class="detail">查看全文&gt;&gt;</a>
            </div>
        </div>
    </div>
</body>
</html>

专属页面样式 CSS 代码： blog_list.css

/* 这个 CSS 专门针对博客列表页来设置样式 */

.blog {
    width: 100%;
    padding: 10px 20px;
}

/* 博客的标题 */
.blog .title {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 5px;
}

/* 博客的日期 */
.blog .date {
    text-align: center;
    padding-bottom: 10px;
    color: grey;
}

/* 博客的描述 */
.blog .desc {
    text-indent: 2em;
}

/* 查看博客详情的按钮 */
.blog .detail {
    display: block;
    width: 120px;
    color: grey;
    height: 30px;
    /* 设置边框 */
    border: 2px solid grey;
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 30px;
    /* 去掉下划线 */
    text-decoration: none;
    /* 让按钮来到屏幕中间 */
    margin: 10px auto;
    /* 加上一个过度效果 */
    transition: all 1s;
}

/* 实现鼠标悬停在按钮上时有一个背景色切换的效果 */
.blog .detail:hover {
    background-color: grey;
    color: white;
}

3.3 博客详情页

页面展示：

image-20220218063356928

页面元素 HTML 代码： blog_detail.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_detail.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/log.png" alt="">
        <span class="title">我的博客系统</span>
         <!-- 使用 span 把左右两侧的元素给撑开 -->
         <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="blog_login.html">注销</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧区域，显示用户信息 -->
        <div class="container-left">
            <!-- 用户详情 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="image/head.jpg" alt="">
                <!-- 用户名 -->
                <h3>吞吞吐吐大魔王</h3>
                <!-- 其它信息 -->
                <a href="https://blog.csdn.net/weixin_51367845?type=blog">CSDN 地址</a>
                <a href="#">GitHub 地址</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 来放博客内容 -->
            <div class="blog-content">
                <!-- 博客的标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客的日期 -->
                <div class="date">2022-2-16</div>
                <!-- 博客的内容 -->
                <div class="detail">
                    <p>
                        中国人的性情是喜欢调和折中的，譬如你说，这屋子太暗，须在这里开一个窗，大家一定不允许的。但如果你主张拆掉屋顶他们就来调和，愿意开窗了。
                    </p>
                    <p>
                        而忽而这些都空虚了，但有时故意地填以没奈何的自欺的希望。希望，希望，用这希望的盾，抗拒那空虚中的暗夜的袭来，虽然盾后面也依然是空虚中的暗夜。
                    </p>
                    <p>
                        如果痛苦换来的是结识真理、坚持真理，就应自觉的欣然承受，那时，也只有那时，痛苦穿掘着灵魂的深处，使人受了精神底苦刑而得到创伤，又即从这得伤和养伤和愈合中，得到苦的涤除，而上了苏生的路。
                    </p>
                    <p>
                        当我沉默着的时候，我觉得充实；我将开口，同时感到空虚。过去的生命已经死亡。我对于这死亡有大欢喜，因为我借此知道它曾经存活。死亡的生命已经朽腐。我对于这朽腐有大欢喜，因为我借此知道它还非空虚。
                    </p>
                </div>
        </div>
</body>
</html>

专属页面样式 CSS 代码： blog_detail.css

/* 这个 CSS 文件是用来放博客详情页的专属样式 */

.blog-content {
    padding: 30px;
}

/* 博客标题 */
.blog-content h3 {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 20px;
    font-size: 25px;
}

/* 博客日期 */
.blog-content .date {
    text-align: center;
    padding-bottom: 10px;
    color: grey;
}

/* 博客内容 */
.blog-content p {
    text-indent: 2em;
    padding: 10px 0;
}

3.4 博客登录页

页面展示：

image-20220218063418585

页面元素 HTML 代码： blog_login.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-login.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/log.png" alt="">
        <span class="title">我的博客系统</span>
         <!-- 使用 span 把左右两侧的元素给撑开 -->
         <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="blog_login.html">注销</a>
    </div>
    <!-- 登录页面的版心 -->
    <div class="login-container">
        <div class="login-dialog">
            <h3>登录</h3>
            <div class="row1">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row1">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row2">
                <input type="button" value="提交" id="submit">
            </div>
        </div>
    </div>
</body>
</html>

专属页面样式 CSS 代码： blog_login.css

/* 这个 CSS 文件是放登陆页面的专属样式 */

/* 1. 设置版心，让这个版心将页面填充满 */
/* 2. 在版心中间位置，设置一个登陆区域 */
.login-container {
    width: 100%;
    height: calc(100% - 50px);

    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container .login-dialog {
    width: 400px;
    height: 280px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
}

.login-dialog h3 {
    text-align: center;
    padding: 30px;
    font-size: 25px;
}

.login-dialog .row1 {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-dialog .row2 {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
}

.login-dialog .row1 span {
    width: 80px;
    font-weight: 700;
}

.login-dialog .row1 input {
    width: 200px;
    height: 30px;
    font-size: 15px;
    padding-left: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    /* 去掉边框 */
    border: none;
    /* 去掉轮廓线（选中输入框时，外面的黑边） */
    outline: none;
}

.login-dialog .row2 input {
    width: 280px;
    height: 35px;
    border-radius: 8px;
    font-size: 20px;
    background-color: rgba(41, 83, 149, 0.7);
    border: none;
}

.login-dialog .row2 input:active {
    background-color: black;
    color: white;
}

3.5 博客编辑页

页面展示：

image-20220218063453188

页面元素 HTML 代码： 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">
    <!-- 引入依赖 -->
    <link rel="stylesheet" href="editor.md-master/css/editormd.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="editor.md-master/lib/marked.min.js"></script>
    <script src="editor.md-master/lib/prettify.min.js"></script>
    <script src="editor.md-master/editormd.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/log.png" alt="">
        <span class="title">我的博客系统</span>
         <!-- 使用 span 把左右两侧的元素给撑开 -->
         <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="blog_login.html">注销</a>
    </div>
    <!-- 版心 -->
    <div class="blog-edit-container">
        <!-- 标题编辑区 -->
        <div class="title">
            <input type="text" placeholder="在这里写下文章标题" id="title">
            <input type="button" value="发布文章" id="submit">
        </div>
        <!-- 内容编辑区 -->
        <div id="editor">

        </div>
    </div>

    <script>
        // 初始化 editor.md
        let editor = editormd("editor", {
            // 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖
            width: "100%",
            // 设定编辑高度
            height: "500px",
            // 编辑页中的初始化内容
            markdown: "# 在这里写下一篇博客",
            //指定 editor.md 依赖的插件路径
            path: "editor.md-master/lib/"
        });
    </script>
</body>
</html>

专属页面样式 CSS 代码： blog_edit.css

/* 这个 CSS 文件放博客编辑的专属样式 */

/* 博客编辑页的版心 */
.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

/* 标题编辑区 */
.blog-edit-container .title {
    margin-top: 20px;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-edit-container .title #title {
    width: 795px;
    height: 50px;
    border-radius: 10px;
    padding-left: 20px;
    border: none;
    outline: none;
    background-color: rgba(41, 83, 149, 0.3);
    font-size: 15px;
}

.blog-edit-container .title #submit {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: rgba(255, 192 , 153, 0.4);
    font-size: 20px;
}

.blog-edit-container .title #submit:active {
    background-color: rgba(41, 83, 149, 0.3);
}

#editor {
    border-radius: 10px;
    border: none;
    opacity: 0.7;
}

3.6 公共页面样式

公共页面样式 CSS 代码： common.css

/* 这个文件里面放4个页面公共的一些样式，比如背景、导航栏等 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    /* 和父元素的一样高，body 的父亲是 html，html 的父亲是浏览器窗口 */
    height: 100%;
    /* 页面背景 */
    background-image: url(../image/background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
} 

/* 导航栏 */
.nav {
    width: 100%;
    height: 50px;
    background-color: rgba(50, 50, 50, 0.2);
    color: #fff;
    display: flex;
    justify-content: start;
    align-items: center;
}

/* 导航栏中的 log */
.nav img {
    width: 40px;
    height: 40px;
    margin-left: 30px;
    margin-right: 10px;
}

/* 导航栏中的标题 */
.nav .title {
    width: 120px;
}

/* 导航栏中的占位符 */
.nav .spacer {
    height: 40px;
    width: calc(100% - 370px);
}

/* 导航栏中的链接 */
.nav a {
    width: 60px;
    margin: 20px;
    text-decoration: none;
    color: white;
}

/* 版心的样式 */
.container {
    height: calc(100% - 50px);
    width: 1000px;
    margin: 0 auto;
    /* 为了让版心里面的子元素能够以左右布局的方式显示，使用 flex 布局 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 左侧区域样式 */
.container .container-left {
    height: 100%;
    width: 200px;
}

/* 右侧区域样式 */
.container .container-right {
    height: 100%;
    width: 795px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
}

/* 用户信息卡片，也会在多个页面中用到 */
.card {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
}

/* 用户头像 */
.card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

/* 用户名 */
.card h3 {
    text-align: center;
    padding: 10px 0;
}

/* 其它信息 */
.card a {
    /* a 标签是行内元素，设置尺寸、边距都可能失效，要转成块级元素 */
    display: block;
    text-decoration: none;
    text-align: center;
    color: grey;
    padding: 3px;
}

.card .counter {
    display: flex;
    justify-content: space-around;
    font-size: 15px;
    padding-top: 5px;
}

3.7 markdown 编辑器引入

在博客编辑页中含有一个 markdown 编辑器，这个是直接引入了一个叫 editor.md 的开源的页面 markdown 编辑器组件，大家也可以使用其它的编辑器组件

引入 editor.md 步骤：

  1. 下载 editor.md

    大家直接进入该项目的官网进行下载即可

    官网地址为：https://pandao.github.io/editor.md/

  2. 将下载好的 editor.md 接压缩到该博客项目中

    image-20220218071658835

  3. 在博客编辑页中引入 editor.md 依赖

    <!-- 引入依赖 -->
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script src="editor.md-master/editormd.js"></script>

  4. 在博客编辑页中，写个 JS 对 editor.md 进行初始化

    // 初始化 editor.md
let editor = editormd("editor", {
    // 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖
    width: "100%",
    // 设定编辑高度
    height: "500px",
    // 编辑页中的初始化内容
    markdown: "# 在这里写下一篇博客",
    //指定 editor.md 依赖的插件路径
    path: "editor.md-master/lib/"
});

通过以上步骤，就可以将 editor.md 该 markdown 编辑器引入我们的博客编辑页了

4. 总结

该博客系统页面只是运用前段时间学习的前端知识做出来的一个简单的页面，往后会通过不断的学习来对该博客系统进行补充，期待它的成品！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405578.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VsCode镜像下载（国内镜像源，高速秒下）

VsCode镜像下载（国内镜像源，高速秒下）

VsCode镜像下载&#xff08;国内镜像源&#xff0c;高速秒下&#xff09;vscode官方网站下载速度太慢&#xff0c;非正规网站又不太敢下&#xff0c;通过镜像源下载就好了。你们不介意版本的话&#xff0c;下面是1.63版本的链接&#xff08;直接复制下载就好了&#xff09;&…
阅读更多...
猿创征文｜一文带你了解前端开发者工具

猿创征文｜一文带你了解前端开发者工具

前端开发者工具目录一、前言二、前端开发者工具——编译器&#xff08;含插件&#xff09;1、VS Code2、VS Code 必备插件3、WebStorm三、前端开发者工具——UI 框架工具1、Element2、Vant四、前端开发者工具——API 调试工具1、ApiPost五、写在最后&#xff08;总结&#xff0…
阅读更多...
Module not found: Error: Can‘t resolve “xxx“ in “xxx“导致该问题的解决方案

Module not found: Error: Can‘t resolve “xxx“ in “xxx“导致该问题的解决方案

先看报错提示 根据报错提示反应的情况是&#xff1a;找不到模块&#xff1a;错误&#xff1a;无法解析 在遇到报错时应该仔细阅读报错提示&#xff0c;这样解决起来也不会没有头绪 在红色遮挡下有该报错出现的主要原因 在此处我们谈论一下解决该类报错的几种方法 1&#xff…
阅读更多...
uniapp 总结篇 （小程序）

uniapp 总结篇 （小程序）

前期概述&#xff1a;做了很长时间的小程序了&#xff0c;在此做一个完整的项目总结&#xff0c;希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理&#xff0c;更重要的是帮助大家实现功能、流程。 uniapp 还是很强大的 可以开发 小程序、h5、pc、app 一、创…
阅读更多...
Tomcat安装使用与部署Web项目的三种方法

Tomcat安装使用与部署Web项目的三种方法

✅作者简介&#xff1a;C/C领域新星创作者&#xff0c;为C和java奋斗中 ✨个人社区&#xff1a;微凉秋意社区 &#x1f525;系列专栏&#xff1a;MySql一点通 &#x1f4c3;推荐一款模拟面试、刷题神器&#x1f449;注册免费刷题 &#x1f525;前言 今天带来Tomcat的安装教程&a…
阅读更多...
input 输入框限制只能输入两位有效小数

input 输入框限制只能输入两位有效小数

前端入门即教学&#xff0c;今天博主分享几个前端金额实用的小案例&#xff0c;复制拿过去就能用哦&#xff01; 相信有很多前端小伙伴在工作中遇到过这样的需求&#xff0c;就是限制输入框内容只能输入两位小数吧&#xff0c;想了用正则但是又不知道怎么下手的同学&#xff0c…
阅读更多...
CSS 父选择器 :has()

CSS 父选择器 :has()

精通CSS-点击快速学习 在CSS Selectors 4规范中，CSS 引入了一个名为 的新选择器:has()，它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。 父选择器如何在 CSS 中工作 在 CSS 中，如果我们想要选择某些东西，我们会使…
阅读更多...
盘点12个前端低代码的框架开源项目以及前端低代码的总结调研，比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等

盘点12个前端低代码的框架开源项目以及前端低代码的总结调研，比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等

文章目录1. Appsmith2. Amis3. LowCodeEngine4. form-generator5. H5-Dooring/pc-Dooring6. YAO7. Mometa8. NocoBase9. Sparrow10. vite-vue3-lowcode11. 华炎魔方12. Awesome Lowcode参考文档低代码是基于可视化和模型驱动理念&#xff0c;结合云原生与多端体验技术&#xff…
阅读更多...
sortablejs的使用实践

sortablejs的使用实践

文章目录说明基本使用1. 素颜版2. 设置可被拖起的项的样式3. 设置被选中的项的样式4. 设置拖拽时跟随的阴影的样式5. 设置正在被拖拽中的样式6. 设置当前列表容器内是否可以进行拖拽排序7. 设置拖拽的手柄8. 多个列表之间的拖拽 [group]示例1 [name]示例2 [put]示例3 [put func…
阅读更多...
【前端】图片懒加载的原理和三种实现方式

【前端】图片懒加载的原理和三种实现方式

一. 图片懒加载的目的 大型网站如常用的淘宝&#xff0c;京东等页面&#xff0c;需要展示大量的商品图片信息&#xff0c;如果打开网页时让所有图片一次性加载完成&#xff0c;需要处理很多次网络请求&#xff0c;等待加载时间比较长&#xff0c;用户体验感很差。 有一种常用…
阅读更多...
基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

vite 最近非常火&#xff0c;它是 vue 作者尤大神发布前端构建工具&#xff0c;底层基于 Rollup&#xff0c;无论是启动速度还是热加载速度都非常快。vite 随 vue3 正式版一起发布&#xff0c;刚开始的时候与 vue 绑定在一起&#xff0c;但之后的 v2 版本便比较独立&#xff0c…
阅读更多...
什么是垃圾回收机制（超详细）

什么是垃圾回收机制（超详细）

垃圾回收机制 1.垃圾回收机制&#xff08;Garbage Collction&#xff09;简称GC&#xff0c;是JavaScript中使用的内存管理系统的基本组部分&#xff0c;是为了防止内存泄漏 2.JavaScript是在创建变量&#xff08;对象、字符串等&#xff09;时自动进行了分配内存&#xff0c;并…
阅读更多...
Web实训项目--网页设计（附源码）

Web实训项目--网页设计（附源码）

1 实训基本信息 1.1 实训项目名称 网页设计 1.2 实训环境 本次实训的形式以实战讲解为主&#xff0c;以项目为主导。学习如何设计网页中的轮播图和动画效果&#xff0c;并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。 2 实训内容简介 2.1 网页设计 通过…
阅读更多...
关于vue中如何清除定时器的方法

关于vue中如何清除定时器的方法

一、问题 1、在vue中使用setTimeout定时器的时候&#xff0c;可能会遇到关不掉的情况&#xff0c;会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了&#xff0c;但是有时候没生效&#xff0c;定时器还会继续执行。 2、在这里需要说一下setTimeout的使用场景&am…
阅读更多...
路由vue-route的使用

路由vue-route的使用

文章目录一、项目初始化二、路由配置规则vue-route标签作用&#xff1a;路由匹配到的组件将渲染到这里router-link标签作用&#xff1a;路由导航&#xff08;路由跳转的链接&#xff09;三、声明式导航和编程式导航声明式导航编程式导航四、路由重定向五、嵌套路由特别注意总结…
阅读更多...
04-vscode搭建cmake的编译环境

04-vscode搭建cmake的编译环境

vscodemingw搭建C/C环境系列 01.vscodemingw搭建编译调试环境 02-vscode编译调试单个源文件程序 03-vscode编译调试多个源文件程序 04-vscode搭建cmake的编译环境 文章目录一、简述二、vscode搭建cmake的编译环境&#xff08;方法1&#xff09;1.配置cmake构建目录(可忽略)…
阅读更多...
Redux——详解

Redux——详解

一.初识Redux 相当于vue中的vuex 1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 3.作用: 集中式管理 react 应用中多个组件共享的状态 看看Redux的工作原理图 如果要进行加一操作…
阅读更多...
ES6---promise详解及用法

ES6---promise详解及用法

一、什么是Promise Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配&#xff08;ES8&#xff09;&#xff0c;但是它们是基于promise的)&#xff0c;从语法上讲&#xff0c;Promise是一个对象或者说是构造函数&#xff0c;用来封装异步操作并可…
阅读更多...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

一&#xff1a;源码获取 这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面&#xff0c;这里我将源码资源分享给大家&#xff0c;大家可以直接免费下载使用哦&#xff0c;没有 vip 的小伙伴找我私聊发送"登录注册"即可我给你发文件&#xff0c;此登录注…
阅读更多...
四、vue中路由router配置详解

四、vue中路由router配置详解

目录 一、vue中的路由作用 二、vue中的路由router 使用步骤 三、路由跳转 1、带参数路由跳转&#xff1a; &#xff08;1&#xff09;this.$router.push() &#xff1a; &#xff08;2&#xff09;this.$router.replace() &#xff1a; 2、不带参数路由跳转 3、this.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023