js学习总结----crm客户管理系统之前端页面开发及数据渲染

具体代码如下:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" charset=‘utf-8‘>
</head>
<body>
    <div class=‘box‘>
        <a href="add.html" class=‘link‘>增加客户</a>
        <h2 class=‘head‘>
            <span class=‘w50‘>编号</span>
            <span class=‘w150‘>姓名</span>
            <span class=‘w50‘>年龄</span>
            <span class=‘w200‘>电话</span>
            <span class=‘w200‘>地址</span>
            <span class=‘w150‘>操作</span>
        </h2>
        <ul class=‘list‘ id=‘list‘>
            <!-- <li>
                <span class=‘w50‘>1</span>
                <span class=‘w150‘>xxx</span>
                <span class=‘w50‘>25</span>
                <span class=‘w200‘>xxxxxxxxx</span>
                <span class=‘w200‘>xxxxxxxxxxx</span>
                <span class=‘w150 control‘>
                    <a href="">修改</a>
                    <a href="">删除</a>
                </span>
            </li> -->
        </ul>
    </div>
    <script charset=‘utf-8‘ type=‘text/javascript‘ src=‘js/ajax.js‘></script>
    <script charset=‘utf-8‘ type=‘text/javascript‘>
        var oList = document.getElementById(‘list‘);
        //首先获取所有的客户信息,完成页面的数据绑定
        var customModule = (function(){
            //DELETE CUSTOM
            function removeCustom(){
                oList.onclick = function(e){
                    e = e || window.event;
                    var tar = e.target || e.srcElement,
                        tarTag = tar.tagName.toUpperCase();
                    if(tarTag==="A" && tar.innerHTML ==="删除"){
                        var customId = tar.getAttribute("customId");
                        var flag = window.confirm("确定要删除编号为["+customId+"]的客户吗?");
                        if(flag){
                            ajax({
                                url:"/removeInfo?id="+customId,
                                success:function(jsonData){
                                    if(jsonData && jsonData.code===0){
                                        oList.removeChild(tar.parentNode.parentNode);
                                        return;
                                    }
                                    alert(jsonData.msg);
                                }
                            })
                        }
                    }    

                }
            }
            //BIND HTML
            function bindHTML(data){
                var str = "";
                for(var i = 0;i<data.length;i++){
                    var curData = data[i];
                    str+=‘<li>‘;
                        str+=‘<span class="w50">‘+curData["id"]+‘</span>‘;
                        str+=‘<span class="w150">‘+curData["name"]+‘</span>‘;
                        str+=‘<span class="w50">‘+curData["age"]+‘</span>‘;
                        str+=‘<span class="w200">‘+curData["phone"]+‘</span>‘;
                        str+=‘<span class="w200">‘+curData["address"]+‘</span>‘;
                        str+=‘<span class="w150 control">‘;
                            str+=‘<a href="add.html?id=‘+curData["id"]+‘">修改</a>‘;
                            str+=‘<a href="javascript:;" customId = "‘+curData["id"]+‘">删除</a>‘;
                        str+="</span>"
                    str+=‘</li>‘;
                }
                oList.innerHTML = str;
            }
            //SEND AJAX GET DATA
            function init(){
                ajax({
                    url:"/getList",
                    success:function(jsonData){
                        if(jsonData && jsonData.code==0){
                            var data = jsonData.data;
                            bindHTML(data);
                            removeCustom();
                        }
                    }
                })
            }
            return{
                init:init
            }
        })()
        customModule.init();
    </script>
</body>
</html>

