第2阶段14-vue+axios实现CRM系统用户修改功能

最新推荐文章于 2023-02-28 13:51:10 发布

阿正Sir

最新推荐文章于 2023-02-28 13:51:10 发布

阅读量273

点赞数

文章标签： vue.js servlet java

原文链接：https://juejin.cn/post/7163937811668664350

版权

一、后端Servlet

1.1、在UserDAO中添加根据id获取用户信息的方法

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();
    }
}
复制代码

1.2、在UserDAO中添加修改用户的方法

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.excuteUpdate(sql);
}
复制代码

1.3、添加UserUpdateServlet

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 java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/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请求传递的值
        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");
        int id = Integer.parseInt(req.getParameter("id"));

        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(); //释放资源
    }
}
复制代码

二、前端HTML

2.1、给table中的修改按钮绑定点击事件

2.2、新增user_update.html页面

2.3、在绑定的修改函数中，跳转到user_update.html

跳转页面时将用户id传递到user_update.html中

2.4、在user_update.html中通过axios根据id回显用户信息

2.5、在user_update.html中通过axios修改用户信息

2.6、完整的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">
    <!-- bootstrap行-->
    <div class="row">
        <!-- 显示导航-->
        <div class="col-md-3" style="background-color: rgb(0,21,41); height: 800px;">
            <!-- bootstrap行 -->
            <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="#">修改密码</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">
                <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">重置</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(){ //点击修改按钮时触发
                //通过axios发送请求到servlet修改用户信息
                var url = "user_update?user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex+"&phone="+this.phone+"&birth="+this.birth+"&id="+this.id;
                axios.get(url).then(response => {
                    if(response.data == '修改成功'){
                        window.location.href = 'user_list.html';
                    } else {
                        alert("修改失败，请联系管理员！！！");
                    }
                });
            }
        },
        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>

作者：大坏蛋_
链接：https://juejin.cn/post/7163937811668664350
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。