摘要:

  随着用户体验的重要性和项目的富客户端化,越来越多的公司将前端与后端分离开来,这时候前端就需要有自己的服务环境。本文将介绍我在开发中所用到的前端服务环境的搭建。

环境:

  OS: win7 64bit

  Server: Apache

  html文件: *.shterm

  模板:PHP

第一步安装:

  下载并安装XAMPP,下载地址:

    https://www.apachefriends.org/zh_cn/index.html

  或者:

    http://pan.baidu.com/s/1c0B0lKs

下面是XAMPP的一些文件,文件路劲前加上你安装的路劲,比如你安装在F盘,则下面的都加上F:\

 Apache 基本配置:xampp\apache\conf\httpd.conf
Apache SSL:xampp\apache\conf\ssl.conf
Apache Perl(仅限插件):xampp\apache\conf\perl.conf
Apache Tomcat(仅限插件):xampp\apache\conf\java.conf
Apache Python(仅限插件):xampp\apache\conf\python.conf
PHP:xampp\php\php.ini
MySQL:xampp\mysql\bin\my.ini
phpMyAdmin:xampp\phpMyAdmin\config.inc.php
FileZilla FTP 服务器:xampp\FileZillaFTP\FileZilla Server.xml
Mercury 邮件服务器基本配置:xampp\MercuryMail\MERCURY.ini
Sendmail:xampp\sendmail\sendmail.ini 

注意:安装路径最好不要放在系统盘

第二步修改配置文件:

打开配置Apache基本配置文件,查找<Directory />

 将下边的代码块

 <Directory />

 Options FollowSymLinks

 AllowOverride None

 Order deny,allow

 Deny from all

 </Directory>

 修改为:

 <Directory />

 Options MultiViews -Indexes Includes FollowSymLinks

 AllowOverride None

 Order deny,allow

 #Deny from all

 </Directory>

 注意,应该注释掉Deny from all

增加访问端口,确保端口没有被占用

 Listen 80
listen 8080
listen 8081

修改项目文件路径

 DocumentRoot "F:/xampp/htdocs/www" #这里改成你项目的路径

如果增加了端口还需要给端口配置访问路径

 NameVirtualHost localhost:8080
<VirtualHost localhost:8080>
## ServerAdminwebmaster@dummy-host.example.com
DocumentRoot "F:/xampp/www"
ServerName localhost:8080
## ErrorLog logs/dummy-host.example.com-error_log
## CustomLog logs/dummy-host.example.com-access_log common
</VirtualHost>

第三部启动XAMPP:

如果您的机器上边apache不能正常启动,请运行 f:\xampp\xampp\apache_start.bat 来查看详细的错误信息

如果您的机器上边mysql不能正常启动,请运行 f:\xampp\xampp\mysql_start.bat 来查看详细的错误信息

如果您的机器已经安装了IIS,那么apache会报错,443 ssl端口会IIS占用,请修改F:\xampp\xampp\apache\conf\extra\httpd-ssl.conf 端口号解决 例如:将所有的 443 都修改为 453 ,这种错误对于80端口也一样可能存在,如果是80端口,请修改 f:\xampp\xampp\apache\conf\httpd.conf 将所有的80修改为8081

如果没有任何错误,你可以打开浏览器输入localhost:端口

总结:

  完成上面的工作之后我们就可以按照交互稿来进行前端开发

前端架构一之XAMPP的更多相关文章

  1. 基于AngularJS的企业软件前端架构[转载]

    这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...

  2. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

  3. 【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践

    说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sy ...

  4. 我的前端架构之二--统一扩展Js方法

    我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) i ...

  5. 用“MEAN”技术栈开发web应用(一)AngularJs前端架构

    前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技 ...

  6. Turtle Online:致力于打造超接地气的PC前端架构,组件+API,快速搭建前端开发

    架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……, ...

  7. [置顶] HTML语义和前端架构

    关于语义学 语义学是研究符号和意义之间的关系以及它们表示的内容.在语言学中,则主要是研究符号(例如单词,短语或者语音)在语言中所表达的意义.而在前端开发时,语义学则更多的关注HTML元素,属性以及它的 ...

  8. web富客户端应用下,前端架构、系列(二)。

    序 我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋. 不过毕竟也是思想的结晶. 从这一篇文章开始,我将陆续完善这一个前端架构.. 重新构思 上一篇我们把前端架构分为3个模 ...

  9. web富客户端应用下,前端架构问题。

    前言: 以前的工作大部分都是,前端做页面 稍微写几个js效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前 ...

随机推荐

  1. 输入法环境变量XMODIFIERS/GTK_IM_MODULE

    我们配置输入法时,都是习惯性的在输入法启动前导出环境变量: export XMODIFIERS=@im=SCIM export GTK_IM_MODULE=SCIM 他们有何用意呢?? 我们常用的输入 ...

  2. 【Linux】VMware中为CentOS设置静态IP(非动态获取IP)

    在VMware上安装好Linux后,默认设置的动态IP,每次启动的IP都不同,远程连接挺费劲的. 于是,需要设置静态的IP,至少我从远程工具连接上去方便多了.另外,为了安装一些软件,也需要访问互联网. ...

  3. maven install 跳过test方法

    方式1:用命令带上参数 mvn install -Dmaven.test.skip=true 方式2:在pom.xml里面配置 <build> <defaultGoal>com ...

  4. 【Java】包装类总结

    Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...

  5. dp之多维背包hdu4501

    思路:将v1,v2,k都当作一种体积,每种物品只能取一次,求max....... 反思:以前写背包,由于只有一个体积,所以习惯性的在for中,就所取的最小值限制,而在这次,因为这里导致wa了,具体是因 ...

  6. idea中maven依赖不能下载的解决办法

    使用maven 命令 maven install 在项目所在文件夹 执行.

  7. json demo

    package my.bigdata.movieTask.action; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.J ...

  8. RP2833 FPGA对应串口标识

    U41 FPGA-TXD0         /dev/ruart0        FPGA-RXD0      U40 FPGA-TXD1         /dev/ruart1 FPGA-RXD1

  9. HTML——动画效果:图片循环横向播放

    一.html <!DOCTYPE HTML> <html> <head> <title>Home</title> <link href ...

  10. 多线程中的synchronized小结

    1.synchronized是Java中的关键字,是一种同步锁.它修饰的对象有以下几种: 1. 修饰一个代码块,被修饰的代码块称为同步语句块,其作用的范围是大括号{}括起来的代码,作用的对象是调用这个 ...