AI 助理
备案控制台
开发者社区 彭世瑜的博客 文章 正文

前端学习：javascript进阶

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

知识点

复习
html
    标签，块级 行内
css
    position
    background
    text-align
    margin
    padding
    font-size
    z-index
    over-flow
    :hover
    opacity
    float(clear:both)
    line-height
    border
    color
    display
    补充：页面布局
    主站布局
        <div class="pg-header"></div>
            <style>width:980px; margin:0 auto /*内容自动居中*/</style>
        <div class="pg-body"></div>
        <div class="pg-footer"></div>
    后台管理布局
        position
            fixed  窗口定位，永远固定在窗口某个位置
            relative 单独无意义
            absolute 页面定位，第一次定位在指定页面位置，滚轮滚动则改变
        1.左侧菜单跟随滚动条 fixed
        2.左侧菜单固定不动  absolute
javascript
    for循环
        for(var item in [11, 22, 33]){
            console.log(item)  //输出索引
        }
        var arr = [11, 22, 33, 44]
        for(var i = 0; i < arr.length; i = i + 1){
            break;
        }
        while(条件){
        }
    条件语句
        if(){
        }
        else if{
        }
        else{
        }
        ==
        ===
        swich(name){
            case "1":
                console.log("1");
                break;
            case "2":
                console.log("2");
                break;
            default :
                console.log("default");
        }
    函数：
        function func(arg){
            return arg+1;
        }
        var result = func(1);
        console.log(result);
    普通函数：
        function func(){
        }
    匿名函数：
        setInterval("func()", 5000);
        setInterval(function(){
            console.log("123");
            }, 5000)
    自执行函数：
        function func(){
        }
        func()
        //解释到这里就会自动执行
        (function(arg){
            console.log(arg);
        })(1)
    序列化操作
        JSON.stringify(obj)  // 将对象转换为字符串
        JSON.parse(str)  // 将字符串转为对象
    转义
        客户端（cookie） -》 服务器端
        将数据进过转义后，保存在cookie中
        decodeURI()
        encodeURI()
    eval
        python
            val = eval(表达式)
                    exec(执行代码)
        javascript
            eval两者集合
    时间
        Date类
            var d = new Date()
            d.getxxx() 获取
            d.setxxx() 设置
    作用域
        其他语言（c#）：以代码块作为作用域
        public void func(){
            if(1 == 1){
                string name = "java";
            }
            console.writeline(name); //报错
        }
        python：以函数作为作用域
            def func():
                if(1==1):
                    name = "alex"
                print(name) //正常输出
            func()
            print(name) //报错
        javascript:
            1.以函数作为作用域
            function func(){
                if(1==1){
                    var name = "alex";
                 }
                 console.log(name);
            }
            2.函数的作用域，在函数未被调用之前，已经被创建
            3.函数的作用域存在作用域链，调用前被创建
            例如：
            xo = "eric";
            function func() {
                xo = "alex";
                function foo() {
                    console.log(xo)
                }
                xo = "tony";
                return foo;
            }
            var ret = func()
            ret()
            4.函数内局部变量提前申明
    面向对象
    function foo(){
        var xo = "alex";
    }
    foo()
    function Foo(n){
        this.name = n;  // 属性
        this.sayName = function(){
            console.log(this.name);
        }  // 方法
    }
    var obj = new Foo("we");
    obj.name
    obj.sayName()
    this 指代对象（python self）
    创建对象，new 函数()
    原型：
    function Foo(n){
        this.name = n;
    }
    # Foo原型  字典
    Foo.prototype = {
        “sayName": function(){
            console.log(this.name)
        }
    }
