项目技术点总结

VUE项目列表

PC端：工业云官网

主要用的是element-ui组件库，有两种引入方式：一种时候全局引入，还有一种是cdn 引入。

一、vue技术点

   1、注册登录页面：

         a、slot的运用；

         b、vue一些属性的运用，后端渲染的时候用v-html；

         c、表单验证，引入vue-validator， element-ui 配套的验证插件；

         d、正则表达式：

              定义全局过滤器：

// 过滤非法字符
Vue.filter('validate', function (val) {
  val = val.toString()
  let reg = /[ `~!@#$%^&*()_+<>?:"{},\/;' ]/im
  if (reg.test(val)) {
    alert('请勿输入非法字符')
    // 返回时删除非法字符
    return val.substr(0, val.length - 1)
  } else {
    // 原内容返回
    return val
  }
})

    定义全局方法validate 

 

         常用正则表达式：

// name
export function checkName (rule, value, callback) {
  if (!value) {
    callback(new Error('用户名不能为空'))
  } else {
    // console.log(value.length);
    if (!(/^[a-zA-Z][a-zA-Z0-9_]{4,26}/.test(value))) {
      callback(new Error('5-25个字符，只限数字与字母，必须以字母开头不能包含非法字符'))
    } else {
      callback()
    }
  }
}
// mobile
export function checkMobile (rule, value, callback) {
  if (!value) {
    callback(new Error('手机号不能为空'))
  } else {
    if (!(/^(1)[34578]\d{9}$/g.test(value))) {
      callback(new Error('请输入中国大陆手机号，其他用户不可见'))
    } else {
      callback()
    }
  }
}

// email
export function checkEmail (rule, value, callback) {
  if (!value) {
    callback(new Error('邮箱不能为空'))
  } else {
    if (!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value))) {
      callback(new Error('邮箱格式不对'))
    } else {
      callback()
    }
  }
}

// 密码
export function checkPsw (rule, value, callback) {
  if (!value) {
    callback(new Error('密码不能为空'))
  } else {
    if (!(/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{5,25}$/.test(value))) {
      callback(new Error('密码至少包括字母，数字，符号中两种5-25个字符，不允许有空格'))
    } else {
      callback()
    }
  }
}
// 验证码
export function checkVerifyCode (rule, value, callback) {
  if (!value) {
    callback(new Error('请输入验证码'))
  } else {
    callback()
  }
}

// 中文姓名
export function checkChinaName (rule, value, callback) {
  if (!value) {
    callback(new Error('姓名不能为空'))
  } else {
    if (!(/^([\u4e00-\u9fa5]){2,7}$/.test(value))) {
      callback(new Error('请输入正确的姓名'))
    } else {
      callback()
    }
  }
}

         e、css方面

              主要是sass 的运用；

•    滚动条设置宽度：  ::webkit-scrollbar{width:1px;}
•    宽高适配可以用：  类似于 calc(100%-80px)
•    阴影(box-shadow): 多个阴影用逗号隔开；
•    css中用了position:fixed,那子元素也需要设置position

 

          f、Vuex

                vuex的核心是store，store 是一个大的容器，其中有大量的状态state。vuex 其实就是状态管理器，当其中的状态发生改变的时候，相应的vue组件也会得到高效的更新。

                vuex一般分为四个部分：

            

// state文件：index.js   

import actions from './actions'
import mutations from './mutations'
import getters from './getters'

// 初始化state状态
const state = {
    homeDataLoading: false,
    homeData: {},
    baseInfoData: {
        userName: '',
        gender: ''
    },
    HomeRequestStatus: {
        isError: false,
        msg: ''
    }
}
export default {
    state,
    getters,
    actions,
    mutations
}

  

相应的TYPE

// mutations_types.js  type文件
// 获取首页数据
export const GET_HOME_DATA = 'GET_HOME_DATA'

export const GET_HOME_DATA_CESHI = 'GET_HOME_DATA_CESHI'

export const LOADING_HOME_DATA = 'LOADING_HOME_DATA'

// 获取首页数据成功
export const GET_HOME_DATA_SUCCESS = 'GET_HOME_DATA_SUCCESS'

// 获取首页数据失败
export const GET_HOME_DATA_FAILED = 'GET_HOME_DATA_FAILED'

 

         mutatioans.js文件

// 处理同步逻辑

import * as type from './mutations_types'
import storage from '../../../config/storageHelp'
export default {
    [type.LOADING_HOME_DATA](state) {
        state.homeDataLoading = true
        state.HomeRequestStatus.msg = ''
        state.HomeRequestStatus.isError = false
    },

    [type.GET_HOME_DATA_SUCCESS](state, data) {
        let payload = data.payload
        state.homeDataLoading = false
        if (payload.result.success || window.navigator.onLine === false) {
            state.homeData = window.navigator.onLine === false ? payload.result : payload.result.data
            storage.userName = state.homeData.userRealName
            storage.gender = state.homeData.genderStr
            storage.save()
            state.HomeRequestStatus.isError = false
        } else {
            state.HomeRequestStatus.msg = payload.result.message
            state.HomeRequestStatus.isError = true
        }
    },

    [type.GET_HOME_DATA_FAILED](state, data) {
        let payload = data.payload
        state.homeDataLoading = false
        state.HomeRequestStatus.msg = payload.msg
        state.HomeRequestStatus.isError = true
    }
}

 

        action文件，触发commit方法，改变state

      

// 主要处理异步逻辑

import * as type from './mutations_types'
//  import moment from 'moment'
import {
    getHomeData
} from '../../../service/home'

export default {
    [type.GET_HOME_DATA]({
        dispatch,
        commit,
        state
    }, data) {
        if (window.navigator.onLine === true) {
            commit(type.LOADING_HOME_DATA)
            getHomeData().then(res => {
                commit({
                    type: type.GET_HOME_DATA_SUCCESS,
                    payload: {
                        result: res
                    }
                })
            }).catch((ex) => {
                commit({
                    type: type.GET_HOME_DATA_FAILED,
                    payload: {
                        isError: true,
                        msg: '获取首页数据失败, 服务器异常'
                    }
                })
            })
        } else {
            commit(type.LOADING_HOME_DATA)
            setTimeout(() => {
                commit({
                    type: type.GET_HOME_DATA_SUCCESS,
                    payload: {
                        result: data.payload
                    }
                })
            }, 1000);
        }
    },
    [type.GET_HOME_DATA_CESHI] (context, data) {
        console.log(context, 'context是什么啊')
    }
}

 

 

getters.js 输出vue组件中需要的state

 

//  store 的计算属性
//  import state from '../../../store/state'

export default {
    homeDataLoading: (state, getters, rootState) => {
        // console.log(rootState, 'rootState是什么啊')
        return state.homeDataLoading
    },
    homeData: (state, getters, rootState) => {
        return state.homeData
    },
    HomeRequestStatus: (state, getters, rootState) => {
        return state.HomeRequestStatus
    }
}

 

其中vue组件中可以通过dispatch方法触发相应的type，改变相应的state.

               

           

        

          g、生命周期

              其中想提下this.$nextTick  DOM渲染完后调用。例如新闻列表的渲染，在created中获取了，但需要对渲染后的列表进行操作。

               

  updateMessage() {
    this.message = 'updated'
    console.log(this.$el.textContent) // => 'not updated'
    this.$nextTick(() => {
      console.log(this.$el.textContent) // => 'updated' =>做某些操作
    })
  }

 

         e、页面缓存问题

           

            不建议使用！

 

        g、组件间的传值