01-环境搭建尚筹网

我不是女神ヾ 2023-09-27 17:56 134阅读 0赞

## 环境搭建 ##

### 一、项目结构搭建 ###

模块关系

parent模块仅仅用来确定各个Maven依赖的版本

webui、component、entity模块继承自parent模块

util、reverse模块属于独立工程，不参与继承与聚合

且webui依赖于component，component依赖于entity、util。  
![在这里插入图片描述][fc2da041e36e42dfa37d545985b77c27.png]  
各个工程的打包方式：

<groupId>org.example</groupId>
        <artifactId>crowdfunding01-admin-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
    <packaging>pom</packaging>
    
    
    	<packaging>war</packaging>

IDEA中创建多模块工程：

先创建一个Empty Project（空工程），创建完成后一个个添加各个Maven模块

由于webui模块，需要打成war包，因此需要有web工程的目录结构，可以通过在Modules中添 加，产生对应的结构：  
![在这里插入图片描述][100d8275bb35467aa8257f4ecf46780b.png]  
模块创建时应该选择好父模块

### 二、数据库构建与逆向 ###

#### 1、建表： ####

CREATE DATABASE project_rowd CHARACTER SET utf8;
    
    USE project_rowd;
    drop table if exists t_admin;				# 如果存在t_admin则删除存在的表
        CREATE TABLE t_admin (
        id INT NOT NULL auto_increment,			# 主键
        login_acct VARCHAR ( 255 ) NOT NULL,	# 登录账号
        user_pswd CHAR ( 32 ) NOT NULL,			# 登录密码
        user_name VARCHAR ( 255 ) NOT NULL,		# 昵称
        email VARCHAR ( 255 ) NOT NULL,			# 邮件地址
        create_time CHAR ( 19 ),				# 创建时间
        PRIMARY KEY ( id ) 						# 设置主键
    );

进行基于Maven的逆向工程（根据已存在的表，在项目中逆向生成对应的实体类、Mapper文件、Mapper接口）

#### 2、在reverse模块中进行逆向： ####

##### 1）、pom.xml中导入依赖 #####

<build>
        <plugins>
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.0</version>
    
                <dependencies>
                    
                    <dependency>
                        <groupId>org.mybatis.generator</groupId>
                        <artifactId>mybatis-generator-core</artifactId>
                        <version>1.3.2</version>
                    </dependency>
                    <dependency>
                        <groupId>com.mchange</groupId>
                        <artifactId>c3p0</artifactId>
                        <version>0.9.2</version>
                    </dependency>
                    
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>8.0.15</version>
                    </dependency>
                </dependencies>
            </plugin>
        </plugins>
    </build>

##### 2）、编写generatorConfig.xml文件 #####

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE generatorConfiguration
            PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
            "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
    
    <generatorConfiguration>
        <context id="atguiguTables" targetRuntime="MyBatis3">
            <commentGenerator>
                
                <property name="suppressAllComments" value="true" />
            </commentGenerator>
    
            
            <jdbcConnection
                    driverClass="com.mysql.cj.jdbc.Driver"
                    connectionURL="jdbc:mysql://localhost:3306/project_rowd?serverTimezone=UTC"
                    userId="root"
                    password="root">
            </jdbcConnection>
    
            
            <javaTypeResolver>
                <property name="forceBigDecimals" value="false" />
            </javaTypeResolver>
    
            
            
            <javaModelGenerator targetPackage="crowd.entity" targetProject=".\src\main\java">
                
                <property name="enableSubPackages" value="false"/>
                
                <property name="trimStrings" value="true" />
            </javaModelGenerator>
    
            
            <sqlMapGenerator targetPackage="mapper" targetProject=".\src\main\java">
                
                <property name="enableSubPackages" value="false"/>
            </sqlMapGenerator>
    
            
            <javaClientGenerator type="XMLMAPPER" targetPackage="org.fall.mapper" targetProject=".\src\main\java">
                
                <property name="enableSubPackages" value="false"/>
            </javaClientGenerator>
    
            
            <table tableName="t_admin" domainObjectName="Admin"/>
        </context>
    </generatorConfiguration>

