BootSrap案例CRM系统-添加用户

已于 2022-11-15 17:16:41 修改
阅读量147 收藏
点赞数
分类专栏： BootStrap案例CRM管理系统 文章标签： 前端
于 2022-11-09 12:19:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhoutao_88/article/details/127766864
版权

一、前端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">
                    > &nbsp;&nbsp;添加用户
                </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();
    }
}

添加用户界面

周途
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap案例练习-仿星巴克
10-11
我在学习bootstrap响应式开发的一个练习案例，用到了bootstrap的栅格系统和轮播组件、card组件、button组件 导航栏组件 image工具
bootstrap-table-zh-CN.js
08-27
bootstrap-table-zh-CN.js,有需要就下载吧
insert数据
weixin_56123403的博客
04-15 264
User模块Dao层：UserDao.java int insertUser(User user); User模块Dao层配置文件：UserDao.xml INSERT INTO user VALUES (#{id},#{username},#{age},#{score}) User模块测试类：UserTest.java // 调用查询所有用户信息的方法 List userListBefore = dao.selectUserList(); userListBefore.forEach(u -&
02-MyBatis的基本增删改查操作
鸣鼓ming的博客
01-07 1109
1.数据库表 （1） 创建 mysql 数据库表 CREATE TABLE `t_user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `user_name` varchar(50) DEFAULT NULL, `pass_word` varbinary(50) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4
用SpringBoot+Mysql+Maven+MyBatis项目写一个最简单注册（即插入）demo
没有眉毛的阿斗叶
07-23 2842
项目SpringBoot+Mysql+Maven+MyBatis。IDE是IDEA 2018.3.X。 1.首先先看一下，pom文件需要的依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/...
mybatis框架
whwd5405的博客
12-05 321
Mybatis是一款优秀的持久层框架,它支持定制化SQL。存储过程以及高级映射Mybatis消除了几乎所有的JDBC代码和手动设置的参数以及获取结果集。Mybatis使用简单的XML用于配置和原始映射,将接口和java当中的pojo映射成数据库中的记录。优点(1)简单易学:Mybatis本身就很小,而且很简单(2)灵活:mybatis不会对应用程序或者数据库的现有设计强加任何影响(3)解除sql与程序代码的耦合:通过提供DAL层,将业务逻辑和数据访问逻辑分离(4)提供映射标签，XML标签。
insert into user插入表的方式添加mysql数据库用户
m0_47505062的博客
10-19 1万+
@insert into user (host,user,password,select_priv,insert_priv,updat_priv) values (‘localhost’,‘guest’,password(‘guest123’),‘y’,‘y’,‘y’);TOC 上面命令报错解决办法亲测有效,mysql学习笔记,今天跟随菜鸟教程,学习mysql,遇到很多问题,通过查看网友相关文章结合自己的理解,找到解决办法,分享给大家,有一点感触,不要随波逐流人云亦云,实践是最好的教科书, 在mysql&g
精品bootstrap后端管理系统-Kiaalap
06-06
精品bootstrap后端管理系统-Kiaalap
bootstrap-pincode-input:用于多位密码输入的 Bootstrap jQuery 小部件
08-04
您可以使用安装 bootstrap-pincode-input ： npm install --save bootstrap-pincode-input 用法 输入 数字。 默认值： 0 要输入的代码的长度。 对于每个数字，将创建一个输入框并为用户可见。 < input type ...
bootstrap-5.1.3-dist.zip
11-11
bootstrap 发布版本 5.1.3
Mybatis实践教程（四）-数据添加
路人甲的专栏
06-11 354
需求：添加一条用户信息至t_user表中 需求：添加一条用户信息至t_user表中 我们在上一章节的代码中继续增加代码 UserService接口增加添加数据的方法 int insertUser(User user); UserServiceImpl增加实现方法 @Override public int insertUser(User user) { return...
Angular1.4.6 & Bootstrap3.3.7搭建后台人员管理系统 1.0.0
Tycho‘s Blog
12-19 1199
前言：接触前端快1满一年了，从什么都不会，一步步摸索，走到现在，觉得前方的路还是很迷茫，但是每天感觉自己都在进步，这是最好的！希望自己能坚持下去，也跟各位同仁共勉！直接上效果：
ITSM进行支持组成员的添加步骤
zhaoyingjiao的专栏
08-06 1168
1. 进行支持组成员的添加： 以172.24.63.26为例： ①打开BMC Remedy User软件，输入用户名：jiangxiaowen; 密码：admin; 点击账号（A），在打开的窗口里点击“添加”，输入服务器：172.24.63.26，TCP: 32000（选中“高级服务器属性”）； ②登录后进入到主页，按F3或是点击菜单栏的第二个按钮（选择应用程序或表单），打开“对象列表”的“
SpringBoot+BootStrapTable+PageHelper用户新增，删除，修改
热门推荐
Damionew的博客
11-25 1万+
撸完代码，成功运行的那一刻，激动、兴奋、高兴地点了个外卖，，琢磨着要记录下来遇到的坑，但是突然发现。不知道该写什么了。。那就先写几个记忆比较深刻的坑，记录下来提醒自己，以及帮助遇到同样问题的旁友 前面已经配置好其他环境，现在就是在iframe中使用BootStrapTable 用户管理页面：增加，批量删除，修改，分页，修改是使用模态框获取一行数据 爬爬遇到的坑 1、使用BootStrapT...
基于bootstrap实现简单用户管理功能
医疗影像检索
04-14 4719
基于bootstrap实现简单用户管理功能，包括增删改以及列表分页展示功能。 1、web.xml配置servlet映射： UserMgServlet com.userMgServlet UserMgServlet /ToUserMgServlet 2、userMg.jsp页面代码 <%@ page language="java"
bootstrap+vue=动态添加删除用户数据
xiaowei的博客
05-08 2129
首先使用bootstrap进行页面布局，使用vue进行数据绑定，可实现添加、删除、全部删除。全部删除、“暂无数据”根据有无数据动态显示隐藏，这是vue的机制，做起来很方便。<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="styles
用vue与bootstrap写简单用户信息添加删除操作
qq_39201210的博客
08-03 978
 小记： 1.v-model=""    用于input表单双向数据绑定  逻辑层跟渲染层双向绑定 2.v-on:click='add()'     click方法绑定  3.v-for='(item,index) in myData'   遍历数组  {{index}}      {{item.name}}      {{item.age}}   适用于vue版本2.0   4.v-fo...
springboot导入bootstrap以及用户增删改查
lllwky的博客
02-05 1312
修改语法 将html中添加 xmls:th=“http://www.thymeleaf.org”> <html lang="en" xmlns:th="http://www.thymeleaf.org"> 超链接，href变为th:href,url使用@开头，其中/代表项目的根目录，一般从static或thymeleaf目录开始写目录 <link th:href="@{/qinjiang/css/qinstyle.css}" rel="stylesheet"> 去除thym
Bootstrap　　d-inline-flex　
最新发布
05-27
Bootstrap是一个流行的前端框架，提供了丰富的CSS和JavaScript组件，用于快速构建响应式和移动设备优先的网站和应用程序。 d-inline-flex是Bootstrap框架中的一个CSS类名，用于将元素设置为内联弹性盒子。内联弹性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值