以下是给立男准备的教程
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; @Service public 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; @Controller public 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