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

<?phpnamespace 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

<?phpnamespace 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‘]); ???}}