AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

博客系统前端页面代码实现及页面展示(代码版)

2023-08-05 145
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 博客系统前端页面代码实现及页面展示(代码版)

hi,大家好,今天为大家带来博客系统的前端代码及页面展示

我们使用VS code 这个编码工具来编写代码

博客系统前端页面分为四个部分

1.博客列表页

2.博客编辑页

3.博客登录页

4.博客详情页

🍧1.博客列表页


<!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>
    <!-- 导航栏,nav是导航的缩写 -->
    <div class="nav">
     <img src="image/OIP-C.jpg" alt=" ">
        <div class="title">我的博客系统</div>
        <!-- 一个空白,把后面链接挤过去 -->
        <!-- 简单粗暴的写法 -->
    <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
       <a href="blog_edit.html">写博客</a>
       <!-- 地址回头再说 -->
       <a href="">注销</a>
    </div>
    <!--页面主体部分  -->
    <div class="container">
    <!-- 左侧信息 -->
    <div class="container-left">
        <!-- 这个div表示整个用户信息的区域 -->
        <div class="card">
            <!-- 用户头像 -->
            <img src="image/OIP-C (1).jpg" alt="">
            <!-- 用户名 -->
            <h3>小魏爱炸毛</h3>
            <a href="https://www.github.com">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 class="blog">
                    <!-- 博客标题 -->
                    <div class="title">我的第一篇博客</div>
                    <!-- 博客发布时间 -->
                    <div class="date">2023-05-16 20:00</div>
                    <!-- 博客摘要 -->
                    <div class="desc">
                        从今天起,我要认真写代码,Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis saepe architecto, voluptate quod perferendis repellat doloremque error fuga reiciendis quidem ab fugiat mollitia delectus sint consectetur dignissimos nulla, praesentium numquam?
                    </div>
                    <!-- html不能直接写大于号,得写成转义字符 -->
                        <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
                </div>
                <div class="blog">
                    <!-- 博客标题 -->
                    <div class="title">我的第一篇博客</div>
                    <!-- 博客发布时间 -->
                    <div class="date">2023-05-16 20:00</div>
                    <!-- 博客摘要 -->
                    <div class="desc">
                        <!-- 使用Lorem生成随机字符串 -->
                        从今天起,我要认真写代码,Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis saepe architecto, voluptate quod perferendis repellat doloremque error fuga reiciendis quidem ab fugiat mollitia delectus sint consectetur dignissimos nulla, praesentium numquam?
                    </div>
                    <!-- html不能直接写大于号,得写成转义字符 -->
                        <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
                </div>
                <div class="blog">
                    <!-- 博客标题 -->
                    <div class="title">我的第一篇博客</div>
                    <!-- 博客发布时间 -->
                    <div class="date">2023-05-16 20:00</div>
                    <!-- 博客摘要 -->
                    <div class="desc">
                        从今天起,我要认真写代码,Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis saepe architecto, voluptate quod perferendis repellat doloremque error fuga reiciendis quidem ab fugiat mollitia delectus sint consectetur dignissimos nulla, praesentium numquam?
                    </div>
                    <!-- html不能直接写大于号,得写成转义字符 -->
                        <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
                </div>
    </div>
</div>
</body>
</html>