add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" charset=‘utf-8‘>
</head>
<body>
    <div class=‘box2‘>
        <div>
            <span>姓名:</span>
            <input type="text" id=‘userName‘>
        </div>
        <div>
            <span>年龄:</span>
            <input type="text" id=‘userAge‘>
        </div>
        <div>
            <span>电话:</span>
            <input type="text" id=‘userPhone‘>
        </div>
        <div>
            <span>地址:</span>
            <input type="text" id=‘userAddress‘>
        </div>
        <div class=‘submit‘ id=‘submit‘>提交</div>
    </div>
    <script charset=‘utf-8‘ type=‘text/javascript‘ src=‘js/ajax.js‘></script>
    <script charset=‘utf-8‘ type=‘text/javascript‘>
        String.prototype.queryURLParameter = function(){
            //PARAMETER
            var obj = {},
                reg = /([^?=&#]+)=([^?=&#]+)/g;
            this.replace(reg,function(){
                var key = arguments[1],
                    value = arguments[2];
                obj[key] = value;
            });
             //->HASH
            // reg = /#([^?=&#]+)/;
            // if (reg.test(this)) {
            //     obj[‘hash‘] = reg.exec(this)[1];
            // }
            // return obj;

        }
        var userName = document.getElementById("userName");
        var userAge = document.getElementById("userAge");
        var userPhone = document.getElementById("userPhone");
        var userAddress = document.getElementById("userAddress");
        var submit = document.getElementById("submit");
        //判断一下是修改还是增加:如果URL的后面传递了ID值就是修改,否则就是增加,这样的话我们加载页面的第一件事情就是获取URL后面传递进来的ID值
        var urlObj = window.location.href.queryURLParameter(),
            customId = urlObj["id"],
            isFlag = typeof customId === "undefined" ? false : true;//是否为修改操作 true代表修改 false代表增加

        //如果是修改的话,我们首先需要把对应的客户的信息获取到,并且增加到对应的文本框中
        if(isFlag){
            ajax({
                url:‘/getInfo?id=‘+customId,
                success:function(jsonData){
                    if(jsonData && jsonData.code===0){
                        var data = jsonData["data"];
                        userName.value = data["name"];
                        userAge.value = data["age"];
                        userPhone.value = data["phone"];
                        userAddress.value = data["address"]
                    }

                }
            })
        }
        //点击提交按钮的时候不一定是增加也可能是修改
        submit.onclick = function(){
            var obj = {
                name:userName.value,
                age:userAge.value,
                phone:userPhone.value,
                address:userAddress.value
            }
            //update
            if(isFlag){
                obj.id = customId;
                ajax({
                    url:‘/updateInfo‘,
                    type:"post",
                    data:JSON.stringify(obj),
                    success:function(jsonData){
                        if(jsonData && jsonData.code===0){
                            window.location.href="index.html";
                            return;
                        }
                        alert(jsonData.msg);
                    }
                })
                return;
            }
            //add
            ajax({
                url:"/addInfo",
                type:"post",
                data:JSON.stringify(obj),//请求主体中的内容是JSON格式的字符串
                success:function(jsonData){
                    if(jsonData && jsonData.code==0){
                        //成功后跳转回首页
                        window.location.href = "index.html";
                        return;
                    }
                    alert(jsonData.msg);
                }
            })
        }
    </script>
</body>
</html>

custom.json(模拟后台数据)

[{"name":"a sd","age":"sa ","phone":"da s","address":"sd ","id":2}]

最终效果:

这个只是一个非常简单的demo,没有很复杂。

时间: 2024-10-25 20:41:13

js学习总结----crm客户管理系统之前端页面开发及数据渲染的相关文章

js学习总结----crm客户管理系统之node编写API接口

具体API代码如下 var http = require('http'), url = require('url'), fs = require('fs'); var server = http.createServer(function(req,res){ var urlObj = url.parse(req.url,true), pathname = urlObj.pathname, query = urlObj.query;//存储的是客户端请求的URL地址中的问号传参后面的信息(并且是以

CRM客户管理系统开发多少钱?

俗话说的好:客户是上帝.这句话用在企业身上也没错,???对于企业来说,如何精准的把握住客户的心理需求,并且给予他们个性化的解决方案成为了他们最头疼的问题.为了解决这个问题,CRM管理系统应运而生.这是一款高效结合互联网技术,为企业提供的智能维护客户关系,提高企业员工工作效率的平台.有了它,企业可以更加快速的运转,员工的工作也能更加省心愉快.一.CRM客户管理系统作用:1.集中管理客户资料:客户资料是企业能够了解到客户消费行为的重要武器,CRM管理系统把客户资料高度集中起来,并且按照一定的顺序进行

CRM客户管理系统如何管理企业需求

如今,人工智能普及,越来越多人开始怀疑销售的作用.其实,人与人之间的交易,是需要一定的情感表达,而每个销售都是不同的个体,为了提高效率和效益,CRM客户管理系统就表现出独特的作用和优势. 1.找准客户需求点 销售人员最主要的工作,就是找出客户购买此种产品或服务的主要目的是什么,反之还有客户不购买的抵触原因是什么.面对大量的客户数据,销售人员只有将混淆的杂质过滤掉,才能够面对客户的真实想法.CRM客户管理系统能够记录了客户的交易数据和信息,智能化的判断潜在客户的消费习惯,通过分配管理,让销售通过消

CRM客户管理系统认可度为何越来越高

在智能化的时代,企业开始摒弃传统的观念,拥抱互联网信息化的发展浪潮,企业信息化是改进销售的一种方式. 在进行CRM客户关系管理系统运营的过程中,通过CRM系统来实现销售的自动化,可以让企业主从繁琐的事务中抽出身来,提高企业的管理和工作效率.企业不需过多的专注重复性的工作安排和日志,而是把精力放在营销和销售的环节,这让企业的销售团队更有目的性,在客户市场中实现突破,提升了企业自身的发展动力. CRM系统能够让销售团队减轻负担,这也是CRM这么受支持的主要原因之一.通过CRM系统,许多营销和销售的流

惠州CRM客户管理系统都有什么特点?

有的企业认为可以通过CRM客户管理系统与客户建立一种长期.稳定的密切关系,并通过老客户不断带来新客户,为企业的持续发展奠定基础.还有的企业使用CRM系统是将其作为一个数据中心,通过各项数据对客户情况进行分析.还有一些企业使用CRM客户管理系统的目的是为了规范管理企业的运营业务.不管是哪种初衷,小编相信CRM客户管理系统能为企业提供的帮助是多方面的,只要企业合理的运用是可以实现顾客与企业的"双赢". 一.运营效果 CRM客户管理系统可以将售前.售中.售后每个环节进行联系,将业务流程进行整

前端页面展示MySQL数据并实现前后端互动

前端页面使用H-ui框架  后端使用flask框架  数据库使用mysql  连接数据库通过pymysql实现 前端代码如下 <html lang="en"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv=&quo

简信CRM客户管理系统让管理不再困难

在销售团队的管理上,团队的领导总是会遇到问题,团队的销售业绩总是得不到提升,月中月底销售数字很难看,无法向领导汇报.但是管的太松散,团队没有凝集力,战斗力也不理想:管的太严厉,则让员工不适应,怨声载道的,容易造成大规模的员工离职.其实,销售团队过程管理才是重点.企业可以借助简信CRM规范销售人员的工作,建立规范的销售流程,当企业有更多的销售人员,都可以按照CRM中已经形成的规范进行操作,不仅管理好了销售团队,而且销售人员的职业素质也能全面提升,快速复制销售人才.只有培养优质销售人员快速成长,能提

网站开发(周五):项目前端页面开发(实战)

第一.前端基础简介 前端网页:根据此前项目需求分析可知,我们需要开发网站首页.文章分类页.搜索页.正文页.标签页,而一个最基本网页模版有三部分,网页顶部导航条.网页中部主体.网页底部,其中顶部和底部布局固定,中部展示内容每张网页不同. 网页代码:我们知道,网页模板的基本代码的顶部和底部相同,主要中部主体在变化. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

移动前端页面开发需要注意的20个要点

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-ap