vue+element 表单自定义校验+分页器+axios封装

表单自定义校验

data() {
    var checkEmail = (rule, value, callback) => {
      if (value.indexOf("@") == -1 || value.indexOf(".") == -1) {
        return callback(new Error("邮箱应包含@和."));
      }
      callback();
    };
    var checkMobile = (rule, value, callback) => {
      let reg = /^1[35-9]\d{9}$/;
      if (!reg.test(value)) {
        return callback(new Error("手机号应是以1开头的11位数字"));
      }
      callback();
    };
    return {
      ruleForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },
    };
 }
复制代码

分页

<!-- 分页器 -->
<!-- page-size每页显示条目个数，支持 .sync 修饰符 -->
<!-- page-sizes每页显示个数选择器的选项设置 -->
<!-- current-page当前页数，支持 .sync 修饰符 -->
<!-- layout组件布局，子组件名用逗号分隔 -->
<!-- total总条目数 sizes每页显示个数选择器 prev上一页 pager页数显示器 next下一页 jumper输入跳转指定页 -->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[5, 10, 15, 20]"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
>
</el-pagination>
复制代码

data() {
    return {
      currentPage: 1,
      // 在api接口中获取总条数
      total: 0,
      pagesize: 5,
    };
},
methods: {
    // 每页显示条目数变化时的回调函数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
      // 重新获取数据渲染表格
      this.getTableData();
    },
    // 当前页数变化时的回调函数
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      // 重新获取数据渲染表格
      this.getTableData();
    },
}
复制代码

axios封装

// index.js
import axios from 'axios'

var instance = axios.create({
    baseURL: '*******',
    timeout: 3000
})

instance.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，
        // 此处token一般是用户完成登录后储存到localstorage里的
        localStorage.token && (config.headers.Authorization = localStorage.token)
        return config
    },
    error => {
        return Promise.error(error)
    })

instance.interceptors.request.use(
    response => {
        return response
    },
    error => {
        return Promise.error(error)
    })

export const httpServe = (path, params = {}, method = 'get', data = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            url: path,
            params,
            method,
            data
        })
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
    })
}
复制代码

// request.js
import {httpServe} from '@/http/index.js'

// 登录请求
export const loginPost = (path,data)=> httpServe(path,{},'post',data)
// 左侧菜单列表
export const menusGet = (path,params)=>  httpServe(path,params)
// 用户列表
export const usersGet = (path,params)=>  httpServe(path,params)
// 添加用户
export const addusersPost = (path,data)=> httpServe(path,{},'post',data)