Servlet+Vue+MongDB+bootstrap实现表格通讯录
作者：互联网
效果图
项目结构图
导入的包
AddressBook.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通讯录</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-table.min.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.min.js"></script>
<script src="bootstrap-table-zh-CN.min.js"></script>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script type="text/javascript" src="vue-resource.min.js"></script>
<style>
th,td{
/* border:1px solid gray;*/
text-align:center;
}
table{
border-collapse:collapse;
width:80%;
height:60%;
}
tr.tablehead{
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1" class="container" style="padding-top: 40px;">
<table align="center" class="table table-hover table-bordered">
<caption text-align="center">联系人</caption>
<tr>
<tr>
<td colspan="6">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<input type="text" v-model="querycontent" class="form-control secbox">
</div>
<div class="col-md-3">
<input type="button" class="btn btn-info btn-sm query" value="查询" @click="Query()">
<input type="button" class="btn btn-primary btn-lg"value="点我查看联系人" @click="getAll()"/>
</div>
</div>
</div>
</td>
</tr>
</tr>
<tr class="tablehead">
<th>序号</th>
<th>ID</th>
<th>姓名</th>
<th>电话</th>
<th>地址</th>
<th>操作</th>
</tr>
<tr v-for="(users,i) in peopledatas">
<td>{{i+1}}</td>
<td>{{users.id}}</td>
<td>{{users.name}}</td>
<td>{{users.phone}}</td>
<td>{{users.address}}</td>
<!--<input type="button" class="btn btn-warning btn-xs update" value="编辑" @click.sync="revise(users)">-->
<!--<button class="btn btn-warning btn-xs update" @click="revise(users)" data-toggle = "modal" data-target = "#updateModal">修改</button>-->
<td><button class="btn btn-warning btn-xs update" @click="revise(users)" data-toggle = "modal" data-target = "#updateModal">编辑</button>
<input type="button" class="btn btn-danger btn-xs deleteuser" value="删除" @click.sync="deleteuser(users.id)"></td><!--注意此坑:delete是关键字,函数命此名会点击无效-->
</tr>
<tr>
<td><input type="text" placeholder="ID" v-model="addid"></td>
<td><input type="text" placeholder="姓名" v-model="addname"></td>
<td><input type="text" placeholder="电话" v-model="addphone"></td>
<td><input type="text" placeholder="地址" v-model="addaddress"></td>
<td colspan="2"><input type="button" class="btn btn-success" value="添加" @click="Add()"></td>
</tr>
</table>
<!--修改模态框-->
<div class="modal fade up" tabindex="-1" role="dialog" id="updateModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">编辑</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="text" placeholder="ID" v-model="id" id="reuserid" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder="名字" v-model="name" id="reusername" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder="电话" v-model="phone" class="form-control" id="rephone"/>
</div>
<div class="form-group">
<input type="text" placeholder="地址" v-model="address" id="reuseraddress" class="form-control" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" @click="Update()" class="btn btn-primary que_update">保存</button><!--确定修改-->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>
<script>
new Vue({
el: '#div1',
data: {
// people:data,
peopledatas:'',
addname:'',
addphone:'',
addid:'',
addaddress:'',
querycontent:'',
delete_id:'',
oldid:'',
oldname:'',
oldphone:'',
oldaddress:'',
id:'0000',
name:"张三",
phone:"1813873264",
address:'北京',
},
methods:{
Add:function(){
axios.get('Add', {
params: {
addid:this.addid,
addname:this.addname,
addphone:this.addphone ,
addaddress:this.addaddress
}
}) .then(function (response) {
alert("添加成功!请刷新查看");
})
.catch(function (error) {
alert("添加失败！");
});
/* this.$http.get('Add',{
params:{
addname:this.addname,
addphone:this.addphone
}
}).then(function (data){
alert("添加成功!请刷新查看~");
},function(){
alert("添加失败！");
}); */
},
deleteuser:function(id){
alert(id);
this.delete_id=id;
axios.get('DeleteUser', {
params: {
delete_id:id,
}
}) .then(function (data) {
alert(data.data.Name+"删除成功!");
})
.catch(function (error) {
alert(name+"删除失败！");
});
/* this.$http.get('DeleteUser',{
params:{
deletename:name,
}
}).then(function (data){
alert(data.data.Name+"删除成功!");
},function(){
alert(name+"删除失败！");
}); */
},
Query:function(){
axios.get('getone', {
params: {
querycontent:this.querycontent,
}
}) .then(function (data) {
alert(" ID： "+data.data.id+" 姓名： "+data.data.name+" 电话: "+data.data.phone+" 地址： "+data.data.address);
})
.catch(function (error) {
alert("查询失败！");
});
/* this.$http.get('getone',{
params:{
querycontent:this.querycontent,
}
}).then(function (data){
alert(" 姓名： "+data.data.name+" 电话: "+data.data.phone);
},function(){
alert("查询失败！");
}); */
},
revise:function(user){
//alert(user.name+"修改成功");
this.oldid=user.id;
this.oldname=user.name;
this.oldphone=user.phone;
this.oldaddress=user.address;
this.id=user.id;
this.name=user.name;
this.phone=user.phone;
this.address=user.address;
},
Update:function(){
axios.get('Revise', {
params: {
oldid:this.oldid,
oldname:this.oldname,
oldphone:this.oldphone,
oldaddress:this.oldaddress,
id:this.id,
name:this.name,
phone:this.phone,
address:this.address,
}
}) .then(function (data) {
alert(data.data.Newname+"更新信息成功");
})
.catch(function (error) {
alert("更新失败！");
});
/* this.$http.get('Revise',{
params:{
oldname:this.oldname,
oldphone:this.oldphone,
name:this.name,
phone:this.phone,
}
}).then(function (data){
alert(data.data.Newname+"更新信息成功");
//alert(" 姓名： "+data.data.name+" 电话: "+data.data.phone);
},function(){
alert("更新失败！");
}); */
$(".up").modal("hide");
},
getAll:function(){
this.$http.get('getAllpeople',{
params:{
}
}).then(function (data){
//成功回调函数
var newdata=data.data;
this.peopledatas=newdata;
},function(){
alert("传输失败！");
});
}
}
})
</script>
</body>
</html>
MongDBJDBC.java连接数据库
import com.mongodb.MongoClient;
import com.mongodb.client.MongoDatabase;
public class MongDBJDBC {
public static MongoDatabase MongoConnect() {
MongoClient mongoClient = new MongoClient("localhost", 27017);
MongoDatabase db = mongoClient.getDatabase("AddressBook");//AddressBook数据库
System.out.println("数据库名称:"+db.getName()+" 连接成功");
return db;
}
}
Add.java
import java.io.IOException;
import java.io.PrintWriter;
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 org.bson.Document;
import com.mongodb.client.MongoCollection;
import net.sf.json.JSONObject;
/**
* Servlet implementation class Add
*/
@WebServlet("/Add")
public class Add extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Add() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
//response.setContentType("text/html;charset=UTF-8");
MongoCollection<Document> collection = MongDBJDBC.MongoConnect().getCollection("MyPeople");//获取AddressBook中名为MyPeople的一个表
String name=request.getParameter("addname");
String phone=request.getParameter("addphone");
String id=request.getParameter("addid");
String address=request.getParameter("addaddress");
PrintWriter out=response.getWriter();
Document document=new Document("id", id).append("name", name).append("phone",phone).append("address", address);
collection.insertOne(document);//将数据插入表中
JSONObject json=new JSONObject();
json.put("name",name);
json.put("phone",phone);
json.put("id",id);
json.put("address",address);
System.out.println(name+"保存成功!");
out.print(json.toString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
getAllPeople.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
List<Document>Peoplelist=new ArrayList<Document>();
PrintWriter out=response.getWriter();
MongoCollection<Document> collection = MongDBJDBC.MongoConnect().getCollection("MyPeople");
// MongoDatabase Mydatabase = mongoClient.getDatabase("AddressBook");
//DBCollection collection = database.getCollection(Myusers);
FindIterable<Document> findIterable=collection.find();
MongoCursor<Document>mongCursor=findIterable.iterator();
while(mongCursor.hasNext()) {
Document peopleDocument=mongCursor.next();
String Name=peopleDocument.getString("name");
System.out.println(Name);
Peoplelist.add(peopleDocument);
}
JSONArray jsonArray=JSONArray.fromObject(Peoplelist);
out.print(jsonArray.toString());
}
DeleteUser.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8");
response.setContentType("application/json;charset=UTF-8");
MongoCollection<Document> collection = MongDBJDBC.MongoConnect().getCollection("MyPeople");
String delete_id=request.getParameter("delete_id");
collection.deleteOne(Filters.eq("id", delete_id));
PrintWriter out=response.getWriter();
JSONObject p=new JSONObject();
FindIterable<Document> findIterable=collection.find();
MongoCursor<Document>mongCursor=findIterable.iterator();
while(mongCursor.hasNext()) {
Document peopleDocument=mongCursor.next();
if(peopleDocument.getString("id").equals(delete_id)) {
String name=peopleDocument.getString("name");
p.put("Name",name);
}
}
out.print(p.toString());
}
getone.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
MongoCollection<Document> collection = MongDBJDBC.MongoConnect().getCollection("MyPeople");
FindIterable<Document> findIterable=collection.find();
MongoCursor<Document>mongCursor=findIterable.iterator();
String id=request.getParameter("querycontent");
JSONObject json=new JSONObject();
PrintWriter out=response.getWriter();
while(mongCursor.hasNext()) {
Document people=mongCursor.next();
String ID=people.getString("id");
String Name=people.getString("name");
String Phone=people.getString("phone");
String Address=people.getString("address");
if(ID.equals(id)) {
System.out.println("查询单个:"+people.getString("name"));
System.out.println("查询单个:"+people.getString("phone"));
json.put("id",ID);
json.put("name",Name);
json.put("phone",Phone);
json.put("address",Address);
break;
}
}
out.print(json.toString());
}
Revise.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
//PrintWriter out=response.getWriter();
MongoCollection<Document> collection = MongDBJDBC.MongoConnect().getCollection("MyPeople");
String oldid=request.getParameter("oldid");
String oldname=request.getParameter("oldname");
String oldphone=request.getParameter("oldphone");
String oldaddress=request.getParameter("oldaddress");
String id=request.getParameter("id");
String name=request.getParameter("name");
String phone=request.getParameter("phone");
String address=request.getParameter("address");
collection.updateMany(Filters.eq("name", oldname), new Document ("$set", new Document("id",id).append("name",name).append("phone",phone).append("address",address)));
JSONObject p=new JSONObject();
p.put("Newid",id);
p.put("Newname",name);
p.put("Newphone",phone);
p.put("Newaddress",address);
response.getWriter().write(p.toString());
System.out.println("原信息"+"ID:"+oldid+"name:"+oldname+"phone:"+oldphone+"oldaddress:"+oldaddress);
System.out.println(p.toString());
}
标签：function,Vue,name,response,phone,通讯录,data,id,MongDB 来源： https://blog.csdn.net/qq_46212498/article/details/112312238