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

一、后端servlet开发

1.1、创建Custom实体类

package entity;

public class Customer {
    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;
    private String nickName;

    public String getNickName() {
        return nickName;
    }

    public void setNickName(String nickName) {
        this.nickName = nickName;
    }

    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(Customer customer) {
        String sql = "insert into t_custom (name,age,sex,phone,wechat,addr,hoby,email,occupation,uid) values ('"+customer.getName()+"',"+customer.getAge()+","+customer.getSex()+",'"+customer.getPhone()+"','"+customer.getWeChat()+"','"+customer.getAddr()+"','"+customer.getHoby()+"','"+customer.getEmail()+"', '"+customer.getOccupation()+"',"+customer.getUid()+")";
        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保存到数据库

        CustomerDao customerDao = new CustomerDaoImpl();
        int cnt = customerDao.insertCustom(customer);
        if (cnt > 0) {
            writer.print("保存成功");
        } else {
            writer.print("保存失败");
        }

1.4、全部源代码

package controller;

import dao.CustomerDao;
import dao.Impl.CustomerDaoImpl;
import entity.Customer;
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("/customer_add")
public class CustomerAddServlet 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");

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

        CustomerDao customerDao = new CustomerDaoImpl();
        int cnt = customerDao.insertCustom(customer);
        if (cnt > 0) {
            writer.print("保存成功");
        } else {
            writer.print("保存失败");
        }

        writer.close();
    }
}

二、前端HTML开发

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

        data:{
            id :null,
            customerName:null,
            age:null,
            phone:null,
            wechat:null,
            sex:null,
            address:null,
            email:null,
            hoby:null,
            occupation:null
        },

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

<button class="btn btn-primary" style="margin-right: 8px" @click="doAdd">修改</button>

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

           doAdd(){
                // 通过axios发送请求到UserLoginServlet
                // http://localhost:8080/update?user_name=w&nick_name=W&phone=123&birth=222&sex=0&id=7
                var url = "http://localhost:8080/customer_update?name="+this.customerName+"&age="+this.age+"&phone="+this.phone+"&wechat="+this.wechat+"&sex="+this.sex+"&addr="+this.address+"&email="+this.email+"&hoby="+this.hoby+"&occupation="+this.occupation+"&id="+this.id ;
                console.log(url);
                axios.get(url).then(response => {
                    if (response.data == '修改成功') {
                        window.location.href = 'customer_list.html';//跳转到主页user_list.html
                    } else {
                        alert("修改有误!!!");//弹窗警告
                    }
                })
            },