11-Ajax（一）网络相关与软件安装

两种架构

• 无论是C/S，还是B/S都需要联网，所以这里不讨论不需要互联网的单机软件。

C/S架构：

• 是Client/Server这两个单词的首字母指的是客户端/服务器架构的意思，很多常见的软件都是这种架构；

• 解释：对于C/S架构，最为常见的例子就是网络游戏，比如王者农药、WOW，如果不联网无法使用，你在软件内所做的所有操作通过互联网能够传递到其他的的玩家身上；

• 客户端：手机App/电脑上的应用程序；

• 优点：

• 性能较高：可以将一部分的计算工作放在客户端上，这样服务器只需要处理数据即可；

• 界面酷炫：客户端可以使用更多系统提供的效果，做出更为炫目的效果。

• 缺点：

• 更新软件：如果推出了新版本,不更新客户端可能会无法正常使用；

• 重量级，必须要安装App（客户端）。

浏览器/服务器架构（B/S）:

• 是Browser/Server的这两个单词的首字母，指的是浏览器/服务器，是WEB兴起之后的一种架构；

• 解释：现在所有的网站都是B/S架构，较为常见的例子有百度,知乎，网易云音乐Web等等,所有只需要通过浏览器即可使用；

• 优点：

• 更新简洁：如果需要更新内容了，对开发人员而言需要更改服务器的内容，但是对用户而言只需要刷新浏览器即可；

• 轻量级，只要能够使用浏览器即可登录使用；

• 缺点：

• 性能较低：相比于客户端应用性能较低，很酷炫的界面现阶段还实现不了，但是随着硬件性能的提升，这个差距在缩小；

• 浏览器兼容：处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一，移动设备兼容性较好，ie6已经越来越少人用了。

web开发概述(了解)

网络分类

• 设置互联网访问：

• 在互联网上的计算器（服务器）；

• 域名。

• 设置局域网访问：

• 常见局域网：

  • 多媒体教室；
  • 公司内部网络；
  • 中国其实也可以认为是一个大的局域网;

• 让你的电脑成为服务器：能够提供web服务就成为服务器（只需要安装服务器软件即可）；

• 常见的web服务器软件（很多种）：

  • Apache（免费、开源，一般是PHP程序员使用）；
  • IIS（微软的，一般是.net程序员使用）；
  • Tomcat（一般由Java程序员使用）；
  • 等等。

• 服务器端开发的语言有Java、.net、node.js、Python、go、PHP（语法跟js类似）、ASP、JSP、Ruby、Erland等，无论使用那种后台语言，最终返回给用户的都是html、css3、js；web服务端开发生成的html、css3、js是动态生成的。

WampSever||MampSever

• MampSever
  • m：Mac；
  • a：Apache：
    • 修改网站中的内容
  • m：MySQL；
  • p：PHP；
• WampSever：
  • w:windows;
  • a：Apache：
    • 修改网站中的内容
  • m：MySQL；
  • p：PHP。

数据库:

• 按照数据结构来组织、存储和管理数据的仓库，软件开发行业一般指的是数据库软件，常见的有：Oracle、MySQL、MSSQL等。

• 特点:

• 数据共享：多用户同时访问数据的稳定性；

• 故障恢复：数据库软件提供了一套的方法，可以用来发现错误并且修复错误；

• 减少数据冗余：由于大家都可以使用同一套数据，没有必要重复创建。

• DBA数据库管理员:

• 从事管理和维护数据库管理系统(DBMS)的相关工作人员的统称，他的工作目的是：保证数据库的稳定性、安全性、完整性和高性能。

HTTP服务器搭建

AMP

• A：Apache；M：MySQL；P：PHP。
• Apache是世界排名第一的服务器软件，特点是简单、速度快、性能稳定；
• MySQL得益于它体积小、速度快、使用成本低，而且是开源哦，所以很多网站都选用MySql作为他们的数据库。
• PHP展开后PHP: Hypertext Preprocessor，中文名：超文本预处理器，直接将代码嵌入HTML 文档中执行，简单易学，容易上手。

AMP集成环境

• 刚刚已经解释了这几个单词的意思，其中AMP是三个独立的软件，但是对于初学者而言分别安装以及配置需要掌握一定的软件知识，所以就有了很多AMP集成环境帮助我们简化安装。

