添加备注2015.4.8

最终决定采用相对路径方法,

/img/img.jpg这种“绝对”路径写法必须在网站环境中才能识别,不利于静态页面的查看,故不予采用!

所以采用img/img.jpg或../img/img.jpg这种写法。

至于是同级还是向上一级,看页面代码文件的位置(即:网站运行后生成的页面文件的位置)

在进行前端开发之前,先搞清出项目平台(php、.net等),然后搞清楚页面代码文件(引用你的html文件的代码文件)所处的位置。

如果是最外层的,则将html文件也建在最外层,如果是某个文件夹(如:Browse或page),则html文件也放到一个目录中,这样保证后端开发时,不需要更改资源引用路径。

并且不影响本地查看(双击html文件看效果及通过网站地址(192.168.1.XXX))查看。

网站运行后生成的页面文件的位置:

目前遇到的项目:

php中,虽然模板文件一般在template文件夹中,但是页面代码文件(生成的页面文件)是最外层的文件。

.net中,虽然模板文件在page文件中,但是页面代码文件(生成的页面文件)在browse文件夹中。

看网址的区别:

http://www.xxxx.com/news_show.php?id=18604

http://www.xxxx.com/browse/Info.aspx?mid=17&subid=21

再次重新分析

其实一共只有两种区别。现在给自己的规定:模板文件必须为.html后缀。

一,把模板文件直接放到page等模板文件夹中

这是按开发结构建立的,经后端程序员夹杂了后端代码的.html文件也会出现在此文件夹。

优势,

①svn比对差异方便:选中两个文件,右击svn比较差异即可。可以保证后续开发的更改也能实时的同步。

②项目结构开起来比较整齐。

缺点:想要查看静态效果。需要修改外层动态文件(.php等)中的代码才可以。

二,直接将模板文件放在外层。

这是通用做法,适合页面制作。

优点:直接双击查看效果。

缺点:svn比对差异不方便,需要手动将html拖进或复制进page文件夹中比对。

重新分析

其实如果单考虑页面的制作的话,就两种情形。

1、【通用做法】如下图

然后后续开发时,直接将本文档发送给程序员,让他们去建立文件结构去。

或者通过svn提交,但是这样.php文件写了以后,会变的很麻烦。(.php等文件和.html同处在最外层文件夹中会显得很乱,svn比对也会很麻烦)

2、把html页面预先放到page目录中,如下图

分析:这样资源引用路径就变了,需要向外跳一层,要不然打开的页面都加载不到资源。

解决办法就是,自己先写好对应的index.php、page.php等文件,

然后通过下面代码跳转到page文件夹中,

<?php $ModeUrl="index";require_once('page/'.$ModeUrl.'.html'); ?>

这样后续开发时,因为文件结构已经建立,所以只需要将内层的html复制一份(为了保存初始文档),改后缀名为php即可直接提交svn。

(这里之所以按开发结构放html文件,还不把html后缀名改为php,而是选择在提交svn前复制一份在改,就是为了保存一份自己开发的最终版的html)

(但是一旦开发中,还是以.php为准。.html可以不管,要不然累死了。)

这样做查看自己的效果的时候,除了上面的代码中后缀名改为.html外,还有一个比较快的方法,就是将html文件复制出来,输入http://192.168.1.XX:XX查看效果,看完了如果修改了直接拖进page文件夹替换,没修改直接删除。

之前的:

方法一:将静态代码直接写到page/index_page.php中,通过index.php指向它

(放弃此种做法2015.1.22:静态文件中就是为了不出现动态代码的。这种方法会误导。而且也不利于直接查看。方法二和方法三都是可以直接查双击查看的(方法二需要先将html文件移到外层))

架构:

index.php

page/index.php + page/index_page.php

说明:index.php中写

<?php

$ModeUrl="index_page"

require_once('page/'.$ModeUrl.'.php');

?>

(一) 还没有php静态页时,

①以其中的一个为准,执行修改操作后,全选+复制(page/index.php)→全选+粘贴(page/index_page.php)

②或者只新建一个page/index.php,但是在首次进行带有PHP代码的svn更新前,

