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对象: ...
随机推荐
- Redis 基础及各数据类型对应的命令
Redis 命令文档 基本概念 安装及使用 可以在官网下载源码编译安装.对于 CentOS,还可以通过 yum install redis 安装. Redis 安装完成后,通过 redis-serve ...
- 队列问题非STL解决方案
队列问题非STL解决方案 常年使用STL解决队列问题,以至于严重生疏队列的根本原理... 直到今日 被老师被迫 使用算法原理解决问题,方才意识到我对队列一窍不通... ...直到 经过一系列的坑蒙拐骗 ...
- Game on a Tree Gym - 102392F(树上最大匹配)
思路: 本质是求一个树上的最大匹配能否覆盖所有的点. dfs遍历,用qian[]数组记录当前节点的子树内有几个没有匹配的点(初始化为-1因为可以匹配掉一个子树中未匹配的点),pipei[]数组记录当前 ...
- 21.线程,全局解释器锁(GIL)
import time from threading import Thread from multiprocessing import Process #计数的方式消耗系统资源 def two_hu ...
- hacking 学习站
综合 idf实验室:http://ctf.idf.cn/ writeup: 部分参见本博 网络信息安全攻防学习平台:http://hackinglab.cn/ writeup: 部分参见本博 WeCh ...
- Mybatis开发中前端控制器注解@Controller 引用的类错误
import org.springframework.web.portlet.ModelAndView; 错误 import org.springframework.web.servlet.Model ...
- Spring Boot 静态资源处理,妙!
作者:liuxiaopeng https://www.cnblogs.com/paddix/p/8301331.html 做web开发的时候,我们往往会有很多静态资源,如html.图片.css等.那如 ...
- 如何查找django安装路径
需要找到django的安装路径,官方说的那个方法不好用,国内搜索都是都不到的,后来谷歌搜到了很简单 import django django 这样就可以找django的安装路径了,真心不懂为什么国内都 ...
- elasticsearch 基础 —— Inner hits
Inner hits The parent-join and nested 功能允许返回具有不同范围匹配的文档.在父/子案例中,基于子文档中的匹配返回父文档,或者基于父文档中的匹配返回子文档.在嵌套的 ...
- 2018-2-13-win10-uwp-BadgeLogo-颜色
title author date CreateTime categories win10 uwp BadgeLogo 颜色 lindexi 2018-2-13 17:23:3 +0800 2018- ...