php-小程序系统部署

作者: 朱传武 | 来源:发表于2021-02-08 15:35 被阅读0次

开发工具：phpStorm
语言：php
开发框架：thinkphp6.0
服务器：CentOS 7.0以上，php 7.1
数据库：mysql 5.7以上
具体部署过程：
安装宝塔面板：https://www.bt.cn/download/linux.html

安装要求：

内存：512M以上，推荐768M以上（纯面板约占系统60M内存）

硬盘：300M以上可用硬盘空间（纯面板约占20M磁盘空间）

系统：CentOS 7.1+ (Ubuntu16.04+.、Debian9.0+)，确保是干净的操作系统，没有安装过其它环境带的Apache/Nginx/php/MySQL/pgsql/gitlab/java（已有环境不可安装）

架构：x86_64（主流服务器均是此架构），ARM不完整兼容（面板环境安装慢，部分软件可能安装不上）

宝塔Linux面板7.5.1版本是基于Centos/Debian/Ubuntu开发的，为了最好的兼容性，请使用以上系统

具体请参考：https://www.bt.cn/bbs/thread-19376-1-1.html

安装完之后，在宝塔面板上添加网站：

image.png

填写域名以及相应的端口。

上传程序

把php后台包整体上传至以上新建网站时候指定的目录，需要用到ftp工具。

开启apachectl服务器

image.png

现在服务器上安装apachectl，安装好之后配置监听接口，这个接口就是新建网站时候指定的端口，

image.png

开启ssl

由于终端是小程序，所以必须要ssl证书，去腾讯云申请免费ssl证书可以：

image.png

申请完成之后，下载证书：

image.png

打开apache相关路径：

image.png
将这三个文件上传至/www/server/apache/conf/ssl/

修改配置文件

编辑conf/httpd.conf，找到

LoadModule ssl_module modules/mod_ssl.so

去掉前面的#好。
找到我们刚才新添加的网站，然后修改它的配置文件：

image.png

SSLEngine on
    SSLCertificateFile "/www/server/apache/conf/ssl/2_samoy.mondonational.com.crt"
    SSLCertificateKeyFile "/www/server/apache/conf/ssl/3_samoy.mondonational.com.key"
    SLCertificateChainFile "/www/server/apache/conf/ssl/1_root_bundle.crt

重启apachectl服务器既可。

小程序配置修改

开发语言：js
框架：uniapp
开发工具：hbuilderx+微信小程序开发工具
打开config文件，并修改刚配置好的url地址：

image.png

上拉刷新下拉加载实现逻辑

对于图片列表部分使用到第三方库：mescroll-body
安装插件：https://ext.dcloud.net.cn/plugin?id=343
官方地址：https://www.mescroll.com/uni.html
实现代码：
main.js

import MescrollUni from "@/components/mescroll/my-list-mescroll.vue";
Vue.component("mescroll-uni", MescrollUni); //上拉加载,下拉刷新组件

import MescrollBody from "@/components/mescroll/mescroll-body.vue"
Vue.component('mescroll-body', MescrollBody)

具体使用：

 <mescroll-body  v-if="token" style="display: flex;flex-direction: row;width: 100vw; " ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
                <view  v-for="item in imageslist" key="item.pic_id" style="width: 45vw;flex-direction: column;display: flex;margin-left: 3%;">
                    <image  :data-item='JSON.stringify(item)' @tap="preview" :src="$util.img(item.pic_path)" style="width: 100%;height: 400rpx;" mode="aspectFill"></image>
                    <text style="margin-top: 10rpx;width: 100%;text-align: center;font-size: 35rpx;">{{item.album_id}}</text>
                    <text style="width: 100%;text-align: center;">{{item.pic_spec}}</text>
                </view>
             </mescroll-body>

mixins: [scroll, globalConfig,MescrollMixin],
data() {
        const currentDate = this.getDate({
                  format: true
              })
        return {
            token: '',
            sourceImageType:['全部','语文','数学','英语','生物','地理','历史'],
            startdate: '开始日期',
            enddate: '结束日期',
            sourceImageTypeIndex:0,
            upOption:{
                        auto: false,
                        page:{
                          num : 0, 
                          size : 10, 
                          time : null 
                        },
                      noMoreSize:4,
                    },
            memberInfo: {
            
            },
            imageslist:[],
            isVerification: true,
            authInfo: {
                is_verifier: false
            },

    /**
         * 获取列表
         */
        getImages(page) {
            // var pageNum = page.num-1;
             const util = this.$util;
             console.log(util);
             let pageNum = page.num; // 页码, 默认从1开始
             let pageSize = page.size; // 页长, 默认每页10条 
             let album_id=this.sourceImageType[this.sourceImageTypeIndex];
             if(this.sourceImageTypeIndex==0){
                 album_id='';
             }
             let date ='';
             if(this.startdate=='开始日期'&&this.enddate=='结束日期'){
                 date='';
             }
             if(this.startdate!='开始日期'&&this.enddate=='结束日期'){
                 date=this.startdate+"--";
             }
             if(this.startdate=='开始日期'&&this.enddate!='结束日期'){
                 date="--"+this.enddate;
             }
            if(this.startdate!='开始日期'&&this.enddate!='结束日期'){
                  date=this.startdate+"--"+this.enddate;
            }
             let params = {
                      album_id:album_id,
                      date:date,
                      page: pageNum,
                      limit: pageSize
               }   
               
            this.$api.sendRequest({
                url: '/api/upload/lists',
                data: params,
                success: res => {
                    if (res.code >= 0) {
                          //this.imageslist= res.data.list;
                          let result=res.data
                          let curPageData = result&&result.list?result.list:[];
                          let curPageLen = curPageData.length; 
                          let totalPage = result&&result.list?result.page_count:0;          
                          //设置列表数据
                          if (pageNum == 1) {
                              this.imageslist = curPageData;
                          } //如果是第一页需手动制空列表
                        else{
                            this.imageslist = this.imageslist.concat(curPageData); //追加新数据   
                        }
                           
                         
                               
                           //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                          this.mescroll.endByPage(curPageLen,totalPage);

                    } else {
                        
                    }
                },
                fail: res => {
                    debugger
                }
            });
        },

注意getImage参数page是第三方库直接管理的，不用本地手动管理，

 // 上拉回调
         upCallback(page){
              this.getImages(page);
          },

重置页数以及重新获取最新数据调用:

sourceImageTypeChange: function(e) {
           this.sourceImageTypeIndex = parseInt(e.detail.value);
           this.mescroll.resetUpScroll(true);
        },