Java高级 SSM项目部署以及ajax的详细使用过程

最新推荐文章于 2022-09-17 08:00:00 发布

很萌の萌新

最新推荐文章于 2022-09-17 08:00:00 发布

阅读量485

点赞数 3

本文链接：https://blog.csdn.net/liulei952413829/article/details/120521614

版权

Java 同时被 2 个专栏收录

33 篇文章 4 订阅

订阅专栏

Spring

4 篇文章 1 订阅

订阅专栏

前言

很多刚开始学习JavaEE的新手同学，都或多或少地觉得使用Ajax来实现http请求是一件棘手的事情。今天我通过写一个简单的案例来给大家一个清晰的流程和思路。案例比较简单，希望能帮上大家。下面附上我的代码分解：

1、开发环境

jdk8 + tomcat8 + idea2019 + MySql8 + SQLyog

2、数据库

/*
Navicat MySQL Data Transfer
Source Host     : localhost:3306
Source Database : mybatis
Target Host     : localhost:3306
Target Database : mybatis
Date: 2021-09-26 11:24:31
*/
/*执行sql脚本时，不让外键受影响导致出错*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(32) NOT NULL COMMENT '用户名称',
  `password` VARCHAR(255) DEFAULT NULL,
  `birthday` DATE DEFAULT NULL COMMENT '生日',
  `sex` CHAR(1) DEFAULT NULL COMMENT '性别',
  `address` VARCHAR(256) DEFAULT NULL COMMENT '地址',
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=30 DEFAULT CHARSET=utf8;
 
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', '张三', '123', '2014-07-10', '2', '成都市');
INSERT INTO `user` VALUES ('2', '李四', '123', '2014-07-10', '1', '成都市');
INSERT INTO `user` VALUES ('3', '王五', '123', '2014-07-10', '1', '重庆市');
INSERT INTO `user` VALUES ('4', '赵六', '123', '2014-07-10', '1', '重庆市');
INSERT INTO `user` VALUES ('5', '田七', '123', '2014-07-10', '1', '扬州市');
INSERT INTO `user` VALUES ('6', '迪迦', '222', '2014-07-10', '1', '扬州市');
INSERT INTO `user` VALUES ('7', '泰罗', '222', '2014-07-10', '2', '北京市');
INSERT INTO `user` VALUES ('8', '艾斯', '222', '2017-05-03', '1', '北京市');
INSERT INTO `user` VALUES ('9', '爱迪', '222', '2017-05-03', '2', '昆明市');

3、工程配置

在idea中创建maven工程“ajaxDemo”，然后进行以下配置：

3.1 项目结构

3.2 配置工程支持WEB开发

在File选项卡中找到Project Structure选项进入
在Project Settings里找到Modules，点击左上方"+"，找到WEB模块，点击确定加入WEB模块
点击添加的WEB模块位置，将Deployment Descriptors里面的path修改成刚才我们建立的web.xml文件的位置
在Web Resource Directories里面的路径修改成我们的web路径
点击Artfacts选项，点击“+”，选择Web Application:Exploaded，选择from modules，找到我们刚才建立的web工程点击确定，这样才能让我们可以在WEBAPP目录下建立JSP文件，并且tomcat服务器找到该WEB项目进行部署和运行。

3.3 配置文件

3.3.1 spring-dao.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
	http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
	http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">

    <!-- 读取配置-->
    <context:property-placeholder location="classpath*:jdbc.properties"/>

    <!--数据源-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>

    <!-- 配置SqlSessionFactory -->
    <bean  id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 设置数据源 -->
        <property name="dataSource" ref="dataSource" />
        <property name="mapperLocations"  value="classpath*:mapper/*.xml"/>
    </bean>

    <!-- 配置Mapper扫描 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 设置Mapper扫描包 -->
        <property name="basePackage" value="com.wedu.dao" />
    </bean>
     <!-- 配置Service扫描 -->
    <context:component-scan base-package="com.wedu.service" />
    <bean id="userService" class="com.wedu.service.impl.UserServiceImpl"></bean>

</beans>

3.3.2 spring-service.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
	http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
	http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">

    <!-- 配置Service扫描 -->
    <context:component-scan base-package="com.wedu.service" />
</beans>

3.3.3 spring-trans.xml配置文件(事务相关配置，目前的这个demo用不上，大家可以先看看)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
	http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
	http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">

    <!-- 事务管理器 -->
    <bean id="transactionManager"	class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 数据源 -->
        <property name="dataSource" ref="dataSource" />
    </bean>

    <!-- 通知 -->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <!-- 传播行为 -->
            <tx:method name="save*" propagation="REQUIRED" />
            <tx:method name="insert*" propagation="REQUIRED" />
            <tx:method name="add*" propagation="REQUIRED" />
            <tx:method name="create*" propagation="REQUIRED" />
            <tx:method name="delete*" propagation="REQUIRED" />
            <tx:method name="update*" propagation="REQUIRED" />
            <tx:method name="find*" propagation="SUPPORTS" read-only="true" />
            <tx:method name="select*" propagation="SUPPORTS" read-only="true" />
            <tx:method name="get*" propagation="SUPPORTS" read-only="true" />
            <tx:method name="query*" propagation="SUPPORTS" read-only="true" />
        </tx:attributes>
    </tx:advice>

    <!-- 切面 -->
    <aop:config>
        <aop:advisor advice-ref="txAdvice"
                     pointcut="execution(* com.wedu.service.*.*(..))" />
    </aop:config>

    <!--    <jdbc:embedded-database id="dataSource"/>-->
</beans>

3.3.4 spring-mvc.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
	http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
	http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 配置Controller扫描 -->
    <context:component-scan base-package="com.wedu.controller" />

    <!-- 配置注解驱动 -->
    <mvc:annotation-driven />

    <!-- 配置视图解析器 -->
    <bean	class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="/pages/" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>

    <mvc:interceptors>
        <!-- 拦截器记录操作日志 -->
        <!-- 使用bean直接定义在<mvc:interceptors>下面的拦截器将拦截所有请求 -->
        <!-- 这个是全局的，当使用下面的拦截器时，需要把这个拦截器注释掉 -->
        <!-- <bean class="com.springmvc.interceptor.MyInterceptor"/>-->
        <!-- 定义多个拦截器，顺序执行 -->
        <mvc:interceptor>   <!-- 拦截器 -->
            <mvc:mapping path="/**"/>     <!-- 配置拦截器作用的路径 /**表示拦截所有url路径包括子url路径-->
            <mvc:exclude-mapping path="/resources/**"/>   <!-- 配置不需要拦截器作用的路径 -->
            <!-- 定义在<mvc:interceptor>下面的拦截器，表示匹配路径请求才进行拦截 -->
            <bean class="com.wedu.interceptor.JournalInterceptor"></bean>
        </mvc:interceptor>
    </mvc:interceptors>

    <!--自定义消息转换器的编码,解决后台传输json回前台时，中文乱码问题-->
    <mvc:annotation-driven >
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter" >
                <property name = "supportedMediaTypes">
                    <list>
                        <value>application/json;charset=utf-8</value>
                        <value>text/html;charset=utf-8</value>
                        <!-- application 可以在任意 form 表单里面 enctype 属性默认找到 -->
                        <value>application/x-www-form-urlencoded</value>
                    </list>
                </property>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
        </mvc:message-converters>
    </mvc:annotation-driven>
</beans>

3.3.5 web.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <display-name>ajaxProject</display-name>

    <!-- 配置spring -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/spring-*.xml</param-value>
    </context-param>

    <!-- 配置监听器加载spring -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!-- 配置过滤器，解决post的乱码问题 -->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 使用filter实现登录控制 -->
    <filter>
        <filter-name>LoginFilter</filter-name>
        <filter-class>com.wedu.filter.LoginFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>LoginFilter</filter-name>
        <!-- 所有的页面需要登录后才能访问 -->
        <url-pattern>/pages/*</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>LoginFilter</filter-name>
        <!-- 日志功能需要登录后才能访问 -->
        <url-pattern>/journal/*</url-pattern>
    </filter-mapping>

    <!-- 配置SpringMVC -->
    <servlet>
        <servlet-name>ProjectManagementSystem</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath*:spring/spring-mvc.xml</param-value>
        </init-param>
        <!-- 配置springmvc什么时候启动，参数必须为整数 -->
        <!-- 如果为0或者大于0，则springMVC随着容器启动而启动 -->
        <!-- 如果小于0，则在第一次请求进来的时候启动 -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>ProjectManagementSystem</servlet-name>
        <!-- 所有的请求都进入springMVC -->
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

3.3.6 jdbc.properties配置文件(数据库连接配置)

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ajaxdemo?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8&useSSL=false&allowPublicKeyRetrieval=true
jdbc.username=root
jdbc.password=root

3.3.7 log4j.properties配置文件(日志文件配置)

# Global logging configuration
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

3.3.8 mapper配置文件(sql语句)

<?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="com.wedu.dao.UserDao">
    <select id="login" parameterType="com.wedu.bean.User" resultType="com.wedu.bean.User">
		select * from user where username = #{username} and password = #{password}
	</select>
</mapper>

4、创建类和jsp文件

4.1 创建实体类User

package com.wedu.bean;

import java.util.Date;

public class User {
    private Integer id;
    private String username;
    private String password;
    private String address;
    private Date birthday;
    private char sex;

    public User(Integer id, String username, String password, String address, Date birthday, char sex) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.address = address;
        this.birthday = birthday;
        this.sex = sex;
    }

    public User() {
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public char getSex() {
        return sex;
    }

    public void setSex(char sex) {
        this.sex = sex;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", address='" + address + '\'' +
                ", birthday=" + birthday +
                ", sex=" + sex +
                '}';
    }
}

4.2 数据访问层UserDao，对应UserMapper

package com.wedu.dao;

import com.wedu.bean.User;

public interface UserDao {
    User login(User user);
}

4.3 service层UserService

package com.wedu.service;

import com.wedu.bean.User;

public interface UserService {

    User login(User user);
}

4.4 UserService的实现类UserServiceImpl

package com.wedu.service.impl;

import com.wedu.bean.User;
import com.wedu.dao.UserDao;
import com.wedu.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;

    @Override @Transactional(propagation = Propagation.NOT_SUPPORTED)//如果是查询，事务挂起
    public User login(User user) {
        // TODO Auto-generated method stub
        return userDao.login(user);
    }
}

4.5 test，service层写好之后，可以写一个测试类测试数据是否能够访问到

package com.wedu.test;

import com.wedu.bean.User;
import com.wedu.service.UserService;
import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

public class test {

        @Test
        public void findUsers(){
            ApplicationContext context = new ClassPathXmlApplicationContext("spring/spring-dao.xml");
            UserService userService = (UserService) context.getBean("userService");
            User u = new User();
            u.setUsername("王五");
            u.setPassword("123");
            User user =userService.login(u);
            System.out.println(user.toString());
        }
}

数据访问成功：

4.6 controller控制层

package com.wedu.controller;

import com.wedu.bean.User;
import com.wedu.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 登录
     *
     * @param user
     */
    @RequestMapping("login")
    @ResponseBody
    public User login(@RequestBody User user) {//使用@RequestBody Map<String,String> map也是可以的,接收前台传过来的参数
        //返回用户信息，要使用@ResponseBody将返回值转换为JSON
        return userService.login(user);
    }
}