DOM 文档对象模型
    查找
        直接查找
            var obj = document.getElementById("li");
        间接查找
            文件内容操作
            innerText 仅文本
            innerHTML 全部内容
            value
                input value 获取当前标签中的值
                select value 获取选中的value值（selectedIndex）
                textarea value获取当前标签中的值
            搜索框示例
    样式操作
        className
        classList
            classList.add
            classList.remove
        obj.style.fontSize="16px";
        obj.style.backgroundColor="red";
    属性操作
        attributes
        setAttribute
        removeAttribute
    创建标签，添加到html中
        1.字符串
        2.对象 document.createElement("div")
    提交表单
        任何标签都可以，通过dom提交表单
        document.getElementById("id").submit();
    其他
        console.log()  输出框
        alert()        弹出框
        var ret = confirm() 确认框 true/false
    url和刷新
        location.href  获取url
        location.href= "url" 设置url，重定向
        location.reload() 重新加载 相当于 location.href = location.href
    定时器
        var obj = setInterval(function(){}, 5000)
        clearInterval(obj)
    设置延时
        var obj = setTimeout(function(){}, 5000)
        clearTimeout(obj)
    事件
        onclick onblur onfocus
    面试题：行为 样式 结构 相分离的页面？
             js css html
    this 谁调用this，就指向谁
    绑定事件
        1.直接绑定标签， onclick="func()"
        2.现获取dom对象，然后进行绑定
            document.getElementById("id").onclick=func()
        this,当前触发事件的标签
            第一种绑定方式：
                onclick="func(this)"
                function func(self){
                    //self,当前点击的标签
                }
            第二种绑定方式：
                id ="id"
                document.getElementById("id").onclick=function(){
                    this 指代当前点击的标签
                }
            第三种绑定方式：
                一个事件可以执行多个函数
                addEventListener()
    css属性转为javascript   -去掉，首字符大写
    多查手册
    sublime  插件 emmet

代码实例：


AO对象

function func(age){
        console.log(age);  //function
        var age = 27;
        console.log(age);  //27
        function age() {}
        console.log(age); //27
    }
    func(3);
    /*
    active object ==> AO
    1.形式参数  AO.age = undefined; AO.age = 3;
    2.局部变量  AO.age = undefined;
    3.函数声明表达式  AO.age = function()
     */

一个hover两个元素不一样的效果

<style>
    .item:hover{
        background-color: #e4393c;
    }
    .item:hover .b{
        background-color: #64b5dd;
    }
</style>
<div class="item">
    <div class="a">1234567890</div>
    <div class="b">1234567890</div>
</div>

显示效果


image.png

javascript以函数为作用域

<script>
        xo = "eric";
        function func() {
            xo = "alex";
            function foo() {
                console.log(xo);  //tony
                xo = "Jack";
            }
            xo = "tony";
            return foo;
        }
        var ret = func();
        ret()
</script>

左侧菜单跟随滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单跟随滚动</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-header{
            height:48px;
            background-color: #0d3ea2;
        }
        .pg-content .menu{
            width:200px;
            position: fixed;
            top:48px;
            left:0;
            bottom:0;
            background-color: #333333;
        }
        .pg-content .content{
            position:fixed;
            top: 48px;
            left:200px;
            right:0;
            bottom:0;
            background-color: #dddddd;
            overflow:auto;
        }
    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu">
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div>
    <div class="content">
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

显示效果

image.png


左侧菜单固定不动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单固定不动</title>
    <style>
        body{
            margin: 0 auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height:48px;
            background-color: #0d3ea2;
        }
        .pg-content .menu{
            width:200px;
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
        }
        .menu-back{
             background-color: #333333;
        }
        .pg-content .content{
            position:absolute;
            top: 48px;
            left:200px;
            right:0;
            bottom:0;
            /*!*min-width:980px;*!  最小宽度*/
            /*overflow:auto;*/
        }
        .content-back{
            background-color: #dddddd;
        }
    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu left">
        <div class="menu-back">
        <p style="margin-top: 0">lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div></div>
    <div class="content right">
        <div class="content-back">
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div>
</div></div>
<div class="pg-footer"></div>
</body>
</html>

效果同上


