vue和php-前后台交互

Posted 2020-10-10 sinceForever

vue和php-前后台交互

前端主要代码：

<template>
    <div class="main-member-info">
    <form @submit.prevent="submit">
        <input type="text" v-model="userName" placeholder="请输入你的姓名"  class="name-style" maxlength="20"/>
        <div class="sex">
            <select v-model="selectedSex">
                <option>boy</option>
                <option  selected = "selected">girl</option>
            </select>
        </div> 
            <input type="text" v-model="phoneNumber" placeholder="请输入你的手机号"  class="phone-number-style"/>
        <div class="guide-style">
            <select v-model="selectedGuild">
                <option selected="selected" value="">请选择一个导购： </option>
                <option v-for="guild in guilds" value ="{{ guild.name }}">{{ guild.name }}</option>
            </select>
        </div>
        <input type="submit" value ="注册" class="register-style"/>
    </form>       
    </div>        
</template>
<script>
import {setDocumentTitle, showToast, checkTel} from ‘../../../../../static/h5/utils/interaction‘
export default
    {
    data () {
        return {
        userName: ‘‘,
        selectedSex: ‘‘,
        phoneNumber: ‘‘,
        guilds: [],
        selectedGuild: ‘‘
        }
    },
    ready () {
        this.getAllEmployees()
        setDocumentTitle(‘会员注册‘)
    },
    methods: {
        getAllEmployees () {
        let _this = this
        let params = {}
        // /omnisocials-backend/src/backend/modules/main/controllers/EmployeeController.php(actionSelectEmployee())
        this.$resource(‘main/employee/select-employee‘, params).get().then((resp) => {
            _this.guilds = _this.guilds.concat(resp.data.items)
        }, (resp) => {
            showToast(‘导购导出失败，请稍后再试‘)
        })
        },
        submit () {
        if (!this.validation()) {
            return
        }
        let _this = this
        let params = {
            userName: this.userName,
            selectedSex: this.selectedSex,
            phoneNumber: this.phoneNumber,
            selectedGuild: this.selectedGuild
        }
        this.$resource(‘main/employee/register-member‘).save(params).then((resp) => {
            _this.errorMessages = resp.data.item
            showToast(_this.errorMessages)
        }, (resp) => {
            showToast(‘注册失败!‘)
        })
        },
        validation () {
        let name = ‘‘
        let tel = ‘‘
        if (!this.userName) {
            showToast(‘请输入姓名!‘)
            return false
        }

        if (!this.phoneNumber) {
            showToast(‘请输入手机号码!‘)
            return false
        }

        if (!checkTel(this.phoneNumber)) {
            showToast(‘手机号格式不正确‘)
            return false
        }

        if (!this.selectedGuild) {
            showToast(‘请选择导购!‘)
            return false
        }

        return true
        }
    }
    }
</script>
<style lang="less">
@import ‘./registermember.less‘;
</style>

后台主要代码：

1. 导入两个实体类：

use backend\modules\main\models\MyEmployee;

use backend\modules\main\models\MyRegisterMember;

2. controller 主要代码

class EmployeeController extends BaseController
{
    // 不需要验证的方法
    public $noAuthActions = [‘select-employee‘, ‘register-member‘];

    //从数据库导出导购方法（多个导购在前台形成列表）
    public function actionSelectEmployee() {
     LogUtil::info(‘in controller, get guilds-employees‘, ‘main‘); 
     $employees = [];
     $employees = MyEmployee::getEmployeeList();
     //LogUtil::info(‘in controller, finish query‘, ‘main‘); 
     //LogUtil::info( $employees, ‘main‘); 
     return [‘items‘ => $employees]; 
     }

    //注册会员方法
    public function actionRegisterMember() {
    $params = $this->getParams();
    LogUtil::info(‘in controller, register member‘, ‘main‘, [‘user‘ => $params]);

    $MyRegisterMember = new MyRegisterMember();
    if (empty($params[‘userName‘])) {
         return $this->generateResult(5001, ‘请填写姓名‘);
    }
    if (empty($params[‘selectedSex‘])) {
        return $this->generateResult(5002, ‘请选择性别‘);
    }
    if (empty($params[‘phoneNumber‘])) {
        return $this->generateResult(5003, ‘请填写电话‘);
    }
    if (empty($params[‘selectedGuild‘])) {
        return $this->generateResult(5004, ‘请选择导购‘);
    }
    $MyRegisterMember->name = $params[‘userName‘];
    $MyRegisterMember->gender = $params[‘selectedSex‘];
    $MyRegisterMember->phone = $params[‘phoneNumber‘];
    $MyRegisterMember->guild = $params[‘selectedGuild‘];
    $MyRegisterMember->save();
    if ($MyRegisterMember->errors)
    {
        return self::generateResult(300, ‘对不起，服务器错误，注册失败‘);
    } else {
        return self::generateResult(200, ‘注册成功!‘);
        }  
    }

    private static function generateResult($errorNumber, $errorMessage)
    {
        LogUtil::info(‘in controller, register member info‘, ‘main‘, [‘message‘ => $errorMessage]);
        return [‘item‘ => $errorMessage];
    }
    // public function generateResult($number, $errorMessage){
    //     $errorMessages = [];
    //     array_push($errorMessages, self::getErrorMessages($number, $errorMessage));
    //     return [‘item‘ => $errorMessages];
    // }
}

实体类：MyEmployee.php

<?php
namespace backend\modules\main\models;

use backend\components\BaseModel;
class MyEmployee extends BaseModel
{
    public static function collectionName()
    {
        return ‘employee‘;
    }
    public function attributes()
    {
    return [‘name‘, ‘gender‘, ‘phone‘];
    }
    public function safeAttributes()
    {
    return [‘name‘, ‘gender‘, ‘phone‘];
    }
    public function fields()
    {
    return [‘name‘, ‘gender‘, ‘phone‘];
    }
    public static function getEmployeeList() 
    {
        $employees=self::find()->all();
        return $employees;
    } 
}

实体类：MyRegisterMember.php

<?php
namespace backend\modules\main\models;

use backend\components\BaseModel;
class MyRegisterMember extends BaseModel
{
    public static function collectionName()
    {
        return ‘member‘;
    }
    public function attributes()
    {
        return array_merge(
            parent::attributes(), [‘name‘, ‘gender‘, ‘phone‘, ‘guild‘]);
    }
    public function safeAttributes()
    {
        return array_merge(
            parent::attributes(), [‘name‘, ‘gender‘, ‘phone‘, ‘guild‘]);
    }
    public function fields()
    {
        return array_merge(
            parent::attributes(), [‘name‘, ‘gender‘, ‘phone‘, ‘guild‘]);
    }
}