4.7 jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css"
          href="bootstrap-3.3.7-dist/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css"
          href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <style type="text/css">
        td {
            padding: 10px;
        }
    </style>
    <script type="text/javascript">
        var state = 0;//默认登录成功
        $(document).ready(
            function() {
                //登录
                $("#login").click(
                    function() {
                        $.ajax({
                            url : "user/login.do",
                            type : "POST",
                            /* data : "json", */
                            contentType : "application/json;charset=utf-8",
                            //向后端传输的数据
                            data : JSON.stringify({
                                username : $("#username").val(),
                                password : $("#password").val(),
                            }),
                            //处理后端返回的数据
                            success : function(result) {
                                //将得到的前台数据转换为json
                                /*var message = JSON.stringify(result);*/
                                alert("接受到的数据是：" + result);//输出默认的json字符串
                                console.log(result);
                                if (result != null && result != "") {

                                    //alert("接受到的数据是：" + message.username);
                                    var username = result.username;
                                    console.log(username);
                                    var password = result.password;
                                    console.log(password);
                                    //在前台做验证
                                    if (username != null && username != ""
                                        && password != null
                                        && password != "") {
                                        alert("用户登录成功");
                                        window.location.href="https://liulei-root.github.io/";
                                    } else {
                                        alert("用户登录失败");
                                    }
                                }else{
                                    alert("用户登录失败");
                                }
                                //alert("接受到的数据是：" + message);
                            },
                            //处理失败返回的数据
                            error : function(result) {
                                alert("用户登录失败");
                            }
                        });
                    });
            });
    </script>
