前端使用axios,vue,后端使用servlet,进行传值与接收
1.这里axios使用的是params方式
axios({
method: 'Get',
url: 'BselServlet',
params: {
bnumber:this.bnumber,
},
}).then(res=>{
console.log(res.data);
this.receive_name=res.data.bname//获取商品名
this.receive_img=res.data.bimg//获取img路径
},err=>{
console.log(err);
})
后端接收,getParameter即可:
// 1 获取页面参数信息
String bnumber = request.getParameter("bnumber");
完整代码:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="sel">
请输入你要查询的商品编号:<input type="text" id="bnumber" v-model="bnumber"
style="display: inline-block">
<button id="b1" v-on:click="select">查询</button>
<div v-if="receive_name"> 名称为:{{receive_name}} <br> <img v-bind:src="receive_img"></div>
</div>
<script src="file/vue.js"></script>
<script src="file/axios.js"></script>
<script>
let insVue=new Vue({
el:"#sel",
data:{
bnumber:"",
receive_name:"",
receive_img:""
},
methods: {
select(){
console.log("点击查询")
axios({
method: 'Get',
url: 'BselServlet',
params: {
bnumber:this.bnumber,
},
}).then(res=>{
console.log(res.data);
this.receive_name=res.data.bname//获取商品名
this.receive_img=res.data.bimg//获取img路径
},err=>{
console.log(err);
})
}
}
})
</script>
</body>
</html>
BselServlet:
package com.cqust.servlet;
import java.io.IOException;
import java.io.PrintWriter;
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 com.alibaba.fastjson.JSON;
import com.cqust.biz.BrandBiz;
import com.cqust.entity.BrandEntity;
@WebServlet("/BselServlet")
public class BselServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// 1 获取页面参数信息
String bnumber = request.getParameter("bnumber");
// 2 调用业务处理逻辑
BrandBiz bBiz = new BrandBiz();
BrandEntity brand = bBiz.selectBrand(bnumber);
// 3 返回处理结果 给 页面
String path = "";
if (brand != null) {
System.out.println("存在");
String json = JSON.toJSONString(brand);
System.out.println(json);
out.write(json);
}
else {
System.out.println("不存在");
}
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
BrandEntity:
package com.cqust.entity;
import java.util.Date;
public class BrandEntity {//品牌
String bname;
String bnumber;
String bowner;
String btype;
Date btime;
String bimg;
String bshow;
String bcompany;
public String getBname() {
return bname;
}
public void setBname(String bname) {
this.bname = bname;
}
public String getBnumber() {
return bnumber;
}
public void setBnumber(String bnumber) {
this.bnumber = bnumber;
}
public String getBowner() {
return bowner;
}
public void setBowner(String bowner) {
this.bowner = bowner;
}
public String getBtype() {
return btype;
}
public void setBtype(String btype) {
this.btype = btype;
}
public Date getBtime() {
return btime;
}
public void setBtime(Date btime) {
this.btime = btime;
}
public String getBimg() {
return bimg;
}
public void setBimg(String bimg) {
this.bimg = bimg;
}
public String getBshow() {
return bshow;
}
public void setBshow(String bshow) {
this.bshow = bshow;
}
public String getBcompany() {
return bcompany;
}
public void setBcompany(String bcompany) {
this.bcompany = bcompany;
}
public BrandEntity(String bname, String bnumber, String bowner, String btype, Date btime, String bimg, String bshow,
String bcompany) {
super();
this.bname = bname;
this.bnumber = bnumber;
this.bowner = bowner;
this.btype = btype;
this.btime = btime;
this.bimg = bimg;
this.bshow = bshow;
this.bcompany = bcompany;
}
public BrandEntity() {
super();
// TODO Auto-generated constructor stub
}
@Override
public String toString() {
return "BrandEntity [bname=" + bname + ", bnumber=" + bnumber + ", bowner=" + bowner + ", btype=" + btype
+ ", btime=" + btime + ", bimg=" + bimg + ", bshow=" + bshow + ", bcompany=" + bcompany + "]";
}
}
BrandDao:
package com.cqust.dao;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.cqust.entity.BrandEntity;
import com.cqust.util.C3p0Utils;
public class BrandDao {
// 查询单个品牌--通过bnumber查找
public BrandEntity selectBrand(String bnumber) throws SQLException {
QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
String sql = "select * from blist where bnumber=?";
BrandEntity brand = (BrandEntity) runner.query(sql, new BeanHandler(BrandEntity.class),
new Object[] { bnumber });
return brand;
}
// 查询所有,返回List集合
public List selectAllBrands() throws SQLException {
QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
String sql = "select * from blist";
List List = (List) runner.query(sql, new BeanListHandler(BrandEntity.class));
return List;
}
// 插入
public Boolean insertBrand(BrandEntity brand) throws SQLException {
QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
String sql = "insert into blist (bname,bnumber,bowner,btype,bimg,btime,bshow,bcompany) values (?,?,?,?,?,?,?,?)";
int num = runner.update(sql, new Object[] { brand.getBname(),brand.getBnumber(),brand.getBowner(),brand.getBtype(),brand.getBimg(),
brand.getBtime(),brand.getBshow(),brand.getBcompany() });
if (num > 0)
return true;
return false;
}
// 删除
public Boolean deleteBrand(String bnumber) throws SQLException {
QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
String sql = "delete from blist where bnumber=?";
int num = runner.update(sql, bnumber);
if (num > 0)
return true;
return false;
}
// 修改
public Boolean updateBrand(BrandEntity brand) throws SQLException {
QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
String sql = "update blist set bname=?,bowner=?,btype=?,bimg=?,btime=?,bshow=?,bcompany=? where bnumber=?";
int num = runner.update(sql, new Object[] { brand.getBname(),brand.getBowner(),brand.getBtype(),brand.getBimg(),
brand.getBtime(),brand.getBshow(),brand.getBcompany(),brand.getBnumber() });
if (num > 0)
return true;
return false;
}
}
BrandBiz:
package com.cqust.biz;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.cqust.dao.BrandDao;
import com.cqust.entity.BrandEntity;
public class BrandBiz {
private static BrandDao dao = new BrandDao();
//查询单个
public BrandEntity selectBrand(String bnumber) {
BrandEntity brand=new BrandEntity();
try {
brand=dao.selectBrand(bnumber);
} catch (SQLException e) {
e.printStackTrace();
}
return brand;
}
//查询所有
public List selectAllBrands() {
List<BrandEntity> list = new ArrayList<BrandEntity>();
try {
list=dao.selectAllBrands();
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
//插入
public Boolean insertBrand(BrandEntity brand) {
Boolean res=null;
try {
res=dao.insertBrand(brand);
} catch (SQLException e) {
e.printStackTrace();
}
return res;
}
//删除
public Boolean deleteBrand(String bnumber) {
Boolean res=null;
try {
res=dao.deleteBrand(bnumber);
} catch (SQLException e) {
e.printStackTrace();
}
return res;
}
//修改
public Boolean updateBrand(BrandEntity brand) {
Boolean res=null;
try {
res=dao.updateBrand(brand);
} catch (SQLException e) {
e.printStackTrace();
}
return res;
}
}
2.axios使用的是data方式
前端:
axios({
method: 'Post',
url: 'BselServlet',
data: {
bnumber:this.bnumber,
},
}).then(res=>{
console.log(res.data);
this.receive_name=res.data.bname//获取商品名
this.receive_img=res.data.bimg//获取img路径
},err=>{
console.log(err);
})
后端:
使用数据流获取信息,再转化为字符串类型toString(),之后转化为json类型JSONObject.parseObject(str),通过jsonObject.getString();获取参数:
//数据流获取信息
StringBuilder sb = new StringBuilder();
BufferedReader reader = request.getReader();
char[] buf = new char[1024];
int len;
while ((len = reader.read(buf)) != -1){
sb.append(buf,0,len);
}
//转json
String str = sb.toString();
System.out.println(str);
JSONObject jsonObject = JSONObject.parseObject(str);
String bnumber = jsonObject.getString("bnumber");
System.out.println(bnumber);
完整html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="sel">
请输入你要查询的商品编号:<input type="text" id="bnumber" v-model="bnumber"
style="display: inline-block">
<button id="b1" v-on:click="select">查询</button>
<div v-if="receive_name"> 名称为:{{receive_name}} <br> <img v-bind:src="receive_img"></div>
</div>
<script src="file/vue.js"></script>
<script src="file/axios.js"></script>
<script>
let insVue=new Vue({
el:"#sel",
data:{
bnumber:"",
receive_name:"",
receive_img:""
},
methods: {
select(){
console.log("点击查询")
axios({
method: 'Post',
url: 'BselServlet',
data: {
bnumber:this.bnumber,
},
}).then(res=>{
console.log(res.data);
this.receive_name=res.data.bname//获取商品名
this.receive_img=res.data.bimg//获取img路径
},err=>{
console.log(err);
})
}
}
})
</script>
</body>
</html>
BselServlet:
package com.cqust.servlet;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
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 com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.cqust.biz.BrandBiz;
import com.cqust.entity.BrandEntity;
@WebServlet("/BselServlet")
public class BselServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// 1 获取页面参数信息
//数据流获取信息
StringBuilder sb = new StringBuilder();
BufferedReader reader = request.getReader();
char[] buf = new char[1024];
int len;
while ((len = reader.read(buf)) != -1){
sb.append(buf,0,len);
}
//转json
String str = sb.toString();
System.out.println(str);
JSONObject jsonObject = JSONObject.parseObject(str);
String bnumber = jsonObject.getString("bnumber");
System.out.println(bnumber);
// 2 调用业务处理逻辑
BrandBiz bBiz = new BrandBiz();
BrandEntity brand = bBiz.selectBrand(bnumber);
// 3 返回处理结果 给 页面
String path = "";
if (brand != null) {
System.out.println("存在");
String json = JSON.toJSONString(brand);
System.out.println(json);
out.write(json);
}
else {
System.out.println("不存在");
}
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
页面效果图:
1.
2.
3.
4.
5.
202207302338六