WebStorm + BootStrap 安装 用 Tomcat 部署Web项目(图文详解 + 实例 )

                                 WebStorm安装和破解

1.官网下载

2.安装  ,安装地址看个人情况修改

. 32位 这里选择 32-bit launcher     

. 64位 这里选择 64-bit launcher                       

                                   

3.破解

.第一次使用时会出现如下图片,这里选择下面的选项

                             

服务器注册码 然后点击获得注册码 ,复制注册码  ,到下方,就可以免费试用到明年5月份后

扫描二维码关注公众号,回复: 4194577 查看本文章

. 这个注册码也可以激活PyCharm 

. host 文件位置 C:\Windows\System32\drivers\etc

                                          

                                       BootStrap下载

1. BootStrap中文网下载

. 建议下载中间的

 

                                WebStorm部署Tomcat服务器

1. Tomcat 服务器部署  参考 Tomcat使用和环境配置(图文详解)

2. 打开WebStorm -->File --> Settings

3. Build,Execution,Deployment --> Deployment

. 添加 Tomcat 服务器 

.Tomcat 是本地服务器 说以选择 Local or mounted floder

. Webapps 服务器文件存储位置

. 8080 端口(不解(▼へ▼メ)释)

4.修改本地文件存储位置,服务器文件保存地址,访问地址

. WebStorm 一次只能运行一个项目

.T001_BootStrap 这里是项目名

PS:在Deployment path on sever 中 不能只打一个 \ 

. Tomcat 无妨访问根目录下的 html 文件  所以 写法为 \ + 项目名(建议写法)

. Web path on server : 这里为访问地址 写法为 :/ + 项目名(建议写法)

 5. 用BootStrap 写一个 Html文件

. bootstrap-3.3.7解压文件 --> dist --> css --> bootstrap.min.css

. 将bootstrap.min.css 复制到 项目中 

.  新建HTML File 

   简单代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="ViewPort" content="width=device-width,initial-scale=1">
    <title>第一个BooStrap网页</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        body{
            padding-top: 50px;
        }

        .strter{
            padding: 20px 15px;
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navber-header">
            <a herf="#" class="navbar-brand">Project Name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="active"><a href="#">About</a></li>
                <li class="active"><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="strter">
        <h1> BootStrap Starter Template</h1>
        <p class="lead">第一天测试结束!起来嗨٩(๑❛ᴗ❛๑)۶</p>
    </div>

</body>
</html>

6. 如图

7.将文件上传到 服务器 Tools --> Deployment --> Upload to ...

. WebStorm 不像 Eclipse 一次上创多个文件

. WebStorm 一次上传一个 文件

 若有多个文件需多次上传(如同时有CSS,JSP,HTML ,就需要上传三次)

. Autonmatic Upload (always):自动上传 (建议开启)

8. 运行Web项目

. WebStorm 不能自动开启 Tomcat

. 这里 我们 手动开启 Tomcat 

. 成功运行结果(如图)

猜你喜欢

转载自blog.csdn.net/DUGUjing/article/details/82629619