一個關於vue+mysql+express的全棧項目（二）------ 前端構建

1、使用vue-cli腳手架構建

 1 <!-- 全局安裝vue-cli -->
 2 npm install -g vue-cli
 3 <!-- 設置vue webpack模板 -->
 4 vue init webpack my-project
 5 <!-- 進入項目 -->
 6 cd my-project
 7 <!-- 安裝依賴 -->
 8 npm install
 9 <!-- 啓動項目 -->
10 npm run dev

2、安裝axios並統一處理請求接口（二次封裝axios）

1.安裝

npm install axios --save

2.獲取當前域名

 1 export default function getBaseUrl (type) {
 2   let [baseUrl, protocol] = ['https://xxxxxxx', 'http://']
 3   // 判斷協議
 4   if (location.protocol === 'https:') {
 5     protocol = 'https://'
 6   }
 7   if (location.hostname !== 'localhost') {
 8     baseUrl = protocol + location.hostname
 9   }
10   return baseUrl
11 }

3.封裝axios

import axios from 'axios'
import qs from 'qs'
import getUrl from './baseUrl'
import i18n from '../../language'
// 配置axios的config
const language = 'mx'
let config = {
  // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
  // 它能夠經過設置一個 `baseURL` 便於爲 axios 實例的方法傳遞相對 URL
  baseURL: getUrl(),
  // `withCredentials` 表示跨域請求時是否須要使用憑證（登錄的時候會有cookie這個時候要用到）
  withCredentials: true,
  headers: {
    // 設置
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  transformRequest: [function (data) {
    // 處理髮送前的數據
    data = qs.stringify(data)
    return data
  }],
  data: {
    // 全局參數
    channelType: '6',
    channelTag: '6_7_0_0',
    language: language
  }
}
// 攔截請求
axios.interceptors.request.use((config) => {
  // console.log('請求前')
  if (channelType) {
    config.data.channelType = channelType
  }
  if (channelTag) {
    config.data.channelTag = channelTag
  }
  return config
}, error => {
  return Promise.reject(error)
})
// axios攔截響應
axios.interceptors.response.use((data) => {
  let resdata = data
  if (data.data.errCode === 3 && data.data.retCode === 3) {
  }
  return data
}, error => {
  return Promise.reject(error)
})

const get = (url, params) => {
  url = urlEncode(url, params)
  return axios.get(url, config)
}

const post = (url, params, con) => {
  return axios.post(url, params, config)
}

// 用來拼接get請求的時候的參數
let urlEncode = (url, data) => {
  if (typeof (url) === 'undefined' || url === null || url === '') return ''
  if (typeof (data) === 'undefined' || data === null || typeof (data) !== 'object') return url
  url += (url.indexOf('?') !== -1) ? '' : '?'
  for (let k in data) {
    url += ((url.indexOf('=') !== -1) ? '&' : '') + k + '=' + encodeURI(data[k])
  }
  return url
}

export {
  get,
  post
}

4.在src目錄下新建api文件夾（該文件夾下咱們放置咱們全部的請求接口）以下圖

3、引入vuex進行狀態管理

在src目錄下新建store文件夾，而後依次新建actions.js/getters.js/index.js/mutation-types.js/mutation.js/state.js

index.js

import Vue from 'vue'
import Vuex from 'vuex'

import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

2.getter.js

const getPoetryList = state => state.poetryList
const getPoetryItem = state => state.poetryItem
const getUserInfo = state => state.userinfo
const getcommentlists = state => state.commentlist

export {
  getPoetryList,
  getPoetryItem,
  getUserInfo,
  getcommentlists
}

3.mutation-types.js

const SET_POETRY_LIST = 'SET_POETRY_LIST'
const SET_POETRY_ITEM = 'SET_POETRY_ITEM'
const SET_USER_INFO = 'SET_USER_INFO'
const SET_COMMENT_LIST = 'SET_COMMENT_LIST'

export {
  SET_POETRY_LIST,
  SET_POETRY_ITEM,
  SET_USER_INFO,
  SET_COMMENT_LIST
}

4.mutation.js

import * as types from './mutation-types'

const mutations = {
  [types.SET_POETRY_LIST] (state, list) {
    state.poetryList = list
  },
  [types.SET_POETRY_ITEM] (state, item) {
    state.poetryItem = item
  },
  [types.SET_USER_INFO] (state, userinfo) {
    state.userinfo = userinfo
  },
  [types.SET_COMMENT_LIST] (state, commentlist) {
    state.commentlist = commentlist
  }
}

export default mutations

5.actions.js(用來進行異步操做)

4、設置過濾器（這裏是一個簡單的時間過濾器）

在common目錄下的js文件夾內新建filter.js

 1 const forMatDate = utc => {
 2   if (utc) {
 3     let date = new Date(utc)
 4     let y = date.getUTCFullYear()
 5     let M = date.getUTCMonth() + 1 >= 10 ? date.getUTCMonth() + 1 : `0${date.getUTCMonth() + 1}`
 6     let d = date.getUTCDate() >= 10 ? date.getUTCDate() : `0${date.getUTCDate()}`
 7     let h = date.getUTCHours() + 8 >= 10 ? date.getUTCHours() + 8 : `0${date.getUTCHours() + 8}`
 8     let m = date.getUTCMinutes() >= 10 ? date.getUTCMinutes() : `0${date.getUTCMinutes()}`
 9     let s = date.getUTCSeconds() >= 10 ? date.getUTCSeconds() : `0${date.getUTCSeconds()}`
10     return `${y}-${M}-${d} ${h}:${m}:${s}`
11   }
12 }
13 
14 export {
15   forMatDate
16 }

在main.js中設置過濾器

上面四個步驟，是一個vue項目的簡單設置，固然不是很全面，可是對於咱們這個項目倒是足夠了，至於裏面用的的一些插件什麼的，咱們後面再一一介紹。。。。