摘要:

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

环境:

  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. Oracle SQLDeveloper ORA-01017 invalid username/password;logon denied (密码丢失解决方案)

    oracle sys账号用sql developer工具无法登陆 用户名和密码不一致 如果的确是丢失密码的话:在SQL*Plus中执行如下命令:   SQL>conn/as sysdba (操作 ...

  2. Django视图之URLconfs

    对于一个web程序而言,接收和处理用户的请求并返回响应是一个最基本的.也是最重要的功能. Django为这个功能取了一个好听的名字——“视图”. 而具体的代码实现往往是通过一个个函数,Django中也 ...

  3. npm 的指令介绍

    npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...

  4. zuul超时及重试配置1

    eureka: client: register-with-eureka: true serviceUrl: defaultZone: http://localhost:8761/eureka/ se ...

  5. ubuntu下超强的截图工具scrot

    Scrot ,是一个命令行下使用的截图工具,支持全屏.窗口.选取.多设备.缩略图.延时,甚至可以截图完毕之后指定某程序打开截好的图片. 终端安装:     sudo apt-get install s ...

  6. 利用eclipse中的各种功能帮助你理解代码

    @菜单栏下面,工具栏,有一对黄色的箭头按钮,一个指向左边,一个指向右边,快捷键是Alt+Left/Alt+Right 功能是跳转到你刚刚编辑过的地方 这里的Left/Right指的是左右方向键,可以方 ...

  7. ubuntu怎用使用命令搜索软件源中的软件

    转自:http://jingyan.baidu.com/article/6d704a13f6bf1b28da51ca69.html ubuntu中是用apt-get来进行软件安装的,我们首先打开终端来 ...

  8. C++ - 动态申请数组空间

    // 用指针p指向由new动态分配的长度为length*sizeof(int)的内存空间. int * p = new int[length];

  9. 获取本地IP和mac等信息

    1获取mac protected string getHostMacName() { string mac = ""; ManagementClass mc; mc = new M ...

  10. am335x PDK3.0 设置为单网口配置记录

    原来的配置是双网口的,现在要配置为单网口. 一直以为这个配置是在 make menuconfig 里面, 没想到是在设备树里面. 修改设备树 // vim arch/arm/boot/dts/am33 ...