精华内容
下载资源
问答
  • webstorm开发前端
    2019-10-03 12:00:39

    每日的开发都在紧张中进行,代码的运用和流通性大,有些想酝酿品尝的东西,来不及停留而留下遗憾,基于此,想起几次前辈们的建议,用写博客来记录这些曾在我们内心荡漾的一些东西。

     

    需要安装的软件:WebStorm、Git、Node。

    WebStorm和Node直接安装就可以了,Git安装后还需要配置。

    然后因为公司前端项目的代码放在gitlab上,要从上面拉下来需要电脑的key:

    1.进入电脑的C:\Users\XUYIYUAN\.ssh文件夹,空白处鼠标右键,然后点击Git Bash Here

    2.生成key输入 :ssh-keygen -t rsa

    3.获取key:cat id_rsa.pub   ,然后copy。

    4.登录gitlab,进入设置里的SSH Keys,add  key进去。

    5.需要公司哪个项目的代码的,复制该项目的SSH,然后选择需要保存的文件夹,空白处鼠标右键,然后点击Git Bash Here。

    6.具体参照这个 https://www.cnblogs.com/ximiaomiao/p/7140456.html(就两个步骤,用户名,邮箱),然后git clone +复制的SSH链接,回车就开始下载该项目的代码了

     

    代码拉下来之后,用WebStorm打开,第一次运行代码前,先在WebStorm的Terminal运行 npm install 这行命令,以后才能用 npm run start 启动项目。

     

    就这样,开发前的准备弄好了,可以开始开发了~

    转载于:https://www.cnblogs.com/XUYIYUAN/p/9703679.html

    更多相关内容
  • 前端开发利器webStorm

    2020-01-05 19:01:44
    本文转载自:... 这里推荐一个前端开发工具webStorm。用了大概快半年了,发现所有其他工具无出其右的。目前最新版本已经到4.0.2,半年前还是2.X 相比aptana、dreamweaver、sublime和vim...
    本文转载自: https://www.cnblogs.com/withasi/archive/2012/05/10/2490015.html 作者:withasi 转载请注明该声明。

      这里推荐一个前端开发工具webStorm。用了大概快半年了,发现所有其他工具无出其右的。目前最新版本已经到4.0.2,半年前还是2.X

      相比aptana、dreamweaver、sublime和vim等我曾用过的,高端开发工具还是用这个顺手、智能。

      

      1、切身感受到的好处:

        1)灵活的默认快捷键。起初他的默认快捷键和常用的不太一样,感觉不适应(当然在setting->keymap中可以切换你常用编辑器的快捷键,如eclipse、vim、Mac OS等),但是用惯了发现设计的合理性,如撤销和前进,常用的编辑器都是ctrl+z和ctrl+y,而webstorm为ctrl+z和ctrl+shift+z。ctrl+shift+i查看函数定义信息、ctrl+alt+l格式化代码等等非常方便。

        2)更加智能的提示,区分浏览器内核,并智能加载自己写的类库;错误提示,如图html中图片路径写错,会智能红色智能提示;颜色试着在行数位置预览颜色并且能修改。等等,总之让前端开发从未这样智能过。

        3)不需要保存,当文件关闭后,再打开撤销和前进均不丢失。此处真的很好用。而以往的编辑器都是需要保存文件,并且关闭,再打开撤销和前进清空。

          4)丰富的插件。编辑器的强大之处就是插件的丰富和有序管理,webStorm做的不错。打开File->Settings...->Plugins中有丰富的常用捆绑在webStorm中的插件,还有很多外部custom插件,点击Browser repositiories...中寻找你想要的插件。不过没有找到类似ant这样的自动化脚本插件,有些遗憾。

     

    几个小技巧:a)ctrl+shift+i可以看到函数定义信息、F4为跳转到方法定义处,shift+F6局部变量统一改名等等方便的快捷键;

          b)如果某些脚本不想加入智能提示里面来。可在js文件上右键->Mark as Plain Text

          c)选中一个局部变量,然后shift+F6可在局部内部同意改名,当然此功能慎用,还是有一定风险性,在eclipse中写java此功能尚且不完善,此处更改局部变量可以用用。

        

      2、由于webStrom可以自己修改代码显示样式,并且可以导入导出,这里推荐这个风格,我觉得很舒服:http://www.cnblogs.com/jikey/archive/2010/12/30/1921530.html 

      由于上边文章设置在字体大小、代码颜色颜色、js注释风格不太符合我的风格,这里我做了小量调整:请点击这里下载

      怎样使用和编辑此风格:

        1)然后放入如下路径:

          XP:C:\Documents and Settings\Administrator\.WebIde40\config\colors

          win7: C:\Users\用户\(用户名)\.WebIde40\config\colors

        2)重启webStorm,打开  ->Settings...-> Editor->Colors & Fonts->Scheme name选中custom1

          3)如果想编辑,在Colors & Fonts子目录中进行个性化代码风格编辑,编辑完毕即可:

                             

          我当前的风格如下:

       

     

      3、webStorm的快捷键说明(来自于http://www.cnblogs.com/jikey):

    . ctrl + shift + n: 打开工程中的文件(类似于eclipse中的ctrl+shift+R),目的是打开当前工程下任意目录的文件。
    . ctrl
    + j: 输出模板
    . ctrl
    + b: 跳到变量申明处
    . ctrl
    + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
    . ctrl
    + []: 匹配 {}[]
    . ctrl
    + F12: 可以显示当前文件的结构
    . ctrl
    + x: 剪切(删除)行,不选中,直接剪切整个行,如果选中部分内容则剪切选中的内容
    . alt
    + left/right:标签切换
    . ctrl
    + r: 替换
    . ctrl
    + shift + up: 行移动
    . shift
    + alt + up: 块移动(if(){},while(){}语句块的移动)
    . ctrl
    + d: 行复制
    . ctrl
    + shift + ]/[: 选中块代码<table>....</table>
    . ctrl
    + / : 单行注释
    . ctrl
    + shift + / : 块注释
    . ctrl
    + shift + i : 如果是css中的class则显示当前class详细信息,如果是js则显示function的详细信息(想象一下,如果在jquery的方法上查看详细信息,就直接可以看到实现代码了),如果是php,那当时还是function的详细信息
    . ctrl
    + '-/+': 可以折叠项目中的任何代码块,包括htm中的任意nodetype=3的元素,function,或对象直接量等等。它不是选中折叠,而是自动识别折叠。
    . ctrl
    + '.': 折叠选中的代码的代码。
    . shift
    + esc: 当前激活的任意小窗口最小化,也可以是alt + '数字键',数字在小窗口标题栏上有显示。
    . alt
    + '7': 显示当前的函数结构。类似于eclipse中的outline的效果。试验了一下,要比aptana的给力一些,但还是不能完全显示prototype下面的方法名。
    . 如果是
    *.html页面,则在文件名下的导航栏某DOM结构上右键,可以全选当前DOM结构。
    . 项目中添加对jQuery的支持。File
    -> settings -> Javascript Libraries -> Add在files中添加路径,在documentations urls中添加文档支持。这里边需要注意一下的是,要添加原始未压缩的代码,*.min.js版的方法是不会被提示。添加完成后,右边菜单中还有一 download 按钮,单击之后,他会自动选择最新版的js库进行搜索,然后在弹出的列表中,再单击选择一个后,点击Download and Install之后,才会被下载。这块体验不是太好,没有checkbox,也没有radio,只是选中后整行变暗。 如果添加多个版本的jQuery,就可以直观的看到各个版本之间新方法的差别了。* 在这项的子菜单中 Usage Scope 右边 Project 第二栏Library下单击,选择新添加的jQuery,使其对整个项目进行覆盖。也可以在当前页面右键Use JavaScript Library 中选择最顶的刚添加的jQuery支持。 当然,并不是添加的越多越好,添加的多之后,在代码提示后会有数毫秒的延迟,需要谨慎选择最新版。

     

     

     

       ps:当然前端开发的话还是高低搭配不错,大型编辑器必然启动、快速运行稍差

          我这边一直用webStrom+editplus搭配,效率提高不少。工欲善其事,必先利其器,好的工具必然能事半功倍。

    展开全文
  • 我是第一次使用WebStorm开发项目,之前基于HTML5+css+JavaScript开发的项目是在Eclipse或者My Eclipse上面开发,虽然也可以达到想要的效果但是过程较为麻烦,修改代码稍显繁琐,也用过VS开发前端页面,直接可以拖动...

           由于课程设计的安排,我是第一次使用WebStorm开发项目,之前基于HTML5+css+JavaScript开发的项目是在Eclipse或者My Eclipse上面开发,虽然也可以达到想要的效果但是过程较为麻烦,修改代码稍显繁琐,也用过VS开发前端页面,直接可以拖动控件来实现页面布局,但是做出来的页面有种“僵硬”的感觉(纯属个人看法)。
           现在使用WebStorm开发,感觉很好地结合了两个开发环境的优势,结合Google浏览器的使用能够更好实现对代码的调试,大家开发项目的时候我极力推荐使用Google浏览器进行测试,包括对代码的分析,断点的调试都特别的方便。
           下面我将介绍一下我课设学习中做出来的项目前端页面:
           在项目中的企业项目里面一共有三个页面,再加上登录页面,项目一共有八个前端页面,项目中的图片及小图标存放于项目文件夹中(可以自行创建),下面详细展出效果图及代码;
    效果图如下

    图1
    图2
    图3
    图4
    图5
    图6
    图7
    图8

    页面对应的HTML文件如下:
    在这里插入图片描述

    首先介绍css样式:

    代码如下:

    *{
        margin: 0;
        padding: 0;
    }
    body{
        /*rgb:red green blue*/
        background: rgb(244,244,246);
        padding-top: 44px;
        padding-bottom: 49px;
    }
     .DS_header{
        background: rgb(40,133,202);
        line-height: 44px;
        font-size: 18px;
        color: white;
         text-align: center;
          width: 100%;
          left: 0;
          top: 0;
          position: fixed;
    }
    .DS_second_section img{
        width: 100%;
    }
    footer{
        display: table;
        width: 100%;
        background: black;
        height: 49px;
        left: 0;
        bottom: 0;
        position: fixed;
    }
    footer a{
        display: table-cell;
        width: 20%;
        text-decoration: none;
        text-align: center;
        vertical-align: middle;
    }
    footer a img{
        width: 18px;
    }
    footer a span{
        display: block;
        color: white;
        font-size: 12px;
    }
    .BP_first_section{
        display: table;
        width: 100%;
        background: rgb(244, 244, 246);
        height: 44px;
        left: 0;
        top: 44px;
        position: fixed;
    }
    .common_section img{
        width: 100%;
    }
    .BP_first_section a{
        display: table-cell;
        width: 33.3%;
        text-decoration: none;
    
        text-align: center;
        vertical-align: middle;
    }
    .BP_external_div{
        background: white;
        text-align: center;
    }
    .BP_external_div_sec{
        text-align: center;
    }
    .BP_span{
        font-size: 14px;
    }
    .BP_img{
        width: 100%;
    }
    .BP_inner_div{
        text-align: left;
        padding-left: 20px;
        font-size: 10px;
        color: gray;
        line-height: 2em;
    }
    .BP_first_p{
        font-size: 10px;
        color:gray;
    }
    

    PS---------------css样式共分为三种,如下:

    1. 外部样式:当一个项目外部有多个地方样式一样的时候用外部样式;
    2. 页内样式:出现的次数少,但代码量大的时候使用;
    3. 行内样式:当某个样式代码很少,但是出现此样式的次数较多时使用;

    介绍一下该css样式中所涉及到的重要标签:

    • link标签中rel属性:rel=“short icon” 特指浏览器中地址栏左侧显示的图标,一般为16*16大小;icon 指的是图标格式为png/gif/jpeg,尺寸一般为16×16,24×24,36×36;
    • 边距标签如下图:
      在这里插入图片描述
    • 成行标签:display:table;width:需求量
    • 成列标签:display:table-cell;width:需求量
    • 垂直方向:text-align:center(居中)text-align:top(居上对齐)text-align:bottom(居下对齐)
    • display:block; 显示为块级元素,此元素前后会带有换行符。
    • position:fixed;生成绝对定位的元素,相对于浏览器窗口进行定位。(通过left,top,right,bottom属性进行规定)
    • text-top:把元素的顶端与元素字体的顶端对齐 text-bottom:把元素…低端对齐;
    • div标签:简单说就是分块用的,
    • margin:0 auto;上下不动,水平居中;
    • height:50px ;line-height: 50px; 它俩值一致的时候则垂直居中;
    • Z-index:数值自己设定; 值越大优先级越高;

    登录页面(图8)

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport"
              content="width=device-width, initial-scale=1, user-scalable=no">
        <title>课程设计</title>
        <!--相对路径/绝对路径-->
        <link rel="short icon" href="Resource/icon.png">
        <!--stylesheet;用来加载外部样式表-->
        <link rel="stylesheet" href="ExternalStyle.css">
    </head>
    <style>
        .L_second_div{
            text-align: center;
        }
        .L_head_img{
            margin-top: 50px;
        }
        .L_second_div img{
            margin-top: 50px;
        }
        .L_form_inner_div div span {
            padding-left: 15px;
            font-size: 20px;
            line-height: 50px
        }
        .L_form_inner_div div {
            height: 50px;
            border-bottom: 1px solid #dddddd
        }
        .L_form_inner_div {
            width: 90%;
            margin: 0 auto;
            border: 1px solid #cccccc;
            border-radius: 5px;
            background: white;
            margin-top: 30px;
            height: 100px;
        }
        input{
            outline: medium;
            background-color: transparent;
            border: 0;
        }
        .L_login_btn{
            font-size: 20px;
            line-height: 50px;
            color: white;
            height: 50px;
            width: 100%;
        }
        .L_login_div {
            height: 50px;
            background: rgb(32, 90, 163);
            width: 90%;
            border-radius: 10px;
            margin: 20px auto;
            text-align: center
        }
    </style>
    <body>
    <!--第一部分-->
    <header class="DS_header">
        <span>登录</span>
    </header>
    <!--第二部分-->
    <div class="L_second_div">
        <img class="L_head_img" src="Resource/head.png" alt="">
    </div>
        <!--第三部分-->
        <form action="">
            <div class="L_form_div">
                <div class="L_form_inner_div">
                    <div>
                        <span> 账户名:</span>
                        <input id="L_account" type="text"name="account" value=""><br>
                    </div>
                    <div>
                    <span>密码:</span>
                    <input id="L_pwd" type="password"name="password" value=""><br>
                    </div>
                </div>
                <div class="L_login_div">
                    <input class="L_login_btn" type="button" value="登录" id="L_btn" >
                </div>
            </div>
        </form>
        <script>
            var btn = document.querySelector("#L_btn")
            btn.οnclick= function () {
                var userName = encodeURIComponent(document.querySelector("#L_account").value);
                var pwd = encodeURIComponent(document.querySelector("#L_pwd").value);
                //第一步:创建一个请求对象(负责要数据)
            var xhr = new XMLHttpRequest();
            //    第二步:建立与服务端的连接(找到那个服务器去要数据)           xhr.open('post','https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/login')
                //设置头信息,告诉服务器让数据以表单的形式传递过去
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
                var par = "username=" + userName  + "&pwd=" + pwd;
            //    第三部:向服务端发送请求
                xhr.send(par);
            //    第四部:接收服务端返回的数据
                xhr.onreadystatechange = function (){
                    //xhr.readyState=4代表数据请求完成; xhr.status == 200 代表数据返回成功
                    if(xhr.readyState=4 && xhr.status == 200){
                        var responseData = JSON.parse(xhr.responseText)
                        var str = responseData.data;
                        if(str =="登录成功"){
                            location.href = "DropletService.html";
                        }else {
                            alert(responseData.data);
                        }
                    }
                }
            }
        </script>
    </div>
    </body>
    </html>
    

    PS--------------->在head标签中<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 简单理解为适配器,去适应手机显示屏幕的,是必须要写的。这个登录功能使用的是ajax技术去访问数据库进行验证登录的。

    小滴服务(图1)

    代码如下:

    <!DOCTYPE html>
    <!--HTML标签的注释方式-->
    <!--标签:双标签/单标签-->
    <!--行内标签/块级标签-->
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport"
              content="width=device-width, initial-scale=1, user-scalable=no">
        <title>课程设计</title>
        <!--相对路径/绝对路径-->
        <link rel="short icon" href="Resource/icon.png">
        <!--stylesheet;用来加载外部样式表-->
        <link rel="stylesheet" href="ExternalStyle.css">
    <!--页内标签-->
        <style>
            /*成行的的标签写法:display:table; width:需求值*/
            ul{
                display: table;
                width: 100%;
                background: white;
                height: 100px;
                margin-bottom: 10px;
            }
            /*成列的标签写法:display:table-cell; width:需求值*/
            li{
                display: table-cell;
                width: 33.3%;
                text-align: center;
                vertical-align: middle;
            }
            ul li span{
                display: block;
            }
            .DS_second_section img{
                margin-bottom: -1px;
            }
            .first_ul{
                margin-top: -6px;
            }
        </style>
    
    </head>
    <body>
    <!--第一部分-->
    <!--语义化标签:增强代码的可读性-->
    <header class="DS_header">
        <span>小滴服务</span>
    </header>
    <!--第二部分-->
    <section class="DS_second_section">
        <img src="Resource/banner-1.png" alt="">
    </section>
    <!--第三部分-->
    <section class="first_ul">
        <ul>
            <li>
                <img src="Resource/index1.png" alt="你的页面错误啦!检测啊">
                <span>企业项目</span>
            </li>
            <li>
                <img src="Resource/index2.png">
                <span>平台风采</span>
            </li>
            <li>
                <img src="Resource/index3.png">
                <span>报名流程</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="Resource/index4.png" alt="">
                <span>客户管理</span>
            </li>
            <li>
                <img src="Resource/index5.png">
                <span>财务管理</span>
            </li>
            <li>
                <img src="Resource/index6.png">
                <span>新闻公告</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="Resource/index7.png" alt="">
                <span>工程案例</span>
            </li>
            <li>
                <img src="Resource/index8.png">
                <span>修改密码</span>
            </li>
            <li>
                <img src="Resource/index9.png">
                <span>会员注册</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="Resource/index7.png" alt="">
                <span>工程案例</span>
            </li>
            <li>
                <img src="Resource/index8.png">
                <span>修改密码</span>
            </li>
            <li>
                <img src="Resource/index9.png">
                <span>会员注册</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="Resource/index7.png" alt="">
                <span>工程案例</span>
            </li>
            <li>
                <img src="Resource/index8.png">
                <span>修改密码</span>
            </li>
            <li>
                <img src="Resource/index9.png">
                <span>会员注册</span>
            </li>
        </ul>
    </section>
    <!--第四部分-->
    <footer>
        <a href="DropletService.html">
            <img src="Resource/nav11.png" alt="">
            <span style="color: red;">小滴服务</span>
        </a>
        <a href="BusinessProject.html">
            <img src="Resource/nav20.png" alt="">
            <span>企业项目</span>
        </a>
        <a href="ServiceProcess.html">
            <img src="Resource/nav30.png" alt="">
            <span>服务流程</span>
        </a>
        <a href="Platform.html">
            <img src="Resource/nav40.png" alt="">
            <span>平台风采</span>
        </a>
        <a href="MyDroplet.html">
            <img src="Resource/nav50.png" alt="">
            <span>我的小滴</span>
        </a>
    </footer>
    </body>
    </html>
    

    企业项目(图2)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport"
              content="width=device-width, initial-scale=1, user-scalable=no">
        <title>课程设计</title>
        <!--相对路径/绝对路径-->
        <link rel="short icon" href="Resource/icon.png">
        <!--stylesheet;用来加载外部样式表-->
        <link rel="stylesheet" href="ExternalStyle.css">
    </head>
    <body>
    <!--第一部分-->
    <!--语义化标签:增强代码的可读性-->
    <header class="DS_header">
        <span>创业项目</span>
    </header>
    <!--第二部分-->
    <section class="BP_first_section">
        <a style="background: white" href="">
            <span style="color: rgb(63,149,211)">钻石创业者</span>
        </a>
        <a href="BusinessProjectGold.html">
            <span>金牌创业者</span>
        </a>
        <a href="BusinessProjectSliver.html">
            <span>银牌创业者</span>
        </a>
    </section>
    <section class="common_section">
        <img style="padding-top: 44px" src="Resource/banner2.png" alt="">
    </section>
    <div class="BP_external_div">
        <span class="BP_span">服务内容</span>
        <img class="BP_img" src="Resource/50w_1.png" alt="">
        <p class="BP_first_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p>
    </div>
    <div class="BP_external_div_sec">
        <span class="BP_span">创业者享受的回报收益</span>
        <img class="BP_img" src="Resource/50w_2.png" alt="">
        <div class="BP_inner_div">
            <p>X : 渠道可享有的股份额度;</p>
            <p>y : 渠道个人业绩流水总额累计;</p>
            <p>z : 历年渠道全部各方业绩流水总额累计;</p>
            <p>b : 宏鑫互联网集团所拥有的上市或者充足公司纵谷本数;</p>
            <p>q : 宏鑫互联网集团上市总股本数的20%;</p>
        </div>
    </div>
    <div class="BP_external_div">
        <span class="BP_span">获得收益条件</span>
        <div class="BP_inner_div">
            <p>① N≥10人;</p>
            <p>② 业绩流水≥1.2亿。</p>
            <p>当满足以上2个条件时,钻石创业者才能取得期权。</p>
            <p>注:上面的y、z为财务数据,由财务部门按期提供,录入即可。</p>
        </div>
    </div>
    <!--第四部分-->
    <footer>
        <a href="DropletService.html">
            <img src="Resource/nav10.png" alt="">
            <span>小滴服务</span>
        </a>
        <a href="BusinessProject.html">
            <img src="Resource/nav21.png" alt="">
            <span style="color: red;">企业项目</span>
        </a>
        <a href="ServiceProcess.html">
            <img src="Resource/nav30.png" alt="">
            <span>服务流程</span>
        </a>
        <a href="Platform.html">
            <img src="Resource/nav40.png" alt="">
            <span>平台风采</span>
        </a>
        <a href="MyDroplet.html">
            <img src="Resource/nav50.png" alt="">
            <span>我的小滴</span>
        </a>
    </footer>
    </body>
    </html>
    

    金牌创业者(图3)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <!--用来显示网头部的文字信息的标签-->
        <title>课程设计</title>
        <!--link标签用来链接外部资源的标签-->
        <link rel="short icon" href="Resource/icon.png">
        <link rel="stylesheet" href="ExternalStyle.css">
    </head>
    <body>
    <!--第一部分-->
    <!--语义化标签:增强代码的可读性-->
    <header class="DS_header">
        <span>创业项目</span>
    </header>
    <section class="BP_first_section">
        <a href="BusinessProject.html"> <span>钻石创业者</span> </a>
        <a style="background: white" href="BusinessProjectGold.html">
            <span style="color: rgb(63, 149, 211);">金牌创业者</span> </a>
        <a href="BusinessProjectSliver.html"> <span>银牌创业者</span> </a>
    </section>
    <section class="common_section">
        <img style="padding-top: 44px" src="Resource/banner21.png" alt="">
    </section>
    <div class="BP_external_div">
        <span class="BP_span">服务内容</span>
        <img class="BP_img" src="Resource/30w_1.png" alt="">
        <p class="BP_first_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p>
    </div>
    <div class="BP_external_div_sec">
        <span class="BP_span">创业者享受的回报收益</span>
        <img class="BP_img" src="Resource/30w_2.png" alt="">
        <div class="BP_inner_div">
            <p>X : 渠道可享有的股份额度;</p>
            <p>y : 渠道个人业绩流水总额累计;</p>
            <p>z : 历年渠道全部各方业绩流水总额累计;</p>
            <p>b : 宏鑫互联网集团所拥有的上市或者充足公司纵谷本数;</p>
            <p>q : 宏鑫互联网集团上市总股本数的20%;</p>
        </div>
    </div>
    <div class="BP_external_div">
        <span class="BP_span">获得收益条件</span>
        <div class="BP_inner_div">
            <p>① N≥10人;</p>
            <p>② 业绩流水≥1.2亿。</p>
            <p>当满足以上2个条件时,钻石创业者才能取得期权。</p>
            <p>注:上面的y、z为财务数据,由财务部门按期提供,录入即可。</p>
        </div>
    </div>
    <!--h5里面新增的语义化标签,它没有特殊的意义,仅是用来增强程序的可读性-->
    <!--第四部分-->
    <footer>
        <a href="DropletService.html">
            <img src="Resource/nav10.png" alt="">
            <span>小滴服务</span>
        </a>
        <a href="BusinessProject.html">
            <img src="Resource/nav21.png" alt="">
            <span style="color: red;">企业项目</span>
        </a>
        <a href="ServiceProcess.html">
            <img src="Resource/nav30.png" alt="">
            <span>服务流程</span>
        </a>
        <a href="Platform.html">
            <img src="Resource/nav40.png" alt="">
            <span>平台风采</span>
        </a>
        <a href="MyDroplet.html">
            <img src="Resource/nav50.png" alt="">
            <span>我的小滴</span>
        </a>
    </footer>
    </body>
    </html>
    

    银牌创业者(图4)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <!--用来显示网头部的文字信息的标签-->
        <title>课程设计</title>
        <!--link标签用来链接外部资源的标签-->
        <link rel="short icon" href="Resource/icon.png">
        <link rel="stylesheet" href="ExternalStyle.css">
    </head>
    <body>
    <!--第一部分-->
    <!--语义化标签:增强代码的可读性-->
    <header class="DS_header">
        <span>创业项目</span>
    </header>
    <section class="BP_first_section">
        <a style="background: white" href="BusinessProject.html">
            <span>钻石创业者</span>
        </a>
        <a href="BusinessProjectGold.html">
            <span>金牌创业者</span>
        </a>
        <a href="BusinessProjectSliver.html">
            <span style="color: rgb(63,149,211)">银牌创业者</span>
        </a>
    </section>
    <section class="common_section">
        <img style="padding-top: 44px" src="Resource/banner2.png" alt="">
    </section>
    <div class="BP_external_div">
        <span class="BP_span">服务内容</span>
        <img class="BP_img" src="Resource/10w_1.png" alt="">
        <p class="BP_first_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p>
    </div>
    <div class="BP_external_div_sec">
        <span class="BP_span">创业者享受的回报收益</span>
        <img class="BP_img" src="Resource/10w_2.png" alt="">
    </div>
    <!--第四部分-->
    <footer>
        <a href="DropletService.html">
            <img src="Resource/nav10.png" alt="">
            <span>小滴服务</span>
        </a>
        <a href="BusinessProject.html">
            <img src="Resource/nav21.png" alt="">
            <span style="color: red;">企业项目</span>
        </a>
        <a href="ServiceProcess.html">
            <img src="Resource/nav30.png" alt="">
            <span>服务流程</span>
        </a>
        <a href="Platform.html">
            <img src="Resource/nav40.png" alt="">
            <span>平台风采</span>
        </a>
        <a href="MyDroplet.html">
            <img src="Resource/nav50.png" alt="">
            <span>我的小滴</span>
        </a>
    </footer>
    </body>
    </html>
    

    服务流程(图5)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport"
              content="width=device-width, initial-scale=1, user-scalable=no">
        <title>课程设计</title>
        <!--相对路径/绝对路径-->
        <link rel="short icon" href="Resource/icon.png">
        <!--stylesheet;用来加载外部样式表-->
        <link rel="stylesheet" href="ExternalStyle.css">
    </head>
    <body>
    <!--第一部分-->
    <!--语义化标签:增强代码的可读性-->
    <header class="DS_header">
        <span>服务流程</span>
    </header>
    <section class="common_section">
        <img src="Resource/banner3.png" alt="">
    </section>
    <section>
        <img style="margin: 10px 20px; width: 90%" src="Resource/process.png" alt="">
    </section>
    <!--第四部分-->
    <footer>
        <a href="DropletService.html">
            <img src="Resource/nav10.png" alt="">
            <span>小滴服务</span>
        </a>
        <a href="BusinessProject.html">
            <img src="Resource/nav20.png" alt="">
            <span>企业项目</span>
        </a>
        <a href="ServiceProcess.html">
            <img src="Resource/nav31.png" alt="">
            <span style="color: red;">服务流程</span>
        </a>
        <a href="Platform.html">
            <img src="Resource/nav40.png" alt="">
            <span>平台风采</span>
        </a>
        <a href="MyDroplet.html">
            <img src="Resource/nav50.png" alt="">
            <span>我的小滴</span>
        </a>
    </footer>
    </body>
    </html>
    

    平台风采(图6)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport"
              content="width=device-width, initial-scale=1, user-scalable=no">
        <title>课程设计</title>
        <!--相对路径/绝对路径-->
        <link rel="short icon" href="Resource/icon.png">
        <!--stylesheet;用来加载外部样式表-->
        <link rel="stylesheet" href="ExternalStyle.css">
        <!--页内标签-->
        <style>
        article{
            margin: 20px;
        }
            h3{
                color: red;
                font-size: 18px;
                padding-bottom: 10px;
                border-bottom: 1px solid #dddddd;
            }
            h4{
                font-size: 14px;
            }
            article p{
                text-indent: 2em;
                line-height: 2em;
                font-size: 12px;
            }
        </style>
        <meta charset="UTF-8">
        <title>李新浩</title>
    </head>
    <body>
    <header class="DS_header">
        <span>平台风采</span>
    </header>
    <!--第二部分-->
    <section class="DS_second_section">
        <img src="Resource/banner4.png" alt="">
    </section>
    <!--第三部分-->
    <article>
        <h3 id="title"> </h3>
        <h4 id="subTitle"> </h4>
        <p id="info"> </p>
        <script>
            //第一步:创建一个请求对象(负责要数据)
            var xhr = new XMLHttpRequest();
            //    第二步:建立与服务端的连接(找到那个服务器去要数据)
    xhr.open('get','https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/aboutus');
            //设置头信息,告诉服务器让数据以表单的形式传递过去
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            //    第三部:向服务端发送请求
            xhr.send();
            //    第四部:接收服务端返回的数据
            xhr.onreadystatechange = function (){
                //xhr.readyState=4代表数据请求完成; xhr.status == 200 代表数据返回成功
                if(xhr.readyState=4 && xhr.status == 200){
                    var responseData = JSON.parse(xhr.responseText);//json串   JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
                    var sa = responseData.data;
                    var h3 = document.getElementById("title");
                    var h4 = document.getElementById("subTitle");
                    var p = document.getElementById("info");
                    h3.innerHTML = sa.title;
                    h4.innerHTML = sa.subTitle;
                    p.innerHTML = sa.info;
                }
            }
        </script>
    </article>
    <footer>
        <a href="DropletService.html">
            <img src="Resource/nav10.png" alt="">
            <span>小滴服务</span>
        </a>
        <a href="BusinessProject.html
    ">
            <img src="Resource/nav20.png" alt="">
            <span>企业项目</span>
        </a>
        <a href="ServiceProcess.html">
            <img src="Resource/nav30.png" alt="">
            <span>服务流程</span>
        </a>
        <a href="Platform.html">
            <img src="Resource/nav41.png" alt="">
            <span style="color: red;">平台风采</span>
        </a>
        <a href="MyDroplet.html">
            <img src="Resource/nav50.png" alt="">
            <span>我的小滴</span>
        </a>
    </footer>
    </body>
    </html>
    

    PS--------------->该页面中显示的数据通过ajax技术去服务器获取,之后在前端页面显示出来,ajax技术如何获取后端数据在我的博客中有详解。

    我的小滴(图7)

    在这里插入代码片<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport"
              content="width=device-width, initial-scale=1, user-scalable=no">
        <title>课程设计</title>
        <!--相对路径/绝对路径-->
        <link rel="short icon" href="Resource/icon.png">
        <!--stylesheet;用来加载外部样式表-->
        <link rel="stylesheet" href="ExternalStyle.css">
        <style>
            .MD_external_div .MD_bg_img{
                width: 100%;
                z-index: -1;
            }
            .MD_external_div{
                position: relative;/*参照物*/
            }
            .MD_inner_div{
                left: 50%;
                top: 50%;
                margin-left: -33px;
                margin-top: -60px;
                position: absolute;
                width: 66px;
                height: 120px;
                text-align: center;
            }
            button{
                background: rgb(40,133,202);
                height: 20px;
                width: 66px;
            }
            .MD_third_div{
                border: 1px solid #cccccc;
                width: 90%;
                height: 50px;
                margin: 0 auto;
                border-radius: 5px;/*圆角*/
                line-height: 50px;
            }
            .MD_left_img{
                float: left;
                margin-left: 10px;
                margin-top: 15px;
                margin-right: 20px;
            }
            .MD_right_img{
                float: right;
                margin-right: 10px;
                margin-top: 15px;
            }
        </style>
    </head>
    <body>
    <!--第一部分-->
    <!--语义化标签:增强代码的可读性-->
    <header class="DS_header">
        <span>我的小滴</span>
    </header>
    <!--第二部分-->
    <div class="MD_external_div">
        <img class="MD_bg_img" src="Resource/banner5.png" alt="">
        <div class="MD_inner_div">
            <img class="MD_head_img" src="Resource/head.png" alt="">
            <span>华杉科技</span>
            <button οnclick="exitLogin()">退出登录</button>
            <script>
                function exitLogin() {
                    location.href = "index.html"
                }
            </script>
        </div>
    </div>
    <!--第三部分-->
    <div class="MD_third_div">
        <img class="MD_left_img" src="Resource/gr_1.png" alt="">
        <span>我的客户</span>
        <img class="MD_right_img" src="Resource/jt.png" alt="">
    </div>
    <div class="MD_third_div">
        <img class="MD_left_img" src="Resource/gr_2.png" alt="">
        <span>我的余额</span>
        <img class="MD_right_img" src="Resource/jt.png" alt="">
    </div>
    <div class="MD_third_div">
        <img class="MD_left_img" src="Resource/gr_3.png" alt="">
        <span>注册客户</span>
        <img class="MD_right_img" src="Resource/jt.png" alt="">
    </div>
    <div class="MD_third_div">
        <img class="MD_left_img" src="Resource/gr_4.png" alt="">
        <span>修改密码</span>
        <img class="MD_right_img" src="Resource/jt.png" alt="">
    </div>
    <div class="MD_third_div">
        <img class="MD_left_img" src="Resource/gr_1.png" alt="">
        <span>我的客户</span>
        <img class="MD_right_img" src="Resource/jt.png" alt="">
    </div>
    <div class="MD_third_div">
        <img class="MD_left_img" src="Resource/gr_2.png" alt="">
        <span>我的余额</span>
        <img class="MD_right_img" src="Resource/jt.png" alt="">
    </div>
    <div class="MD_third_div">
        <img class="MD_left_img" src="Resource/gr_3.png" alt="">
        <span>注册客户</span>
        <img class="MD_right_img" src="Resource/jt.png" alt="">
    </div>
    <div class="MD_third_div">
        <img class="MD_left_img" src="Resource/gr_4.png" alt="">
        <span>修改密码</span>
        <img class="MD_right_img" src="Resource/jt.png" alt="">
    </div>
    <!--第四部分-->
    <footer>
        <a href="DropletService.html">
            <img src="Resource/nav10.png" alt="">
            <span >小滴服务</span>
        </a>
        <a href="BusinessProject.html">
            <img src="Resource/nav20.png" alt="">
            <span>企业项目</span>
        </a>
        <a href="ServiceProcess.html">
            <img src="Resource/nav30.png" alt="">
            <span>服务流程</span>
        </a>
        <a href="Platform.html">
            <img src="Resource/nav40.png" alt="">
            <span>平台风采</span>
        </a>
        <a href="DropletService.html">
            <img src="Resource/nav51.png" alt="">
            <span style="color: red;">我的小滴</span>
        </a>
    </footer>
    </body>
    </html>
    

    PS----------->页面中有个“退出登录”的按钮,点击按钮会触发onclick事件,进而执行JavaScript中的exitLogin()方法,该方法执行直接将页面跳转至登录页面,实现退出登录功能;

    以上就是我的webstorm开发前端的学习之谈啦,希望能给大家带来帮助。

    展开全文
  • 网页中文乱码如图所示: 解决方法: 在html中head加上如下代码: <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 问题解决

    网页中文乱码如图所示:
    在这里插入图片描述
    解决方法1:
    在html中head加上如下代码:

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    

    解决方法2:
    具体方法:file -----> settings 搜索encoding
    在fileencoding下,将IDE Encoding,Project Encoding和下面的Default Encoding for properties file都更改为utf-8。
    问题解决:
    在这里插入图片描述

    展开全文
  • Prettier 代码格式化 添加依赖 yarn add prettier 配置 WebStorm 格式化文件 在根目录下新建.prettierrc.json的文件,标识格式化规范 文件内容如下 { "printWidth": 100, "semi": true, "vueIndentScriptAndStyle": ...
  • 前镜头使用WebStorm进行React的前端开发工具
  • 前端开发工具webstorm的使用方法小结

    千次阅读 2021-07-29 06:20:17
    一、 基本的操作 快速查找、代码补全、版本控制、本地历史、即时模板、光标、代码格式化等 二、 一些小功能 Ctrl +N: 新建一个文件 设置字体和主题等 File->setting->editor设置相应的字体和主题: ...
  • 一、安装WebStorm 前往官网下载WebStorm: The Smartest JavaScript IDE, by JetBrains 二、无限试用期工具 链接:百度网盘 请输入提取码 提取码:ide0 至今2021.11.01可用 直接将压缩包拖入IDE窗口,将会...
  • 前端运行[WebStorm]

    2022-07-21 01:29:15
    这个时候WebStorm会在右下角提示我们安装依赖,也可以手动在Terminal中输入。首先克隆项目到本地,Mac使用终端、Windows使用Cmd,定位到工作的目录。依赖安装完成后,打开package.json找到dev旁边的启动按钮。启动完...
  • WebStorm却让我眼前一亮,虽然公司项目所用的开发环境是eclipse+aptana(主要是方便团队协作和工程调试),但是其他时间我都会学习使用WebStormWebStorm有什么功能?下面我把WebStorm的功能大致罗列一下(这里只说...
  • 相比于上一篇博客 WebStorm开发应用——前端页面,这次又做了一个登陆页面。就是这个样子!   我们都知道登录时账号和密码和如果正确的话,就跳转到相应页面上。那么该如何实现这一功能呢?如果是账户密码固定的...
  • 1:webstorm的安装:2:node.js的安装3:安装Git4:vue-cli 安装前面两步就可以把项目启动了,安装Git主要是打开命令窗口,这样就可以用liunx命令了,原理跟cmd差不多 Vue.js是一套构建用户界面的 “渐进式框架”...
  • Web WebStorm开发常用插件简单整理

    千次阅读 2022-06-08 20:51:32
    Web 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。 本节介绍,Web 开发中,在 使用 WebStrom 时, WebStrom 中常用的插件或美观或者提高开发效率的插件简单整理,如果有不足之处,欢迎指出,或者...
  • 主要为大家详细介绍了Webstorm使用教程的使用教程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • WebStorm开发应用——前端页面

    千次阅读 2020-05-23 12:57:58
    第一次上手WebStorm开发一个手机端应用,前端页面主要用到的是html(页面内容由html构成 ),css(利用排版,样式将页面内容进行美化),js(脚本语言使页面具有交互性) 首先上效果图
  • 介绍前端开发工具webstorm和vscode各自的优劣势
  • 无论在WebStorm 中做什么,都是在项目的上下文中执行的。
  • 作为前端开发,我为何疯狂推荐WebStorm

    万次阅读 多人点赞 2020-08-09 12:04:02
    让我给他们推荐一下前端开发工具,我几乎都是毫不犹豫地就说 " WebSotrm ",原因我当时也没给他们细讲,因为这款开发工具功能实在是太全了,一句两句说不清楚,所以我准备写一篇文章告诉大家为什么要选择WebStorm
  • 前端开发神器 Emmet: 生成 HTML 文档初始结构 html:5 或者 ! 生成 HTML5 结构 html:xt 生成 HTML4 过渡型 html:4s 生成 HTML4 严格型 生成带有 id 、class 的 HTML 标签 ul#ccc.ddd 生成后代:> div.aaa>...
  • 方便前端小白下载安装WebStrom,并推荐好用的webstrom插件
  • 使用JetBrains IDE Support配置Webstorm的实时预览
  • 现在在做一个用java EE开发的网站,后台用eclipse开发,用的ssm框架,...前端webstorm开发的,但后台传到前台的数据都是传到jsp页面,但现 在前台页面都是html页面,这要怎样将前台的这些页面整合到eclipse的项目里?
  • webstorm 前端环境配置
  • 在终端中输入cd指令,进入当前用户目录;输入cd .ssh指令,进入.ssh目录;输入cat id_rsa.pub指令,查看id_rsa.pub文件中内容。... 安装完Git和Hg Mercurial之后,即可在Webstorm的Terminal中直接使用了。
  • webstorm前端开发工具

    2016-02-25 14:43:00
    2019独角兽企业重金招聘Python工程师标准>>...webstorm前端开发工具,非常好用,提示非常多。 https://www.jetbrains.com/webstorm/ 转载于:https://my.oschina.net/u/2308739/blog/621116
  • 系列目录:【学习笔记】Angular快速上手 第一章 搭建开发环境 第二章 Hello Angular 第三章 新建App中目录说明 第四章 WebStorm开发Angular 第五章 案例:英雄指南

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,784
精华内容 4,713
关键字:

webstorm开发前端