vue + elementui 使用

通过一个用户注册页面来介绍

1、先下载下element-ui
使用命令【cnpm install element-ui】
页面中需要使用md5加密，所以一起把md5的js也下载下来
【cnpm install js-md5】

2、下载好了，在main.js中导入下就可以开始使用了

// 导入element-ui组件
import ElementUI from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
import md5 from 'js-md5';

Vue.use(ElementUI)
Vue.prototype.$md5 = md5;//可以全局使用

3、在vue中正式使用
完整的代码如下：

<template>
  <div class='myelement'>
    <p>新用户注册</p>

    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <!-- 手机号 -->
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入有效手机号" maxlength="11" show-word-limit class="input_width"></el-input>
      </el-form-item>

      <!-- 验证码 -->
      <el-form-item label="验证码" prop="smsCode">
        <el-input v-model="form.smsCode" placeholder="请输入6位验证码" maxlength="6" show-word-limit class="input_width"></el-input>
        <el-button type="success" @click="sendSmsCode" >验证码</el-button>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入登录密码" class="input_width" show-password autocomplete="off"></el-input>
      </el-form-item>

      <!-- 再次输入密码 -->
      <el-form-item label="再次输入密码" prop="password_again">
        <el-input v-model="form.password_again" placeholder="请输入再次输入密码" class="input_width" show-password autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('form')">立即注册</el-button>
      </el-form-item>


    </el-form>


  </div>
</template>

<script>
  export default {
    name: 'Register',
    data () {

      //验证密码
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      //查询该手机号是否已注册
      var validateAlreadyRegist = (rule, value, callback) => {
        this.$axios
          .get('/register/checkPhoneRegister/' + this.form.phone)
          .then(function (resp) {
            console.log(resp)
            if(resp.data.code == -1){
              callback(new Error('该手机号已注册！'));// 提示错误信息
            }else{
              callback();// 必须要写，代表合法。不然后面提交请求异常
            }

          })
          .catch(function (error) { // 请求失败处理
            console.log('请求本地接口失败');
            callback();
          });
      };

      return {
        form: {
          phone: '',
          smsCode: '',
          password: '',
          password_again: '',
          springSmsStr: '',//请求sms返回信息
        },
        rules: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 11, max: 11, message: '输入11位数字', trigger: 'blur' },
            { validator: validateAlreadyRegist, trigger: 'blur' }

          ],
          smsCode: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { min: 6, max: 6, message: '输入6位数字', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
          ],
          password_again:[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ]
        },
      }
    },
    methods: {
      sendSmsCode() {
        // 手机号为空，警告提示
        if(this.form.phone === ''){
          this.$message({
            message: '发送手机号不能为空',
            type: 'warning'
          });

          return
        }
        // 发送本地springboot请求,本机的地址：192.168.3.12
        const _this = this;
        this.$axios
          .get('/register/getSmsCode/' + this.form.phone)
          .then(resp => (
            console.log('请求本地接口OK'),
              console.log(resp),
              _this.springSmsStr = resp.data,

              // 验证码发送成功，提醒用户
              this.$message({
                message: '成功验证码，请在控制台查看',
                type: 'success'
              })

          ))
          .catch(function (error) { // 请求失败处理
            console.log('请求本地接口失败');
          });
      },
      onSubmit(formName) {
        //校验合法性
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('发送post请求!');
            console.log('submit!');
            console.log(this.form)
            this.regist();
          } else {
            console.log('error submit!!');
            // alert('error invalid!');
            return false;
          }
        });
      },
      regist(){
        // 校验通过后发送axios请求注册，有3种方法

        // 第一种参数定义
        let data = {
          'user':this.form.phone,
          'phone':this.form.phone,
          'smsCode':this.form.smsCode,
          'password':this.$md5(this.form.password),
        } // 直接使用

        // 第二种参数定义
        // let data = new FormData();
        // data.append('phone',this.form.phone)
        // data.append('smsCode',this.form.smsCode)
        // data.append('password',this.form.password)

        // this.form.password = this.$md5(this.form.password)
        this.$axios
        .post('/register/register',data)// 第一种，直就传个json数据，不需要设置headers
        // .post('/register/register',JSON.stringify(data),{//第二种，需要转成json，并且设置headers，否则报415错误
        //   headers: {
        //       'Content-Type': 'application/json;charset=UTF-8'
        //   }
        // })
        //   .post('/register/register',this.form)// 第三种，可以直接传递这个form（推荐）
          .then(resp => {
            console.log('请求本地接口OK')
            console.log(resp)

            if(resp.data.code == -1){
              // 接口返回-1，就是注册失败，提示消息提示用户
              this.$message({
                message: resp.data.msg,
                type: 'error'
              });
            } else if(resp.data.code == 0){
              console.log(resp.data)
              //注册成功
              this.$message({
                message: "注册成功",
                type: 'success'
              });

              // 跳转到登录页面
              this.$router.push('/login')

            }

          })
          .catch(function (error) { // 请求失败处理
            console.log('请求本地接口失败' + error);
          });

      }
    }
  }
</script>

<style scoped>
  .myelement {
    text-align:left
  }
  .input_width{
    width: 50%;
    width: 300px;
  }
</style>

后台注册的springboot接口如下(前面还有个通用的/register)：

@Transactional
@ApiOperation(notes = "用户注册接口", value = "用户注册接口", httpMethod = "POST")
@RequestMapping(value = "/register", method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
public @ResponseBody Result register(@RequestBody Person person){
    System.out.println("传入的注册信息 person = " + person.toString());
    if(StringUtils.isEmpty(person.getPhone())){
        return ResultUtil.error(ReturnCode.CODE_FAIL,"参数错误");
    }
    ....
}

效果图如下：

用法注意：