从零开始搭建网站环境（php-yaf nginx mariadb）第三章

上一章我们已经搭建了一个基本的运行环境，今天来看看如何创建一个网站吧

我们的网站分为两部分，前端页面和后端服务


前端	VueJs
后端	php（Yaf框架）

网站的编写直接在本地的电脑上，开发和调试方便，之后只要把开发好的项目传到服务器就可以了

搭建本地开发环境（Windows10）

这里就简单点，直接用现成的软件就好了，比如我用的phpstudy

下载PhpStudy

https://www.xp.cn/
根据自己的系统，下个合适的版本就可以了
安装好phpstudy后运行软件，点击一键启动

在D盘新建 www 目录,然后进入并建立 apiServer 目录，这就是我们的后端服务目录。
这里提前说一下，Yaf的基础目录结构：

+ public
  |- index.php //入口文件
  |- .htaccess //重写规则    
  |+ css
  |+ img
  |+ js
+ conf
  |- application.ini //配置文件   
+ application
  |+ controllers
     |- Index.php //默认控制器
  |+ views    
     |+ index    //控制器
        |- index.phtml //默认视图
  |+ modules //其他模块
  |+ library //本地类库
  |+ models  //model目录
  |+ plugins //插件目录

注：
来自 YAF框架入门教程

这里为了环境能正常运行，我们先建立public文件夹，其余的讲到后端的时候再说。

+ www
  |+ apiServer
      |+ public
          |- info.php

编辑info.php:

创建网站：

这样网站就创建完了，打开浏览器确认一下吧：
访问 http://api.server.com/info.php

如果访问失败，很可能是hosts文件没有成功写入查看解决办法

安装Yaf扩展

windows10和CentOS7安装方法不一样，先去 http://pecl.php.net/package/yaf 下载 php_yaf.dll

刷新浏览器，看到下图就说明成功了

前端

安装脚手架（Vue-cli）

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

安装NodeJS
https://nodejs.org/zh-cn/
打开cmd控制台
安装Vue-cli
```
npm install -g @vue/cli
```

创建项目

控制台打开目录 www
```
vue create html
```
如何安装项目此处略过，百度有很多教程
运行项目
```
npm run serve
```
浏览器访问 http://localhost:8080 就可以看到了

后端

这里我们有两个选择，一是使用yaf程序模板生成工具
二是下载别人做好的模板，我个人选用的是yafapi
下载好模板后，解压到 www/apiServer/
目录结构为：

apiServer
|- public
|- conf
|- application

前面已经用phpstudy搭建好了本地的网络环境，运行浏览器，访问 http://api.server.com 应该能看到

{"status":200,"msg":"返回成功","result":{"info":"hello,world"}}

目录：
从零开始搭建网站环境（php-yaf nginx mariadb）第一章
 从零开始搭建网站环境（php-yaf nginx mariadb）第二章
 从零开始搭建网站环境（php-yaf nginx mariadb）第三章
 从零开始搭建网站环境（php-yaf nginx mariadb）番外篇——跨域