今日内容

项目初步构建

注册页面搭建，实现校验功能

项目依赖

Vue 基础

vue-cli、指令、组件、路由、vuex

axios

baseURL、拦截器

element-ui

安装与配置、常用的组件

npm 与模块化

能使用 npm 维护项目中的依赖包
ES6 模块化语法

一.项目初始化

创建vue项目找一个风水宝地,新建文件夹,打开小黑窗口，输入vue create 'demo'，选择最后一项自定义组建项目。
选择预设：choose Vue version Babel Router Vuex CSS Pre-processors Linter；并选择图中红框相应配置

3.删除项目中所有的 .vue 文件，并修改router/index.js 中的路由配置。

4.下载项目依赖包

 - `npm i axios`
 - `npm i element-ui`

5.在 main.js 中导入 element-ui

  `import ElementUI from 'element-ui'`
  `import 'element-ui/lib/theme-chalk/index.css'`

6.在 main.js 中导入配置 axios

// 导入axios
import axios from 'axios'
// 配置请求根路径
axios.defaults.baseURL = axios.defaults.baseURL= 'http://www.liulongbin.top:3008'
// 挂载axios到vue.prototype 上
Vue.prototype.$http = axios

二.项目构建

注册页面搭建

在 src/views 目录下，新建 Reg/Reg.vue ,参考 ElemnetUI 组件库中表单组件

主要html结构如下

<template>
  <!-- 注册页面的整体盒子 -->
  <div class="reg-container">
    <!-- 注册的盒子 -->
    <div class="reg-box">
      <!-- 标题的盒子 -->
      <div class="title-box"></div>
      <!-- 注册的表单区域 -->
      
      <!-- elementUI 表单组件 -->
      <el-form ref="regform" :rules="regformRules" :model="regform">
        <el-form-item prop='username'>
          <el-input
            v-model="regform.username"
            placeholder="请输入您的用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop='password'>
          <el-input
            v-model="regform.password"
            placeholder="请输入您的密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop='repassword'>
          <el-input
            v-model="regform.repassword"
            placeholder="请再次确认密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary">注册</el-button>
        </el-form-item>
      </el-form>
       <!-- 点击借助路由跳转至登录界面 -->
       <el-link type="primary">去登录</el-link>
    </div>
  </div>
</template>

注：
ref="regform"：利用ref属性获取当前form表单dom节点 ; :rules="regformRules"：为表单绑定验证规则 ;
:model="regform"：为表单绑定表单数据 ;
prop='属性名'：为表单每一项传入 Form 组件的 model 中的字段
v-model="regform.属性名"为表单每一项绑定数据

js 代码如下

<script>
export default {
  name: 'Reg',
  data () {
    // 自定义校验规则
    // 参数：rule : 基础校验规则; 
    // value: 绑定该自定义验证规则的属性值;
    // callback: 该自定义验证的回调，必须调用
    const samePwd = (rule, value, callback) => {
      if (value !== this.regform.password) {
        callback(new Error('两次密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // 表单数据
      regform: {
         username: '',
         password: '',
         repassword: ''
      },
      // 表单校验规则
      regformRules: {
        username: [
          { required: true, message: '请输入您的用户名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的字母数字', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入您的密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请再次确认密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' },
          // 自定义校验规则---validator,校验规则函数在data中定义
          { validator: samePwd, trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

注：
required ：设置当前表单是否是必填项
pattern: 设置正则验证
message : 设置校验失败后提示信息
trigger ：设置触发校验时事件类型 (blur表示当前元素失去焦点时触发) validator ：设置自定义校验规则，触发 trigger定义的事件时调用

注册功能实现

为注册button按钮绑定点击事件 @becomeNewUser

methods: {
    // 注册成为新用户   1.进行兜底验证    2.发送ajax成为新用户
    becomeNewUser () {
      //  1.进行兜底验证
      this.$refs.regform.validate(async valid => {
        if (!valid) return
        // 2.校验成功,发送ajax成为新用户
        const { data: res } = await this.$http.post('/api/reg', this.regform)
        // 2. 注册失败，提示失败信息
        if (res.code !== 0) return this.$message.error(res.message)
        // 3. 注册成功，提示成功信息
        this.$message.success(res.message)
        // 4. 跳转到登录页面
        this.$router.push('/login')
      })
    }
  }

this.$router.push('/login') :路由暂时还未配置，

下一章节功能实现

配置登录，注册页面路由

登录页面搭建

登录功能实现

基于ElementUI+Vue2前后端交互项目总结(一)