• WAMP：在windows平台下如果想要一步到位安装好这些软件，可以使用wamp，其中w的意思为windows，指的是windows操作系统，软件的官网为:http://www.wampserver.com/en/

• XAMPP: 不同于wamp针对于windows,XAMPP可以安装在Linux,Windows,MAC OS X,Solaris这些操作系统上面。

WAMP安装,配置,注意点

• 这里选用wamp作为学习环境,接下来演示如何安装并设置wamp；

• WAMP安装：

• 双击下载的安装包；

• 点击Next；

• 选择安装路径，注意：不要使用中文路径；

• 如果担心安装完成后找不到wamp可以将两个方框全部勾选，点击next继续安装；

• 点击install开始安装；

• 安装完毕以后点击finish即可启动wamp；

• 启动完成能够在任务栏的右下角看到开启状态即表示安装成功。

测试访问

• 打开浏览器输入127.0.0.1查看显示的内容，如果是第一次安装，默认显示的应该是Apache的相关文件；
• 127.0.0.1含义：127.0.0.1是回送地址，指本机地址，一般用来测试使用，如果想要让其他电脑也能够访问,需要进行一些配置。

WAMP图标橙色解决方案

• 如果没有使用过自己的电脑配置服务器那么WAMP默认应该为绿色的图标，那么如果WAMP启动,显示的是橙色图标怎么办呢？
• 检查是否开启了服务：保证Apache、MySQL的服务都是启动状态即可；
• 检查是否开启了微软自带的IIS服务：首先打开控制面板，保证动态图最后选中的Internet Information Services没有被勾选即可；
• 修改端口号：在httpd.conf中搜索 listen，大概在46行的位置:

    Listen 80
    改为 listen 8080
    注这里可以改为任意的端口,修改完毕之后, 保存并重启wamp
    访问时在ip地址之后添加:8080 端口号即可
    如 192.168.18.125:8080

• 终极解决:卸载-删除文件夹(wamp安装的文件夹)-重装。

配置局域网访问

• 安装好了WAMP之后就能够通过自己的浏览器输入127.0.0.1，如果想要让同一局域网中的其他电脑也能够访问，需要进行如下配置:

• 关闭防火墙：首先打开控制面板；

• 修改httpd.conf文件：因为Apache的配置默认不允许外部访问，我们需要修改配置；找到D:\wamp\bin\apache\Apache2.2.21\conf文件，使用文本编辑工具打开，通过搜索功能找到onlineoffline tag - don't remove这句话将在234行附近的 Allow from 127.0.0.1 替换为 Allow from all(有两处的deny from all改为allow from all，都是在上一行)，保存，然后重启wamp的所有服务即可。

• 默认会显示index页面。

• 获取本机IP地址:

• 方法1:

  • 打开控制面板->网络和Internet->网络和共享中心->更改适配器设置；
  • 找到正在连接的网络，双击。

• 方法2:

  • 打开命令行工具；
  • 输入ipconfig （网上自行查阅）。

• 局域网内访问：使用一台相同局域网内的拥有浏览器的设备即可通过刚刚获取的IP地址进行访问。

• 常见的通局域网计算机:

• 局域网的概念这里不做拓展，为了方便测试当满足下列情况可以尝试访问：

  • 连接同一个wifi的计算机(手机也可以测试)；
  • 连接同一个交换机的计算机：同教室的电脑、同公司的电脑。

配置网站根目录

• 注：这里使用的路径为上述安装时的路径，如果没有安装在D盘，那么需要找到对应的路径；
• 找到WAMP的安装目录：D:\wamp；
• 找到Apache的配置文件：D:\wamp\bin\apache\Apache2.2.21\conf；
• 修改http.conf文件：使用文本编辑工具打开httpd.conf文件，搜索documentRoot，如果是初次安装，应该分别在178行、205行，修改完毕（例如修改成e:\www）以后记得保存ctrl+s；
• 重启WAMP服务：左键点击wamp图标，选择重新启动所有服务；
• 建立文件夹，尝试访问：为了保证访问时确实有内容，在E:盘下建立www文件夹，并且在该文件夹下放入文件，再次尝试通过127.0.0.1进行访问。