标签：function Vue name response phone 通讯录 data id MongDB
效果图
项目结构图
导入的包
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。