【JavaWeb项目】一个众筹网站的开发（三）第一个网页

一、bootstrap

本项目采用bootstrap3

bootstrap中文网 https://www.bootcss.com/

使用bootstrap三步：

1.导入jQuery

2.导入bootstrap自己的css样式

3.导入bootstrap自己的js文件

<script type="text/javascript" src="js/jquery-3.2.1.min.js"</script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

bootstrap定义了大量的样式库，要使用样式，只要将元素的class指定为样式库中的值。

二、第一个网页

index.jsp

和css等资源文件一起放在web层的webapp下

新建plugin文件夹，bootstrap放在里面

此时启动项目，发现样式不对

F12控制台报错

资源路径进行配置

样式在网页推荐写绝对路径

写监听器

web层创建

编写监听器

package com.atguigu.scw.manager.listener;
 
import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
 
/**
 * 项目启动时，将一些常用数据放在application域中，大家都能用
 * @ClassName MyAppListener
 * @Description TODO(这里用一句话描述这个类的作用)
 * @version 1.0.0
 */
public class MyAppListener implements ServletContextListener{
 
    public void contextInitialized(ServletContextEvent sce) {
        ServletContext servletContext = sce.getServletContext();
        //1.将项目放在application域中
        servletContext.setAttribute("ctp", servletContext.getContextPath());
 
    }
 
    public void contextDestroyed(ServletContextEvent sce) {
        //2.项目关闭，销毁application域中所有数据
 
    }
 
}

getContextPath()返回站点的根路径，也就是项目的名字 ，比如在web层返回/manager-web

在web.xml中进行配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
 
    <!-- 启动自己的listener -->
    <listener>
        <listener-class>com.atguigu.scw.manager.listener.MyAppListener</listener-class>
    </listener>
 
    <!-- 启动spring容器 -->
    <!-- needed for ContextLoaderListener -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-*.xml</param-value>
    </context-param>
 
    <!-- Bootstraps the root web application context before servlet initialization -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
 
    <!-- The front controller of this Spring Web application, responsible for
        handling all application requests -->
    <servlet>
        <servlet-name>springDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
 
    <!-- Map all requests to the DispatcherServlet for handling -->
    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
 
    <!-- 加上字符编码过滤器 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <!-- 只是指定了编码格式 -->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
        <!-- 进行请求乱码解决 -->
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
 
</web-app>

index.jsp中资源的路径都如下面所示，将路径和实际资源位置一一检查

css

js

重新运行

网页显示正常