`
liudunxu2
  • 浏览: 31980 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
文章分类
社区版块
存档分类
最新评论

浪潮实习第七天

 
阅读更多

今天接触了cms的开源工具,主要有drupal和Joomla,为了以后要做的在线文件管理,还看了extplorer和ajaxplorer这两个用php和extjs写的在线文件开源管理器,唉,外国人写的代码不是一般人能看得懂的哭,然后又重新配置了一下wordpress,充分体验了一把它的插件功能,然后就明白它能这么流行的原因了。为了以后要做的微薄在线编辑器,又下载了ckeditor,研究了一下它的用法。果然很强大。一下就要接触这么多东西,我觉得都吃不消了。然后从今天下午开始我就决定以后要做用word笔记。这一下午还是记了不少东西的。今天一天师傅都没给我安排任务,然后再晚上吃饭的时候对我说,我已经用phpwind搭建起了微薄的平台,我听后内牛满面,之前还以为要自己开发呢。。。抓狂,晚上下载了phpwind安装配置了一小下下,果然很好很强大。phpwind,我会记你一辈子的。下面就是我记得word笔记之一:

webdav

WebDAV (Web-based Distributed Authoring and Versioning) 一种基于 HTTP 1.1协议的通信协议.它扩展了HTTP 1.1,在GET、POST、HEAD等几个HTTP标准方法以外添加了一些新的方法,使应用程序可直接对Web Server直接读写,并支持写文件锁定(Locking)及解锁(Unlock),还可以支持文件的版本控制。

对于需要大量发布内容的用户而言,应用WebDav可以降低对CMS系统的依赖,而且能够更自由的进行创作。上传、下载变得轻松自如。

Webdav的优势

 · 改写保护。HTTP 1.1 无法确保客户端可以保护资源,并且可以在其他客户端同时编辑它们的情况下进行更改。 使用 WebDAV,可以通过多种方式来锁定资源,以便让其他客户端知道您对所讨论的资源感兴趣,或者防止其他客户端访问该资源。

  ·资源管理。HTTP 只能直接访问单个资源。 WebDAV 提供一种更有效地组织数据的方法。 WebDAV 引入了可包含资源 的集合(类似于文件系统文件夹)概念。 通过 WebDAV 进行的资源管理包括如下功能:创建、移动、复制和删除集合,以及集合中的资源或文件。

  ·文档属性。不同类型的数据具有唯一的属性,这有助于描述数据。 例如,在电子邮件中,这些属性可能是发件人的姓名和接收邮件的时间。 在协作文档中,这些属性可能是文档原始作者的姓名和最后一个编辑者的姓名。 因为人们使用的文档类型各不相同,所以可能的属性类型列表也变得无限大。 XML 是 WebDAV 所需的一种可扩展通讯工具。

Extjs

ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架

  功能丰富,无人能出其右。

  无论是界面之美,还是功能之强,ext的表格控件都高居榜首。

  单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。

  自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。

  再加上可编辑grid,添加新行,删除一或多行,提示多行数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。

其实从ext3开始就支持各种方式的统计,且有控件支持excel导出。

。extjs的使用格式像jason。

使用ExtJS时需要解决如何服务端通信的问题。由于ExtJS只是一个客户端的框架,和服务端技术没有关系,也就没有相应的服务端的适配层,因此客户端如果要用ExtJS,则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信:

· Ext.Ajax.request做普通的异步请求,服务端可以根据实际情况返回JSON形式数据或者HTML片段;

· Ext.tree.TreeLoader加载树形结构,服务端必须返回JSON形式数据,而且要符合Ext.tree.TreeNode的配置要求,否则自己做转换;

· Ext.data.Store及其派生类加载表格形式的数据,服务端可以根据实际情况返回JSON形式数据或者XML形式数据,如果没有特殊要求,推荐返回JSON格式的数据;

· Ext.Element.update局部更新,这个方法最总还是要调用Ext.Ajax.request方法,之所以把它单独列出来,是因为这种方式比较容易被忽视,但是在某些情况下还是挺有用的,比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新,如果使用这种方式,那么服务端只能相应的返回HTML片段了;

常见用法

· 查询ID为container的DIV下所有的checkbox,可以使用:Ext.fly(‘container’).select(‘input[type=checkbox]’);

· 在ID为container的DIV内创建一个按钮,可以使用:Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});

· 为ID为container的DIV的click事件注册处理函数,使用:Ext.fly(‘container’).on(‘click’, handlerFn, scope);

由ID获取一个Ext Element 的相应代码如下:

Ext.onReady(function() {
 var myDiv = Ext.get('myDiv');
});

获取多个DOM的节点

通常情况下,想获取多个DOM的节点,难以依靠ID的方式来获取。有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这种情况下,你就会不用ID来作为获取元素的依据,可能会用属性(attribute)或CSS Classname代替。基于以上的原因,Ext引入了一个异常强大的Dom Selector库,叫做DomQuery。

DomQuery可作为单独的库使用,但常用于Ext,你可以在上下文环境中(Context)获取多个元素,然后通过Element接口调用。令人欣喜的是,Element对象本身便有Element.select的方法来实现查询,即内部调用DomQuery选取元素。这个简单的例子中,ExtStart.htm包含若干段落(<p>标签),没有一个是有ID的,而你想轻松地通过一次操作马上获取每一段,全体执行它们的动作,可以这样做:

// 每段高亮显示
Ext.select('p').highlight();

Element.select在这个例子中的方便性显露无疑。它返回一个复合元素,能通过元素接口(Element interface)访问每个元素。这样做的好处是可不用循环和不分别访问每一个元素。

DomQuery的选取参数可以是一段较长的数组,其中包括W3C CSS3 Dom选取器、基本XPatch、HTML属性和更多,请参阅DomQuery API文档以了解这功能强大的库个中细节。

响应事件

Ext.onReady(function() {
 Ext.get('myButton').on('click', function(){
 alert("你单击了按钮");
 });
});

一般来说,Element.select也能做同样的事情,即作用在获取一组元素上。下一例中,演示了页面中的某一段落被单击后,便有弹出窗口:

Ext.onReady(function() {
 Ext.select('p').on('click', function() {
 alert("你单击了一段落;");
 });
});

这两个例子中,事件处理的function均是简单几句,没有函数的名称,这种类型函数称为“匿名函数(anonymous function)”,即是没有名的的函数。你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用。下一例等效于上一例:

Ext.onReady(function() {
 var paragraphClicked = function() {
 alert("你单击了一段落;");
 }
 Ext.select('p').on('click', paragraphClicked);
});

MessageBox

比起略为沉闷的“HelloWolrd”消息窗口,我们做少许变化,前面我们写的代码是,单击某个段落便会高亮显示,现在是单击段落,在消息窗口中显示段落内容出来。
在上面的paragraphClicked的function中,将这行代码:

Ext.get(e.target).highlight();

替换为:

var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
 title: 'Paragraph Clicked',
 msg: paragraph.dom.innerHTML,
 width:400,
 buttons: Ext.MessageBox.OK,
 animEl: paragraph
});

Grid

Grid是Ext中人们最想先睹为快的和最为流行Widgets之一。好,让我们看看怎么轻松地创建一个Grid并运行。用下列代码替换ExtStart.js中全部语句:

Ext.onReady(function() {
 var myData = [
 ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
 ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
 ['Google',71.72,0.02,0.03,'10/1 12:00am'],
 ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
 ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
 ];

 var myReader = new Ext.data.ArrayReader({}, [
 {name: 'company'},
 {name: 'price', type: 'float'},
 {name: 'change', type: 'float'},
 {name: 'pctChange', type: 'float'},
 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
 ]);

 var grid = new Ext.grid.GridPanel({
 store: new Ext.data.Store({
 data: myData,
 reader: myReader
 }),
 columns: [
 {header: "Company", width: 120, sortable: true, dataIndex: 'company'},
 {header: "Price", width: 90, sortable: true, dataIndex: 'price'},
 {header: "Change", width: 90, sortable: true, dataIndex: 'change'},
 {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
 {header: "Last Updated", width: 120, sortable: true, 
 renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
 dataIndex: 'lastChange'}
 ],
 viewConfig: {
 forceFit: true
 },
 renderTo: 'content',
 title: 'My First Grid',
 width: 500,
 frame: true
 });

 grid.getSelectionModel().selectFirstRow();
});

这看上去很复杂,但实际上加起来,只有四行代码(不包含测试数据的代码)。

§ 第一行创建数组并作为数据源。实际案例中,你很可能从数据库、或者WebService那里得到动态的数据。

§ 接着,我们创建并加载data store, data store将会告诉Ext的底层库接手处理和格式化这些数据。不同的数据类型须在类Reader中指明。

§ 接着,我们创建一个Grid的组件,传入各种的配置值,有:

§ 新的data store, 配置好测试数据和reader

§ 列模型column model定义了columns的配置

§ 其他的选择指定了Grid所需的功能

§ 最后,通过SelectionModel告诉Grid高亮显示第一行。

不是太困难吧?如果一切顺利,完成之后你会看到像这样的:

使用Ajax

在弄好一些页面后,你已经懂得在页面和脚本之间的交互(interact)原理。接下来,你应该掌握的是,怎样与远程服务器(remote server)交换数据,常见的是从数据库加载数据(load)或是保存数据(save)到数据库中。通过JavaScript异步无刷新交换数据的这种方式,就是所谓的Ajax。Ext内建卓越的Ajax支持,例如,一个普遍的用户操作就是,异步发送一些东西到服务器,然后,UI元素根据回应(Response)作出更新。这是一个包含text input的表单,一个div用于显示消息(注意,你可以在ExtStart.html中加入下列代码,但这必须要访问服务器):

<div id="msg"></div>
<div>
 Name: <input type="text" id="name" />
 <input type="button" id="okButton" value="OK" />
</div>
<div id="msg"></div>

接着,我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js中(用下面的代码覆盖):

Ext.onReady(function(){
 Ext.get('okButton').on('click', function(){
 var msg = Ext.get('msg');
 msg.load({
 url: 'ajax-example.php', // <-- 按实际改动
 params: 'name=' + Ext.get('name').dom.value,
 text: 'Updating...'
 });
 msg.show();
 });
});

WordPress

WordPress是一个注重美学、易用性和网络标准的个人信息发布平台。WordPress是一种使用PHP语言开发的博客平台,用户可以用WordPress来架设个人博客,也可当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,但其价值无法用金钱来衡量。

插件安装方法是以管理员身份登陆,然后选择插件栏目,然后选择不同的插件进行安装

开源js编辑框fckeditor

1.This sample shows how to automatically replace all<textarea>elements of a given class with a CKEditor instance.

To replace a<textarea>element, simply assign it theckeditorclass, as in the code below:

<textarea class="ckeditor" name="editor1"></textarea>

Note that other<textarea>attributes (likeidorname) need to be adjusted to your document.

2. This sample shows how to automatically replace all<textarea>elements with a CKEditor instance by using a JavaScript call.

To replace a<textarea>element, place the following call at any point after the<textarea>element or inside a<script>element located in the<head>section of the page, in awindow.onloadevent handler:

CKEDITOR.replace( 'textarea_id' );

Note thattextarea_idin the code above is theidattribute of the<textarea>element to be replaced.

3.动态生成编辑框

var editor, html = '';

function createEditor()

{

if ( editor )

return;

// Create a new editor inside the <div id="editor">, setting its value to html

var config = {};

editor = CKEDITOR.appendTo( 'editor', config, html );

}

function removeEditor()

{

if ( !editor )

return;

// Retrieve the editor contents. In an Ajax application, this data would be

// sent to the server or used in any other way.

document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();

document.getElementById( 'contents' ).style.display = '';

// Destroy the editor.

editor.destroy();

editor = null;

}

开源php文件管理器extplorer

    1. 现在还不清楚如何与数据库结合。用户资料保存在config/.htaccess文件下
    2. 它是由extjs+php编写的

    开源CMS系统Joomla,drupal(对中文支持不太好)

    Jquery

    Query is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.jQuery is designed to change the way that you write JavaScript.

    Hello jQuery

    在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

    $(document).ready(function() {
     // do stuff when DOM is ready
    });

    放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.

    $(document).ready(function() {
     $("a").click(function() {
     alert("Hello world!");
     });
    });

    这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。

    (译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)

    让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里,它选择所有的a标签(译者Keel注:即<a></a>),$号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法,它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.

    Jquery更像面向过程,它用$代表全局,而extjs更像面向对象,它有专门的类Ext(另解,在jquery中,$貌似就为Jquery)

    上面这个代码选择了所有的"form"元素,并在其中的第一个上call了一个reset()。如果你有一个以上的form,你可以这样做:

    $(document).ready(function() {
     // use this to reset several forms at once
     $("#reset").click(function() {
     $("form").each(function() {
     this.reset();
     });
     });
    });

    使用ajax,关键函数($.get,$.post)

    Index.html

    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
    <html>
    <head>
    <title>HelloJq</title>
    <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
    <scriptlanguage="javascript"src="js/jquery-1.3.2.js"></script>
    <scriptlanguage="javascript">
    functionGetUserNameValues(strValue)
    {
    $.get("ajax.php",{value:strValue},function(text){
    alert(text);
    });
    }
    </script>
    </head>
    <body>
    <formname="form"method="POST">
    <divstyle="text-align:center;margin-top:20%;">
    <table>
    <tbody>
    <tr>
    <td><inputtype="text"id="txtName"name="txtName"value=""onblur="returnGetUserNameValues(this.value);"/></td>
    </tr>
    </tbody>
    </table>
    </div>
    </form>
    </body>
    </html>

    ajax.php

    <?php
    echo$_GET['value'];
    ?>

    JSON,轻量级数据交换格式

    Json是较为理想的数据交换语言

    1. functionshowJSON() {
    2. varuser =
    3. {
    4. "username":"andy",
    5. "age":20,
    6. "info": {"tel":"123456","cellphone":"98765"},
    7. "address":
    8. [
    9. {"city":"beijing","postcode":"222333"},
    10. {"city":"newyork","postcode":"555666"}
    11. ]
    12. }
    13. alert(user.username);
    14. alert(user.age);
    15. alert(user.info.cellphone);
    16. alert(user.address[0].city);
    17. alert(user.address[0].postcode);
    18. }

    JSON提供了json.js包,下载http://www.json.org/json.js后,将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。

    js 代码

    1. functionshowCar() {
    2. varcarr =newCar("Dodge","Coronet R/T", 1968,"yellow");
    3. alert(carr.toJSONString());
    4. }
    5. functionCar(make, model, year, color) {
    6. this.make = make;
    7. this.model = model;
    8. this.year = year;
    9. this.color = color;
    10. }

    可以使用eval来转换JSON字符到Object

    js 代码

    1. functionmyEval() {
    2. varstr = '{"name":"Violet","occupation":"character"}';
    3. varobj = eval('(' + str + ')');
    4. alert(obj.toJSONString());
    5. }

    或者使用parseJSON()方法

    js 代码

    1. functionmyEval() {
    2. varstr = '{"name":"Violet","occupation":"character"}';
    3. varobj = str.parseJSON();
    4. alert(obj.toJSONString());
    5. }

    当json格式已知时,可以用服务器端脚本语言填充json的属性。

    Php有个功能强大的工具PHPWind,这个工具可以快速的建立一个类似人人网的博客

    分享到:
    评论

    相关推荐

      浪潮认识实习报告.pdf

      浪潮认识实习报告.pdf

      浪潮齐鲁软件实习心得体会.doc

      【标题】:“浪潮齐鲁软件实习心得体会.doc” 【描述】:“浪潮齐鲁软件实习心得体会.doc”讲述了作者在浪潮集团软件开发中心的实习经历和感悟。 【标签】:“浪潮齐鲁软件实习心得体会” 【部分内容】:该文件...

      [详细完整版]浪潮实习报告.doc

      【浪潮电子信息有限公司实习报告】 实习在浪潮电子信息有限公司,我有机会深入了解这家中国领先的云计算整体解决方案供应商。浪潮集团在IaaS、PaaS、SaaS三个层面提供整体解决方案,利用高端服务器、海量存储、云...

      浪潮优派Python实习学习记录

      浪潮优派Python实习学习记录 本资源摘要信息主要记录了Python语言的基础知识,包括Python的起源、优缺点、版本选择、安装测试环境、第一个Python程序、开发工具、开发环境、包管理工具、变量和常量定义等。 知识点...

      浪潮齐鲁软件实习收获.docx

      标题中的“浪潮齐鲁软件实习收获”表明了作者在浪潮集团下属的齐鲁软件部门实习的经历,主要分享了他在实习过程中的体验、学习成果以及对软件行业的理解。描述中提到的文件内容证实了这一点,作者提到了他在实习期间...

      浪潮天梭象棋软件 很强很强外壳使用棋天大圣

      【标题】"浪潮天梭象棋软件 很强很强外壳使用棋天大圣" 提供了几个关键信息。首先,这是关于一款象棋软件,名为“浪潮天梭”,它具有强大的功能,暗示其在象棋游戏领域有较高的智能水平。其次,"外壳使用棋天大圣...

      浪潮集团笔试往年题目(软件研发和通讯)

      浪潮集团是中国知名的IT企业,其在软件研发和通信领域有着深厚的积累。对于有意加入浪潮的求职者来说,了解并掌握相关笔试题目中的知识点是至关重要的。以下是对标题、描述及标签所涉及知识点的详细说明: 1. **...

      浪潮全站点序列号

      标题与描述中的“浪潮全站点序列号”指向的是在IT行业尤其是软件许可、硬件设备管理领域内一个重要的概念——序列号或称为许可证密钥。序列号是产品制造商为确保其软件或硬件产品得到合法使用而设定的一串独特的字符...

      浪潮raid驱动.zip

      【描述】:“浪潮RAID驱动.zip浪潮RAID驱动.zip浪潮RAID驱动.zip浪潮RAID驱动.zip浪潮RAID驱动.zip浪潮RAID驱动.zip” 描述中的重复信息强调了“浪潮RAID驱动”的重要性,表明这是一个多次提及的关键组件。通常,....

      浪潮存储操作(1) word 文档

      浪潮存储操作指南 浪潮存储操作指南是指使用浪潮存储系统进行数据存储和管理的操作指南。本指南涵盖了浪潮存储系统的安装、配置、管理和维护等方面的知识点。 一、浪潮存储系统的安装 浪潮存储系统的安装包括安装...

      浪潮服务器RAID 卡驱动

      【标题】:“浪潮服务器RAID 卡驱动” 在IT领域,服务器硬件的稳定性和可靠性是至关重要的,其中RAID(Redundant Array of Independent Disks,独立磁盘冗余阵列)技术扮演着核心角色。浪潮服务器作为国内知名的...

      浪潮CE3000F-BIOS

      BIOS是计算机启动时加载的第一段软件,负责初始化硬件设备、提供操作系统与硬件之间的接口,并执行开机自检(POST)等关键任务。"F"可能是该型号的一个特定变种或版本。 【描述解析】 描述中提到“对应两种版本号”...

      浪潮服务器使用手册

      手册中的文档版本为V1.0,发布日期为2014年12月25日,这是第一次正式发行。手册版本和日期信息对用户了解产品的最新状态至关重要。 6. 产品维护和建议 在对服务器进行维护和设置时,用户应当遵循手册中的指导,以...

      浪潮NP120D sata驱动

      【标题】:“浪潮NP120D SATA驱动” 在IT领域,驱动程序是计算机硬件与操作系统之间的重要桥梁,确保系统能够正确识别并充分利用硬件设备的功能。"浪潮NP120D SATA驱动"指的是专为浪潮NP120D型号服务器设计的Serial...

      浪潮存储用户手册

      7. 系统状态:查看当前系统运行的状态和统计数据。 8. 系统吞吐量:分析存储系统在一段时间内处理数据的速率。 9. 系统电源管理:对存储系统的电源进行管理,包括电源状态监控、电源故障切换等。 **超级终端** 1...

      浪潮财务软件控件注册工具

      这个工具特别适用于Windows 7及以上版本的操作系统,并且需要以管理员权限运行,以确保能够正确地执行控件的注册过程。 【描述】在描述中提到,这款工具主要用于处理浪潮财务软件在运行时可能出现的控件相关问题。...

      浪潮ipps考题整理(2023)

      - **答案**:根据题目描述,第七代交换机新增的功能包括流量优化器、拥塞通知、远距离复制以及多路径管理。 #### 十二、浪潮备份一体机DP2000G6支持的CPU平台 **知识点:** - **备份一体机**:集成了备份软件和...

      浪潮存储添加硬盘步骤

      在IT行业中,浪潮存储系统是企业级数据存储解决方案的重要组成部分,尤其在大数据和云计算时代,扩展存储容量成为了日常运维中的常见需求。当浪潮存储设备的硬盘空间不足时,需要进行硬盘添加操作以满足业务增长的...

      浪潮英信服务器NF5270M4用户手册

      根据所提供的文件内容,可以看出其为《浪潮英信服务器NF5270M4用户手册》的一部分。这份手册主要面向浪潮英信NF5270M4服务器的用户,提供了服务器的技术特性、系统的设置、安装等相关信息,以便用户能够详细地了解和...

    Global site tag (gtag.js) - Google Analytics