在IDEA中进行逆向工程的方法：  
![在这里插入图片描述][3115d689a43141d98f615302cb9fdfe5.png]  
运行完后，应当对产生的所有文件各归各位（Mapper接口放入component的mapper包下；实体类放入entity模块的entity包；xxxMapper.xml放入webui的resources文件夹下\*\*（xml放在web模块下方便寻找）\*\*）

### 三、通过父工程管理依赖版本 ###

在父工程通过**dependencyManagement**标签管理依赖版本，但是在子工程正式通过**dependencies**标签导入依赖前，这些依赖并不会生效

<properties>
        <fall.spring.version>4.3.20.RELEASE</fall.spring.version>
        <fall.spring.security.version>4.2.10.RELEASE</fall.spring.security.version>
    </properties>
    
    
    <dependencyManagement>
        <dependencies>
    
            
            
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-orm</artifactId>
                <version>${fall.spring.version}</version>
            </dependency>
            
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-webmvc</artifactId>
                <version>${fall.spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-test</artifactId>
                <version>${fall.spring.version}</version>
            </dependency>
            
            
            <dependency>
                <groupId>org.aspectj</groupId>
                <artifactId>aspectjweaver</artifactId>
                <version>1.9.2</version>
            </dependency>
            
            <dependency>
                <groupId>cglib</groupId>
                <artifactId>cglib</artifactId>
                <version>2.2</version>
            </dependency>
    
            
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>8.0.15</version>
            </dependency>
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
                <version>1.1.17</version>
            </dependency>
            
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis</artifactId>
                <version>3.2.8</version>
            </dependency>
            
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis-spring</artifactId>
                <version>1.2.2</version>
            </dependency>
            
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
                <version>4.0.0</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.slf4j</groupId>
                <artifactId>slf4j-api</artifactId>
                <version>1.7.7</version>
            </dependency>
            <dependency>
                <groupId>ch.qos.logback</groupId>
                <artifactId>logback-classic</artifactId>
                <version>1.2.3</version>
            </dependency>
            
            <dependency>
                <groupId>org.slf4j</groupId>
                <artifactId>jcl-over-slf4j</artifactId>
                <version>1.7.25</version>
            </dependency>
            <dependency>
                <groupId>org.slf4j</groupId>
                <artifactId>jul-to-slf4j</artifactId>
                <version>1.7.25</version>
            </dependency>
    
            
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-core</artifactId>
                <version>2.11.0</version>
            </dependency>
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
                <version>2.11.0</version>
            </dependency>
    
            
            <dependency>
                <groupId>jstl</groupId>
                <artifactId>jstl</artifactId>
                <version>1.2</version>
            </dependency>
    
            
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <version>4.12</version>
                <scope>test</scope>
            </dependency>
    
            
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>servlet-api</artifactId>
                <version>2.5</version>
                <scope>provided</scope>
            </dependency>
    
            
            <dependency>
                <groupId>javax.servlet.jsp</groupId>
                <artifactId>jsp-api</artifactId>
                <version>2.1.3-b06</version>
                <scope>provided</scope>
            </dependency>
            
            <dependency>
                <groupId>com.google.code.gson</groupId>
                <artifactId>gson</artifactId>
                <version>2.8.5</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.security</groupId>
                <artifactId>spring-security-web</artifactId>
                <version>${fall.spring.security.version}</version>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.security</groupId>
                <artifactId>spring-security-config</artifactId>
                <version>${fall.spring.security.version}</version>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.security</groupId>
                <artifactId>spring-security-taglibs</artifactId>
                <version>${fall.spring.security.version}</version>
            </dependency>
    
        </dependencies>
    </dependencyManagement>

### 四、Spring整合MyBatis ###

#### 1、配置Maven依赖 ####

在**component模块**的pom.xml配置一些必要的依赖

<dependencies>
        
        <dependency>
            <groupId>org.example</groupId>
            <artifactId>crowdfunding04-admin-entity</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        
        <dependency>
            <groupId>org.example</groupId>
            <artifactId>crowdfunding05-common-util</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    
        
        
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <exclusions>
                <exclusion>
                    <artifactId>commons-logging</artifactId>
                    <groupId>commons-logging</groupId>
                </exclusion>
            </exclusions>
        </dependency>
        
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
        </dependency>
        
        
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
        </dependency>
        
        <dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib</artifactId>
        </dependency>
    
        
        
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
        </dependency>
        
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
        </dependency>
        
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
        </dependency>
    
        
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
        </dependency>
    
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>
    
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
        </dependency>
    </dependencies>

**webui模块**配置依赖于component，并引入一些scope为test的依赖（如junit）

<dependencies>
        <dependency>
            <groupId>org.example</groupId>
            <artifactId>crowdfunding03-admin-component</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
        </dependency>
    </dependencies>

2、创建各配置文件

①resources/mybatis/**mybatis-config.xml**（Mybatis配置文件，可以省略）

<?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0/EN"
                "http://mybatis.org/dtd/mybatis-3-config.dtd">
        <configuration>
            
        </configuration>

②resources/**spring-persist-mybatis.xml**（Spring配置文件，用于整合MyBatis）

<context:property-placeholder location="classpath:jdbc.properties"/>
    
        
        <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
            <property name="username" value="${jdbc.user}"/>
            <property name="password" value="${jdbc.password}"/>
            <property name="url" value="${jdbc.url}"/>
            <property name="driverClassName" value="${jdbc.driver}"/>
        </bean>
    
        
        <bean class="org.mybatis.spring.SqlSessionFactoryBean" id="sqlSessionFactoryBean">
            <property name="configLocation" value="classpath:mybatis/mybatis-config.xml"/>
            <property name="mapperLocations" value="classpath:mybatis/mapper/*.xml"/>
            <property name="dataSource" ref="dataSource"/>
        </bean>
    
        
        <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
            <property name="basePackage" value="org.fall.mapper"/>
        </bean>

③resources/**jdbc.properties**（存放数据库连接信息）

jdbc.user=root
        jdbc.password=root
        jdbc.url=jdbc:mysql://localhost:3306/project_rowd?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
        jdbc.driver=com.mysql.cj.jdbc.Driver

#### 2、测试整合是否成功 ####

/**
     * RunWith与ContextConfiguration指定xml的作用与
     * ApplicationContext context = new ClassPathXmlApplicationContext("spring-persist-mybatis.xml");类似
     * 前者通过让测试在Spring容器环境下执行，使得DataSource可以被自动注入，后者导入Spring配置文件
     */
    @RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration(locations = {
        "classpath:spring-persist-mybatis.xml"})
    public class TestConnection {
        
        @Autowired
        DataSource dataSource;
    
        @Test
        public void test01() throws SQLException {
        
            //ApplicationContext context = new ClassPathXmlApplicationContext("spring-persist-mybatis.xml");
            //DataSource dataSource = context.getBean(DataSource.class);
            Connection connection = dataSource.getConnection();
            System.out.println(connection);
        }

可以打印出connection的数据，而不是报空指针异常，得出结论：整合成功。

### 五、配置日志系统 ###

**使用日志的原因：**

在实际开发中，如果在所有想查看的地方都通过System.out来打印，会给项目上线带来很多问题  
System.out本质是一个IO操作，通常IO操作比较消耗性能。如果项目中过多的System.out，则可能对性能造成影响，而如果使用日志系统，就可以通过控制日 志级别，来**批量控制打印信息**。

这里使用**slf4j+logback**代替Spring默认使用的commons-loggin日志包。

#### 1、在component中增加依赖 ####

<dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-api</artifactId>
    </dependency>
    <dependency>
        <groupId>ch.qos.logback</groupId>
        <artifactId>logback-classic</artifactId>
    </dependency>
    
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>jcl-over-slf4j</artifactId>
    </dependency>
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>jul-to-slf4j</artifactId>
    </dependency>

#### 2、使用日志打印的方法 ####

@Test
    public void test03(){
        
        //获取Logger对象，这里传入的Class就是当前打印日志的类
        Logger logger = LoggerFactory.getLogger(TestConnection.class);
        //等级 DEBUG < INFO < WARN < ERROR
        logger.debug("I am DEBUG!!!");
    
        logger.info("I am INFO!!!");
    
        logger.warn("I am WARN!!!");
    
        logger.error("I am ERROR!!!");
    
    }

### 六、配置声明式事务 ###

配置声明式事务的**目的**：希望指定的事务方法中，如果存在多个数据库操作，则要么一起提交，要么一起回滚（rollback），即：事务方法中多个数据库操作，只要有一个失败，则所有操作回滚。

#### 1、声明式事务所依赖的包 ####

（前面已经加入了Maven依赖，不需要多次操作了）

<dependency>
        <groupId>org.aspectj</groupId>
        <artifactId>aspectjweaver</artifactId>
    </dependency>
    
    <dependency>
        <groupId>cglib</groupId>
        <artifactId>cglib</artifactId>
    </dependency>

#### 2、配置针对事务的Spring配置文件 ####

**spring-persist-tx.xml**

事务方法一般定义在service层

<context:component-scan base-package="org.fall.service"/>
    
    
    <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    
    
    <aop:config>
        
        
        <aop:pointcut id="txPointcut" expression="execution(* *..*ServiceImpl.*(..))"/>
    
        
        <aop:advisor advice-ref="txAdvice" pointcut-ref="txPointcut"/>
    </aop:config>
    
    
    <tx:advice id="txAdvice" transaction-manager="txManager">
        <tx:attributes>
            
            
            <tx:method name="get*" read-only="true"/>
            <tx:method name="query*" read-only="true"/>
            <tx:method name="find*" read-only="true"/>
            <tx:method name="count*" read-only="true"/>
    
            
            
                
            
            <tx:method name="save*" propagation="REQUIRES_NEW" rollback-for="java.lang.Exception"/>
            <tx:method name="update*" propagation="REQUIRES_NEW" rollback-for="java.lang.Exception"/>
            <tx:method name="remove*" propagation="REQUIRES_NEW" rollback-for="java.lang.Exception"/>
    		
        </tx:attributes>
    </tx:advice>

配置完成后，在org.fall.service包下，进行数据库操作时，触发异常，即发生回滚，不会依然执行

### 七、表述层环境搭建 ###

首先需要确定已经导入了SpringMVC的依赖

<dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
    </dependency>

#### 1、配置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">
    
        
        
        <context-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring-persist-*.xml</param-value>
        </context-param>
        
        <listener>
            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
        </listener>
    
        
        
        <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>
    
        
        <servlet>
            <servlet-name>dispatcherServlet</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:spring-web-mvc.xml</param-value>
            </init-param>
    
            
            <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet-mapping>
            <servlet-name>dispatcherServlet</servlet-name>
            
            
            <url-pattern>*.html</url-pattern>
            <url-pattern>*.json</url-pattern>
        </servlet-mapping>
    </web-app>

#### 2、配置SpringMVC配置文件 ####

<context:component-scan base-package="org.fall.mvc"/>
    
    
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
    
    
    <mvc:annotation-driven/>

#### 3、测试SSM整合是否成功 ####

**Controller控制器代码：**

@Controller
    public class TestHandler {
        
    
        @Autowired
        AdminService adminService;
    
        @RequestMapping("/test/ssm.html")
        public String testSSM(Model model){
        
            //Admin admin = adminService.queryAdmin(1);
            List<Admin> admins = adminService.getAll();
            model.addAttribute("admins", admins);
            return "target";
        }
    }

\*\*前端代码：\*\*index.jsp

<%-- 一、无base标签：--%>
        <a href="${pageContext.request.contextPath}/test/ssm.html">测试页面</a>
    
    <%-- 二、有base标签：--%>
    <head>
        <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
    </head>
    <body>
        <a href="test/ssm.html">测试页面</a>
    </body>

**Base标签的要求：**

base 标签必须写在 head 标签内部  
base 标签必须在所有“带具体路径”的标签的前面  
serverName 部分 EL 表达式和 serverPort 部分 EL 表达式之间必须写“:”  
serverPort 部分 EL 表达式和 contextPath 部分 EL 表达式之间绝对不能写“/”  
原因：contextPath 部分 EL 表达式本身就是“/”开头，如果多写一个“/”会干扰 Cookie 的工作机制  
serverPort 部分 EL 表达式后面必须写“/”

### 八、SpringMVC环境下的Ajax请求 ###

检查依赖的包：

<dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
    </dependency>

加入jQuery：  
![在这里插入图片描述][0c6b2dc58e8348e197f0f5e2713f3b47.png]  
测试Ajax（基于jQuery）：

jQuery代码：

对应的四个按钮：

<button id="btn1">Test Ajax One</button>
    <br/><br/>
    <button id="btn2">Test Ajax Two</button>
    <br/><br/>
    <button id="btn3">Test Compose Object</button>
    <br/><br/>
    <button id="btn4">Test ResultEntity</button>

对应的控制层的四个方法：

//通过@RequestParam接收数组
        @ResponseBody
        @RequestMapping("/send/array/one.html")
        public String testAjax01(@RequestParam("array") Integer[] array){
        
            for(Integer num : array){
        
                System.out.println("num:"+num);
            }
            return "success";
        }
    
        //通过@RequestBody接收数组
        @ResponseBody
        @RequestMapping("/send/array/two.html")
        public String testAjax02(@RequestBody Integer[] array){
        
            for(Integer num : array){
        
                System.out.println("num:"+num);
            }
            return "success";
        }
    
        //通过@RequestBody接收复杂对象
        @ResponseBody
        @RequestMapping("/send/compose/object.html")
        public String testSendComposeObject(@RequestBody Student student){
        
            System.out.println(student);
            return "success";
        }
    
        //通过一个工具类（ResultEntity<T>）统一返回数据的格式
        @ResponseBody
        @RequestMapping("/send/compose/object.json")
        public ResultEntity<Student> testResultEntity(@RequestBody Student student){
        
            return ResultEntity.successWithData(student);
        }

如果希望通过@RequestBody接收前端发来的JSON数据，则前端发来的数据需要进行以下几步：

1.  准备好要发送的数据（需要是JSON对象或JSON数组）
2.  通过JSON.stringify()方法，转换成JSON字符串
3.  将JSON字符串直接赋值给data属性
4.  必须设置**contentType: “application/json;charset=UTF-8”**

此时后端在加入了json依赖，并开启mvc注解驱动，就可以使用RequestBody接收JSON数据。

#### 统一后端返回数据格式 ####

通过工具类，实现统一后端返回的数据格式

工具类代码：

public class ResultEntity<T> {
        
    	//设置两个常量
        public static final String SUCCESS = "SUCCESS";
        public static final String FAILED = "FAILED";
    
        //请求错误时，返回的错误信息，对应SUCCESS与FAILED
        private String message;
    
        //要返回的数据
        private T data;
    
        //封装当前请求的处理结果是成功还是失败
        private String result;
    
        //请求处理成功并且不向前端返回数据时，使用的静态方法
        //第一个<Type>表示声明一个泛型Type，第二个和return中的<Type>表示使用该泛型
        public static <Type> ResultEntity<Type> successWithoutData(){
        
            return new ResultEntity<Type>(null,null,SUCCESS);
        }
        
    	//请求处理成功并且向前端返回数据时，使用的静态方法
        public static <Type> ResultEntity<Type> successWithData(Type data){
        
            return new ResultEntity<Type>(null,data,SUCCESS);
        }
        
    	//请求处理失败，需要返回错误信息时，使用的静态方法
        public static <Type> ResultEntity<Type> failed(String message){
        
            return new ResultEntity<>(message,null,FAILED);
        }
        
        /** Getter,Setter,constructor and toString **/
    }

工具类中静态方法的泛型Type，代表了在前端请求后，后端返回的数据的类型；只是因为静态方法中不能调用非静态的属性，因此需要重新声明一个泛型，名 字为Type（其他也可以）。

即想要返回一个Student对象时，就通过方法

@RequestMapping(...)
    @ResponseBody
    public ResultEntity<Student> getStudent(){
        
        //...例如进行数据库查询操作等
        return ResultEntity.successWithData(student);
    }

### 九、异常处理 ###

**目标**：统一管理项目中的异常。

*  抛出异常
 *  返回给前端异常信息
    
     *  普通请求：在返回的页面上显示异常信息
     *  Ajax请求：返回JSON格式的数据

观察浏览器的开发者工具中，发现可以根据客户端发送的请求类型，区别是普通请求还是Ajax请求。

![在这里插入图片描述][a922d24b2bb24f3eb843a500bff3aabf.png]  
根据这一特点，编写一个工具类，其中一个静态方法用来判断请求是否是JSON请求

public class CrowdUtil {
        
    
        /**
         * @param request
         * @return true==json请求 ; false==普通页面请求
         */
        public static boolean judgeRequestType(HttpServletRequest request){
        
            String accept = request.getHeader("Accept");
            String header = request.getHeader("X-Requested-With");
            return (accept != null && accept.contains("application/json"))
                    ||
                    (header != null && header.equals("XMLHttpRequest"));
        }
    }

#### 异常映射实现的方式 ####

##### 一、通过XML配置实现 #####

在mvc的配置文件中将SimpleMappingExceptionResolver加入容器，在exceptionMappings中配置异常与错误页面的映射

但是此时并未实现区别JSON请求与普通请求的要求。

<bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver" id="simpleMappingExceptionResolver">
        <property name="exceptionMappings">
            <props>
                <prop key="java.lang.Exception">system-error</prop>
            </props>
        </property>
    </bean>

##### 二、通过注解实现 #####

这里通过使用前面编写的工具类的判断方法，实现对不同请求类型进行不同处理。

//注解标明该类是基于注解的异常处理器类
    @ControllerAdvice
    public class CrowdExceptionResolver {
        
    
        //处理空指针异常
        @ExceptionHandler(value = {
        NullPointerException.class})
        public ModelAndView resolveNullPointerException(NullPointerException exception,
                HttpServletRequest request, HttpServletResponse response
        ) throws IOException {
        
            return commonCode(exception,request,response,"system-error");
        }
    
        //处理数学异常,这里如果内部操作相同，跳转页面也相同，其实可以放在上面一个方法中，此处只是为了演示
        @ExceptionHandler(value = {
        ArithmeticException.class})
        public ModelAndView resolveArithmeticException(ArithmeticException exception,
                HttpServletRequest request,HttpServletResponse response) throws IOException {
        
            return commonCode(exception,request,response,"system-error");
    
        }
        
        //整理出的不同异常的可重用代码
        private ModelAndView commonCode(
                //触发的异常，此处借助多态
                Exception exception,
                //客户器端的请求
                HttpServletRequest request,
                //服务端的响应
                HttpServletResponse response,
                //指定普通页面请求时，去的错误页面
                String viewName
        ) throws IOException {
        
            boolean judgeRequestType = CrowdUtil.judgeRequestType(request);
            if (judgeRequestType){
        
                //if判断-是json请求
                ResultEntity<Object> failed = ResultEntity.failed(exception.getMessage());
                //创建Gson对象
                Gson gson = new Gson();
                //将ResultEntity对象转换成json格式
                String json = gson.toJson(failed);
                //通过原生servlet的response传回异常内容
                response.getWriter().write(json);
                //此时只需要返回null（因为是通过json格式返回数据）
                return null;
            } else {
        
                //if判断-是普通页面请求
                //创建ModelAndView对象
                ModelAndView modelAndView = new ModelAndView();
                //设置触发异常跳转的页面（会自动被视图解析器加上前后缀）
                modelAndView.setViewName(viewName);
                //将异常信息加入
                modelAndView.addObject(CrowdConstant.ATTR_NAME_EXCEPTION, exception);
                //返回设置完成的ModelAndView
                return modelAndView;
            }
        }
    
    }

### 十、以常量管理常用的属性 ###

对于经常使用到且存在复用的属性名，可以单独设置一个常量类。这样的好处是可以减少因拼写导致的错误。

//常量类
    public class CrowdConstant {
        
    
        public static final String ATTR_NAME_EXCEPTION = "exception";
        public static final String MESSAGE_LOGIN_FAILED = "登录失败！请确认账号密码是否正确";
    
    }

### 十一、前端页面引入 ###

#### 引入登录页面 ####

1、引入需要的静态资源  
![在这里插入图片描述][05aeae24b1bb4d568f5b6affc3199cb1.png]  
2、将登录页面的代码复制入创建的**admin-login.jsp**文件，并进行适当的修改（还未完全修改）

主要是修改了编码方式为统一的UTF-8；添加了base标签；提前设置form表单的action和method；设置了账号密码的name属性。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="keys" content="">
        <meta name="author" content="">
        <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/login.css">
    </head>
    <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <div><a class="navbar-brand" href="index.html" style="font-size:32px;">尚筹网-创意产品众筹平台</a></div>
            </div>
        </div>
    </nav>
    
    <div class="container">
    
        <form action="admin/login/login.html" method="post" class="form-signin" role="form">
            <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户登录</h2>
            <div class="form-group has-success has-feedback">
                <input type="text" name="login-user" class="form-control" id="inputSuccess4" placeholder="请输入登录账号" autofocus>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-success has-feedback">
                <input type="text" name="login-pwd" class="form-control" id="inputSuccess4" placeholder="请输入登录密码" style="margin-top:10px;">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="checkbox" style="text-align:right;"><a href="reg.html">我要注册</a></div>
            <button type="submit" class="btn btn-lg btn-success btn-block">登录</button>
        </form>
    </div>
    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

--------------------

##### 遇到的奇怪的问题 #####

在mvc配置文件中通过view-controller，使通过path指定的路径，访问登录页面（因为只需要单纯的访问而不需要附带数据等操作，因此使用此方法相比handler方法转发更加方便）

<mvc:view-controller path="/admin/login/page.html" view-name="admin-login"/>

但是最后测试下来，发现访问时会**发生404错误**：

我使用的默认是Edge Beta浏览器，当使用Edge浏览器时，可以通过链接访问登录页面，也可以直接使用`localhost:8888/admin/login/page.html`访问登录页面；但是当使用了chrome浏览器，使用地址栏输入…page.html时，发生奇怪的事情：报404错误，且之后edge也不能访问登录页面。最后尝试了很久，觉得应该是Tomcat缓存的问题，但尝试了多种清理缓存的方法，还是没有效果，最后**去掉了IDEA中对tomcat的一个勾选**：

![在这里插入图片描述][ca3eee74ce8d4de8a6cf12053bd0017c.png]  
这样可以算是“暂时”解决了问题。

--------------------

#### 尝试使用layer弹层组件 ####

1、网上下载layer.js（此处是3.3.1版本）

2、引入与测试使用layer组件

注意：layer组件依赖于jquery，因此layer的引入必须在jquery之后，否则会出错。

#### 修饰错误页面 ####

借助登录页面的样式，给错误页面**换壳**

使错误页面可以显示错误信息，并且提供了返回上一层的按钮。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<%-- 前面与登录页面相同 --%>
        <script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
          
                $("button").click(function () {
          
    				//用js的方法，完成回退的目的
                    window.history.back();
                });
            });
        </script>
    </head>
    <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    	<%-- 与登录页面同 --%>
    </nav>
        
    <div class="container">
        <h1 style="text-align: center;">请求出现了错误QAQ</h1>
        <h2 style="text-align: center;">错误消息：${requestScope.exception.message}</h2>
        <br/><br/>
        <button style="width:150px;margin: 0 auto;" class="btn btn-lg btn-success btn-block">返回上一步</button>
    </div>
        
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

