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']);
}
}
 

vue和php-前后台交互的更多相关文章

  1. python前后台交互相关配置

    全局配置:全局样式.配置文件 在js下创建setting.js ,配置全局的settings.js import settings from '@/assets/js/settings' Vue.pr ...

  2. luffy项目:基于vue与drf前后台分离项目(2)

    user模块User表 创建user模块 前提:在 luffy 虚拟环境下 1.终端从项目根目录进入apps目录 >: cd luffyapi & cd apps 2.创建app > ...

  3. Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐

    这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法. ASPX: <dx:ASPxGridView ID="ASPxGridViewLin ...

  4. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  5. JAVA配置&注解方式搭建简单的SpringMVC前后台交互系统

    前面两篇文章介绍了 基于XML方式搭建SpringMVC前后台交互系统的方法,博文链接如下: http://www.cnblogs.com/hunterCecil/p/8252060.html htt ...

  6. ajax实现异步前后台交互,模拟百度搜索框智能提示

    1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...

  7. 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)

    1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...

  8. WebSocket前后台交互

    其实对于前后台交互有很多种方法(只列举我知道的,嘻嘻): 1:from 表单: 使用场景——小信息量提交给后台 2:ajax(跨域的话用jsonp): 可以进行多量的前后台信心传递: 但实时性不高,不 ...

  9. MySQL前后台交互登录系统设计

    1.首先我们做一个前台的注册页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  10. ajax的底层前后台交互

    为什么用ajax或者它的优点: 异步加载数据,无需切换页面 更加的用户体验,局部刷新,及时验证,操作步骤简化: 节省流量 js控制数据的加载,更加灵活多用. 底层就是XMLHttpRequest对象: ...

随机推荐

  1. 测开之路六十:接口测试平台之common目录

    实现接口测试平台使用jsonpath进行取值来断言,效果: 访问页面: 调试功能:http://www.kuaidi100.com/query 保存功能 触发执行功能 查看报告功能 目录结构 comm ...

  2. 使用eclipse制作war包方法 web项目打包到tomcat

    打开eclipse在左侧右击项目名选择“Export”   在导出画面点击 “Web”->“WAR file”点击“Next”   点击“Browse…”选择文件的导出位置,Target run ...

  3. Vagrant 手册之 box - box 的文件格式

    原文地址 过去,box 只是 VirtualBox 导出的 tar 文件.由于 Vagrant 现在支持多个 provider 和版本控制,box 文件稍微复杂一些. 用于 Vagrant 1.0.x ...

  4. Orcle获取当前时间加小时

    如下是oracle 获取当前数据库时间加2个小时 select to_date(TO_CHAR (SYSDATE, 'yyyy-mm-dd hh24:mi:ss'),'yyyy-mm-dd hh24: ...

  5. Android APP 登陆模块

    首先我想强调一点.这个登陆的模块最好是放在另外一个线程里面来实现.否则有可能会爆出一系列的问题, 然后再与主UI 交互.这样就不会爆ANR异常 1.对于登陆模块的.首先大体的逻辑肯定是要清晰的.    ...

  6. AJAX 获取Servlet文件路径

    下面均不行: xmlRes.open("get","edu/hust/ajax/TestServlet",true); xmlRes.open("ge ...

  7. java静态方法使用泛型

    用法 import java.util.ArrayList; import java.util.Collection; import java.util.HashSet; import java.ut ...

  8. adb shell常用命令总结

    一.文件操作相关命令 1.文件操作命令 子命令 参数 说明 cd 无 进入目录 cat [-beflnstuv] [-B bsize] [file...] 查看文件内容-n:显示行号-b:显示行号,但 ...

  9. java Activiti6.0 后台 框架 spring5 SSM 工作流引擎 审批流程

    1.模型管理 :web在线流程设计器.预览流程xml.导出xml.部署流程 2.流程管理 :导入导出流程资源文件.查看流程图.根据流程实例反射出流程模型.激活挂起 3.运行中流程:查看流程信息.当前任 ...

  10. rm - 移除文件或者目录

    总览 rm [options] file... POSIX(Portable Operating System Interface 可移植的操作系统接口) 选项: [-fiRr] GNU 选项 (最短 ...