</head>
<body>
<form action="${pageContext.request.contextPath }/user/login.do"
      method="post">
    <div class="panel panel-default" style="width:400px; margin:40px auto">
        <div class="panel-heading"
             style="text-align:center;font-weight:bold;">用户登录</div>
        <div class="panel-body">
            <table style="width: 100%;">
                <tr>
                    <td stylae="width: 30%; ">用户名：</td>
                    <td style="width: 70%; "><input type="text"
                                                    class="form-control" id="username" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td style="width: 30%; ">密&nbsp;&nbsp;码：</td>
                    <td style="width: 70%; "><input type="password"
                                                    class="form-control" id="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center;">
                        <button type="button" class="btn btn-primary"
                                data-toggle="button" id="register">注册</button>
                        <button type="button" class="btn btn-primary"
                                data-toggle="button" id="login">登录</button>
                    </td>

                </tr>
            </table>
        </div>
    </div>
</form>

</body>
</html>

引入bootstrap和jquery：

最后配置tomcat运行。

结束！！！

很萌の萌新

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
Java高级 SSM项目部署以及ajax的详细使用过程

文章目录前言1、开发环境2、数据库3、工程配置3.1 项目结构3.2 配置工程支持WEB开发3.3 配置文件3.3.1 spring-dao.xml配置文件3.3.2 spring-service.xml配置文件3.3.3 spring-trans.xml配置文件(事务相关配置，目前的这个demo用不上，大家可以先看看)3.3.4 spring-mvc.xml配置文件3.3.5 web.xml配置文件3.3.6 jdbc.properties配置文件(数据库连接配置)3.3.7 log4j.properti
复制链接

扫一扫