阶段二-vue+axios实现CRM系统添加用户

最新推荐文章于 2024-08-15 19:41:48 发布
最新推荐文章于 2024-08-15 19:41:48 发布
阅读量74 收藏
点赞数
文章标签： vue.js javascript 前端
原文链接：https://juejin.cn/post/7163840085396291597
版权

一、前端HTML

1.1、收集表单数据

当点击添加按钮时，使用axios将表单数据发送到servlet中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2、处理axios响应的结果

根据respones.data的结果进行判断
在这里插入图片描述

1.3、完整代码

<!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/axios.min.js"></script>
    <script src="assets/vue.min-v2.5.16.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">
            <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="user_alert.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 ;font-size: 18px;color: rgb(109,109,109);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" name="sex" value="0" v-model="sex"/>男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" value="1" checked="true" v-model="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="doReset">重置</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            userName:null,
            nickName:null,
            phone:null,
            birth:null,
            sex:null
        },
        methods:{
            doAdd(){
                // 通过axios发送请求到UserLoginServlet
                var url = "http://localhost:8080/add?user_name=" + this.userName + "&nick_name=" + this.nickName + "&phone=" + this.phone + "&birth=" + this.birth + "&sex=" + this.sex;
                axios.get(url).then(response => {
                    if (response.data == '添加成功') {//添加成功
                        window.location.href = 'user_list.html';//跳转到主页user_list.html
                    } else {//添加失败
                        alert("输入有误!!!");//弹窗警告
                    }
                })
            },
            doReset(){
                this.userName = null;
                this.nickName = null;
                this.phone = null;
                this.birth = null;
                this.sex = null
            }
        },
        created:function(){

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

二、后端Servlet

2.1、在UserDAO中新增添加用户的方法在这里插入图片描述

在这里插入图片描述

2.2、创建UserAddServlet实现添加用户的功能

package controller;

import dao.Impl.UserDaoImpl;
import dao.UserDao;
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("/add")
public class UserAddServlet 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();
        UserDao userDao = new UserDaoImpl();

        String userName = req.getParameter("user_name");
        String nickName = req.getParameter("nick_name");
        String phone = req.getParameter("phone");
        String birth = req.getParameter("birth");
        int sex = Integer.parseInt(req.getParameter("sex"));

        User user = new User(0,userName,"666666",nickName,sex,phone,"www.baidu.com",birth);
        int add = userDao.add(user);
        if(add > 0){
            writer.print("添加成功");
        }else {
            writer.print("添加失败");
        }

        writer.close();
    }
}
.超人不会飞.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2-crm：vue2旅客引导平台（vue2 + vue-router + axios + element-ui + sass）
02-05
vue2-crm 一个Vue.js项目（2.0） vue2 + vue路由器+ vueX + lodash + sass + element-ui + axios + es6 只是练习和娱乐 如果有帮助，您可以单击右上角的“星号”以支持它。 谢谢！ ^ _ ^ 或者您可以“关注”，我...
Admin-System:vue、vue-router、axios、json-server 实现CRM数据系统
05-11
实现语言：vue,vue-router,axios,json-server Build Setup # ========================= vue 环境启动步骤 ========================= # install dependencies 安装 npm install # serve with hot reload at ...
【畅购商城】订单模块之显示勾选商品和添加订单
专注于Java领域开发 关注我 带你玩转Java
12-08 411
订单模块之显示勾选商品和添加订单
137.(前端)订单管理显示物流信息——前端利用axios调用后端接口并且使用timeline时间线效果展示
m0_63953077的博客
11-04 743
前端利用axios调用后端接口并且使用timeline时间线效果展示
第2阶段17-vue+axios实现CRM系统客户添加功能
YZ6699ZY的博客
11-15 222
vue+axios实现CRM系统客户添加功能
vue+axios
m0_70059366的博客
11-05 441
vue+axios
axios 添加重试功能
在路上`的博客
02-10 1181
axios 实现重试
java开发oa系统源码下载-vue-crm:卡方通用CRM系统前端代码
06-05
java开发oa系统源码下载 <<<<<<< HEAD 72crm-java F3 Java 悟空CRM（9.0版本） 悟空软件长期为企业提供企业管理软件(CRM/HRM/OA/ERP等)的研发、实施、营销、咨询、培训、服务于一体的信息化...
基于jfinal+vue+ElementUI的前后端分离CRM系统.zip
03-23
基于jfinal+vue+ElementUI的前后端分离CRM系统 主要技术栈 核心框架：jfinal3.8 缓存：redis caffeine 数据库连接池：Druid 工具类：hutool,fastjson,poi-ooxml 定时任务：jfinal-cron 项目构建工具：maven ...
crmmanager:基于springboot + vue 的crm管理系统
05-15
本项目“crmmanager”是一个采用SpringBoot后端框架和Vue.js前端框架构建的CRM管理系统。这样的组合使得应用程序具备了高效、响应迅速和良好的用户体验。 **SpringBoot核心知识点：** 1. **自动配置**：SpringBoot...
axios的用法与功能实现
12-26 2285
axios是基于promise的用于浏览器和nodejs的HTTP客户端，本身有以下特征： 从浏览器中创建XMLHttpRequest； 从nodejs发出http请求 支持promiseAPI 拦截 请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF攻击 初始化一些常用的配置项 axios.defaults.baseURL = '...
详细介绍 Vue3 的 watch 和 watchEffect
最新发布
weixin_52648900的博客
08-15 957
非常详细介绍了vue3的watch和watchEffect区别和联系
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
08-14 344
[Vue warn]: Invalid vnode type when creating vnode: null.
vue选中下拉框数据，但是值没有填充到框内
m0_68154641的博客
08-14 222
element-ui选中下拉框数据，但是值没有填充到框内
Vue项目-Table添加Form表单校验
StupidlyGrass的博客
08-12 375
【代码】Vue项目-Table添加Form表单校验。
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 429
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 357
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 828
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
Vue 3的Computed属性
计算机图形学
08-15 430
Vue 3的组合式API为Computed属性的使用带来了新的变化和可能性。通过computed函数，开发者可以轻松地创建只读或可写的Computed属性，并在组件中高效地处理响应式数据。合理使用Computed属性，可以使代码更加简洁、清晰和高效。
vue2+vue-route+axios+element-ui的音乐播放器
05-20
很高兴为您解答。一个基于vue2+vue-route+axios+element-ui的音乐播放器的实现需要以下步骤： 1. 引入element-ui组件库和axios库，可以在index.html中通过CDN引入，也可以通过npm安装后在main.js中引入。 2. 安装vue-route，创建路由文件router.js，并在main.js中引入。 3. 创建组件文件夹，包括音乐播放器组件、音乐列表组件、歌词组件等。 4. 使用axios向后端请求音乐数据，将返回的数据存储在vuex中，并在音乐列表组件中渲染出来。 5. 创建音乐播放器组件，使用HTML5的audio标签实现音乐播放功能，并在组件中实现播放、暂停、上一曲、下一曲等操作。 6. 创建歌词组件，实现歌词的滚动和显示。 7. 在路由文件中配置路由，使音乐列表组件和音乐播放器组件能够正确渲染。 8. 在App.vue中引入组件，并使用element-ui的布局组件进行布局。 以上是基础的实现步骤，具体实现还需要根据自己的需求进行调整和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值