本项目是作者学习早期的一个项目了,是基于MVC架构(单工程)的一个Spring、SpringMvc、Mybatis的一个框架整合项目
因为之前没有写博客的习惯,所以就没有记录,现在只是把以前的项目记录一下,也欢迎大家交流讨论!
项目源码地址 http://git.oschina.net/Lamb7/ssmdemo
建议大家直接去 码云 上下载或者clone 源码,比较直观
先看一下项目结构
其中下面的src中问webapp
先评价一下这个结构,首先,关于java类的结构,mvc架构基本的骨架是这样的,(我这里没写公司包名,本来包名应该是com.xxxx.xxx.controller等)
但是,现在流行动静态资源分离,为的是降低web应用的压力,和大小,而且h5的渲染速度,比jsp快多了。所以本例中的静态文件资源只是为了方便而已才这么放的。但是想java类,以及配置文件的位置,放的还是比较正确的。接下来开始构建工程
1.使用maven构建项目,引入相关jar(可能有一些jar是多余的,来不及整理)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 2 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> 3 4 <!-- 当前pom的版本 --> 5 <modelVersion>4.0.0</modelVersion> 6 7 <!-- 主项目的标识 --> 8 <groupId>ssm_Login</groupId> 9 <artifactId>LoginDemo4</artifactId> 10 <packaging>war</packaging> 11 <version>0.0.1-SNAPSHOT</version> 12 13 <dependencies> 14 <!-- Spring 、SpringMVC 的 相关 jar --> 15 <dependency> 16 <groupId>org.springframework</groupId> 17 <artifactId>spring-core</artifactId> 18 <version>4.3.2.RELEASE</version> 19 </dependency> 20 <dependency> 21 <groupId>org.springframework</groupId> 22 <artifactId>spring-webmvc</artifactId> 23 <version>4.3.2.RELEASE</version> 24 </dependency> 25 <dependency> 26 <groupId>org.springframework</groupId> 27 <artifactId>spring-context</artifactId> 28 <version>4.3.2.RELEASE</version> 29 </dependency> 30 <dependency> 31 <groupId>org.springframework</groupId> 32 <artifactId>spring-tx</artifactId> 33 <version>4.3.2.RELEASE</version> 34 </dependency> 35 <dependency> 36 <groupId>org.springframework</groupId> 37 <artifactId>spring-jdbc</artifactId> 38 <version>4.3.2.RELEASE</version> 39 </dependency> 40 <dependency> 41 <groupId>org.springframework</groupId> 42 <artifactId>spring-beans</artifactId> 43 <version>4.3.2.RELEASE</version> 44 </dependency> 45 <dependency> 46 <groupId>org.springframework</groupId> 47 <artifactId>spring-aop</artifactId> 48 <version>4.3.2.RELEASE</version> 49 </dependency> 50 <dependency> 51 <groupId>org.springframework</groupId> 52 <artifactId>spring-expression</artifactId> 53 <version>4.3.2.RELEASE</version> 54 </dependency> 55 <dependency> 56 <groupId>org.springframework</groupId> 57 <artifactId>spring-test</artifactId> 58 <version>4.3.2.RELEASE</version> 59 </dependency> 60 <dependency> 61 <groupId>org.springframework</groupId> 62 <artifactId>spring-context-support</artifactId> 63 <version>4.3.2.RELEASE</version> 64 </dependency> 65 66 <!-- Servlet 的 jar --> 67 <dependency> 68 <groupId>javax.servlet</groupId> 69 <artifactId>javax.servlet-api</artifactId> 70 <version>3.1.0</version> 71 </dependency> 72 73 <!-- Mybatis 的 jar --> 74 <dependency> 75 <groupId>org.mybatis</groupId> 76 <artifactId>mybatis</artifactId> 77 <version>3.2.8</version> 78 </dependency> 79 80 <!-- Mybatis 和 Spring 整合的 jar --> 81 <dependency> 82 <groupId>org.mybatis</groupId> 83 <artifactId>mybatis-spring</artifactId> 84 <version>1.3.0</version> 85 </dependency> 86 87 88 <!-- Mysql 的 驱动 jar --> 89 <dependency> 90 <groupId>mysql</groupId> 91 <artifactId>mysql-connector-java</artifactId> 92 <version>5.1.30</version> 93 </dependency> 94 95 <!-- alibaba 的数据源 的 jar --> 96 <dependency> 97 <groupId>com.alibaba</groupId> 98 <artifactId>druid</artifactId> 99 <version>1.0.15</version> 100 </dependency> 101 102 <!-- 其它相关的jar --> 103 <dependency> 104 <groupId>aopalliance</groupId> 105 <artifactId>aopalliance</artifactId> 106 <version>1.0</version> 107 </dependency> 108 109 <dependency> 110 <groupId>org.aspectj</groupId> 111 <artifactId>aspectjweaver</artifactId> 112 <version>1.8.6</version> 113 </dependency> 114 115 <!-- log4j 的 jar 包 --> 116 <dependency> 117 <groupId>log4j</groupId> 118 <artifactId>log4j</artifactId> 119 <version>1.2.17</version> 120 </dependency> 121 122 <!-- fastjson的 jar --> 123 <dependency> 124 <groupId>com.alibaba</groupId> 125 <artifactId>fastjson</artifactId> 126 <version>1.2.24</version> 127 </dependency> 128 129 130 131 <!-- 测试相关的 jar --> 132 <dependency> 133 <groupId>junit</groupId> 134 <artifactId>junit</artifactId> 135 <version>4.10</version> 136 <scope>test</scope> 137 </dependency> 138 139 <!-- 使用 responsebody 要使用的jar 包 ,或者直接引入 fastJson--> 140 <dependency> 141 <groupId>com.fasterxml.jackson.core</groupId> 142 <artifactId>jackson-databind</artifactId> 143 <version>2.8.1</version> 144 </dependency> 145 146 </dependencies> 147 148 <build> 149 <finalName>LoginDemo4</finalName> 150 <!-- 为了在 maven update 的时候不让 jdk 变成1.5 --> 151 <plugins> 152 <plugin> 153 <groupId>org.apache.maven.plugins</groupId> 154 <artifactId>maven-compiler-plugin</artifactId> 155 <version>2.1</version> 156 <configuration> 157 <source>1.7</source> 158 <target>1.7</target> 159 </configuration> 160 </plugin> 161 </plugins> 162 </build> 163 </project>
2.建库建表
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 -- ---------------------------- 2 -- Table structure for user 3 -- ---------------------------- 4 DROP TABLE IF EXISTS `user`; 5 CREATE TABLE `user` ( 6 `username` varchar(11) NOT NULL, 7 `password` varchar(20) NOT NULL, 8 `id` int(10) NOT NULL AUTO_INCREMENT, 9 `asset` float(10,2) DEFAULT '0.00', 10 `status` smallint(1) DEFAULT '1', 11 `createtime` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, 12 `updatetime` timestamp NULL DEFAULT NULL, 13 PRIMARY KEY (`id`) 14 ) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8; 15 16 -- ---------------------------- 17 -- Records of user 18 -- ---------------------------- 19 INSERT INTO `user` VALUES ('15988888888', '55555', '1', '238.00', '1', '2016-09-10 10:39:33', '2016-09-26 11:42:10'); 20 INSERT INTO `user` VALUES ('15977777777', '12', '2', '971.00', '1', '2016-09-10 11:43:19', '2016-09-10 11:43:19');
3.创建实体类 User.java(开始编写model层)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 package model; 2 3 import java.util.Date; 4 import java.util.List; 5 6 public class User { 7 8 private Integer id; 9 10 private String username; 11 12 private String password; 13 14 private Float asset; 15 16 private Short status; 17 18 private Date createtime; 19 20 private Date updatetime; 21 22 public Integer getId() { 23 return id; 24 } 25 26 public void setId(Integer id) { 27 this.id = id; 28 } 29 30 public String getUsername() { 31 return username; 32 } 33 34 public void setUsername(String username) { 35 this.username = username == null ? null : username.trim(); 36 } 37 38 public String getPassword() { 39 return password; 40 } 41 42 public void setPassword(String password) { 43 this.password = password == null ? null : password.trim(); 44 } 45 46 public Float getAsset() { 47 return asset; 48 } 49 50 public void setAsset(Float asset) { 51 this.asset = asset; 52 } 53 54 public Short getStatus() { 55 return status; 56 } 57 58 public void setStatus(Short status) { 59 this.status = status; 60 } 61 62 public Date getCreatetime() { 63 return createtime; 64 } 65 66 public void setCreatetime(Date createtime) { 67 this.createtime = createtime; 68 } 69 70 public Date getUpdatetime() { 71 return updatetime; 72 } 73 74 public void setUpdatetime(Date updatetime) { 75 this.updatetime = updatetime; 76 } 77 78 public User() { 79 super(); 80 } 81 82 public User(String username, String password) { 83 super(); 84 this.username = username; 85 this.password = password; 86 } 87 88 }
4.创建访问数据库的dao类,在Mybatis中也叫Mapper
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
package dao; import model.User; public interface UserDao { User getUserByLogin(User user); User getUserByUsername(String username); }
5.根据这个dao类,编写对应的Mapper.xml,其中,dao类中的方法名称要和xml中的id对应(至此,model层编写完毕)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="dao.UserDao" > <!-- namespace为dao类的包路径 --> <resultMap id="BaseResultMap" type="model.User" > <id column="id" property="id" jdbcType="INTEGER" /> <result column="username" property="username" jdbcType="VARCHAR" /> <result column="password" property="password" jdbcType="VARCHAR" /> <result column="asset" property="asset" jdbcType="REAL" /> <result column="status" property="status" jdbcType="SMALLINT" /> <result column="createtime" property="createtime" jdbcType="TIMESTAMP" /> <result column="updatetime" property="updatetime" jdbcType="TIMESTAMP" /> </resultMap> <!-- 这里的id,入参,返回参数都要和dao类中的方法相对应 --> <select id="getUserByLogin" parameterType="model.User" resultMap="BaseResultMap"> SELECT * FROM USER WHERE username = #{username} and password = #{password} </select> <select id="getUserByUsername" parameterType="java.lang.String" resultMap="BaseResultMap"> select * from user where username = #{username} </select>
6.开始编写service,其实在这个简单的项目中可以不必编写,但是为了规范,还是加个service层(分别是接口和接口实现)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
package service; import model.User; public interface UserService { public User getUserByLogin(String username,String password); public User getUserByUsername(String username); }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
package service; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import dao.UserDao; import model.User; @Service("userService") public class UserServiceImpl implements UserService{ @Autowired private UserDao userDao; @Override public User getUserByLogin(String username, String password) { return userDao.getUserByLogin(new User(username,password)); } @Override public User getUserByUsername(String username) { return userDao.getUserByUsername(username); } }
7.开始编写Controller层
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
package controller; import javax.servlet.http.HttpServletRequest; import model.User; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import service.UserService; import com.alibaba.fastjson.JSONObject; @Controller @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @Autowired private HttpServletRequest request; @RequestMapping(value="/login") @ResponseBody public JSONObject login(){ //初始化用到的工具 JSONObject result = new JSONObject(); String msg = ""; int status = 0; //接收ajax传来的数据 String username = request.getParameter("username"); String password = request.getParameter("password"); //处理业务逻辑(可以看到控制台打出的sql) //select XXXX from user where username=xxx and password = xxx User loginUser = userService.getUserByLogin(username, password); //不为null 的时候说明用户名和密码正确 if(loginUser != null) { result.put("loginUserId", loginUser.getId()); status = 1; msg = "Login success!"; }else { msg = "User not exists or wrong password"; } result.put("status", status); result.put("msg", msg); //向前端传回数据 return result; } }
8.编写配置文件
jdbc.properties(改成你自己的库、表,用户名和密码)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://127.0.0.1:3306/mytest
jdbc.username=root
jdbc.password=root
validationQuery=SELECT 1
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
log4j.rootLogger=DEBUG,Console
log4j.appender.Console=org.apache.log4j.ConsoleAppender
log4j.appender.Console.layout=org.apache.log4j.PatternLayout
#log4j.appender.Console.layout.ConversionPattern=%d [%t] %-5p [%c] - %m%n
log4j.appender.Console.layout.ConversionPattern=%-5p [%c] - %m%n
log4j.logger.org.apache=INFO
spring-mybatis.xml(spring整合Mybatis)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd"> <!-- 引入属性文件 --> <context:property-placeholder location="classpath:jdbc.properties" /> <!-- 配置数据源 com.alibaba.druid --> <bean name="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close"> <property name="url" value="${jdbc.url}" /> <property name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> <!-- 初始化连接大小 --> <property name="initialSize" value="0" /> <!-- 连接池最大使用连接数量 --> <property name="maxActive" value="20" /> <!-- 连接池最大空闲 --> <!-- <property name="maxIdle" value="20" /> --> <!-- 连接池最小空闲 --> <property name="minIdle" value="0" /> <!-- 获取连接最大等待时间 --> <property name="maxWait" value="60000" /> <property name="validationQuery" value="${validationQuery}" /> <property name="testOnBorrow" value="false" /> <property name="testOnReturn" value="false" /> <property name="testWhileIdle" value="true" /> <!-- 配置间隔多久才进行一次检测,检测需要关闭的空闲连接,单位是毫秒 --> <property name="timeBetweenEvictionRunsMillis" value="60000" /> <!-- 配置一个连接在池中最小生存的时间,单位是毫秒 --> <property name="minEvictableIdleTimeMillis" value="25200000" /> <!-- 打开removeAbandoned功能 --> <property name="removeAbandoned" value="true" /> <!-- 1800秒,也就是30分钟 --> <property name="removeAbandonedTimeout" value="1800" /> <!-- 关闭abanded连接时输出错误日志 --> <property name="logAbandoned" value="true" /> <!-- 监控数据库 --> <!-- <property name="filters" value="stat" /> --> <property name="filters" value="mergeStat" /> </bean> <!-- myBatis文件 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <!-- 自动扫描Mapping目录, 省掉Configuration.xml里的手工配置 --> <property name="mapperLocations" value="classpath:mapping/*.xml" /> </bean> <!-- Spring 和 Mybatis 整合的重要文件,让spring 去 扫描 mybatis 的映射文件 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="dao" /> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" /> </bean> <!-- spring声明式事务管理 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"></property> </bean> <!-- 基于注解的事务管理 --> <tx:annotation-driven transaction-manager="transactionManager"/> </beans>
spring-mvc.xml(spring整合springMvc)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd"> <!-- 启用spring mvc 注解--> <mvc:annotation-driven /> <!-- 自动扫描controller包下的所有类,使其认为spring mvc的控制器 --> <context:component-scan base-package="controller" /> <!-- 自动扫描(自动注入) --> <context:component-scan base-package="service" /> <mvc:annotation-driven content-negotiation-manager="contentNegotiationManager"> <mvc:message-converters register-defaults="true"> <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter"> <property name="features"> <value>DisableCircularReferenceDetect,WriteDateUseDateFormat,WriteNullNumberAsZero,WriteNullStringAsEmpty,WriteEnumUsingToString </value> </property> <property name="supportedMediaTypes"> <list> <value>application/json;charset=UTF-8</value> <value>application/xml;charset=UTF-8</value> <value>text/html;charset=UTF-8</value> <value>multipart/form-data;charset=UTF-8</value> </list> </property> </bean> </mvc:message-converters> </mvc:annotation-driven> <bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean"> <property name="favorPathExtension" value="true" /> <property name="favorParameter" value="false" /> <property name="ignoreAcceptHeader" value="true" /> <property name="mediaTypes"> <props> <prop key="json">application/json</prop> <prop key="xml">application/xml</prop> <prop key="html">text/html</prop> </props> </property> </bean> <mvc:default-servlet-handler/> <!-- 视图解析器:定义跳转的文件的前后缀 springmvc的,目前没什么卵用--> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/html/" /> <property name="suffix" value=".html" /> </bean> </beans>
web.xml
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <!-- 扫描配置文件 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mybatis.xml</param-value> </context-param> <!-- 过滤字符 --> <filter> <description>字符集过滤器</description> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <description>字符集编码</description> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 监听器 --> <listener> <description>spring监听器</description> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 防止spring内存溢出监听器 --> <listener> <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class> </listener> <!-- spring mvc servlet --> <servlet> <servlet-name>springMvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springMvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>/index.jsp</welcome-file> </welcome-file-list> <!-- 配置session超时时间,单位分钟 --> <session-config> <session-timeout>15</session-timeout> </session-config> </web-app>
9.编写View层(注意引入jquery)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <script src="../../js/jquery-3.1.0.min.js"></script> <meta charset="UTF-8"> <title>登录</title> </head> <body> <h3>用户登录</h3> <hr> 用户名: <input type="text" id="username"/><br> 密码:<input type="password" id="password"/><br> <input type="button" id="loginBtn" value="登录"/> <p id="p1"></p> </body> <script> $("#loginBtn").click(function() { if(check()){ login(); }else { $("#p1").html("输入错误!"); } }); //执行登录操作的函数 function login() { $.ajax({ type:"POST", url:"/user/login.htm", data:{ 'username':$("#username").val(), 'password':$("#password").val() }, dataType:"json", success:function(data) { $("#p1").html("这是后台返回的数据:<br>status:" + data.status + "<br>msg:" + data.msg); }, error:function(data) { $("#p1").html(data.msg); } }); } //前端校验函数 function check() { var username = $("#username").val(); var password = $("#password").val(); if(!(/^1[3|4|5|7|8]\d{9}$/.test(username)) || password == null || password == "" || password == 0) { return false; } return true; } </script> </html>
此时项目已经算是完成了,我们给项目配上tomcat后启动项目,访问 http://localhost:8080/LoginDemo4/html/login.html
此时打开chrome的调试模式(F12),发现居然找不到jquery
这是为什么呢?此时我们再打开 一个地址:
http://localhost:8080/LoginDemo4/js/jquery-3.1.0.min.js 发现居然可以访问到 jquery的资源。
那么问题就清晰了,我们访问资源的时候没有带上项目名,也就是 LoginDemo4,其实这是jquery ajax异步交互url的问题,我们给的地址是/user/login,说明这是从根目录进行访问的,ajax认为的根目录是http://localhost:8080/,但是我们使用tomcat的时候,它把我们的项目的根目录变成了http://localhost:8080/LoginDemo4/,所以jquery的地址就变成了http://localhost:8080/LoginDemo4/js/jquery-3.1.0.min.js,但是ajax访问的地址是http://localhost:8080/js/jquery-3.1.0.min.js,自然就访问不到了。
那么怎么解决呢?
我首先想到的是,那我们把 ajax的静态资源的地址前面加上项目名就好了,比如原来的url 是/xxxx/xxxx,就改成/LoginDemo4/xxxx/xxxx,原来的是../../js/jquery.js,就改成../../LoginDemo4/js/jquery.js
事实证明,这是可行的,但是每一个接口都要变,而且这看着很怪异
第二种方法,就是怎么样让tomcat把我们的项目根目录不要带上项目名
当我们为一个项目配置了tomcat之后,eclipse会多出一个Servers的工程,我们找到对应的tomcat-config文件,里面有个server.xml文件
在该文件的最下面有这么一段
我们把path属性,改成 "/",就代表项目的根目录从/LoginDemo4 变成了 /
保存重启,此时我们看到 jquery 已经成功访问到了
我们输入数据库中的信息
至此,整合成功!(至于mvc架构等知识,由于篇幅有限,作者也没什么精力,就不写了。。。)
有问题 欢迎大家留言!