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

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

2024-08-09 298
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 后端程序员的前端捷径-超级容易上手使用的前端框架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
目录
相关文章
卓伊凡
|
7天前
|
存储 前端开发 安全
实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
卓伊凡
84 5
高端源码库
|
5月前
|
JavaScript 前端开发 Java
制造业ERP源码，工厂ERP管理系统，前端框架：Vue，后端框架：SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统，采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能，整合客户与供应商数据，支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能，助力企业实现高效自动化管理，并通过UniAPP实现移动端支持，满足多场景应用需求。
高端源码库
448 1
游客ia4quza4dsxys
|
6月前
|
人工智能 算法 Java
后端程序员逆袭之路：巧用 AI 工具，拿下高薪 offer
在技术职场中，后端程序员面临诸多挑战，如复杂业务逻辑、繁琐代码编写与调试及持续学习压力。然而，AI 工具的兴起为后端开发带来了全新机遇。智能代码生成工具如飞算 JavaAI 可高效完成需求分析、设计与代码生成；智能调试工具如 CodeGuru 能快速定位问题；知识学习工具如 ChatGPT 助力技术提升。借助这些工具，后端程序员不仅能显著提高项目质量和效率，还能展示技术前瞻性与学习能力，拓展技能边界，从而在求职市场中脱颖而出，顺利拿下高薪 offer。
游客ia4quza4dsxys
282 0
miadk
|
5月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架，支持多端运行，结合PHP后端（如ThinkPHP/Laravel），实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互，后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据，RabbitMQ处理异步任务，优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理，确保高效稳定的用户体验。
miadk
291 4
PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
源码世界
|
6月前
|
前端开发 Java 物联网
智慧班牌源码，采用Java + Spring Boot后端框架，搭配Vue2前端技术，支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具，集成电子屏显示、人脸识别及数据交互功能，实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架，搭配Vue2前端技术，支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析，助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛，提升交互体验并降低管理成本，适用于日常教学、考试管理和应急场景，为智慧校园建设提供全面解决方案。
源码世界
395 70
卓伊凡
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
卓伊凡
303 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
程序元宝
|
4月前
|
人工智能 监控 前端开发
AI工具：前端与后端的终极对决？谁将成为新时代的宠儿？
深入探讨AI工具对前端和后端开发的具体影响、各自的机遇与挑战，并分析未来开发者如何驾驭AI，实现能力跃迁。
程序元宝
188 0
v:septhana8
|
7月前
|
前端开发 算法 NoSQL
前端uin后端php社交软件源码，快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案，覆盖多种场景需求。支持即时通讯（一对一聊天、群聊、文件传输、语音/视频通话）、内容动态（发布、点赞、评论）以及红包模块（接入支付宝、微信等第三方支付）。系统采用前后端分离架构，前端基于 UniApp，后端使用 PHP 框架（如 Laravel/Symfony），配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证（JWT 集成）、智能匹配算法等功能，助力快速上线，显著节约开发成本。
v:septhana8
159 1
前端uin后端php社交软件源码，快速构建属于你的交友平台
多客LIJIE
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新，将代练、家政、娱乐社交等场景融合，打造“全能型生活服务生态圈”。以代练为切入点，提供模块化代码支持快速搭建平台，结合智能匹配与技能审核机制，拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性，支持多业务复用，如押金冻结、录屏监控等功能跨领域应用。商业模式多元，包括交易抽成、增值服务及广告联名，同时设计跨领域积分体系提升用户粘性，实现生态共生与B端赋能。
多客LIJIE
471 12

热门文章

最新文章

  • 1
    Vue 3：下一代前端框架的革命性进化
  • 2
    Vue 3：下一代前端框架革新
  • 3
    Vue 3：下一代前端框架的革命
  • 4
    Vue 3：下一代前端框架的革新
  • 5
    Vue 3：现代前端开发的新范式
  • 6
    Vue 3：下一代前端框架革新
  • 7
    Vue 3：下一代前端框架的革命
  • 8
    在Docker部署的前端应用中使用动态环境变量
  • 9
    实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
  • 10
    Vue 3：现代前端开发的全新体验
  • 1
    实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
    84
  • 2
    专业打造一款圈子源码软件系统 / 后端 PHP 搭建部署一样实现利益化
    177
  • 3
    低并发编程｜如何用720个请求让后端服务器瘫痪
    77
  • 4
    构建高效可扩展的后端架构：从设计到实现
    185
  • 5
    开箱即用的GO后台管理系统 Kratos Admin - 后端项目结构说明
    106
  • 6
    开箱即用的GO后台管理系统 Kratos Admin - 后端权限控制
    245
  • 7
    一夜获千星！已获 1.7k+,Art Design Pro：Vue3 + Vite + TypeScript 打造的高颜值管理系统模板，这个让后端小哥直呼救命的后台系统
    552
  • 8
    PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
    291
  • 9
    安装和配置JDK、Tomcat、MySQL环境，以及如何在Linux下更改后端端口。
    354
  • 10
    在Linux系统中安装JDK、Tomcat、MySQL以及部署J2EE后端接口
    396

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证