【2阶】使用vue+axios实现-登录丶添加用户-crm-2

小王码字

已于 2022-11-16 17:13:34 修改

阅读量1k

点赞数 3

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

于 2022-11-09 12:19:11 首次发布

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

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

BootStrap

6 篇文章 1 订阅

订阅专栏

Vue模板

   <script>
        //创建vue实例
        new Vue({
            el: '#app', //将id=app的div的管理权交给vue
            data: { //需要绑定的数据
               

            },
            methods: { //所有声明的函数
                

            },
            created: function () { //页面加载完成后执行

            }
        });
    </script>

一.登录功能

1.1前端

1.1.1在data中声明要绑定的数据

1.1.2用v-model属性绑定data

1.1.3登录按钮通过@click绑定点击事件

1.1.4在methods中添加doLogin方法实现业务需求

1.1.5重置按钮功能

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>

</head>
<body>
    <div class="container" id="app">
        <!--bootstrap行-->
        <div class="row">
            <!--bootstrap列,6个栅格-->
            <div class="col-md-6 col-md-offset-3" style="height: 310px;border: 1px solid black;margin-top: 80px">
                <!--行-->
                <div class="row">
                    <!--显示文章标题-->
                    <div class="col-md-5" style="height: 310px;background-color:rgb(43,136,223);font-size: 18px;color: white;font-weight: bold;text-align: center;line-height: 310px">
                        蜗牛CRM管理系统
                    </div>
                    <!--显示表单-->
                    <div class="col-md-7">
                        <!--行-->
                        <div class="row" style="padding: 30px 0px 30px 0px;">
                            <div class="col-md-12" style="text-align: center;font-size: 18px;font-weight: bold;">
                                登录
                            </div>
                        </div>
                        <!--行-->
                        <div class="row" style="height: 60px;margin-bottom: 20px">
                            <div class="col-md-8 col-md-offset-2">
                                <label>用户名</label>
                                <input type="text" class="form-control" v-model="userName"/>
                            </div>
                        </div>
                        <!--行-->
                        <div class="row" style="height: 60px;margin-bottom: 20px">
                            <div class="col-md-8 col-md-offset-2">
                                <label>密码</label>
                                <input type="password" class="form-control" v-model="passwd"/>
                            </div>
                        </div>
                        <!--行-->
                        <div class="row" style="height: 60px;margin-bottom: 20px">
                            <div class="col-md-8 col-md-offset-2" style="text-align: center">
                                <button class="btn btn-primary" style="margin-right: 8px" @click="doLogin">登录</button>
                                <button class="btn btn-default" @click="doRest">重置</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script>
        //创建vue实例
        new Vue({
            el: '#app', //将id=app的div的管理权交给vue
            data: { //需要绑定的数据
                userName: null, //用户名
                passwd: null //密码
            },
            methods: { //所有声明的函数
                doLogin(){ //点击登录按钮后执行
                    //通过this.可以获取data中绑定的数据

                    //通过axios发送请求到UserLoignServlet
                    var url = "http://localhost:8080/login?user_name="+this.userName+"&passwd="+this.passwd;
                    axios.get(url).then(response => {
                        if(response.data == '登录成功'){ //登录成功
                            window.location.href = 'index.html'; //跳转到主页index.html
                        } else { //登录失败
                            alert("用户名或密码错误"); //弹窗警告
                        }

                    });
                },
                doRest(){
                   this.userName = null;
                   this.passwd = null;
                }
            },
            created: function () { //页面加载完成后执行

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

1.2后端

1.2.1登录方法

 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;
    }

1.2.2 Servlet

1.2.3代码

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("/login")//http://localhost:8080/login
public class UserLoginServlet 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();

        //查询DAO,用户是否登录成功
        UserDAO dao = new UserDAOImpl();//实例化dao对象

        //获取请求传递的值(文本框中的用户名和密码)
        String userName = req.getParameter("user_name");
        String passwd = req.getParameter("passwd");

        User user = dao.login(userName,passwd);

        if (user != null){
            writer.print("登录成功");
        }else{
            writer.print("登录失败");
        }

        writer.close();
    }
}

1.3使用axios请求Servlet

二.添加用户功能

2.1前端

2.1.1在data中声明要绑定的数据

2.1.2用v-model属性绑定data

2.1.3登录按钮通过@click绑定点击事件

2.1.4在methods中添加doLogin方法实现业务需求

2.1.5重置按钮功能

2.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="#">客户管理</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="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="doAdd">添加</button>
                           <button class="btn btn-default" @click="doRest">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //创建Vue实例
    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("添加用户失败!!!");
                        }
                    });
            },
            doRest(){
                this.userName = null;
                this.nickName = null;
                this.sex= null;
                this.phone = null;
                this.birth = null;
            }
        }
    });
</script>
</body>
</html>

2.2后端

2.2.1 方法

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.executeUpdate(sql);
    }

2.2.2 Servlet功能

2.2.3 代码

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_add")//http://localhost:8080/user_add
public class UserAddServle 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");

        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();
    }
}