致立男：完整的一个java web交互流程

以下是给立男准备的教程

java web流程：前端发起请求---->请求到对应的controller并接收到请求参数--->根据controller的业务需求调用对应的service实现业务逻辑---->service中若涉及到数据库操作要在service中进行数据库交互---->service完成业务逻辑，controller返回给前端展示的指定页面。

实例：根据后端数据库中存储的图片url，异步ajax返回给前端，进行图片的展示。

1.明确需求：当页面初始化后，要通过ajax异步请求获取图片url并赋值给页面唯一的img标签进行图片的展示。

2.实现步骤

1).在数据库中定义新建表的img_url

2).在spring mvc中定义mybatis的表的配置为文件（ImgUrlDao.java(dao 包中)，ImgUrlMapper.xml(resources/mpper包中)）和表映射的java的数据类型(ImgUrl.java)

3).定义service的接口类和实现类(ImgUrlService.java(service包中)，ImgUrlServiceImpl.java(impl包中))

4).定义controller类

5).写前端的页面和ajax

3.具体实现步骤

1).在数据库中新建表img_url并添加几条假数据，保证图片url可以通过http访问到便于测试

创建表的sql

CREATE TABLE `img_url` (

`id`  bigint(30) NOT NULL AUTO_INCREMENT ,
`url`  varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL ,
PRIMARY KEY (`id`)
)
ENGINE=InnoDB
DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci
AUTO_INCREMENT=1
ROW_FORMAT=COMPACT;

关于假数据 随便插

2在spring mvc中定义mybatis的表的配置为文件（ImgUrlDao.java(dao 包中)，ImgUrlMapper.xml(resources/mpper包中)）和表映射的java的数据类型(ImgUrl.java)

1).在dao包中定义ImgUrlDao.java 对象 并定义一个方法 输入为int型的变量，输出为ImgUrl.java类型变量，代码如下

package com.springmvc.dao;import com.springmvc.entity.ImgUrl;import org.apache.ibatis.annotations.Param;public interface ImgUrlDao {    public ImgUrl getImgUrlById(@Param("id") int id);}

2).在resources/mpper包中定义ImgUrlMapper.xml 的配置文件

要点说明：

1>mapper标签中的namespace属性要对应的是与其对应的dao的完成的类名和路径名

2>定义resultMap标签 中的type为该对应的数据库表映射的对应的java数据对象，里面result为各个属性值的对应。

3>定义sql语句如select标签等 其id属性要和对应的Dao文件中的执行方法名完全相同。

<?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.springmvc.dao.ImgUrlDao">    <resultMap id="resultMap" type="com.springmvc.entity.ImgUrl">        <result property="id" column="id"/>        <result property="url" column="url"/>    </resultMap>    <sql id="columnSql">        <trim suffixOverrides=",">            id,            url        </trim>    </sql>    <select id="getImgUrlById" resultMap="resultMap">        SELECT        <include refid="columnSql"></include>        FROM img_url        WHERE id=#{id}    </select></mapper>

3)定义数据类型

package com.springmvc.entity;public class ImgUrl {    private int id;    private String url;    public int getId() {        return id;    }    public void setId(int id) {        this.id = id;    }    public String getUrl() {        return url;    }    public void setUrl(String url) {        this.url = url;    }}

3.定义service的接口类和实现类(ImgUrlService.java(service包中)，ImgUrlServiceImpl.java(impl包中))

1).定义接口类

package com.springmvc.service;import com.springmvc.entity.ImgUrl;public interface ImgUrlService {    public ImgUrl getImgUrlById(int id);}

2)定义接口实现类，如下代码
注意：
1>实现类必须用@Service进行注解，这样spring会把该类进行管理并进行对应的类型注入
2>.创建的成员变量imgUrlDao必须用@Autowired声明，这样spring会把对应的imgUrlDao进行注入。

package com.springmvc.service.impl;import com.springmvc.dao.ImgUrlDao;import com.springmvc.entity.ImgUrl;import com.springmvc.service.ImgUrlService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;@Servicepublic class ImgUrlServiceImpl implements ImgUrlService{    @Autowired    private ImgUrlDao imgUrlDao;        public ImgUrl getImgUrlById(int id) {        ImgUrl imgUrlById = imgUrlDao.getImgUrlById(id);        return imgUrlById;    }}

4.定义controller类

注意：
1>。一定要匹配好url
2> controller类必须用@controller注解进行声明
3> 异步请求必须声明为@ResponseBody，会返回图片url的字符串

package com.springmvc.controller;import com.springmvc.entity.ImgUrl;import com.springmvc.service.ImgUrlService;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;@Controllerpublic class ImgController {    @Autowired    ImgUrlService imgUrlService;    @RequestMapping("/show")    public String a(){        return "imgTest";    }    @RequestMapping("/getImgUrl")    @ResponseBody    public String getImgUrl(int id){        ImgUrl imgUrlById = imgUrlService.getImgUrlById(id);        String url = imgUrlById.getUrl();        return url;    }}

5.写前端的页面（imgTest.jsp）和ajax

<html><body><script src="/static/Jquery.3.1.1.js"></script><script>    $(function(){        $.ajax({            type: "POST",            url: "getImgUrl",            data:{id:1},            dataType: "text",            success: function(data){                $(".imgTest").attr("src",data)            },            error:function (data, data, data) {                console.log("fff")            }        });    })</script><h2>Hello World!</h2><img src="" class="imgTest"></body></html>

完成
访问url:
http://localhost/show