/* 公共的样式 */
* {
   box-sizing: border-box;
   /* 去除浏览器默认样式  */
   padding: 0;
   margin: 0;
}
html{
    height: 100%;
}
body{
    /* 注意相对路径的写法 */
    background-image: url(../image/wangyibo.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    /* 图片尽可能填满整个元素 */
    background-size: cover;
    height: 100%;
}
/* 导航栏 */
.nav{
    width: 100%;
    /* 导航栏一般高度都是50px */
    height: 50px;
    /* 设置背景色 */
    background-color: rgba(50,50,50,0.4);
    color: white;
/* 使用弹性布局让元素水平排列 */
    display: flex;
    align-items: center;
}
/* 设置导航栏的logo */
.nav img{
    width: 40px;
    height: 40px;
    /* 设置图片空隙 */
    margin-left: 30px;
    margin-right: 10px;
        /* 设置圆角矩形98 */
    border-radius: 20px;
}
.nav a{
    color:white;
    text-decoration: none;
    /* 此处使用内边距把多个链接分开 */
    /* 使用外边距也行,内边距点击范围更大 */
    padding: 0 10px;
}
.nav .spacer{
        width:70%;
}
/* 页面的主体部分 ,也叫做版心*/
.container{
    /* 设置成固定高度宽度,并且水平居中 */
    width:1000px;
    margin-left: auto;
    margin-right: auto;
    /* 设置高度,和浏览器窗口一样高 */
    height: calc(100% - 50px);
    /* 弹性布局 */
    display: flex;
    /* 让元素等间距铺开 */
    justify-content: space-between;
}
.container-left {
    height: 100%; 
    width: 200px;
}
.container-right {
    height:100%;
    /* 留5px像素 */
    width: 795px;
    /* 加上白色背景 */
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    padding: 20px;
    /* 当内容超出范围,自动添加滚动条 */
    overflow: auto;
}
/*  设置用户信息区域*/
.card{
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    padding: 30px;
}
/* 设置用户头像 */
.card img{
    width: 140px;
    height: 140px;
    border-radius: 70px;
}
/*  设置用户名*/
.card h3{
    text-align: center;
    /* 使用内边距讲用户名和头像产生距离 */
    padding: 10px;
}
/* 设置 github地址*/ 
.card a{
    text-align: center;
    /*设置文字颜色 */
    color: gray;
    /* 去掉下划线 */
    text-decoration: none;
    /*  需要把a标签转成块级元素,水平居中才能实现*/
    display: block;
    /* 让a标签和下方有间隔 */
    margin-bottom: 10px;
}
.card .counter{
    display: flex;
    padding: 5px;
    justify-content: space-around;
}

🍬2.博客编辑页


<!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/bolg_edit.css">
    <!-- 引入jquery依赖 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <!-- 引入 editor.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>
    <!-- 导航栏,nav是导航的缩写 -->
    <div class="nav">
        <img src="image/OIP-C.jpg" alt=" ">
           <div class="title">我的博客系统</div>
           <!-- 一个空白,把后面链接挤过去 -->
           <!-- 简单粗暴的写法 -->
       <div class="spacer"></div>
           <a href="blog_list.html">主页</a>
          <a href="blog_edit.html">写博客</a>
          <!-- 地址回头再说 -->
          <a href="">注销</a>
       </div>
       <!-- 博客编辑页 的版心 -->
       <div class="blog-edit-container">
        <form action="">
                <!-- 标题编辑区 -->
                <div class="title">
                <input type="text" id="title-input">
                <input type="submit" id="submit">
        </div>
        <!-- 博客编辑器 -->
        <!--  markdown编辑器放到这个div中-->
        <div id="editor">
        </div>
    </form>
</div>
<script>
    // 编辑器初始化,摘自官方文档
    var editor = editormd("editor", {
        // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
        width: "100%",
        // 设定编辑器高度
        height: "calc(100%-50px)",
        // 编辑器中的初始内容
        markdown: "# 在这里写下一篇博客",
        // 指定 editor.md 依赖的插件路径
        path: "editor.md/lib/"
    });
</script>
</body>
</html>

\/* 放博客编辑页的样式 */
.blog-edit-container{
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}
/* 使用后代选择器,防止和导航栏的title修改冲突 */
.blog-edit-container.title{
        height:50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
}
/* 标题输入框 */
#title-input{
    height:40px;
    width: 890px;
    border-radius: 10px;
    border: none;
    /* 去掉黑色边框 */
    text-indent: 10px;
}
/* 提交按钮 */
#submit{
    height:40px;
    width:100px;
    border-radius: 10px;
      /* 去掉黑色边框 */
    border: none;
        color: white;
        background-color: rgb(0, 183, 255);
}
#submit:hover{
    background-color:rgb(0, 255, 76);
}
.blog-edit-container form{
    height: 100%;
}
#editor{
    border-radius: 10px;
    /* background-color: rgba(255,255,255,0.8); */
    /* 这个也是半透明的效果,但是是让子元素也跟着一起半透明 */
    opacity: 80%;
}

