一、前端HTML
1.1、收集表单数据
当点击添加按钮是,使用axios将表单数据发送到servlet中
1.2、处理axios响应的结果
根据respones.data的结果进行判断
注意:
首先,选择男或女是单选必须要设置个name
其次,要设置一下value=0和女value=1,因为在UserAddSerclet里接收的必须是int类型
HTML源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<!-- 导入bootstrap依赖 -->
<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>
<!--导入Vue依赖-->
<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: 800px;">
<div class="row">
<div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;font-weight: bold;">
<img src="assets/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px;"/>
蜗牛CRM管理系统
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="index.html">进入首页</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_list.html">用户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_add.html">添加用户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="#">客户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="#">添加客户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_upadte.html">修改密码</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="#">退出登录</a>
</div>
</div>
</div>
<!--显示内容-->
<div class="col-md-9" style="border: 1px solid gray;height: 800px;">
<!-- 显示提示内容 -->
<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: 730px;padding: 20px">
<div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px;">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 50px">
<label>用户名</label>
<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">
<label>昵称</label>
<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">
<label>手机号</label>
<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">
<label>生日</label>
<input type="date" class="form-control" v-model="birth"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label style="margin-right: 15px">性别</label>
<label class="radio-inline">
<input type="radio" value="0" v-model="sex" name="sex"/>男
</label>
<label class="radio-inline">
<input type="radio" value="1" v-model="sex" name="sex"/>女
</label>
</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="doAdd">添加</button>
<button class="btn btn-default">重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//创建cue实例
new Vue({
el:'#app',
data:{
userName:null,
nickName:null,
sex:null,
phone:null,
birth:null
},
methods:{
doAdd(){
var url = "user_add?user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex
+"&phone="+this.phone+"&birth="+this.birth;
//通过axios发送请求到servlet
axios.get(url).then(response =>{
if(response.data == '添加成功'){
window.location.href = 'user_list.html';
}else{
alert("添加用户失败!!!");
}
});
}
}
})
</script>
</body>
</html>
二、后端Servlet
2.1、在UserDAO中新增添加用户的方法
2.2、在UserDAOImpl里实现此方法,然后写sql语句,并返回结果
源代码:
public int insertUser(User user) {
String sql = "insert into t_user (user_name,passwd,nick_name,sex,birth,img,phone) values ('"+user.getUserName()+"','123456','"+user.getNickName()+"',"+user.getSex()+",'"+user.getBirth()+"','https://img1.baidu.com/it/u=1208847068,4041283913&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','"+user.getPhone()+"')";
return this.excuteUpdate(sql);
}
2.2、创建UserAddSerclet实现添加用户的功能
第一步:继承 HttpSerclet父类,添加注释@WebServlet("/user_add")括号内的是地址
第二步:重写service方法,设置编码集,解决中文乱码问题
第三步:获取打印输出流,向网页输出内容
第四步:接受HTML请求传递的值
第五步:调用dao方法添加用户,并判断返回的值然后向网页输出结果,最后释放资源。
UserDAO源代码:
package dao;
import entity.User;
public interface UserDAO {
/**
* 登录
*/
public User login(String userName,String passwd);
/**
* 添加用户
*/
public int insertUser(User user);
}
UserDAOImpl源代码
package dao;
import entity.User;
import utils.BaseDAO;
import java.sql.ResultSet;
import java.sql.SQLException;
public class UserDAOImpl extends BaseDAO implements UserDAO{
public User login(String userName, String passwd) {
User user = null;
String sql = "select * from t_user where user_name='"+userName+"' and passwd='"+passwd+"'";
ResultSet rs = this.executeQuery(sql);
try {
if(rs.next()){
user = new User();
user.setId(rs.getInt("id"));
user.setUserName(rs.getString("user_name"));
user.setPasswd(rs.getString("passwd"));
user.setNickName(rs.getString("nick_name"));
user.setSex(rs.getInt("sex"));
user.setPhone(rs.getString("phone"));
user.setImg(rs.getString("img"));
user.setBirth(rs.getString("birth"));
}
this.closeAll();//释放资源
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return user;
}
public int insertUser(User user) {
String sql = "insert into t_user (user_name,passwd,nick_name,sex,birth,img,phone) values ('"+user.getUserName()+"','123456','"+user.getNickName()+"',"+user.getSex()+",'"+user.getBirth()+"','https://img1.baidu.com/it/u=1208847068,4041283913&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','"+user.getPhone()+"')";
return this.excuteUpdate(sql);
}
}
UserAddSerclet源代码
package controller;
import dao.UserDAO;
import dao.UserDAOImpl;
import entity.User;
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/user_add
public class UserAddSerclet 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=utf-8");
//获取打印输出流,向网页输出内容
PrintWriter writer = resp.getWriter();
//接收HTML请求传递的值
String userName = req.getParameter("user_name");
String nickName = req.getParameter("nick_name");
int sex = 0;
if(req.getParameter("sex") != null){
sex = Integer.parseInt(req.getParameter("sex"));
}
String phone = req.getParameter("phone");
String birth = req.getParameter("birth");
User user = new User();
user.setUserName(userName);
user.setNickName(nickName);
user.setPhone(phone);
user.setSex(sex);
user.setBirth(birth);
//调用dao方法添加用户
UserDAO dao = new UserDAOImpl();
int count = dao.insertUser(user);
if(count>0){
writer.print("添加成功");
}else{
writer.print("添加失败");
}
//释放资源
writer.close();
}
}
添加用户界面