vue-admin 基础使用

eslint

项目代码规范化
eslint设置

基础的crud

要创建一个基础的crud界面，首先要创建对应的路由
以src/router/modules/table.js下，complexTable为例

	{
      path: 'complex-table',
      component: () => import('@/views/table/complexTable'),
      name: 'ComplexTable',
      meta: { title: 'complexTable' }
    }
    component: () => import('@/views/table/complexTable'), 表示这个路由对应的vue界面的位置
    一个路由一般对应一个vue界面，注意这个子路由是在table的children的数组下的一个对象，在路由加载时就会加载成table下的子菜单
   

以 src/views/table/complexTable.vue为例
由于这里不支持双色，建议复制到vscode或者别的编译器中查看，我写的都是带了注释的应该为绿色

element-ui

• 饿了么官方文档
• el-dialog 弹窗对话框
  visible.sync 控制显示
• Form前端校验
  element-ui Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
  form校验数据

前后端请求

代码位置 src/api
建议一个view对应一个api下的js，将一个页面中基础的crud等与后端访问的请求写到一起，方便管理
这里使用了/utils/request.js，封装了一下axios请求，分别展示了一个get和post的使用方法

import request from '@/utils/request'

export function fetchList(query) {
  return request({
    url: '/ArticleApi/list',
    method: 'get',
    params: query
  })
}
export function createArticle(data) {
  return request({
    url: '/ArticleApi/create',
    method: 'post',
    data
  })
}

src/utils/request.js
这里的baseURL就是访问后端的基础路径，使用的是process.env.BASE_API ，在config/dev.env.js配置文件中配置BASE_API
例如 dev 环境中使用 fetchList 访问后台的路径就是 http://localhost:8080/ArticleApi/list
config/dev.env.js中的BASE_API是 http://localhost:8080
api 中的 url 是 /ArticleApi/list
当使用打包命令 npm run build 时，访问的就是 config/prod.env.js 文件中的 BASE_API

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API // api 的 base_url
  timeout: 5000 // 请求过期时间
})

// request interceptor
service.interceptors.request.use(
  config => {
    // Do something before request is sent
    if (store.getters.token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['Authorization'] = getToken()
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

分页

前端分页组件

前端请求将 page(页码) limit（每页条数）发给后台，后台筛选数据后，返回一个数组给前端

删除二次确认

• 删除二次确认

this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delArticle(tempData).then(() => {
         	....
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

{{ scope.row.status }}

filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },

一些常使用的vue语法

• this.$refs 一般来说 ，获取DOM元素，需要用

document.querySelector（".input1"）

获取这个dom节点，然后在获取input1的值。但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

  
  添加

• this.$nextTick 为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如：

{{message}}
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

框架登陆原理简单分析

框架登陆原理简单分析

element ui文档

饿了么UI文档

项目使用文档

项目使用文档