记得备份一下page/index.php,重命名成page/index_page.php。

以后开发中,每次更改page/index.php的时候,记得覆盖一下page/index_page.php中的内容。

(二)一旦index.php添加php代码后,就不能全选覆盖粘贴了。只能手动更改两处。

想要查看静态页效果时,需要修改:$ModeUrl="index_page";然后输入:192.168.1.1/index.php

方法二:将静态代码直接写到page/index.html中,通过index.php指向它。

架构:

index.php

page/index.php + page/index.html

index.php中写

<?php

$ModeUrl="index"

require_once('page/'.$ModeUrl.'.html');

?>

说明:同上

和方法一没啥区别,只不过提交svn后,能强制后端重新建一个对应的php文件。或者强制自己建一个对应的.php再提交。

方法一,你提交后可能后端直接就使用index_page.php了也说不定。

还有一个好处,就是保证了你的html模板文件中不会出现后台开发代码。(不知道php中出现了会怎样,目前接触的php网站项目,page(template)目录中都是.php后缀的。但是.net的模板文件夹中都是.html的并且可以夹杂后端开发代码。)

--(add on 2015.1.22)

在有php静态页后,想要查看静态页效果时,

需要修改:require_once('page/'.$ModeUrl.'.html');然后输入:192.168.1.1/index.php

方法三:将静态代码直接写到index.html中(通用做法)

架构:

index.php + index.html

page/index.php

直接在外层建index.html。无需index.php即可浏览。

说明:推荐,实践中,看是否顺手,index.html和page/index.php没在一个文件夹中,后续开发中,手动同步比较麻烦。无法进行svn比较差异。

注:这种方法,在page/index.html→page/index.php时,不需要修改css、js等文件引用路径。

在有php静态页后,想要查看静态页效果时,直接输入192.168.1.1/index.html

点评:和方法二,没有区别,把html文件直接拖进page(template)文件夹。

点评二:这是通用模板页面的制作方法,程序开发直接把外层的html页面移动到一个page或者template文件夹中就能开发了。

方法四:将静态代码直接写到page/index.html中,不通过index.php指向

架构:

index.php

page/index.html + page/index.php

和方法二不同的是,和index.php无关,通过192.168.1.1/page/index.html浏览。

说明:极不推荐,因为page/index.html→page/index.php时,需要修改css、js等文件引用路径(向上一层)。比较麻烦。

在有php静态页后,想要查看静态页效果时,需要输入192.168.1.1/page/index.html

点评:这是按网站程序开发的架构去搞静态页面,实际运用中,page文件夹中的静态页面的资源引用路径都要向上一层。这是个很大的问题。

附录:开源框架使用方法:

将amui解压后的包,直接放到项目的和page同级的目录中,这样通过地址栏就可以访问了。

最后的ps,要先通过iis建立网站,分配端口号,并指向对应文件夹。这样你才能通过http://192.168.1.XX:XXXX访问。

