表单Form篇 · TP5搭配Easywechat & Jwt & Vue & Supervisor 玩转微信开发

以下写一个简单的From提交 **注使用表单验证 form-item 必须添加 prop ='xxxx' ** ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"> <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/iview/dist/iview.min.js"></script> <script src="//unpkg.com/axios/dist/axios.min.js"></script> <script src="//cdn.bootcss.com/qs/6.5.1/qs.js"></script> </head> <body> <div id="app">  <i-form ref="userForm" :model="formData" :rules="ruleInline"> <form-item prop="user">  <i-input type="text" v-model="formData.user" placeholder="用户名"> <icon type="ios-person-outline" slot="prepend"></icon> </i-input> </form-item> <form-item prop="password"> <i-input type="password" v-model="formData.password" placeholder="用户密码"> <icon type="ios-locked-outline" slot="prepend"></icon> </i-input> </form-item> <form-item>  <i-button type="primary" @click="handleSubmit('userForm')">添加</i-button> </form-item> </i-form> </div> <script> var Main = { data() { return { // 相关数据配置跟规则配置 formData: { user: '', password: '' }, ruleInline: { user: [ // 配置是否验证，错误提示信息，触发验证场景 { required: true, message: '请输入用户名称.', trigger: 'blur' } ], password: [ { required: true, message: '请输入用户密码..', trigger: 'blur' }, { type: 'string', min: 6, message: '最少6位密码', trigger: 'blur' } ] } } }, methods: { handleSubmit(name) { // 验证是否通过规则 this.$refs[name].validate((valid) => { if (!valid) { this.$Message.error('验证失败!'); return; } }) // 发送到接口 var postData = Qs.stringify(this.formData); // 必须用到的一个关键点，把JSON数据转成后端能接收到的 FORM-DATA axios.post("{:url('user')}", postData).then((res) => { var data = res.data // 这个是插件获取后后端的返回数据记得是.data if (!res.data.status) { this.$Message.error(data.msg); } else { this.$Message.success(data.msg); } }) } } } var Component = Vue.extend(Main) new Component().$mount('#app') </script> </body> </html> ~~~ 接收后端代码 ~~~ <?php namespace app\index\controller; use think\Controller; use app\index\model\User; class Index extends Controller { protected $request; protected $params; public function __construct() { parent::__construct(); $this->request = request(); $this->params = $this->request->param(); } public function index() { return $this->fetch(); } /** * 添加用户 */ public function user(User $user) { try { $user->saveUser($this->params); } catch(\Exception $e) { return json([ 'status' => 0, 'msg' => $e->getMessage(), ]); } return json([ 'status' => 1, 'msg' => '添加成功' ]); } } ~~~