最后此阶段完成时的项目目录结构图如下：

![在这里插入图片描述][1eee85fef40446868b1a32939c845177.png]

[fc2da041e36e42dfa37d545985b77c27.png]: https://img-blog.csdnimg.cn/fc2da041e36e42dfa37d545985b77c27.png
[100d8275bb35467aa8257f4ecf46780b.png]: https://img-blog.csdnimg.cn/100d8275bb35467aa8257f4ecf46780b.png
[3115d689a43141d98f615302cb9fdfe5.png]: https://img-blog.csdnimg.cn/3115d689a43141d98f615302cb9fdfe5.png
[0c6b2dc58e8348e197f0f5e2713f3b47.png]: https://img-blog.csdnimg.cn/0c6b2dc58e8348e197f0f5e2713f3b47.png
[a922d24b2bb24f3eb843a500bff3aabf.png]: https://img-blog.csdnimg.cn/a922d24b2bb24f3eb843a500bff3aabf.png
[05aeae24b1bb4d568f5b6affc3199cb1.png]: https://img-blog.csdnimg.cn/05aeae24b1bb4d568f5b6affc3199cb1.png
[ca3eee74ce8d4de8a6cf12053bd0017c.png]: https://img-blog.csdnimg.cn/ca3eee74ce8d4de8a6cf12053bd0017c.png
[1eee85fef40446868b1a32939c845177.png]: https://img-blog.csdnimg.cn/1eee85fef40446868b1a32939c845177.png