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对象: ... 
随机推荐
- 测开之路七十三:用kafka实现消息队列之环境搭建
			一:装java环境,确保java能正确调用 kafka下载地址:http://kafka.apache.org/downloads 下载并解压kafka: 新建两个文件夹,用于存放zookeeper和 ... 
- centos6.5下apollo1.7.1的搭建
			前言:apollo MQ作为消息队列中间件,在需要消息列表的应用程序环境中,需要使用该服务器中间件 1.准备工作 2.搭建 3.测试 1.准备工作 第一步:linux系统中配置好java环境 A.卸载 ... 
- 企业SRC整理
			0.SRCs|安全应急响应中心 - 0xsafe 1.腾讯安全应急响应中心(TSRC) 2.360安全应急响应中心 3.京东安全应急响应中心(JSRC) 4.平安集团安全应急响应中心(PSRC) 5. ... 
- (转载)如何在 Github 上发现优秀的开源项目?
			转载自:传送门 之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到 ... 
- 搭建用例管理平台phpstudy+testlink代替Apache+MySQL+PHP环境,以及testlink搭建环境报错修复
			公司需要搭建一个用例管理平台,环境搭建Apache+MySQL+PHP环境 哇一看就是需要花很长时间去搭建环境,本来我也在用这样的笨方法,不小心被公司开发看到,经人家一提点,哎呀妈呀发现自己以前的方法 ... 
- 《JAVA设计模式》之适配器模式(Adapter)
			在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ... 
- [Linux] 026 光盘 yum 源搭建
			光盘 yum 搭建步骤 (1) 挂载光盘 $ mount /dev/cdrom /mnt/cdrom/ (2) 让网络 yum 源文件失效 $ cd /etc/yum.repos.d/ $ mv Ce ... 
- Codeforces - 1195D1 - Submarine in the Rybinsk Sea (easy edition) - 水题
			https://codeforc.es/contest/1195/problem/D1 给\(n\)个等长的十进制数串,定义操作\(f(x,y)\)的结果是"从\(y\)的末尾开始一个一个交 ... 
- Zookeeper-技术专区-配置以及学习
			zookeeper 一.zookeeper下载 zookeeper下载可以直接去官网进行下载 https://zookeeper.apache.org/releases.html ,可以选择最新版本 ... 
- mongodb的有关操作
			mongodb的几种启动方法 https://www.cnblogs.com/LLBFWH/articles/11013791.html MongoDB 之 你得知道MongoDB是个什么鬼 Mong ... 