顶部菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶部菜单栏</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body{
            margin: 0 auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height:48px;
            background-color: #0d3ea2;
            line-height: 48px;
             color: white;
        }
        .pg-header .logo{
            width:200px;
            color:white;
            font-size: 21px;
            text-align: center;
            background-color: #0d3686;
        }
        .pg-header .icons{
            padding: 0 20px;
        }
        .pg-header .icons:hover{
            background-color: #0d3686;
        }
        .pg-header .icons .num{
            background-color: red;
            display: inline-block;
            padding: 10px 7px;
            font-size:12px;
            border-radius: 50%;
            line-height: 1px;
        }
        .pg-header .user{
            padding: 0 30px;
            height: 48px;
            margin-right: 100px;
            background-color: #0d3ea2;
        }
        .pg-header .user .menu{
            position: absolute;
            right:40px;
            top:48px;
            width:160px;
            z-index:20;
            background-color: #dddddd;
            display:none;
        }
        .pg-header .user .menu a{
            display:block;
            text-underline: none;
            /*background-color: #0d3686;*/
        }
        .pg-header .user:hover{
            background-color: #0d3686;
        }
        .pg-header .user:hover .menu{
            display:block;
        }
        .pg-header .user .menu a:hover{
           background-color: #64b5dd;
        }
        .pg-header .user a img{
            width:40px;
            height: 40px;
            border-radius: 50%;
            margin-top: 4px;
        }
        .pg-content{
        }
        .pg-content .menu{
            width:200px;
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
        }
        .menu-back{
             background-color: #333333;
        }
        .pg-content .content{
            position:absolute;
            top: 48px;
            left:200px;
            right:0;
            bottom:0;
            z-index:9;
            /*!*min-width:980px;*!  最小宽度*/
            /*overflow:auto;*/
        }
        .content-back{
            background-color: #dddddd;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="logo left">毛豆科技</div>
    <div class="user right">
        <a href="#"><img src="img/微信头像.jpg" alt=""></a>
        <div class="menu">
            <a href="#">设置</a>
            <a href="#">资料</a>
            <a href="#">退出</a>
        </div>
        </div>
        <div class="icons right">
         <i class="fa fa-commenting-o" aria-hidden="true"></i>
             <span class="num">5</span>
     </div>
     <div class="icons right">
         <i class="fa fa-envelope-o" aria-hidden="true"></i>
     </div>
</div>
<div class="pg-content">
    <div class="menu left">
        <div class="menu-back">
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
    </div></div>
    <div class="content right">
        <div class="content-back">
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div>
</div></div>
<div class="pg-footer"></div>
</body>
</html>

显示效果

image.png


提交表单


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
</head>
<body>
<form id="f1" action="http://www.baidu.com/s?">
    <input type="text" name="wd">
    <input type="submit" value="提交">
    <a onclick="submitForm()">提交</a>
</form>
<script>
    function submitForm() {
        document.getElementById("f1").submit();
    }
</script>
</body>
</html>

事件捕捉冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            width:400px;
            height:300px;
            background-color: #e4393c;
        }
        #content{
            width:300px;
            height:200px;
            background-color: #0d3ea2;
        }
    </style>
</head>
<body>
捕捉：html -> body -> div
冒泡：div -> body -> html
<div id="main">
    <div id="content"></div>
</div>
<script>
    var main = document.getElementById("main");
    var content = document.getElementById("content");
    // false 冒泡  true  捕捉
    main.addEventListener("click", function () {
        console.log("main");
    }, true);
     content.addEventListener("click", function () {
        console.log("content");
    }, true);
</script>
</body>
</html>

添加标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加标签</title>
</head>
<body>
    <button onclick="addElement1()">添加1</button>
    <button onclick="addElement2()">添加2</button>
    <div id="i1"><p><input type="text"></p></div>
    <script>
        // 通过字符串创建
        function addElement1() {
            // 创建标签，添加到li里面
            var tag = document.getElementById("i1");
            var newTag = "<p><input type='text'></p>";
            // beforeBegin  afterBegin  beforeEnd  afterEnd
            tag.insertAdjacentHTML("beforeEnd", newTag);
        }
        // 通过对象方式
         function addElement2() {
            // 创建标签，添加到li里面
            var tag = document.getElementById("i1");
            var input = document.createElement("input");
            input.setAttribute("type", "text");
            input.style.color = "red";
            var p = document.createElement("p");
            p.appendChild(input);
            tag.appendChild(p);
        }
    </script>
</body>
</html>

绑定多个事件函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定多个事件函数</title>
</head>
<body>
    <div id="i1" style="width: 300px; 
    height:400px; background-color: red"></div>
    <script>
        var tag = document.getElementById("i1");
        tag.addEventListener("click", function () {
            console.log("111");
        },false);
        tag.addEventListener("click", function () {
            console.log("222");
        },false);
    </script>
</body>
</html>

行为样式结构分离实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行为样式结构分离实例</title>
    <style>
        #i1{
            background-color: #0d3686;
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <script>
        var div = document.getElementById("i1");
        div.onclick = function(){
            console.log("hello world")
        }
    </script>
</body>
</html>

表格隔行换色-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格隔行换色-1</title>
</head>
<body>
    <table border="1px" style="width:300px">
        <tr onmouseover="t1(0)" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmouseover="t1(1)" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmouseover="t1(2)" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        function t1(n) {
            var tag =document.getElementsByTagName("tr")[n];
            console.log(tag);
            tag.style.backgroundColor="red";
        }
        function t2(n) {
            var tag =document.getElementsByTagName("tr")[n];
            console.log(tag);
            tag.style.backgroundColor="";
        }
    </script>
</body>
</html>

image.png