🍨3.博客登录页


<!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>
     <!-- 导航栏,nav是导航的缩写 -->
     <div class="nav">
        <img src="image/OIP-C.jpg" alt=" ">
           <div class="title">我的博客系统</div>
           <!-- 一个空白,把后面链接挤过去 -->
           <!-- 简单粗暴的写法 -->
       <div class="spacer"></div>
           <a href="blog_list.html">主页</a>
          <a href="blog_edit.html">写博客</a>
    </div>
    <!-- 登录页版心 -->
    <div class="login-container">
    <!-- 登录对话框 -->
    <div class="login-dialog">
     <h3>登录</h3>
     <!-- 使用form包裹一下下下列内容,便于对服务器提交 -->
     <form action="">
         <div class="row">
        <span>用户名</span>
        <input type="text" id="username">
     </div>
     <div class="row">
        <span>密码</span>
        <input type="password" id="password">
     </div>
     <div class="row">
        <input type="submit" id="submit" value="登录">
     </div>
     </form>
    </div>
</div>
</body>
</html>

/* 这个是登录页的样式 */
.login-container{
        width: 100%;
        height: calc(100% - 50px);
        /* 为了让login-dialog垂直水平居中,使用弹性布局 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.login-dialog{
    width: 500px;
    height: 300px;
    background-color:rgba(255,255,255,0.8);
    border-radius:10px ;
}
/* 登录标题*/
.login-dialog h3{
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}
/* 针对每一行的样式*/
.row{
    height: 50px;
    width: 90%;
    display: flex;
    justify-content: space-around;
    /* 垂直居中 */
    align-items: center;
}
/* 针对每一行的文字 */
.row span{
    font-size: 20px;
    width: 60px;
}
.row #username{
    width: 350px;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;
    /* 不要贴身边框写的操作 */
}
.row #password{
    width: 350px;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;
    /* 同上 */
}
.row #submit{
    width: 150px;
    height: 40px;
   color: white;
    background-color:rgb(0, 255, 140);
    /* 文字水平居中 */
    text-align: center;
    line-height: 40px;
    /* 垂直居中 */
    border-radius: 10px;
    margin-top: 30px;
}
.row #submit:hover{
    background-color: rgb(0, 170, 255);
}

🍡4.博客详情页


<!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/bolg_detail.css">
</head>
<body>
     <!-- 导航栏,nav是导航的缩写 -->
     <div class="nav">
        <img src="image/OIP-C.jpg" alt=" ">
           <div class="title">我的博客系统</div>
           <!-- 一个空白,把后面链接挤过去 -->
           <!-- 简单粗暴的写法 -->
       <div class="spacer"></div>
           <a href="blog_list.html">主页</a>
          <a href="blog_edit.html">写博客</a>
          <!-- 地址回头再说 -->
          <a href="">注销</a>
       </div>
       <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <!-- 这个div表示整个用户信息的区域 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="image/OIP-C (1).jpg" alt="">
                <!-- 用户名 -->
                <h3>小魏爱炸毛</h3>
                <a href="https://www.github.com">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">
            <h3>这是我的第一篇博客</h3>
            <div class="date">2023-05-16 20:00</div>
            <!--正文用段落-->
            <div class="content">
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
             <p>从今天开始我要认真写代码,Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ducimus, officia omnis, voluptatibus maiores praesentium, eveniet atque sapiente ullam natus quibusdam quod est? Ipsa, dolore libero rerum earum molestiae dignissimos.</p>
            </div>
        </div>
    </div> 
</body>
</html>

.container-right h3 {
    font-size: 22px;
    text-align: center;
    font-weight: 900;
    padding: 20px 0;
}
.container-right .date {
    text-align: center;
    color: rgb(0, 128, 0);
    padding: 10px 0;
}
.container-right .content p {
    text-indent: 2em;
    margin-bottom: 5px;
}


