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

后端程序员的前端捷径-超级容易上手使用的前端框架layUI（上）

2024-08-09 65
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 后端程序员的前端捷径-超级容易上手使用的前端框架layUI

1 LayUI 概述

官网：https://www.layui.com/

现网址：https://www.layuion.com/

在官网首页，可以很方便的下载LayUI

LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。

使得前端页面的制作变得更加简单。

2 layUI环境搭建

2.1 下载

在官网即可完成下载https://www.layui.com/

2.2 导入依赖

下载的LayUI解压后，将其中的layui目录导入项目中

<!-- 引入layUI的css   -->
<link href="layui/css/layui.css" rel="stylesheet">
<!-- 引入layUI的js核心库   -->
<script src="layui/layui.js"></script>

2 layUI布局

  • layUI的布局容器
  • layui-container : 带有左右留白的布局容器
  • layui-fluid : 占满屏幕的布局容器
  • 栅格系统
  • 响应式栅格布局，每行分 12 等分

布局容器

 <div class="layui-container" style="height: 300px;background: #123456">
</div>
<div class="layui-fluid" style="height: 300px;background: #123456">
</div>

响应式布局：移动设备、平板、桌面端的不同表现

<div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
        移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
        移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
        移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
</div>

栅格列间距

<div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
        <div style="background: #567890">1/3</div>
    </div>
    <div class="layui-col-md4">
        <div  style="background: #567890">1/3</div>
    </div>
    <div class="layui-col-md4" >
        <div style="background: #aabbcc">1/3</div>
    </div>
</div>

列偏移

<div class="layui-row">
    <div class="layui-col-md4">
        <div style="background: #567890">1/3</div>
    </div>
    <div class="layui-col-md4 layui-col-md-offset4">
        <div  style="background: #aabbcc">1/3</div>
    </div>
</div>

列嵌套

<div class="layui-row layui-col-space5">
    <div class="layui-col-md5">
        <div class="layui-row">
            <div class="layui-col-md3">
                内部列
            </div>
            <div class="layui-col-md9">
                内部列
            </div>
            <div class="layui-col-md12">
                内部列
            </div>
        </div>
    </div>
    <div class="layui-col-md7">
        <div class="layui-row">
            <div class="layui-col-md12">
                内部列
            </div>
            <div class="layui-col-md9">
                内部列
            </div>
            <div class="layui-col-md3">
                内部列
            </div>
        </div>
    </div>
</div>


4 layUI按钮

<!-- 按钮基本用法   -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<hr>
<!-- 常用的按钮样式   -->
<div>
    <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
    <button type="button" class="layui-btn">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>
<hr>
<!-- 按钮尺寸  -->
<button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
<button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm">小型按钮</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
<hr>
<!-- 圆角按钮 -->
<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
<hr>
<!-- 带图标按钮 -->
<button type="button" class="layui-btn"><i class="layui-icon">&#xe68f;</i></button>
<button type="button" class="layui-btn"><i class="layui-icon layui-icon-email"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<hr>
<!-- 按钮组 -->
<div class="layui-btn-group">
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn ">编辑</button>
    <button type="button" class="layui-btn">删除</button>
</div>
<hr>
<!--带图标的按钮组-->
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-normal">
        <i class="layui-icon layui-icon-mike"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-warm">
        <i class="layui-icon layui-icon-logout"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-danger">
        <i class="layui-icon layui-icon-username"></i>
    </button>
</div>

5 layUI表单

使用表单要导入 form模块

样式：

  • 表单样式：layui-form
  • 表单项: layui-form-item
  • 表单元素块：layui-input-block

行内表单元素: layui-input-inline


属性：


必填属性：lay-verify=“required”

关闭输入框提示：autocomplete=“off”

设置复选框的风格： lay-skin=“primary”

事件过滤器：lay-filter

 

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label" for="name">输入框</label>
    <div class="layui-input-block">
      <input id="name" type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">标签区域</label>
    <div class="layui-input-inline">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">联动选择框</label>
    <div class="layui-input-inline">
      <select name="quiz1">
        <option value="">请选择省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[game]" title="游戏">
    </div>
  </div>
  <div class="layui-form-item" pane="">
    <label class="layui-form-label">原始复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
      <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
      <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关-默认关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="同意|不同意">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关-默认开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
  layui.use(['form', 'layedit', 'laydate'], function() {
    var form = layui.form;
  })
</script>

表单监听提交

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label" for="name">用户名</label>
    <div class="layui-input-block">
      <input id="name" type="text" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-inline">
      <select name="city">
        <option value="" disabled>请选择省</option>
        <option value="浙江省" selected="">浙江省</option>
        <option value="江西省">江西省</option>
        <option value="福建省">福建省</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" name="info" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
  layui.use(['form', 'layedit', 'laydate'], function() {
    var form = layui.form;
    //监听提交
    form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
        })
        return false;
    });
  })
</script>

存值、取值表单

<form class="layui-form" action="" lay-filter="example">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[daze]" title="发呆">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
    </div>
  </div>
 
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>

    <script>
        layui.use('form',function () {
            var form = layui.form;

            //表单赋值
            layui.$('#LAY-component-form-setval').on('click', function(){
                form.val('example', {
                    "username": "贤心" // "name": "value"
                    ,"password": "123456"
                    ,"interest": 1
                    ,"like[write]": true //复选框选中状态
                    ,"close": true //开关状态
                    ,"sex": "女"
                    ,"desc": "我爱 layui"
                });
            });
            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function(){
                var data = form.val('example');
                //异步请求的操作
                //将json对象转换成json字符串
                alert(JSON.stringify(data));
            });
        })
    </script>