开发中,如何配合后端,保存你的静态html页的更多相关文章

  1. 快速web开发中的前后端框架选型最佳实践

    这个最佳实践是我目前人在做的一个站点,主要功能: oauth登录 发布文章(我称为"片段"),片段可以自定义一些和内容有关的指标,如“文中人物:12”.支持自定义排版.插图.建立相 ...

  2. express:webpack dev-server开发中如何调用后端服务器的接口?

    开发环境:     前端:webpack + vue + vue-resource,基于如下模板创建的开发环境: https://github.com/vuejs-templates/webpack  ...

  3. app开发中,前后端使用AES进行数据加密传输

    问题:当数据调用没有使用https加密时,app被抓包,接口暴露,此时可能导致被刷等安全问题 解决:1. 使用https传输 2. 在进行数据传输时进行手动加密(app端和后端定义统一的加密方式),这 ...

  4. Android开发中Activity状态的保存与恢复

    当置于后台的Activity因内存紧张被系统自动回收的时候,再次启动它的话他会重新调用onCretae()从而丢失了之前置于后台前的状态. 这时候就要重写Activity的两个方法来保存和恢复状态,具 ...

  5. 基于 Sequelize.js + Express.js 开发一套 Web 后端服务器

    什么是 Sequelize 我们知道 Web 应用开发中的 Web 后端开发一般都是 Java.Python.ASP.NET 等语言.十年前,Node.js 的出现使得原本仅限于运行在浏览器中的 Ja ...

  6. SpringBoot学习(七)-->SpringBoot在web开发中的配置

    SpringBoot在web开发中的配置 Web开发的自动配置类:在Maven Dependencies-->spring-boot-1.5.2.RELEASE.jar-->org.spr ...

  7. [转]页游开发中的 Python 组件与模式Presentation Transcript

    转: 页游开发中的 Python 组件与模式Presentation Transcript 1. 页游开发中的 Python 组件与模式 赖勇浩( http://laiyonghao.com ) 20 ...

  8. C#开发中使用配置文件对象简化配置的本地保存

    C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...

  9. 用MVVM模式开发中遇到的零散问题总结(5)——将动态加载的可视元素保存为图片的控件,Binding刷新的时机

    原文:用MVVM模式开发中遇到的零散问题总结(5)--将动态加载的可视元素保存为图片的控件,Binding刷新的时机 在项目开发中经常会遇到这样一种情况,就是需要将用户填写的信息排版到一张表单中,供打 ...

随机推荐

  1. 三:分布式事务一致性协议2pc和3pc

    一:分布式一致性协议--->对于一个分布式系统进行架构设计的过程中,往往会在系统的可用性和数据一致性之间进行反复的权衡,于是就产生了一系列的一致性协议.--->长期探索涌现出一大批经典的一 ...

  2. Oracle 性能相关常用脚本(SQL)

    在缺乏的可视化工具来监控数据库性能的情形下,常用的脚本就派上用场了,下面提供几个关于Oracle性能相关的脚本供大家参考.以下脚本均在Oracle 10g测试通过,Oracle 11g可能要做相应调整 ...

  3. oracle之检查点(Checkpoint)

    检查点是一个数据库事件,它把修改数据从高速缓存写入磁盘,并更新控制文件和数据文件.检查点分为三类:1)局部检查点:单个实例执行数据库所有数据文件的一个检查点操作,属于此实例的全部脏缓存区写入数据文件. ...

  4. mysql 添加索引后 在查询的时候是mysql就自动从索引里面查询了。还是查询的时候有单 独的参数查询索引?

    MYSQL在创建索引后对索引的使用方式分为两种:1 由数据库的查询优化器自动判断是否使用索引:2 用户可在写SQL语句时强制使用索引 下面就两种索引使用方式进行说明第一种,自动使用索引.数据库在收到查 ...

  5. php生成 Arduino 12864 汉字内码

    $ch = "你"; $ch = iconv("UTF-8","GB2312",$ch); $xx= sprintf("%X&qu ...

  6. Android ANR分析及解决方案

    一:什么是ANR ANR:Application Not Responding,即应用无响应. ANR定义:在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框,这个 ...

  7. T-SQL:SQL Server-数据开发(经典)

    ylbtech-SQL Server-Doc-Help:SQL Server-数据开发(经典) SQL Server 数据开发(经典). 1,数据开发(经典) 返回顶部 1.按姓氏笔画排序: Sele ...

  8. OpenERP中的会计凭证

    OpenERP在采购和销售过程中会自动生成一些会计凭证,这些会计凭证反映了物流和资金流在财务上的处理方式. 仓库入库时 借:库存商品 贷:在途物资 收到供应商发票时 借:在途物资 借:进项税额 贷:应 ...

  9. 【剑指offer 面试题34】丑数

    只包含因子2.3.5的数称作丑数. #include <iostream> #include <vector> using namespace std; int GetUgly ...

  10. 企业高并发的成熟解决方案(一)video(笔记&知识点)

    知识点 答案 什么是高可用(HA) 高并发发生在哪两处 app服务器会出现什么问题,有哪些解决方案? 数据库并发有什么要求? hadoop集群的作用 负载均衡的功能有哪些 负载均衡的分类 哪种负载均衡 ...