vue和php-前后台交互
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-前后台交互的更多相关文章
- python前后台交互相关配置
全局配置:全局样式.配置文件 在js下创建setting.js ,配置全局的settings.js import settings from '@/assets/js/settings' Vue.pr ...
- luffy项目:基于vue与drf前后台分离项目(2)
user模块User表 创建user模块 前提:在 luffy 虚拟环境下 1.终端从项目根目录进入apps目录 >: cd luffyapi & cd apps 2.创建app > ...
- Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐
这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法. ASPX: <dx:ASPxGridView ID="ASPxGridViewLin ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- JAVA配置&注解方式搭建简单的SpringMVC前后台交互系统
前面两篇文章介绍了 基于XML方式搭建SpringMVC前后台交互系统的方法,博文链接如下: http://www.cnblogs.com/hunterCecil/p/8252060.html htt ...
- ajax实现异步前后台交互,模拟百度搜索框智能提示
1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...
- 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)
1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...
- WebSocket前后台交互
其实对于前后台交互有很多种方法(只列举我知道的,嘻嘻): 1:from 表单: 使用场景——小信息量提交给后台 2:ajax(跨域的话用jsonp): 可以进行多量的前后台信心传递: 但实时性不高,不 ...
- MySQL前后台交互登录系统设计
1.首先我们做一个前台的注册页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- ajax的底层前后台交互
为什么用ajax或者它的优点: 异步加载数据,无需切换页面 更加的用户体验,局部刷新,及时验证,操作步骤简化: 节省流量 js控制数据的加载,更加灵活多用. 底层就是XMLHttpRequest对象: ...
随机推荐
- SSH 的原理和实践
最近自己在学习使用SSH,现将自己理解的SSH原理和实践SSH的操作写成一篇博客,以供日后查看. 一.SSH是什么?为什么会出现SSH? SSH英文全称是Secure Shell,即安全外壳.首先SS ...
- 09 (H5*) JS第7天 原型
目录 1:创建对象的3中方式 2:工厂模式创建实例对象 3: 实例对象和构造函数的关系 4:构造函数创建对象带来的问题--原型 5:原型中创建方法 6:构造函数.原型对象.实例对象的关系 7:原型对 ...
- mysql解析json字符串相关问题
很多时候,我们需要在sql里面直接解析json字符串.这里针对mysql5.7版本的分水岭进行区分. 1.对于mysql5.7以上版本 使用mysql的内置函数JSON_EXTRACT(column, ...
- 移动端Web页面适配方案
概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度 windw.innerWidth/Height layout viewport 布局视口,DOM宽度 doc ...
- python学习第十五天字典的创建及增删改查操作方法
字典是python比较常见的数据类型,跟列表一样,比如的字典的创建,字典的常见的操作的方法,增加,删除,修改,查找等方法,字典的一共的数据方法为 keys() values() fromkeys() ...
- 关于Myeclipse下的JVM启动异常的问题:Out Of Memery / Could not reserve enough space for object heap
以下都是初步理解: 这主要是JVM内存配置的问题,网上有很多参考资料,但是我们不能死板硬套,必须根据自己工程的实际情况配置相关的参数. 1.按照jvm的设计规则,JVM内存分为堆(Heap)和非堆(N ...
- Git配置全局账号密码避免每次拉取、提交输入账号密码
前言 在大家使用github的过程中,一定会碰到这样一种情况,就是每次要push 和pull时总是要输入github的账号和密码,这样不仅浪费了大量的时间且降低了工作效率.在此背景下,本文在网上找了两 ...
- LeetCode Array Easy 448. Find All Numbers Disappeared in an Array
Description Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear ...
- UIGestureRecognizer 手势
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.v ...
- MySQL数据库使用xtrabackup备份实现小例子
关于MySQL数据库的备份的工具和方式也比较多,本文只简单介绍一些我司一个平台的备份方案.Xtrabackup是由percona开源的免费数据库热备份软件,但是只能对InnoDB数据库和XtraDB存 ...