前端开发知识储备

前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要

最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发

提示

如果已经掌握，可以忽略

如果需要学习，可按照从左到右依次学习

🚀 VSCode安装与使用

vscode 宇宙第一的 IDE

🚀 ECMAScript 6

本项目只需要了解【快速入门】即可

🚀 Vue入门

本项目只需要了解【快速入门】即可

🚀 axios基础使用

本项目只需要了解【快速入门】即可

🚀 nodejs快速入门

本项目只需要了解【快速入门】即可

🚀 NPM包管理

本项目只需要了解【快速入门】即可

🚀 Webpack入门

🚀 Vue-element-admin使用

- name: 🚀 VSCode安装与使用
  desc: 'vscode 宇宙第一的 IDE'
  link: /pages/7ce1c3/
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
- name: 🚀 ECMAScript 6
  desc: '本项目只需要了解【快速入门】即可'
  link: /pages/b3f21e/
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
- name: 🚀 Vue入门
  desc: '本项目只需要了解【快速入门】即可'
  link: /pages/4e328b/
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
- name: 🚀 axios基础使用
  desc: '本项目只需要了解【快速入门】即可'
  link: /pages/579573/
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
- name: 🚀 nodejs快速入门
  desc: '本项目只需要了解【快速入门】即可'
  link: /pages/8bcbc9/
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
- name: 🚀 NPM包管理
  desc: '本项目只需要了解【快速入门】即可'
  link: /pages/621fd6/
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
- name: 🚀 Webpack入门
  desc: ' '
  link: /pages/41b293/
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
- name: 🚀 Vue-element-admin使用
  desc: ' '
  link: /pages/e74d2b/
  bgColor: '#DFEEE7'
  textColor: '#2A3344'

平台管理前端搭建

本项目使用的是 vue-admin-template (opens new window)

访问 vue-admin-template 项目，进行克隆或者下载zip解压

重命名为yygh-admin

执行 npm intall 安装依赖

执行 npm run dev 运行查看是否正常

前端开发步骤

step1：在 src/router/index.js 中添加路由信息，格式如下

{
    path: 'table',
    name: 'Table',
    component: () => import('@/views/table/index'),
    meta: { title: 'Table', icon: 'table' }
}

step2：设置页面跳转路径页面，编写该页面

component: () => import('@/views/table/index'),

step3：在src/api文件夹下创建js文件，用于定义接口请求

step4：在编写的页面中，引入该接口请求的js，调用接口实现业务逻辑

修改package.json

修改项目基本信息

"name": "yygh-admin",
"version": "4.4.0",
"description": "在线预约挂号项目学习",
"author": "work_stt@163.com",

更改.eslintrc.js

将2 -- error，改为1-- warn

在vue中，希望可以多个属性作为一行显示，而不报错

  rules: {
    "vue/max-attributes-per-line": [1, { ...

更改登录

由于该 vue-admin-template 登录是从mock数据中获取，当前开发没有user信息等，故先修改，写成固定user，方便登录

将登陆相关请求接口改为静态数据，不请求接口

• 修改 login getInfo logout 三个接口

import { getToken, removeToken, setToken } from '@/utils/auth'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}

const actions = {
  // user login
  // login({ commit }, userInfo) {
  //   const { username, password } = userInfo
  //   return new Promise((resolve, reject) => {
  //     login({ username: username.trim(), password: password }).then(response => {
  //       const { data } = response
  //       commit('SET_TOKEN', data.token)
  //       setToken(data.token)
  //       resolve()
  //     }).catch(error => {
  //       reject(error)
  //     })
  //   })
  // },

  login({ commit }, userInfo) {
    const data = { 'token': 'admin' }
    commit('SET_TOKEN', data.token)
    setToken(data.token)
  },

  // get user info
  // getInfo({ commit, state }) {
  //   return new Promise((resolve, reject) => {
  //     getInfo(state.token).then(response => {
  //       const { data } = response
  //
  //       if (!data) {
  //         return reject('Verification failed, please Login again.')
  //       }
  //
  //       const { name, avatar } = data
  //
  //       commit('SET_NAME', name)
  //       commit('SET_AVATAR', avatar)
  //       resolve(data)
  //     }).catch(error => {
  //       reject(error)
  //     })
  //   })
  // },

  getInfo({ commit, state }) {
    const data = {
      'roles': [
        'admin'
      ],
      'name': 'admin',
      'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
    }
    if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
      commit('SET_ROLES', data.roles)
    }
    commit('SET_NAME', data.name)
    commit('SET_AVATAR', data.avatar)
  },

  // user logout
  // logout({ commit, state }) {
  //   return new Promise((resolve, reject) => {
  //     logout(state.token).then(() => {
  //       removeToken() // must remove  token  first
  //       resetRouter()
  //       commit('RESET_STATE')
  //       resolve()
  //     }).catch(error => {
  //       reject(error)
  //     })
  //   })
  // },

  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      resolve()
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}