JAVA前后端交互

本文主要探讨JAVA前后端交互过程,包括前端如何通过jQuery选择器操作组件,Spring MVC如何找到并返回JSP或HTML页面,页面如何响应用户行为,以及数据库查询数据如何展示到页面。此外,还介绍了Layui框架在分页渲染中的应用。

1.首先前端页面写好后,如何准确的知道现在在对哪个组件进行操作

jQuery的选择器,选择组件,对其操作

(1)元素选择器

(2)ID选择器

<button type="button" class="btn" id="test">一个标准的按钮</button>

通过id选择器$("#test"),可以选中这个按钮。

(3)class选择器

通过class选择器$("#btn"),可以选中这个按钮。

2.输入地址后,怎么找到JSP或是HTML页面?

spring先去找@Controller,找到了再找@RequestMapping,根据value去返回对应的页面

@RequestMapping(value =  "show", method = RequestMethod.GET)
	public String showit() { // 用来返回一个页面
		return "show"; 
	}

例:项目名叫做test,输http://localhost:8080/test/show,它就先找@Controller再找@RequestMapping找到这段了,执行这个方法,再结合配置文件,返回show.jsp文件,页面就加载出来了。

springmvc:MVC架构模式的思想,

@Controller:用于标记在一个类上,使用它标记的类就是一个SpringMVC Controller对象。分发处理器将会扫描使用了该注解的类的方法,并检测该方法是否使用了@RequestMapping注解。

@RequestMapping:@Controller只是定义了一个控制器类,而使用@RequestMapping注解的方法才是真正处理请求的处理器。单单使用@Controller标记在一个类上还不能真正意义上的说它就是SpringMVC的一个控制器类,因为这个时候Spring还不认识它。

如何让spring认识他?

    <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--配置JSTL表达式 -->
        <property name="viewClass"
            value="org.springframework.web.servlet.view.JstlView" />
        <!-- 前缀 -->
        <property name="prefix" value="/WEB-INF/view/" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>

spring会去这个目录下找指定名称的后缀为.jsp的文件。

@ResponseBody

3.显示页面后,是如何工作的,又是怎么监听用户行为的?

jsp文件中,不论是表格,表单,按钮都是静态的。让他们动起来的是<script>...</script>这一部分内容。

jQuery:jQuery是一个JavaScript库,大大简化Javascript编程。使用之前必须引入JQuery。

<script src="res/viewer/js/jquery.min.js"></script>

就是在自己项目中加入这么个文件,然后在页面文件加上这么一句话,告诉项目我这个文件放在了哪里。

 

Ajax:一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

 

4.数据库查询数据展示到页面

@responseBody注解将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML数据。调用数据层方法将查询到的结果封装成对象,@responseBody将对象转为JSON格式,返回页面展示。

 

5.Layui

使用了layui框架,在渲染表格时,page属性设置为true开启分页,request.getParameter("page"),request.getParameter("limit"),可以获取到当前第几页,一页多少条数据。

 

request.getAttribute()需要配和request.setAttribute()使用,
        即request.getAttribute()获取的是我们自己服务端存到servlet容器中的数据*

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值