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. linux sed如何锁定某一行数据进行替换

  2. 关于 推广QQ

    有一个项目 需要在用户提交表单之后,关闭页面,微信公众号发送一个模板消息,链接地址为qq推广的链接. 早上在试 先是在电脑端测试都是正常的. 然后开始上传到服务器端测试,发送模板消息之前的动作,都没有 ...

  3. Autoencoder基本操作及其Tensorflow实现

    最近几个月一直在和几个小伙伴做Deep Learning相关的事情.除了像tensorflow,gpu这些框架或工具之外,最大的收获是思路上的,Neural Network相当富余变化,发挥所想.根据 ...

  4. php用什么软件编程

    准备好好学习学习PHP了吗?那么你首先应该考虑用什么开发工具(IDE).市面上有很多这类工具,收费的有,免费的也有,选择起来并不轻松. 如果你说PHP编程用基础的文本编辑软件就可以了,比如用记事本.是 ...

  5. C++学习笔记(三)--数组、字符串

    1.数组,C++中不允许数组的下标值为变量,只能是常量或者常量表达式,必须先定义后使用.数组赋初值几种常见方式: int a[] = {1,2,3,4,5}: int a[4] = {2,1,3,4} ...

  6. Linux命令行基础操作

    目录 1.打开终端命令行 2.常用快捷键 2.1 tab键 2.2 Ctrl+c组合键 2.3 Ctrl+d组合键 2.4Ctrl+Shift+c组合键和Ctrl+Shift+v组合键 2.5图形界面 ...

  7. Ubuntu 18.04安装docker 以及Nginx服务设置

    1.安装需要的包sudo apt install apt-transport-https ca-certificates software-properties-common curl 2.添加 GP ...

  8. 【五一qbxt】day5 图论

    图论 学好图论的基础: 必须意识到图论hendanteng xuehuifangqi(雾 图 G = (V,E) 一般来说,图的存储难度主要在记录边的信息 无向图的存储中,只需要将一条无向边拆成两条即 ...

  9. 【学习总结】Python-3-字符串函数-strip()方法

    参考: 菜鸟教程-Python3-Python字符串-strip()方法 语法: str.strip([chars]); 参数: chars -- 移除字符串头尾指定的字符序列. 返回值: 返回移除字 ...

  10. 【学习总结】Python-3-字符串运算符与字符串格式化

    参考: 本教程的评论区:菜鸟教程-Python3-Python数字 字符串运算符: 实例变量a值为字符串 "Hello",b变量值为 "Python": 字符串 ...