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

xiaoxiao2021-02-28  95

以下是给立男准备的教程

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

转载请注明原文地址: https://www.6miu.com/read-62142.html

最新回复(0)