0
点赞
收藏
分享

微信扫一扫

Vue和JSP的区别

成义随笔 2023-08-23 阅读 55

JSP

简化的Servlet设计,在HTML标签中嵌套Java代码,用以高效开发Web应用的动态网页JSP 全名为 Java Server Pages,中文名叫 java 服务器页面,其根本是一个简化的 Servlet 设计,它是由Sun Microsystems 公司 倡导、许多公司参与一起建立的一种动态网页技术标准。JSP 技术是在传统的静态网页 HTML文件中插入 Java 代码片断和 JSP 标签后形成的一种文件,其后缀名为.jsp。使用JSP 开发的Web应用是跨平台的,既能在 Linux 上运行,也能在其他操作系统上运行。

JSP和Servlet的区别

JSP:HTML中直接编写Java代码

Servlet:需要继承HttpServlet

Vue

Vue (类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。

Vue和JSP的区别

JSP 是一种服务端技术,它可以在服务器端生成动态网页,并且是使用 Java 代码与 HTML 结合来实现的。而 Vue.js 是一种客户端技术,可以直接嵌入到 HTML 中,利用 Vue.js 的组件、指令等特性,可以在网页上实现很多复杂的交互功能。JSP 是一种基于模板的技术,开发人员需要在模板上添加代码,通过参数传递来实现数据的动态渲染,较为繁琐。Vue.js 直接利用数据绑定技术来实现数据的展示和更新,简洁明了,也提高了代码的可读性和可维护性。

JSP案例

1、创建web项目

Vue和JSP的区别_Vue

2、在src文件下创建包和java文件

Vue和JSP的区别_HTML_02

3、在Brand文件下编写构造函数

Vue和JSP的区别_Vue_03

4、编写四种构造函数(空白处右击-Source)

Vue和JSP的区别_HTML_04

5、创建JSP文件(接受并展示数据)

Vue和JSP的区别_HTML_05

6、在src文件下创建包和servlet文件

Vue和JSP的区别_java_06

7、创建数据并共享数据

Vue和JSP的区别_Vue_07

8、添加到服务器

Vue和JSP的区别_HTML_08

9、启动服务器(右击,启动)

Vue和JSP的区别_HTML_09

10、打开谷歌浏览器,在地址栏中输入访问路径:localhost:8080/项目名称/访问路径(例如:http://localhost:8080/web-4/BrandServlet(8080为默认端口))

Vue和JSP的区别_java_10

以上是JSP案例

完整代码展示

构造函数

package cn.lexed.pojo;

public class Brand {
	private Integer id;//id主键
	private String brandName;//品牌名
	private String companyName;//企业名
	private Integer ordered;//排序字段
	private String description;//描述信息
	private Integer status;//状态 0:禁用 1:启用
	
	public Brand() {
		super();
		// TODO Auto-generated constructor stub
	}

	public Brand(Integer id, String brandName, String companyName, Integer ordered, String description,
			Integer status) {
		super();
		this.id = id;
		this.brandName = brandName;
		this.companyName = companyName;
		this.ordered = ordered;
		this.description = description;
		this.status = status;
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getBrandName() {
		return brandName;
	}

	public void setBrandName(String brandName) {
		this.brandName = brandName;
	}

	public String getCompanyName() {
		return companyName;
	}

	public void setCompanyName(String companyName) {
		this.companyName = companyName;
	}

	public Integer getOrdered() {
		return ordered;
	}

	public void setOrdered(Integer ordered) {
		this.ordered = ordered;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public Integer getStatus() {
		return status;
	}

	public void setStatus(Integer status) {
		this.status = status;
	}

	@Override
	public String toString() {
		return "Brand [id=" + id + ", brandName=" + brandName + ", companyName=" + companyName + ", ordered=" + ordered
				+ ", description=" + description + ", status=" + status + "]";
	}
	
}

JSP文件

<%@page import="cn.lexed.pojo.Brand"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 接受数据 -->
<%
List<Brand> brands=(List<Brand>)request.getAttribute("bs");
%>
<!-- 数据展示 -->
<table>
			<tr>
				<td>序号</td>
				<td>品牌名称</td>
				<td>企业名称</td>
				<td>排序</td>
				<td>品牌介绍</td>
				<td>状态</td>
				<td>操作</td>
			</tr>
			<%
			for(int i=0;i<brands.size();i++){
				Brand brand=brands.get(i);
			%>
			<tr>
			<td><%=brand.getId() %></td>
			<td><%=brand.getBrandName() %></td>
			<td><%=brand.getCompanyName() %></td>
			<td><%=brand.getOrdered() %></td>
			<td><%=brand.getDescription() %></td>
			<td><%=brand.getStatus() %></td>
			</tr>
			<%
			}
			%>
		</table>
</body>
</html>

Servlet文件

package cn.lexed.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.lexed.pojo.Brand;

@WebServlet("/BrandServlet")
public class BrandServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		List<Brand> brands=new ArrayList<Brand>();
		Brand b1=new Brand(1,"三只松鼠","三只松鼠公司",100,"好吃不上火",1);
		Brand b2=new Brand(2,"华为","华为科技有限公司",200,"真棒",0);
		Brand b3=new Brand(3,"小米","小米科技公司",300,"ok",1);
		brands.add(b1);
		brands.add(b2);
		brands.add(b3);
		//把集合存到reques域里(共享数据)
		request.setAttribute("bs", brands);
		//资源跳转
		request.getRequestDispatcher("/index.jsp").forward(request, response);

	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

举报

相关推荐

0 条评论