【2阶】vue+axios实现CRM系统用户修改丶修改密码-crm-4

小王码字

已于 2022-11-16 17:14:25 修改

阅读量428

点赞数 1

分类专栏： BootStrap Vue 文章标签：前端 javascript vue.js

于 2022-11-15 19:42:15 首次发布

本文链接：https://blog.csdn.net/Wangzz1217/article/details/127871812

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

BootStrap

6 篇文章 1 订阅

订阅专栏

一.用户修改

1.1前端

1.1.1 用户列表页面的修改按钮绑定事件

1.1.2 创建修改函数,跳转传递id

1.1.3 添加user_update页面

同新增用户页面

1.1.4 user_update中增加回显功能

1.1.5 user_update中修改功能

1.1.6代码

<!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="custom_list.html">客户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="custom_add.html">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="update_passwd.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="login.html">退出登陆</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;color:rgb(109,109,109);font-size: 18px; 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 20px 20px 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="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;">
                            <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="doUpdate">修改</button>
                            <button class="btn btn-default" @click="doRest">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //创建vue实例
    new Vue({
        el: '#app',
        data: {
            id:null,
            userName: null,
            nickName: null,
            sex: null,
            phone: null,
            birth: null
        },
        methods: {
            doUpdate(){
                var url = "user_update?id="+this.id+"&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("修改失败");
                    }
                });
            },
            doRest(){
                this.userName = null;
                this.nickName = null;
                this.sex= null;
                this.phone = null;
                this.birth = null;
            }
        },
        created: function () { //页面加载完成后触发
            var url = window.location.href; //获取网页的url地址
            // console.log(url);
            var id = url.substring(url.indexOf("=")+1);
            this.id=id;
            // console.log(temp);
            //通过axios发送请求获取用户信息
            axios.get("user_info?id="+id).then(response => {
                console.log(response.data);
                this.userName = response.data.userName;
                this.nickName = response.data.nickName;
                this.sex = response.data.sex;
                this.phone = response.data.phone;
                this.birth = response.data.birth;
            });
        }

    });
</script>

</body>
</html>

1.2后端

1.2.1 在DAO中增加修改方法

public int updateUser(User user) {
        String sql = "update t_user set user_name='"+user.getUserName()+"',nick_name='"+user.getNickName()+"',sex="+user.getSex()+",birth='"+user.getBirth()+"',phone='"+user.getPhone()+"' where id="+user.getId();
        return this.executeUpdate(sql);
    }

1.2.2 修改用户Servlet

package controller;

import com.sun.org.apache.bcel.internal.generic.NEW;
import dao.UserDAO;
import dao.impl.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_update")//http://localhost:8080/user_update
public class UserUpdateServlet 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();

        //接收Html请求传递的值
        int id = Integer.parseInt(req.getParameter("id"));
        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.setId(id);
        user.setUserName(userName);
        user.setNickName(nickName);
        user.setPhone(phone);
        user.setSex(sex);
        user.setBirth(birth);

        //调用dao方法添加用户
        UserDAO dao = new UserDAOImpl();
        int count =  dao.updateUser(user);
        if(count>0){
            writer.print("修改成功");
        }else{
            writer.print("修改失败");
        }

        //释放资源
        writer.close();
    }
}

1.2.3 查询单个用户配合回显功能

public User selectById(int id) {

        String sql = "select * from t_user where id="+id;
        ResultSet rs = this.executeQuery(sql);
        User user = new User();
        try {
            if (rs.next()){
                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;
    }

1.2.4 查询用户Servlet

package controller;

import com.alibaba.fastjson.JSON;
import dao.UserDAO;
import dao.impl.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;

/**
 * 获取客户信息，根据id
 */
@WebServlet("/user_info")
public class UserGetServlet 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();

        //获取请求传递的参数值
        int id = Integer.parseInt(req.getParameter("id"));

        //查询dao根据id获取用户信息
        UserDAO dao = new UserDAOImpl();
        User user = dao.selectById(id);

        //将user对象转换成json字符串
        String json = JSON.toJSONString(user);

        //向网页输出内容
        writer.print(json);

        //释放资源
        writer.close();
    }
}

二.修改密码

2.1前端

2.1.1 增加修改密码页面

2.1.2 绑定参数,事件函数

2.1.3 axios发送请求到Servlet

2.1.4 代码

<!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="custom_list.html">客户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="custom_add.html">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="update_passwd.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="login.html">退出登陆</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;color:rgb(109,109,109);font-size: 18px; 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 20px 20px 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="password" class="form-control"v-model="passwd"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4"style="margin-top: 20px;">
                            <label>确认密码</label>
                            <input type="password" class="form-control"v-model="newPasswd" />
                        </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="doUpdatePasswd">修改</button>
                            <button class="btn btn-default">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //创建Vue实例
    new Vue({
        el:'#app',
        data:{
           passwd :null,
           newPasswd:null
        },
        methods: {
            doUpdatePasswd(){
                var url = "update_passwd?passwd="+this.passwd+"&newPasswd="+this.newPasswd;
                //通过axios发送请求到servlet
                axios.get(url).then(response=>{
                    if (response.data == '修改成功'){
                        window.location.href = 'index.html';
                    }else if (response.data == '原密码输入错误'){

                        alert("原密码输入错误");
                    }else{
                        alert("修改失败");

                    }
                });
            },
        }
    });
</script>
</body>
</html>

2.2后端

2.2.1 修改密码方法


    public int updatePasswd(User user) {
        String sql = "update t_user set passwd='"+user.getPasswd()+"' where id="+user.getId();
        return this.executeUpdate(sql);
    }

2.2.2 UpdatePasswdServlet

package controller;

import dao.UserDAO;
import dao.impl.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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * 修改密码
 */
@WebServlet("/update_passwd")
public class UpdatePasswdServlet 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();


        HttpSession session = req.getSession();
        //第二步:通过session对象获取用户信息(user)
        User user = (User) session.getAttribute("user");
        String passwd = user.getPasswd();
        //接收Html请求传递的值
        String oldpasswd = req.getParameter("passwd");

        String newPasswd = req.getParameter("newPasswd");

        if (passwd.equals(oldpasswd)){

            user.setPasswd(newPasswd);
            //调用dao方法添加用户
            UserDAO dao = new UserDAOImpl();
            int count =  dao.updatePasswd(user);
            if(count>0){
                writer.print("修改成功");
            }else{
                writer.print("修改失败");
            }

        }else{
            writer.print("原密码输入错误");
        }

        //释放资源
        writer.close();
    }
}