一、前端HTML
1.1、收集表单数据
当点击添加按钮时，使用axios将表单数据发送到servlet中
1.2、处理axios响应的结果
根据respones.data的结果进行判断
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/axios.min.js"></script>
<style>
a:link{font-size: 20px;color:rgb(109,109,109);}
a:visited{font-size: 20px;color:rgb(109,109,109);}
a:hover{font-size: 20px;color:white;text-decoration:none; }
</style>
</head>
<body>
<div class="container" id="app">
<div class="row">
<!--导航-->
<div class="col-md-3" style="background-color: rgb(0,21,41);height: 600px;">
<!--行-->
<div class="row">
<div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;line-height: 70px;height: 70px;font-size: 20px;color: white;font-weight: bold;">
<!--添加蜗牛logo图片并设置大小-->
<img src="assets/img/logo.png" style="width:30px;height: 30px;margin-right: 8px;"/>
蜗牛GRC管理系统
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
<a href="index.html">进入首页</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
<a href="#">用户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
<a href="user_add.html">添加用户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
<a href="user_list.html">客户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
<a href="#">添加客户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
<a href="update_pwd.html">修改密码</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
<a href="login.html">退出登录</a>
</div>
</div>
</div>
<!--内容-->
<div class="col-md-9" style="border: 1px solid gray;height: 600px">
<div class="row">
<!--显示提升位置-->
<div class="col-md-12" style="height: 70px;font-size: 18px;color: rgb(109,109,109);line-height:70px;font-weight: bold;padding-left: 20px">
> 添加用户
</div>
</div>
<div class="row" style="background-color: rgb(240,242,245);height: 530px;padding: 20px">
<!--显示内容-->
<div class="col-md-12" style="background-color: white;height: 530px;border:none;border-radius: 5px;" >
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 50px;">
<lable>用户名</lable>
<input type="text" class="form-control" v-model="userName"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<lable>昵称</lable>
<input type="text" class="form-control" v-model="nickName"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<lable>手机号</lable>
<input type="text" class="form-control" v-model="phone"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<lable>生日</lable>
<input type="text" class="form-control" v-model="birth"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<lable style="margin-right: 15px; ">性别</lable>
<lable class="radio-inline" >
<input type="radio" value="0" v-model="sex" name="sex"/>男
</lable>
<lable class="radio-inline" >
<input type="radio" value="1" v-model="sex" name="sex"/>女
</lable>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center;">
<button class="btn btn-primary" style="margin-right: 8px;" @click="addUser">添加</button>
<button class="btn btn-default" @click="userUP">重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
userName:null,
nickName:null,
phone:null,
birth:null,
sex:null
},
methods:{
addUser(){
var url="http://localhost:8080/user_add?user_name="+this.userName+"&nick_name="+this.nickName+"&phone="+this.phone+"&birth="+this.birth+"&sex="+this.sex;
console.log(url);
axios.get(url).then(response=>{
if(response.data==true||response.data=='true'){
window.location.href="user_list.html"
}else{
alert('添加失败!!!');
}
})
},
userUP(){
this.userName=null;
this.nickName=null;
this.phone=null;
this.birth=null;
this.sex=null;
}
},
created:function () {
}
});
</script>
</body>
</html>
二、后端Servlet
2.1、在UserDAO中新增添加用户的方法
代码
public int insert(Manger m) {
String sql = "insert into t_user (user_name,passwd,nick_name,sex,birth,img,phone) values ('"+m.getUser_name()+"','123456','"+m.getNick_name()+"',"+m.getSex()+",'"+m.getBirth()+"','https://img1.baidu.com/it/u=1208847068,4041283913&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','"+m.getPhone()+"')";
int count = executeUpdate(sql);
return count;
}
2.2、创建UserAddServlet实现添加用户的功能
package crmAppServlet;
import dao.Impl.MangerImpl;
import entity.Manger;
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 java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/user_add")//http//localhost:8080/add
public class AddServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("application/json,charset=utf8");
PrintWriter writer = resp.getWriter();
String userName = req.getParameter("user_name");
String nickName=req.getParameter("nick_name");
String birth=req.getParameter("birth");
String phone=req.getParameter("phone");
int sex=0;
if(req.getParameter("sex")!=null){
sex = Integer.parseInt(req.getParameter("sex"));
}
Manger user = new Manger();
user.setUser_name(userName);
user.setNick_name(nickName);
user.setPhone(phone);
user.setSex(sex);
user.setBirth(birth);
MangerImpl mar = new MangerImpl();
int count = mar.insert(user);
if(count>0){
writer.print(true);
}else{
writer.print(false);
}
writer.close();
}
}
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
