`
549265480
  • 浏览: 29721 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类

【web前端培训之前后端的配合（中）】继续昨日的故事

 
阅读更多

前言

接着昨天的写：【web前端培训之前后端的配合（上）】以我们熟悉的Datalist说明问题吧

经过昨天晚上的学习，我们形成了一个伪datalist，但是他没有事件绑定，甚至每个datait还多出了一个无意义的div！！！

其实datalist多出一个div我是可以接受的，但是dataitem多出一个我这里就不太能接受了，所以里面还有很多东西可以继续深入。

昨天说了那么久也没有扯到和后端的配合，今天需要补足，于是进入今天的学习吧。

题外话

今天碰到一个有趣的东西，也许各位已经知道了，但是我这里还是提出来，老夫脸皮厚是不怕人笑话的哟。

  • 解析HTML结构。
  • 加载外部脚本和样式表文件。
  • 解析并执行脚本代码。
  • 构造HTML DOM模型。
  • 加载图片等外部文件。
  • 页面加载完毕。

其中图片会最后加载，无论如何都会最后加载，我当时想最开始就加载我一个广告（这个广告是个卷轴，会慢慢展开，会有黑色的层遮盖）。

我当时虽然将它放到了最前面，却给他的display设置为none了，于是我满以为他会最先加载的，结果却是最后加载（因为我js在最后控制的显示）。

我这里就犯了一个错误，因为在display为none的情况下，图片是不会加载的。

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4     <title>测试页面</title>
5 </head>
6 <body>
7     <div style=" background-image: url(http://pic002.cnblogs.com/images/2012/294743/2012032201481631.png); display: none;"></div>
8 </body>
9 </html>

PS：注意，我这里的说的都是背景，不是img标签，img标签都会加载的。

以上代码开始不会加载背景图片，但是当显示时候起图片便会加载了。所以我们若是有些隐藏的dom元素需要加载而且里面含有大量背景图片。而我们加载时候又不想其感觉加载很慢，就需要做特殊处理啦。

完了，这里还有其它问题：

在动画执行过程中因为下面还有几个js文件需要加载，加载时候动画效果会偶尔出现一点点卡的现象，这块需要处理，我想的是采用异步加载余下js的方法，但是感觉为一个广告又不太划算，不知道各位有什么看法没有。

好了进入今日的正题。

剔除多余的div

首先上一章昨天的图：

最外层div为datalist的，我这里可以接受，但是内层的div，我这里真不能接受了！所以我们想法改变一下，这里也需要考虑到这种场景：

若是外层datalist使用的不是div，而是ul或者dl我们也是必须支持的，因为里面的item是可能出现li的

我们这里做一点简单的处理，若是模板不能形成dom，我们便为之添加div，若是能的话就不需要div了：

 1 DataItem.prototype.load = function (index, data) {
 2     this.data = data;
 3     var parentEl = this.parentObj.el; //注意此处是parent已经赋值
 4     var parentId = this.parentObj.id
 5     var id = parentId + this.idPrefix + index; //生成唯一id
 6     this.id = id;
 7     //注意啦，这里根据html片段开始生成最终数据了哦
 8     var templateObj = this.templateObj; //此处的膜拜已经过处理
 9     var tmpHtm = '';
10     $.each(templateObj, function (i, item) {
11         if (item.field) {
12             tmpHtm = tmpHtm + item.html + data[item.field]
13         } else {
14             tmpHtm = tmpHtm + item.html;
15         }
16     });
17     var el = $(tmpHtm);
18     //    var el = $('<div></div>'); //形成dom
19     //为了避免id重复，这里对id必须进行处理，我们同时不允许为元素设置id
20     if (!el[0]) {
21         el = $('<div/>');
22         el.html(tmpHtm);
23     }
24     el.attr('id', id);
25     if (this.className)
26         this.el.attr("class", this.className);
27     parentEl.append(el);
28 };
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .box { margin: 10px; padding: 10px; border: 1px solid gray; display: inline-block; }
    </style>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/Datalist.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var _url = 'Ajax.aspx?sql=select * from bigType';
            $.getJSON(_url, function (data) {
                var d = new Datalist();
                d.tag = '<ul/>'
                d.template = 'tmp';
                d.dataSource = data;
                d.bind();
            });
        });
    </script>
</head>
<body>
    <textarea id="tmp">
<li class="box">
        <h3>
            {%title%}</h3>
 
        <dl>
            <dt>{%id%}</dt>
            <dd>{%title%}
            </dd>
        </dl>
    </li>
</textarea>
</body>
</html>
View Code

现在这种结构式可以接受的。。。好啦，我们现在来为我们里面的元素绑定事件吧：

事件绑定

无论是我们的datalist还是我们的dataitem，他们都是拥有事件的，我们应该可以像.net那样可以找到各自里面的某个标签，并且操作他呢，我们并且也可以datalist嵌套的。

首先我们为datalist添加两个参数，一个用于自己的事件，一个用于定义其item的事件，因为他的item事件应该大致相同：

var Datalist = function () {
    this.id = new Date().getTime().toString();
    this.items = []; //所具有的dataitem的项目
    this.dataSource = null; //各位对他熟悉吧
    this.container = $("body"); //我们的datalist的容器，没有指定的话就放在body里面
    this.style = {}; //可以为其设置样式这里考虑的好像有点多了
    this.attribute = {}; //为其设置属性
    this.className = '';
    this.itemClass = ''; //子元素的class
    this.tag = '<div></div>';
    this.template = ''; //可以在此设置，也可以指定容器id，然后由容器寻找

    this.itemEvent = {};
    this.itemElementEvent = {};
};

注意最后我们新增加的方法哦，itemEvent用于datalist的item的，比如上面的li标签，后面的用于其中item里面的元素，比如h3标签。

我们在.net中定义事件好像也是放出来的呢，我们这先看看怎么使用吧：

 1 $(document).ready(function () {
 2     var _url = 'Ajax.aspx?sql=select * from bigType';
 3     $.getJSON(_url, function (data) {
 4         var d = new Datalist();
 5         d.tag = '<ul/>'
 6         d.template = 'tmp';
 7         d.dataSource = data;
 8         d.itemEvent.clickLi = {
 9             eventType: 'click',
10             funcName: function (data, e, sender) {
11 
12                 var s = '';
13             }
14         };
15         d.bind();
16     });
17 });
 1 DataItem.prototype.bindEvent = function () {
 2     var scope = this;
 3     var el = scope.el; //获取当前元素
 4     var data = scope.data; //当前行数据
 5     var events = scope.event;
 6     $.each(events, function (k, v) {
 7         var type = v.eventType;
 8         var func = v.funcName;
 9         var sender = v.sender; //最初调用对象
10         if (func && typeof func == 'function') {
11             if (type == 'ready') {
12                 func.call(scope, params, e, original);
13             } else {
14                 el.unbind(type).bind(type, function (e) {
15                     func.call(scope, data, e, sender);
16                 });
17             }
18         }
19     });
20 };

我们看到这里基本上达到了我们的要求了，而且传了很多有意义的参数回来，接下来我们再加一点东西便来试试吧：

这里贴上完整代码啦：

js：

  1 /// <reference path="jquery-1.7.1.min.js" />
  2 var DataItem = function () {
  3     this.data = null;
  4     this.el = null;
  5     this.id = '';
  6     this.parentObj = null;
  7     this.idPrefix = '_item_'; //id前缀
  8     this.className = '';
  9     this.event = {};
 10     this.elementEvent = {};
 11 };
 12 
 13 DataItem.prototype.load = function (index, data) {
 14     this.data = data;
 15     var parentEl = this.parentObj.el; //注意此处是parent已经赋值
 16     var parentId = this.parentObj.id
 17     var id = parentId + this.idPrefix + index; //生成唯一id
 18     this.id = id;
 19     //注意啦，这里根据html片段开始生成最终数据了哦
 20     var templateObj = this.templateObj; //此处的膜拜已经过处理
 21     var tmpHtm = '';
 22     $.each(templateObj, function (i, item) {
 23         if (item.field) {
 24             tmpHtm = tmpHtm + item.html + data[item.field]
 25         } else {
 26             tmpHtm = tmpHtm + item.html;
 27         }
 28     });
 29     var el = $(tmpHtm);
 30     //    var el = $('<div></div>'); //形成dom
 31     //为了避免id重复，这里对id必须进行处理，我们同时不允许为元素设置id
 32     if (!el[0]) {
 33         el = $('<div/>');
 34         el.html(tmpHtm);
 35     }
 36     el.attr('id', id);
 37     if (this.className)
 38         this.el.attr("class", this.className);
 39     parentEl.append(el);
 40     this.el = el;
 41     //增加相应事件绑定
 42     this.bindEvent();
 43     this.bindElementEvent();
 44 };
 45 
 46 DataItem.prototype.bindEvent = function () {
 47     var scope = this;
 48     var el = scope.el; //获取当前元素
 49     var data = scope.data; //当前行数据
 50     var events = scope.event;
 51     $.each(events, function (k, v) {
 52         var type = v.eventType;
 53         var func = v.funcName;
 54         var sender = v.sender; //最初调用对象
 55         if (func && typeof func == 'function') {
 56             if (type == 'ready') {
 57                 func.call(scope, params, e, original);
 58             } else {
 59                 el.unbind(type).bind(type, function (e) {
 60                     func.call(scope, data, e, sender);
 61                 });
 62             }
 63         }
 64     });
 65 };
 66 //绑定item里面的某一个标签
 67 DataItem.prototype.bindElementEvent = function () {
 68     var scope = this;
 69     var data = scope.data; //当前行数据
 70     var events = scope.elementEvent;
 71     $.each(events, function (k, v) {
 72         var elementkey = v.elementkey; //元素选择器
 73         var type = v.eventType;
 74         var func = v.funcName;
 75         var sender = v.sender;
 76         var id = '#' + scope.id + ' ' + elementkey;
 77         var el = $(id);
 78         if (func && typeof func == 'function') {
 79             if (type == 'ready') {
 80                 func.call(scope, params, e, original);
 81             } else {
 82                 el.unbind(type).bind(type, function (e) {
 83                     func.call(scope, data, e, sender);
 84                 });
 85             }
 86         }
 87     });
 88 };
 89 
 90 var Datalist = function () {
 91     this.id = new Date().getTime().toString();
 92     this.items = []; //所具有的dataitem的项目
 93     this.dataSource = null; //各位对他熟悉吧
 94     this.container = $("body"); //我们的datalist的容器，没有指定的话就放在body里面
 95     this.style = {}; //可以为其设置样式这里考虑的好像有点多了
 96     this.attribute = {}; //为其设置属性
 97     this.className = '';
 98     this.itemClass = ''; //子元素的class
 99     this.tag = '<div></div>';
100     this.template = ''; //可以在此设置，也可以指定容器id，然后由容器寻找
101 
102     this.itemEvent = {};
103     this.itemElementEvent = {};
104 };
105 
106 //好了，我们第一步需要
107 Datalist.prototype.formatTemplate = function () {
108     var template = this.template;
109     if (template.length < 10) {
110         template = $('#' + template);
111         if (template[0]) template = template.val();
112     }
113     var reg = /\{%[\w]*\%}/;
114     var para = reg.exec(template);
115     var html = template;
116     var templateObj = [];
117     while (para && para.length > 0) {
118         var len = para.index;
119         var tmp = {};
120         tmp.html = html.substr(0, len);
121         tmp.field = para[0].substr(2, para[0].length - 4);
122         templateObj.push(tmp);
123         html = html.substr(len + para[0].length);
124         para = reg.exec(html);
125     }
126     tmp = {};
127     tmp.html = html;
128     templateObj.push(tmp);
129     this.templateObj = templateObj; //注意我们的datalist多了一个东西了哦
130 };
131 
132 Datalist.prototype.bind = function () {
133     //初始化属性等操作，我们暂时忽略之
134     //...............
135     this.initElement(); //初始化元素
136     this.formatTemplate();
137     var scope = this;
138     var itemIndex = 0;
139     var container = this.container;
140     container.append(this.el); //将datalist装入容器
141 
142     $.each(this.dataSource, function (k, v) {
143         var item = new DataItem(); //实例化了一个item了哦
144         item.parentObj = scope;
145         item.templateObj = scope.templateObj;
146         item.event = scope.itemEvent;
147         item.elementEvent = scope.itemElementEvent;
148         item.load(itemIndex, v);
149         scope.items.push(item);
150         itemIndex++;
151     });
152 };
153 
154 Datalist.prototype.initElement = function () {
155     var el = $(this.tag);
156     el.attr('id', this.id);
157     this.el = el;
158     this.initAttribute();
159     this.initStyle();
160 };
161 
162 Datalist.prototype.initAttribute = function () {
163     var scope = this;
164     var element = scope.el;
165     $.each(scope.attribute, function (key, value) {
166         if (typeof (value) == "string")
167             if (value && value.length > 0) {
168                 element.attr(key, value);
169             }
170     });
171 };
172 
173 Datalist.prototype.initStyle = function () {
174     var scope = this;
175     var element = this.el;
176     var style = this.style;
177     $.each(style, function (key, value) {
178         if (value && value.length > 0) {
179             element.css(key, value);
180         }
181     });
182 };
View Code

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .box { margin: 10px; padding: 10px; border: 1px solid gray; display: inline-block; }
    </style>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/Datalist.js" type="text/javascript"></script>
    <script type="text/javascript">
$(document).ready(function () {
    var _url = 'Ajax.aspx?sql=select * from bigType';
    $.getJSON(_url, function (data) {
        var d = new Datalist();
        d.tag = '<ul/>'
        d.template = 'tmp';
        d.dataSource = data;
        d.itemEvent.clickLi = {
            eventType: 'click',
            funcName: function (data, e, sender) {
                var s = '';
            }
        };
        d.itemElementEvent.clickH = {
            elementkey: 'h3',
            eventType: 'click',
            funcName: function (data, e, sender) {
                var s = '';
            }
        };
        d.bind();
    });
});
    </script>
</head>
<body>
    <textarea id="tmp">
<li class="box">
        <h3>
            {%title%}</h3>
 
        <dl>
            <dt>{%id%}</dt>
            <dd>{%title%}
            </dd>
        </dl>
    </li>
</textarea>
</body>
</html>
View Code

好了，我们来检测下今天的学习成果吧。

嵌套的datalist

我们这里搞一个datalist嵌套的实验，并点击每个h3便alert名字：

完整代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         .box { margin: 10px; padding: 10px; border: 1px solid gray; display: inline-block; }
 7     </style>
 8     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
 9     <script src="js/Datalist.js" type="text/javascript"></script>
10     <script type="text/javascript">
11         $(document).ready(function () {
12             var _url = 'Ajax.aspx?sql=select * from bigType';
13             $.getJSON(_url, function (data) {
14                 var d = new Datalist();
15                 d.template = 'datalist';
16                 d.dataSource = data;
17                 d.itemElementEvent.clickH3 = {
18                     elementkey: 'h3',
19                     eventType: 'click',
20                     funcName: function (data, el, e) {
21                         alert(el.html());
22                     }
23                 };
24                 d.itemElementEvent.loadItem = {
25                     elementkey: '.wrapper',
26                     eventType: 'ready',
27                     funcName: function (data, el) {
28                         var bigTypeId = data.id;
29                         var url = 'Ajax.aspx?sql=select * from smallType where bigTypeId=' + bigTypeId;
30                         var scope = this;
31                         $.getJSON(url, function (_data) {
32                             var tmp = new Datalist();
33                             tmp.container = el;
34                             tmp.template = 'dataItem';
35                             tmp.tag = '<ul/>'
36                             tmp.dataSource = _data;
37                             tmp.bind();
38                             var s = '';
39 
40                         });
41                     }
42                 };
43                 d.bind();
44             });
45         });
46     </script>
47 </head>
48 <body>
49     
50 <textarea id="datalist">
51     <div class="box">
52         <h3>
53             {%title%}</h3>
54         <div class="wrapper"></div>
55     </div>
56 </textarea>
57     
58 <textarea id="dataItem">
59     <li class="box">
60         <dl>
61             <dt>{%id%}</dt>
62             <dd>
63                 {%title%}</dd>
64         </dl>
65     </li>
66 </textarea>
67 </body>
68 </html>
  1 /// <reference path="jquery-1.7.1.min.js" />
  2 var DataItem = function () {
  3     this.data = null;
  4     this.el = null;
  5     this.id = '';
  6     this.parentObj = null;
  7     this.idPrefix = '_item_'; //id前缀
  8     this.className = '';
  9     this.event = {};
 10     this.elementEvent = {};
 11 };
 12 
 13 DataItem.prototype.load = function (index, data) {
 14     this.data = data;
 15     var parentEl = this.parentObj.el; //注意此处是parent已经赋值
 16     var parentId = this.parentObj.id
 17     var id = parentId + this.idPrefix + index; //生成唯一id
 18     this.id = id;
 19     //注意啦，这里根据html片段开始生成最终数据了哦
 20     var templateObj = this.templateObj; //此处的膜拜已经过处理
 21     var tmpHtm = '';
 22     $.each(templateObj, function (i, item) {
 23         if (item.field) {
 24             tmpHtm = tmpHtm + item.html + data[item.field]
 25         } else {
 26             tmpHtm = tmpHtm + item.html;
 27         }
 28     });
 29     var el = $(tmpHtm);
 30     //    var el = $('<div></div>'); //形成dom
 31     //为了避免id重复，这里对id必须进行处理，我们同时不允许为元素设置id
 32     if (!el[0]) {
 33         el = $('<div/>');
 34         el.html(tmpHtm);
 35     }
 36     el.attr('id', id);
 37     if (this.className)
 38         this.el.attr("class", this.className);
 39     parentEl.append(el);
 40     this.el = el;
 41     //增加相应事件绑定
 42     this.bindEvent();
 43     this.bindElementEvent();
 44 };
 45 
 46 DataItem.prototype.bindEvent = function () {
 47     var scope = this;
 48     var el = scope.el; //获取当前元素
 49     var data = scope.data; //当前行数据
 50     var events = scope.event;
 51     $.each(events, function (k, v) {
 52         var type = v.eventType;
 53         var func = v.funcName;
 54         var sender = v.sender; //最初调用对象
 55         if (func && typeof func == 'function') {
 56             if (type == 'ready') {
 57                 func.call(scope, data, sender);
 58 
 59             } else {
 60                 el.unbind(type).bind(type, function (e) {
 61                     func.call(scope, data, e, sender);
 62                 });
 63             }
 64         }
 65     });
 66 };
 67 //绑定item里面的某一个标签
 68 DataItem.prototype.bindElementEvent = function () {
 69     var scope = this;
 70     var data = scope.data; //当前行数据
 71     var events = scope.elementEvent;
 72     $.each(events, function (k, v) {
 73         var elementkey = v.elementkey; //元素选择器
 74         var type = v.eventType;
 75         var func = v.funcName;
 76         var sender = v.sender;
 77         var id = '#' + scope.id + ' ' + elementkey;
 78         var el = $(id);
 79         if (func && typeof func == 'function') {
 80             if (type == 'ready') {
 81                 func.call(scope, data, el, sender);
 82             } else {
 83                 el.unbind(type).bind(type, function (e) {
 84                     func.call(scope, data, el, e, sender);
 85                 });
 86             }
 87         }
 88     });
 89 };
 90 
 91 var Datalist = function () {
 92     this.id = new Date().getTime().toString();
 93     this.items = []; //所具有的dataitem的项目
 94     this.dataSource = null; //各位对他熟悉吧
 95     this.container = $("body"); //我们的datalist的容器，没有指定的话就放在body里面
 96     this.style = {}; //可以为其设置样式这里考虑的好像有点多了
 97     this.attribute = {}; //为其设置属性
 98     this.className = '';
 99     this.itemClass = ''; //子元素的class
100     this.tag = '<div></div>';
101     this.template = ''; //可以在此设置，也可以指定容器id，然后由容器寻找
102 
103     this.itemEvent = {};
104     this.itemElementEvent = {};
105 };
106 
107 //好了，我们第一步需要
108 Datalist.prototype.formatTemplate = function () {
109     var template = this.template;
110     if (template.length < 10) {
111         template = $('#' + template);
112         if (template[0]) template = template.val();
113     }
114     var reg = /\{%[\w]*\%}/;
115     var para = reg.exec(template);
116     var html = template;
117     var templateObj = [];
118     while (para && para.length > 0) {
119         var len = para.index;
120         var tmp = {};
121         tmp.html = html.substr(0, len);
122         tmp.field = para[0].substr(2, para[0].length - 4);
123         templateObj.push(tmp);
124         html = html.substr(len + para[0].length);
125         para = reg.exec(html);
126     }
127     tmp = {};
128     tmp.html = html;
129     templateObj.push(tmp);
130     this.templateObj = templateObj; //注意我们的datalist多了一个东西了哦
131 };
132 
133 Datalist.prototype.bind = function () {
134     //初始化属性等操作，我们暂时忽略之
135     //...............
136     this.initElement(); //初始化元素
137     this.formatTemplate();
138     var scope = this;
139     var itemIndex = 0;
140     var container = this.container;
141     container.append(this.el); //将datalist装入容器
142 
143     $.each(this.dataSource, function (k, v) {
144         var item = new DataItem(); //实例化了一个item了哦
145         item.parentObj = scope;
146         item.templateObj = scope.templateObj;
147         item.event = scope.itemEvent;
148         item.elementEvent = scope.itemElementEvent;
149         item.load(itemIndex, v);
150         scope.items.push(item);
151         itemIndex++;
152     });
153 };
154 
155 Datalist.prototype.initElement = function () {
156     var el = $(this.tag);
157     el.attr('id', this.id);
158     this.el = el;
159     this.initAttribute();
160     this.initStyle();
161 };
162 
163 Datalist.prototype.initAttribute = function () {
164     var scope = this;
165     var element = scope.el;
166     $.each(scope.attribute, function (key, value) {
167         if (typeof (value) == "string")
168             if (value && value.length > 0) {
169                 element.attr(key, value);
170             }
171     });
172 };
173 
174 Datalist.prototype.initStyle = function () {
175     var scope = this;
176     var element = this.el;
177     var style = this.style;
178     $.each(style, function (key, value) {
179         if (value && value.length > 0) {
180             element.css(key, value);
181         }
182     });
183 };
js

结语

本来今天想结束的，结果不知不觉时间就没有了，看来的加快点速度啊。。。。

分享到：
| 【前端框架之Bootstrap01】我们一起来看看 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Web前端、C#后端、Mysql数据库交互

    在这个特定的项目中，我们关注的是"Web前端、C#后端、Mysql数据库交互"，这是一个典型的三层架构模型，其中包括用户界面、业务逻辑处理和数据存储。 **Web前端**：主要负责用户的交互体验和界面展示。这里使用了...

    垃圾分类网站 web前端+java后端.zip

    《构建垃圾分类知识企业平台：Web前端与Java后端详解》 在当今环保意识日益增强的社会背景下，垃圾分类成为了人们日常生活中不可或缺的一部分。为了更好地普及垃圾分类知识并提供便捷的查询服务，一款名为“垃圾...

    web大作业--前端，后端，数据库交互

    在“Web大作业--前端，后端，数据库交互”这个项目中，我们主要涉及了三个核心领域：前端开发、后端开发以及数据库管理。这些领域是构建任何Web应用程序的基础，它们协同工作，使得用户能够与网站进行交互并存储、...

    前端开发和后端开发中各种声音文件提示音

    在IT行业中，声音提示音是用户体验中的重要组成部分，特别是在前端和后端开发中。声音文件不仅用于提升用户交互性，还能够提供反馈信息，增强应用的可访问性和可用性。以下是一些关于“前端开发和后端开发中各种声音...

    计算机生产实习：OA后台管理（web前端+Java后端）压缩文件包

    该压缩包文件主要涵盖了一个完整的计算机生产实习项目，即OA（Office Automation）后台管理系统，它由Web前端和Java后端两部分组成。这个项目可能是为了让学生或者开发者实践实际的开发流程，了解前后端协作，以及...

    web前端+后端课件

    Web前端是构建互联网应用的重要组成部分，它主要负责用户在浏览器中看到和交互的部分。HTML（HyperText Markup Language）是基础，用于创建网页结构，通过标签定义各种元素，如标题、段落、链接等。CSS（Cascading ...

    1.1 Web前端、后端和全栈工程师.pdf

    Web前端开发工程师主要负责创建网站中用户可以直接看到并与之互动的部分。这一角色要求开发者具备丰富的技术和工具使用能力。 1. **基本技术掌握**：前端开发工程师必须精通HTML、CSS和JavaScript这三种核心语言。...

    教育培训学校 1.1.5前端+后端

    【教育培训学校 1.1.5前端+后端】是一个针对教育行业的软件系统，它集成了前端用户界面和后端服务器逻辑，旨在提供一个高效、便捷的在线学习和管理平台。这个系统的版本号为1.1.5，意味着它是经过多次迭代和优化的，...

    单页Web应用 JavaScript从前端到后端

    单页Web应用 JavaScript从前端到后端.pdf 单页Web应用 JavaScript从前端到后端.pdf

    全新借贷APP系统源码 独立uni前端 java后端 全开源.zip

    在借贷APP中，uni前端可能包括用户界面的设计、交互逻辑的实现以及与后端的数据通信等功能。uni-app的强大组件库和丰富的API让开发者能轻松创建出美观且用户体验良好的界面，同时提供了丰富的动画效果和页面路由管理...

    基于Python的stable-diffusion-webui前端与后端设计源码

    本项目是一款基于Python的stable-diffusion-webui前端与后端设计源码集合，总计包含306个文件，涵盖211个Python源代码文件、30个JavaScript脚本文件、11个HTML模板文件、10个YAML配置文件、5个PNG图像文件、4个YAML...

    单页Web应用：JavaScript从前端到后端

    资源名称：单页Web应用：JavaScript从前端到后端内容简介：《单页Web应用：Javaｓｃｒｉｐｔ从前端到后端》是设计和构建大规模Javaｓｃｒｉｐｔ单页Web应用(SPA)的宝贵指南，这些应用从前端到后端都使用...

    前端JS加密，后端JAVA解密实例.rar

    总之，这个实例提供了一种实用的方法，通过JavaScript在前端加密数据，Java在后端解密，从而在Web应用中建立一个基本的数据安全链路。理解并实施这种技术对于任何涉及敏感数据传输的Web开发者都是必要的。

    单页web应用 Javascript从前端到后端源码

    在"单页Web应用 Javascript从前端到后端源码"这个主题中，我们主要会探讨以下几个关键知识点： 1. **前端框架与库**：SPA通常基于强大的前端框架或库，如React、Vue.js、Angular等，它们提供了组件化开发、状态管理...

    单页web应用:javascript从前端到后端（源码）

    在"单页web应用:javascript从前端到后端（源码）"这个主题中，你可以通过学习上述知识点，深入理解SPA的全貌，从创建初始HTML页面到构建复杂的前端和后端交互，再到数据库操作和安全性考虑，全方位提升你的...

    javascript前端DES加密，VB.NET、C#后端服务器解密

    在前端，JavaScript可以用于实现DES加密，通常通过内置的Web Cryptography API或者第三方库如CryptoJS。在后端，VB.NET和C#都有内置的加密支持，可以处理DES加密的数据。 在前端进行DES加密的过程通常包括以下步骤...

    h5 web录音并上传后端

    【标题】：“H5 Web录音并上传后端” 在现代Web开发中，H5（HTML5）已经成为构建交互式和富媒体应用的标准。这个“H5 Web录音并上传后端”的示例着重展示了如何利用H5的新特性在浏览器内实现录音功能，并将录制的...

    单页Web应用,JavaScript从前端到后端 高清pdf

    《单页Web应用：JavaScript从前端到后端》是一本由（美）米可夫斯基和（美）鲍威尔合著的专业技术书籍，主要探讨了如何利用JavaScript技术构建高效、流畅的单页面Web应用程序（SPA）。这本书深入浅出地讲解了从设计...

    electronic-vue-spring：带有Web前端和Java后端的自以为是的桌面应用程序

    电子Vue弹簧一个带有Web前端和Java后端的专用桌面应用程序。 在某些情况下，您可能希望将Java后端用于Electron桌面应用程序。 原因可能是您有一些旧的Java代码要重用，或者想要在Cloud和桌面上运行相同的代码。 该...

Magicbox
Global site tag (gtag.js) - Google Analytics