springmvc +bootstrap创建简单web项目

本篇文章,我们会教你通过maven和spring mvc + bootstrap创建一个Java web项目的欢迎页。关于maven如何创建Java web项目,上一篇文章已经作了说明。
开始构建项目之前,有必要说明一下:由于maven的中央仓库太难用了,我们先更改一下maven的镜像,这里用到的是阿里云的镜像。在maven根目录下 conf文件夹下的 setting.xml文件,将其打开,在<mirrors>节点下增加如下代码
    <mirror>
        <id>alimaven</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public</url>
        <mirrorOf>central</mirrorOf>
    </mirror>
如下图所示:

开发环境:
1.jdk 1.7
2.Maven 3.3.9
3.Eclipse Mars.1
4.Spring 4.2.1.RELEASE
5.Bootstrap
1.通过maven构建项目
mvn archetype:generate -DgroupId=org.thinkingingis -DartifactId=SpringmvcBootstrap -Dversion=1.0.0-SNAPSHOP -DarchetypeArtifactId=maven-archetype-webapp
2.目录结构及文件

3. pom.xml 文件中的依赖
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>org.thinkingingis</groupId>
  <artifactId>SpringmvcBootstrap</artifactId>
  <packaging>war</packaging>
  <version>1.0.0-SNAPSHOT</version>
  <name>SpringmvcBootstrap Maven Webapp</name>
  <url>http://maven.apache.org</url>
  
   	<properties>
		<jdk.version>1.7</jdk.version>
		<spring.version>4.1.1.RELEASE</spring.version>
		<jstl.version>1.2</jstl.version>
		<junit.version>4.11</junit.version>
		<logback.version>1.0.13</logback.version>
		<jcl-over-slf4j.version>1.7.5</jcl-over-slf4j.version>
	</properties>
  
  <dependencies>
	
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${spring.version}</version>
		</dependency>
		
	
		<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
		<dependency>
		    <groupId>javax.servlet</groupId>
		    <artifactId>jstl</artifactId>
		    <version>1.2</version>
		</dependency>
	
  </dependencies>
  <build>
    <finalName>SpringmvcBootstrap</finalName>
       <plugins>
		    <!-- Eclipse project -->
		  <plugin>
			<groupId>org.apache.maven.plugins</groupId>
			<artifactId>maven-eclipse-plugin</artifactId>
			<version>2.9</version>
			<configuration>
			        <!-- Always download and attach dependencies source code -->
				<downloadSources>true</downloadSources>
				<downloadJavadocs>false</downloadJavadocs>
				<!-- Avoid type mvn eclipse:eclipse -Dwtpversion=2.0 -->
				<wtpversion>2.0</wtpversion>
			</configuration>
		  </plugin>

		  <!-- Set JDK Compiler Level -->
		  <plugin>
			<groupId>org.apache.maven.plugins</groupId>
			<artifactId>maven-compiler-plugin</artifactId>
			<version>2.3.2</version>
			<configuration>
				<source>${jdk.version}</source>
				<target>${jdk.version}</target>
			</configuration>
		  </plugin>

		</plugins>
    
  </build>
</project>
4. HelloController.java
package org.thinkingingis.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class HelloController {
	
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String printWelcome(ModelMap model){
		model.addAttribute("message", "Hello ThinkingInGIS by Spring MVC ");
		return "Hello ThinkingInGIS";
	}
	
	@RequestMapping(value="/{name}", method = RequestMethod.GET)
	public ModelAndView hello(@PathVariable("name") String name){
		
		ModelAndView model = new ModelAndView();
		model.setViewName("index");
		model.addObject("msg", name);
		
		return model;
	}
}
5.JSP文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spring MVC + Bootstrap</title>

<link href="./resources/bootstrap.min.css" rel="stylesheet" />

</head>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">Spring MVC + Bootstrap</a>
	</div>
  </div>
</nav>

<div class="jumbotron">
  <div class="container">
	<h1>${title}</h1>
	<p>
		<c:if test="${not empty name}">
			Hello ${name}
		</c:if>

		<c:if test="${empty name}">
			Welcome ThinkingInGIS !
		</c:if>
    </p>
    <p>
	<a class="btn btn-primary btn-lg" href="#" role="button">Maps Talk</a>
    </p>
  </div>
