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. 测开之路七十三:用kafka实现消息队列之环境搭建

    一:装java环境,确保java能正确调用 kafka下载地址:http://kafka.apache.org/downloads 下载并解压kafka: 新建两个文件夹,用于存放zookeeper和 ...

  2. centos6.5下apollo1.7.1的搭建

    前言:apollo MQ作为消息队列中间件,在需要消息列表的应用程序环境中,需要使用该服务器中间件 1.准备工作 2.搭建 3.测试 1.准备工作 第一步:linux系统中配置好java环境 A.卸载 ...

  3. 企业SRC整理

    0.SRCs|安全应急响应中心 - 0xsafe 1.腾讯安全应急响应中心(TSRC) 2.360安全应急响应中心 3.京东安全应急响应中心(JSRC) 4.平安集团安全应急响应中心(PSRC) 5. ...

  4. (转载)如何在 Github 上发现优秀的开源项目?

    转载自:传送门 之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到 ...

  5. 搭建用例管理平台phpstudy+testlink代替Apache+MySQL+PHP环境,以及testlink搭建环境报错修复

    公司需要搭建一个用例管理平台,环境搭建Apache+MySQL+PHP环境 哇一看就是需要花很长时间去搭建环境,本来我也在用这样的笨方法,不小心被公司开发看到,经人家一提点,哎呀妈呀发现自己以前的方法 ...

  6. 《JAVA设计模式》之适配器模式(Adapter)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...

  7. [Linux] 026 光盘 yum 源搭建

    光盘 yum 搭建步骤 (1) 挂载光盘 $ mount /dev/cdrom /mnt/cdrom/ (2) 让网络 yum 源文件失效 $ cd /etc/yum.repos.d/ $ mv Ce ...

  8. Codeforces - 1195D1 - Submarine in the Rybinsk Sea (easy edition) - 水题

    https://codeforc.es/contest/1195/problem/D1 给\(n\)个等长的十进制数串,定义操作\(f(x,y)\)的结果是"从\(y\)的末尾开始一个一个交 ...

  9. Zookeeper-技术专区-配置以及学习

    zookeeper 一.zookeeper下载 zookeeper下载可以直接去官网进行下载  https://zookeeper.apache.org/releases.html ,可以选择最新版本 ...

  10. mongodb的有关操作

    mongodb的几种启动方法 https://www.cnblogs.com/LLBFWH/articles/11013791.html MongoDB 之 你得知道MongoDB是个什么鬼 Mong ...