第2阶段17-vue+axios实现CRM系统客户添加功能

最新推荐文章于 2024-04-15 09:52:13 发布

阿正Sir

最新推荐文章于 2024-04-15 09:52:13 发布

阅读量217

点赞数

文章标签： vue.js 前端 javascript

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

版权

本文介绍了使用Java Servlet后端和Vue.js前端如何协同完成用户信息的添加功能。后端通过创建Custom实体类、CustomDAO接口及其实现类实现数据持久化，前端利用Vue的数据绑定收集用户信息，并通过axios发送GET请求到Servlet进行数据保存。当保存成功时，前端会显示提示信息。

摘要由CSDN通过智能技术生成

一、后端servlet开发

1.1、创建Custom实体类

package entity;

public class Custom {
    private int id;
    private String name;
    private int age;
    private int sex;
    private String phone;
    private String wechat;
    private String addr;
    private String hoby;
    private String email;
    private String occupation;
    private int uid;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public int getSex() {
        return sex;
    }

    public void setSex(int sex) {
        this.sex = sex;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getWechat() {
        return wechat;
    }

    public void setWechat(String wechat) {
        this.wechat = wechat;
    }

    public String getAddr() {
        return addr;
    }

    public void setAddr(String addr) {
        this.addr = addr;
    }

    public String getHoby() {
        return hoby;
    }

    public void setHoby(String hoby) {
        this.hoby = hoby;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getOccupation() {
        return occupation;
    }

    public void setOccupation(String occupation) {
        this.occupation = occupation;
    }

    public int getUid() {
        return uid;
    }

    public void setUid(int uid) {
        this.uid = uid;
    }
}
复制代码

1.2、创建CustomDAO，新增用户的方法

public int insertCustom(Custom custom) {
    String sql = "insert into t_custom (name,age,sex,phone,wechat,addr,hoby,email,occupation,uid) values ('"+custom.getName()+"',"+custom.getAge()+","+custom.getSex()+",'"+custom.getPhone()+"','"+custom.getWechat()+"','"+custom.getAddr()+",'"+custom.getHoby()+"','"+custom.getEmail()+"', '"+custom.getOccupation()+"',"+custom.getUid()+")";
    System.out.println(sql+"**************************");
    return this.excuteUpdate(sql);
}
复制代码

1.3、创建CustomAddServlet

第1步：在session中获取用户id

//从session中获取用户的id
HttpSession session = req.getSession();
User user = (User) session.getAttribute("user");
int uid = user.getId();
复制代码

第2步：将用户信息通过dao保存到数据库

//将用户信息通过dao保存到数据库
CustomDAO dao = new CustomDAOImpl();
int count = dao.insertCustom(custom);
if(count > 0){
    writer.print("保存成功");
} else {
    writer.print("保存失败");
}
复制代码

1.4、全部源代码

package controller;

import dao.CustomDAO;
import dao.impl.CustomDAOImpl;
import entity.Custom;
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("/custom_add")
public class CustomAddServlet 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();

        //从session中获取用户的id
        HttpSession session = req.getSession();
        User user = (User) session.getAttribute("user");
        int uid = user.getId();

        //获取请求传参
        String name = req.getParameter("name");
        int age = Integer.parseInt(req.getParameter("age"));
        int sex = Integer.parseInt(req.getParameter("sex"));
        String phone = req.getParameter("phone");
        String wechat = req.getParameter("wechat");
        String addr = req.getParameter("addr");
        String hoby = req.getParameter("hoby");
        String email = req.getParameter("email");
        String occupation = req.getParameter("occupation");

        Custom custom = new Custom();
        custom.setName(name);
        custom.setAge(age);
        custom.setSex(sex);
        custom.setPhone(phone);
        custom.setWechat(wechat);
        custom.setAddr(addr);
        custom.setHoby(hoby);
        custom.setEmail(email);
        custom.setOccupation(occupation);
        custom.setUid(uid);

        //将用户信息通过dao保存到数据库
        CustomDAO dao = new CustomDAOImpl();
        int count = dao.insertCustom(custom);
        if(count > 0){
            writer.print("保存成功");
        } else {
            writer.print("保存失败");
        }

        writer.close(); //释放资源
    }
}
复制代码

二、前端HTML开发

2.1、通过vue的双向绑定收集用户信息

data: {
    customName: null,
    age: null,
    sex: null,
    phone: null,
    wechat: null,
    addr: null,
    hoby: null,
    email: null,
    occupation: null
},
复制代码

2.2、给添加按钮绑定点击事件

<button class="btn btn-primary" style="margin-right: 8px" @click="doAdd">添加</button>
复制代码

2.3、通过axios发送请求访问servlet添加客户

doAdd(){
    var url = "custom_add?name="+this.customName+"&age="+this.age+"&sex="+this.sex+"&phone="+this.phone+"&wechat="+this.wechat+"&addr="+this.addr+"&hoby="+this.hoby+"&email="+this.email+"&occupation="+this.occupation;
    //通过axios发送请求到servlet
    axios.get(url).then(response => {
        if(response.data == '保存成功'){
            alert("自己查数据库");
            // window.location.href = 'user_list.html';
        } else {
            alert("添加用户失败！！！");
        }
    });
}

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