</div>

<div class="container">

  <div class="row">
	<div class="col-md-4">
		<h2>Maps</h2>
		<p>maps</p>
		<p>
		<a class="btn btn-default" href="#" role="button">Maps</a>
		</p>
	</div>
	<div class="col-md-4">
		<h2>can</h2>
		<p>can</p>
		<p>
		<a class="btn btn-default" href="#" role="button">can</a>
		</p>
	</div>
	<div class="col-md-4">
		<h2>Talk</h2>
		<p>Talk</p>
		<p>
		<a class="btn btn-default" href="#" role="button">Talk</a>
		</p>
	</div>
  </div>

  <hr>
  <footer>
	<p>© ThinkingInGIS 2016</p>
  </footer>
</div>
<script type="text/javascript" src="./resources/jquery.js"></script>
<script type="text/javascript" src="./resources/bootstrap.min.js"></script>


</body>
</html>
6.spring-web-servlet.xml (spring的配置文件)
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd">

	<context:component-scan base-package="org.thinkingingis.controller" />

	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass">
			<value>org.springframework.web.servlet.view.JstlView</value>
		</property>
		<property name="prefix">
			<value>/</value>
		</property>
		<property name="suffix">
			<value>.jsp</value>
		</property>
	</bean>

	<mvc:resources mapping="/resources/**" location="/resources/" />
	<mvc:default-servlet-handler></mvc:default-servlet-handler>
	

</beans>
web.xml (部署描述文件)
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	      http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">

	<display-name>Spring webapp</display-name>

	<servlet>
		<servlet-name>spring-web</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>spring-web</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

</web-app>
7.将项目打包,并部署
在SpringmvcBootstrap文件夹下,通过命令行输入: mvn package
一个WAR包文件会出现在target下,将该文件复制到tomcat根目录/bin/webapp文件夹下即可,然后启动tomcat
输入 localhost:8080/SpringmvcBootstrap/
看看会发生什么吧。


至此,一个通过简单的spring mvc + bootstrap的小程序就完成啦。
至此,一个通过maven创建的java web程序就完成啦。

如果你觉得本文对你有帮助,是支持赞赏的哦:)


(如遇到问题,请留言给作者,以便共同探讨gis知识。 thinkingingis@qq.com
微 信公众号:ThinkingInGIS


  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SSM (Spring+SpringMVC+MyBatis) 是一种用于构建 Java Web 应用程序的框架组合。Bootstrap 是一种用于构建响应式网页设计的 HTML、CSS、JavaScript 框架。结合这两个框架,我们可以实现验证码功能。 要实现验证码功能,我们可以使用 Bootstrap 提供的 UI 组件和 SSM 框架提供的后台技术。下面给出一个简单的实现步骤: 1. 导入 Bootstrap 的相关源文件:在项目的 Web 目录下,创建 css、js 和 fonts 目录,分别保存 Bootstrap 的样式、脚本和字体文件。 2. 在项目的静态资源目录下,创建一个用于保存验证码图片的文件夹,例如:`/resources/captcha`。 3. 创建一个用于生成验证码的 Controller,并配置该 Controller 的路由信息。在该 Controller 中,可以使用 Java 的第三方库(如 Kaptcha)生成验证码图片,并将图片保存在之前创建的文件夹中。 4. 创建一个用于接收用户验证请求的 Controller,并配置该 Controller 的路由信息。在该 Controller 中,可以使用 Spring 的表单验证功能,验证用户输入的验证码是否正确。 5. 在前端页面中,使用 Bootstrap 的表单组件和 Ajax 技术,实现用户输入验证码的表单,并将表单数据发送到上一步中创建的 Controller。 通过以上步骤,我们可以实现基本的验证码功能。当用户访问含有验证码的页面时,会自动生成一个验证码图片,并将图片显示在页面上。用户输入验证码后,通过 Ajax 技术将输入的验证码发送到后台验证。如果验证码正确,则可以继续进行后续的业务操作。 需要注意的是,以上只是一个简单的实现思路。实际的开发过程中,还需要考虑验证码图片的生成、验证码的验证逻辑、验证码的刷新等问题。同时,为了保证用户体验,还可以结合前端的一些交互技术,如点击图片刷新验证码等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值