文章标签：
C++
前端开发
关键词：
前端代码
前端页面
博客前端
系统前端
系统前端页面
霸总爱吃鱿鱼虾
目录
相关文章
gkkkkk
|
14天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
gkkkkk
6 1
.自定义认证前端页面
想飞的雪糕
|
26天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时，生成的可执行文件体积较大，通常接近 100 MB，而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时，使其能够在目标设备上独立运行，无需额外安装依赖。尽管体积较大，但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法，可以优化可执行文件的体积。
想飞的雪糕
105 3
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
阿里云计算巢-雲尧
|
9天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息，并通过阿里云计算巢完成了Appsmith的快速部署，使用者不需要自己下载代码，不需要自己安装复杂的依赖，不需要了解底层技术，只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith，非技术同学也能轻松搞定。
阿里云计算巢-雲尧
28 5
东方睿赢
|
8天前
|
前端开发 JavaScript
前端界的革命：掌握这些新技术，让你的代码简洁到让人惊叹！
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法，极大减少了代码冗余。React通过虚拟DOM和组件化思想，提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割，优化了应用性能和加载速度。这些新技术正引领前端开发的革命，使代码更加简洁、高效、可维护。
东方睿赢
13 2
众所周知
|
8天前
|
前端开发 JavaScript 测试技术
前端工程师的必修课：如何写出优雅、可维护的代码？
前端工程作为数字世界的门面，编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面，提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习，前端工程师可以写出高效且易于维护的代码，为项目的成功打下坚实基础。
众所周知
20 2
土木林森
|
14天前
|
监控 前端开发 JavaScript
前端开发的终极奥义：如何让你的代码既快又美，还不易出错？
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域，本文从性能优化、代码美化和错误处理三个方面，探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能；遵循命名规范、保持一致的缩进与空行、添加注释与文档，让代码更易读；通过输入验证、try-catch捕获异常、日志与监控，增强代码的健壮性。追求代码的“快、美、稳”，是每个前端开发者的目标。
土木林森
31 3
土木林森
|
15天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧：如何让你的代码既简洁又高效，还能减少bug？
【10月更文挑战第30天】前端开发充满挑战与创新，如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧：1. 模块化，提高代码复用性；2. 组件化，降低代码耦合度；3. 使用现代框架，提高开发效率；4. 统一代码规范，降低沟通成本；5. 利用工具，优化代码质量。掌握这些技巧，让前端开发更高效。
土木林森
32 1
刘大猫.
|
1月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
刘大猫.
37 18
土木林森
|
22天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器：深度解析递归组件与动态组件的奥妙，让你代码效率翻倍！
【10月更文挑战第23天】在Web开发中，组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身，适用于处理层级结构数据，如菜单和树形控件。动态组件则根据数据变化动态切换组件显示，适用于不同业务逻辑下的组件展示。通过示例，展示了这两种组件的实现方法及其在实际开发中的应用价值。
土木林森
28 1
想飞的雪糕
|
26天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇（六）：发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型，详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据，包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据，并使用 MiniMongo 实现实时数据同步。此外，还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组，实现数据的自动更新。
想飞的雪糕
36 2

热门文章

最新文章

  • 1
    前端，测试如何修改后端接口返回的响应数据
  • 2
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 3
    前端分页插件pagination
  • 4
    AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
  • 5
    前端 时间个性化 插件 jquery.timeago.js
  • 6
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 7
    【前端】vue3+elment plus实现table表格右侧滑动分页加载
  • 8
    [前端]jekyll+markdown+github搭建个人博客
  • 9
    你用过的网站前端优化的技术有哪些？
  • 10
    合格前端系列第四弹-如何监听一个数组的变化
  • 1
    前端后端测试接口mork神器，Apifox使用一分钟入门
    213
  • 2
    编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
    467
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    55
  • 4
    基于jeecg前端实现从表ERP格式选择
    34
  • 5
    前端进度条组件NProgress
    83
  • 6
    前端效果 登入界面
    49
  • 7
    vue前端展示【1】
    31
  • 8
    nvm,npm,yarn相关指令，前端配置准备
    54
  • 9
    深入浅出JVM（六）之前端编译过程与语法糖原理
    51
  • 10
    HTML5基础题及答案——必刷前端题目(背)
    59

    • 相关课程

    更多
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Wordpress博客系统
    • 下一篇
    阿里云OSS设置跨域访问