在学习Laravel后台开发过程中，产生实现智慧商圈管理后台的想法。如是利用空闲时间，参照以前的设计稿，实现商圈管理后台。

前端页面实现注册、登录、验证码功能，首页展示、商品分类、活动详情、购物车，以及支付流程。采用weiui页面框架，展示与微信端保持一致。

智慧商圈管理后台

主要包括管理员注册与登录，简单数据统计，广告管理、商家管理、产品管理、文章管理、评论审核、会员管理、标签管理以及订单管理，活动、商家、标签、文章编辑支持mark语法和图片动态插入。

支持提供API接口给前端页面展示。

链接地址：商圈后台入口

链接地址：前端展示页面

项目截图

后台截图

前端页面

因为公司使用的mac电脑，而家里使用的win10系统，通过github备份的代码，在家里pull拉取之后。执行composer install指令，却提示版本过低。原来，laravel5.4需要的php7.0.*+，而当前的window下的php版本php5.6.*。

于是开始进行win10下的php版本升级。

1. 下载PHP版本文件

访问php下载中心，进行window下php下载，最新的php版本是php7.1.9。选择Thread Safe 版本，下载线程安全版本至本地，解压并移动至指定目录。

2. 修改win10环境变量

依次打开电脑的控制面板–>系统–>高级系统设置–>环境变量–>环境变量: path选项–>增加php路径。如下图：

多个php版本，新增的php位于最前面。修改完成后，确定保存。

3. 修改php.ini配置文件

拷贝php.ini-production文件，修改为php.ini文件并编辑保存。

1. 修改extension_dir为E:\XAMPP\php-7.1.9\ext;
2. 屏蔽php_mysql.dll为;extension=php_mysql.dll;
3. 其他问题，根据提示修改。

4. 检测安装情况

打开phpstorm，执行php -v指令。出现以下信息，即表示php版本更新完成。

C:\Users\admin\phpStorm\book>php -v
PHP 7.1.9 (cli) (built: Aug 30 2017 18:37:35) ( ZTS MSVC14 (Visual C++ 2015) x86 )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies

如上图，需要在首页进行案例的切换。

实现功能想到有两种解决方案：
方案一：除index.php文件外，创建三个分类文件category-h5.php、category-media.php、category-design.php，点击标签，跳转到对应的分类页面。基本可以实现标签分页功能。更加精细点，可以缓存当前页面位置，在新的页面设置页面滚动至缓存位置。本方案基本可以实现功能。唯一缺点：页面过渡时根据网络情况会出现闪烁、多3个php文件。

方案二：单页面index.php，安装JSON API的插件，采用ajax的形式，动态获取分类内容，并动态更新页面内容。

当前采用方案二进行技术实现。

1、在wordpress 管理后台创建分类标签，如下图：

2、安装JSON API插件并启用

3、添加分类文章，测试JSON API

var clickedItem = 0;
var $items = $('#categoryMenu').find('a');
var slugList = ['case', 'h5', 'media', 'design'];
function clickItem(index) {
     /*更新按钮选项的状态*/
     $($items[clickedItem]).removeClass('hover');
     $($items[index]).addClass('hover');
     clickedItem = index;

     /*请求API，获取分类的内容*/
     var url = '/yanrui/?json=get_category_posts&slug=' + slugList[index] +'&count=6';
     $.ajax({
         type: "GET",
         url: url,
         dataType: "json",
         jsonp: "callback",
         success: function (data) {
             console.log(data);
             var res = eval(data);
             if (res.status == 'ok') {
                  // todo 解析文章内容
             }
         },
         error:function(msg){
             msg = eval('(msg)');
             console.log(msg);
         }
     });
}

测试结果如下图，即正常接口测试通过：

4、ajax获取结果，动态更新模块内容

5、完成单页面动态切换。

安装

1、安装 Nginx :

yum install nginx18 -y

systemctl start nginx.service #启动nginx
systemctl stop nginx.service #停止nginx
systemctl restart nginx.service #重启nginx
systemctl enable nginx.service #设置nginx开机启动

2、安装MariaDB（CentOS 7.0中，已经使用MariaDB替代了MySQL数据库）

安装

yum install mariadb mariadb-server -y #安装
systemctl start mariadb.service #启动MariaDB
systemctl stop mariadb.service #停止MariaDB
systemctl restart mariadb.service #重启MariaDB
systemctl enable mariadb.service #设置开机启动

cp /usr/share/mysql/my-huge.cnf /etc/my.cnf #拷贝配置文件（注意：如果/etc目录下面默认有一个my.cnf，直接覆盖即可）

设置Root密码

mysql_secure_installation
#回车，根据提示输入Y
#输入2次密码，回车
#根据提示一路输入Y
#最后出现：Thanks for using MySQL!
#MariaDB密码设置完成，重新启动 MariaDB：
systemctl restart mariadb.service #重启MariaDB

3、安装 PHP :

建议将下面插件一次性安装,如mbstring、openssl插件，避免单独安装出现的坑~~！

yum install php71w-fpm php71w-mysql php71w-mysqli php71w php71w-opcache php71w-gd php71w-intl php71w-mbstring php71w-exif php71w-mcrypt php71w-openssl -y

php服务相关操作

systemctl start php-fpm.service #启动php-fpm
systemctl stop php-fpm.service #停止php-fpm
systemctl restart php-fpm.service #重启php-fpm
systemctl enable php-fpm.service #设置开机启动

配置

1、配置php-fpm:

vi /etc/php-fpm.d/www.conf

#修改user和group
user = nginx
group = nginx

2、配置 Nginx:

    server {
        listen       80 default_server;
        # listen       [::]:80 default_server;
        server_name  www.geek720.com;
        # set $root_path        /var/www/laravel/market/public/;
        set $root_path  /var/www/websites/blog;
        root $root_path;
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        index   index.html index.htm index.php;

        location / {
            try_files $uri $uri/ /index.php?$query_string;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
 location ~ \.php {
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index /index.php;

            include /etc/nginx/fastcgi_params;

            fastcgi_split_path_info     ^(.+\.php)(/.+)$;
            fastcgi_param PATH_INFO     $fastcgi_path_info;
            fastcgi_param PATH_TRANSLATED       $document_root$fastcgi_path_info;
            fastcgi_param SCRIPT_FILENAME       $document_root$fastcgi_script_name;
        }

        location ~* ^/(css|img|js|flv|swf|download)/(.+)$ {
            root $root_path;
        }

        location ~/\.ht {
            deny all;
        }
    }

3、重启nginx服务

service nginx restart

4、在配置目录/var/www/websites/blog下，创建测试文件index.php,如能正常访问，则安装正常。