一、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

重新运行

网页显示正常

【JavaWeb项目】一个众筹网站的开发(三)第一个网页的更多相关文章

  1. 【JavaWeb项目】一个众筹网站的开发(五)后台用户登录功能

    用户模块 1)注册 表单校验,使用校验插件 用户密码需要加密存储 注册成功后来到管理控制台,将用户放在session中,防止以后获取 以后用户经常获取用户id,使用mabatis主键自增策略,保存用户 ...

  2. 【JavaWeb项目】一个众筹网站的开发(八)后台页面详细设置

    一.user.jsp改造 删除引入菜单 抽取导航栏 nav-bar.jsp,删除引入导航栏 删除引入main.jsp的到好烂 数据库里添加url 报错,url不对 没有/ url正确 action=& ...

  3. 【JavaWeb项目】一个众筹网站的开发(四)后台用户注册功能

    重点: 密码加密存储 使用jQuery插件做校验和错误提示等 密码不能明文存储,在数据库中是加密存储的 可逆加密:通过密文使用解密算法得到明文 DES AES 不可逆加密:通过密文,得不到明文 MD5 ...

  4. 【JavaWeb项目】一个众筹网站的开发(一)架构搭建

    本项目是@尚硅谷相关视频的记录. 本项目使用Maven构建,工程架构如下图所示: 一.公司的公共父工程和工具类包 1.父工程 每个公司都有自己的父工程 父工程作用:对公司使用的jar包进行统一管理,别 ...

  5. 【JavaWeb项目】一个众筹网站的开发(九)邮件开发

    Java官方支持邮件开发,Javax-mail jdk中默认没有,需要另外下载 apache的基于Javax-mail开发了commons-mail,更加简单高效,推荐使用 一.电子邮件接收和发送协议 ...

  6. 【JavaWeb项目】一个众筹网站的开发(六)后台用户权限控制

    登陆成功进入控制面板后 左侧的菜单是共同的元素,抽取出来做静态包含 要求必须是按照不同的用户得到不同的菜单 用户做了权限限制,哪个用户能操作哪些内容(链接.按钮.内容) 一.RBAC权限模型 权限管理 ...

  7. 【JavaWeb项目】一个众筹网站的开发(二)架构搭建之架构测试

    1.dao层和pojo都是使用mbg生成,基本的CRUD以及JavaBean 2.将mbg放在dao层,一旦dao层打包以后mbg就删除掉 一.创建数据库用于测试 数据库名称:scw_0325 SQL ...

  8. 【JavaWeb项目】一个众筹网站的开发(七)后台用户菜单

    mvn命令不能运行: jar-war-pom之间是可以直接写,优先找这个工程,而不是仓库的位置 pom-pom子父关系,需要去仓库中找,我们需要使用<relativePath>../pro ...

  9. JavaWeb项目:旅游网站【涉及各种知识】

    JQuery异步请求(ajax) $.ajax({ // 请求方式为get或者post等 type: "GET", // 服务器响应的数据类型 dataType: "js ...

随机推荐

  1. null,blank,default

    null 是针对数据库而言,如果 null=True, 表示数据库的该字段可以为空. blank 是针对表单的,如果 blank=True,表示你的表单填写该字段的时候可以不填,比如 admin 界面 ...

  2. maven插件之maven-surefire-plugin,junit单元测试报告和sonar测试覆盖率的整合说明

    POM中配置的如下: <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId> ...

  3. 如何用命令行启动android的模拟器(简要描述)

    参考来源 http://blog.sina.com.cn/s/blog_5033827f0101cxhz.html 环境前置条件: 已安装JDK,已下载并安装了SDK 1.查看已安装的SDK平台:an ...

  4. ISO C 字符串创建算符 “#”

    使用用途: #define doit(name) pr_limits(#name, name) doit(RLIMIT_CORE); 这将由C预处理程序扩展为: pr_limits("RLI ...

  5. Word图片粘贴上传控件,直接粘贴图片到编辑器-DEDE

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  6. 【LeetCode 85】最大矩形

    题目链接 [题解] 把所有的"1"矩形分成m类. 第j类的矩形.他的右边界跟第j列紧靠. 那么. 我们设f[i][j]表示(i,j)这个点往左最长能延伸多少个数目的"1& ...

  7. 2018-2019-2 20175126谢文航 实验三《敏捷开发与XP实践》实验报告

    一.实验报告封面 课程:Java程序设计 班级:1751 班 姓名:谢文航 学号:20175126 指导教师:娄嘉鹏 实验日期:2019年5月2日 实验时间:--- 实验序号:实验三 实验名称:敏捷开 ...

  8. JS - 模块

    # CommonJS - [CommonJS - Wikipedia](https://en.wikipedia.org/wiki/CommonJS) ## 介绍 主要在浏览器之外地方(例如服务器和桌 ...

  9. Java基本数据类型内存分配

    1.java程序运行时有6中地方存储数据,分别是:寄存器.栈.堆.静态存储.常量存储.非RAM(随机存储器),主要是堆与栈的存储.   2.堆与栈是java用来在RAM中存储数据的地方,java自动管 ...

  10. Hive SQL语法总结

    Hive是一个数据仓库基础的应用工具,在Hadoop中用来处理结构化数据,它架构在Hadoop之上,通过SQL来对数据进行操作. Hive 查询操作过程严格遵守Hadoop MapReduce 的作业 ...