表單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' => '添加成功' ]); } } ~~~