有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。

执行 form.render(type, filter); 方法即可

6 layUI导航

使用导航要导入 element模块

普通导航

样式：

  • layui-nav ： 导航
  • layui-bg-green : 导航背景
  • layui-nav-item ： 导航菜单
  • layui-this : 表示默认选中
  • layui-nav-child ：导航二级菜单
<!-- 普通导航 -->
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item"><a href="">产品</a></li>
    <li class="layui-nav-item  layui-this"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child"> 
            <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<script>
    layui.use('element',function () {
        var element = layui.element;
    })
</script>

带徽章的导航

样式：

  • layui-badge：徽章方块效果
  • layui-badge-dot：徽章 点效果
  • layui-nav-img：导航图片
<ul class="layui-nav layui-bg-green">
    <li class="layui-nav-item">
        <a href="">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item">
        <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>
</ul>

垂直导航

样式：

  • layui-nav-tree : 垂直导航
  • layui-nav-itemed: 默认展开
  • layui-nav-side: 侧边导航
<ul class="layui-nav layui-nav-tree" lay-filter="test">
    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
    <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">默认展开</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">选项1</a></dd>
            <dd><a href="javascript:;">选项2</a></dd>
            <dd><a href="">跳转</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

面包屑导航

样式：

  • layui-breadcrumb ：面包屑导航
  • lay-separator ：分隔符
<!--
面包屑导航
layui-breadcrumb
-->
<span class="layui-breadcrumb" lay-separator="----">
    <a href="">首页</a>
    <a href="">国际新闻</a>
    <a href="">亚太地区</a>
    <a><cite>正文</cite></a>
</span>

后端程序员的前端捷径-超级容易上手使用的前端框架layUI（下）：https://developer.aliyun.com/article/1580665

文章标签：
前端开发
程序员
容器
JavaScript
关键词：
前端layui
后端前端
后端前端框架
后端程序员前端
程序员前端
yinying293
目录
相关文章
六卿
|
3月前
|
前端开发
后端返回图片二进制流，前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式，以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`，然后使用`btoa`和`Uint8Array`进行转换。
六卿
365 5
龙大吉
|
3月前
|
前端开发 API UED
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
龙大吉
124 2
多客潇潇
|
12天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣，提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心，通过用户行为数据分析和机器学习提高匹配准确性。
多客潇潇
44 3
mzlogin
|
2月前
|
前端开发 程序员 API
前端｜基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框，要求下拉选项列表能根据用户输入内容动态刷新，最终提交的值必须是由选项列表中点选的。
mzlogin
59 3
dream_ready
|
2月前
|
JSON 前端开发 Java
震惊！图文并茂——Java后端如何响应不同格式的数据给前端（带源码）
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端，包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
dream_ready
173 1
震惊！图文并茂——Java后端如何响应不同格式的数据给前端（带源码）
java冯坚持
|
2月前
|
前端开发 小程序 Java
java基础：map遍历使用；java使用 Patten 和Matches 进行正则匹配；后端传到前端展示图片三种情况，并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配，以及后端向前端传输图片并保存到手机的三种情况。
java冯坚持
29 1
你都不懂
|
2月前
|
JavaScript 前端开发 网络架构
Vue前端框架的基础配置Vue前端框架的基础配置
Vue前端框架的基础配置
你都不懂
40 8
dream_ready
|
2月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码，前端展示并进行session验证（带完整前后端源码）
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证，包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
dream_ready
325 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码，前端展示并进行session验证（带完整前后端源码）
dream_ready
|
2月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数？后端如何接收前端传过来的参数，传递单个参数，多个参数，对象，数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射，并介绍了前后端参数传递的多种方式，包括传递单个参数、多个参数、对象、数组、集合以及JSON数据，并且涵盖了参数重命名和从URL中获取参数的方法。
dream_ready
261 0
@RequestMapping运用举例(有源码) 前后端如何传递参数？后端如何接收前端传过来的参数，传递单个参数，多个参数，对象，数组/集合(有源码)
java冯坚持
|
2月前
|
前端开发 JavaScript Java
导出excel的两个方式：前端vue+XLSX 导出excel，vue+后端POI 导出excel，并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法，并对比分析了它们的优缺点。
java冯坚持
948 0

热门文章

最新文章

  • 1
    构建高效后端服务：微服务架构的深度解析与实践
  • 2
    后端服务架构的微服务化转型
  • 3
    深入理解后端服务的负载均衡技术
  • 4
    构建高效后端服务：从理论到实战
  • 5
    构建高效后端服务：微服务架构的深度剖析与实践####
  • 6
    后端开发中的缓存机制：深度解析与最佳实践####
  • 7
    后端开发中的性能优化策略
  • 8
    后端性能优化：从理论到实践
  • 9
    slb后端服务器故障
  • 10
    实现跨域请求：Spring Boot后端的解决方案
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    95
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    83
  • 3
    使用Vue.js构建交互式前端的技术探索
    92
  • 4
    如何优化前端性能：关键步骤和技巧
    89
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    103
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    124
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    273
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    74
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    98
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    148

    • 相关课程

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

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 十分钟上线-使用函数计算构建支付宝小程序服务
  • 机器学习在互联网后端技术中的应用

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • WEB网页编程实战
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)