表格隔行换色-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格隔行换色-2</title>
</head>
<body>
    <table border="1px" style="width:300px">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        var trs = document.getElementsByTagName("tr");
        var len = trs.length
        for(var i = 0; i < len; i++){
            // i =0 1 2 作用域改变了
            trs[i].onmouseover = function () {
                //this指向调用者
                this.style.backgroundColor="red";
            };
            trs[i].onmouseout = function () {
                this.style.backgroundColor="";
            };
        }
    </script>
</body>
</html>

设置延时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置延时</title>
</head>
<body>
<div id="i1"></div>
<input onclick="del()" type="button" value="删除">
<script>
    function del() {
        var tag = document.getElementById("i1");
        tag.innerText="已删除";
        var obj = setTimeout(function () {
            tag.innerText="";
        }, 5000)
    }
</script>
</body>
</html>

输入框提示功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框提示功能</title>
</head>
<body>
    <div style="width:600px; margin: 0 auto;">
        <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字">
        <input id="i2" type="text" placeholder="请输入关键字">
    </div>
    <script>
        // 光标移入输入框隐藏提示文字
        function Focus() {
            var tag = document.getElementById("i1");
            var val = tag.value;
            if(val=="请输入关键字"){
                tag.value="";
            }
        }
        // 光标移出输入框显示提示文字
        function Blur() {
            var tag = document.getElementById("i1");
            if(tag.value.length==0){
                tag.value="请输入关键字";
            }
        }
    </script>
</body>
</html>

效果

image.png

文章标签：
JavaScript
前端开发
关键词：
JavaScript前端
JavaScript学习
前端学习
前端javascript
JavaScript进阶
码农技术君
目录
相关文章
想飞的雪糕
|
9天前
|
前端开发 机器人 API
前端大模型入门（一）：用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型（LLM）的HTTP API流式调用机制及其在前端的实现方法。通过流式调用，服务器可以逐步发送生成的文本内容，前端则实时处理并展示这些数据块，从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误，以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景，能够显著减少用户的等待时间，增强交互性。
想飞的雪糕
83 2
你都不懂
|
9天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
24 0
G0518
|
10天前
|
JavaScript 前端开发 API
Vue.js：现代前端开发的强大框架
【10月更文挑战第11天】Vue.js：现代前端开发的强大框架
G0518
58 41
源码星辰
|
5天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript（简称JS）是一种广泛使用的脚本语言，特别在前端开发领域，它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用（SPA），JavaScript都扮演着不可或缺的角色。
源码星辰
16 3
G0518
|
12天前
|
JavaScript 前端开发 API
Vue.js：打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js：打造高效前端应用的最佳选择
G0518
14 2
代码bug生产队
|
12天前
|
存储 JavaScript 前端开发
前端开发：Vue.js入门与实战
【10月更文挑战第9天】前端开发：Vue.js入门与实战
代码bug生产队
14 1
神明木佑
|
14天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
神明木佑
12 2
神明木佑
|
14天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
神明木佑
13 2
java冯坚持
|
13天前
|
JavaScript 前端开发 Java
VUE学习四：前端模块化，ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念，以及如何在ES6和ES5中实现模块化，包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import，以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
java冯坚持
43 0
VUE学习四：前端模块化，ES6和ES5如何实现模块化
神明木佑
|
14天前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
神明木佑
29 1

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    JS 获取图片原始尺寸－防止图片溢出
  • 3
    《你不知道的JavaScript》整理（三）——对象
  • 4
    javascript:巧用eval函数组装表单输入项为json对象
  • 5
    vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
  • 6
    【JavaScript】动态修改元素的 background-image
  • 7
    JavaScript 技术篇 - js通过xpath路径定位元素方法
  • 8
    JavaScript 实时监听input中值变化
  • 9
    js阻止表单提交的两种方法
  • 10
    Android JS相互调用详解
  • 1
    前端 基础标签
    26
  • 2
    PHP医院安全不良事件管理系统源码（AEMS）前端vue2+element+后端laravel8不良事件上报与闭环管理
    75
  • 3
    前端基础知识
    52
  • 4
    BoostCompass( http_server 模块 | 项目前端代码 )
    60
  • 5
    java测试链接超时返回前端
    51
  • 6
    深入理解前端开发：从基础到实践
    78
  • 7
    快照测试在前端自动化测试中的应用
    49
  • 8
    前端自动化测试中的快照测试原理
    94
  • 9
    前端自动化测试
    164
  • 10
    新一代前端框架：革命性的Web开发利器
    64

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础1：前端开发环境的安装和配置
  • CSS基础教程
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片