一个关于vue+mysql+express的全栈项目（二）------ 前端构建

<!-- 全局安装vue-cli -->
npm install -g vue-cli
<!-- 设置vue webpack模板 -->
vue init webpack my-project
<!-- 进入项目 -->
cd my-project
<!-- 安装依赖 -->
npm install
<!-- 启动项目 -->
npm run dev

npm install axios --save

export default function getBaseUrl (type) {
let [baseUrl, protocol] = ['https://xxxxxxx', 'http://']
// 判断协议
if (location.protocol === 'https:') {
protocol = 'https://'
}
if (location.hostname !== 'localhost') {
baseUrl = protocol + location.hostname
}
return baseUrl
}

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
}

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()] : []
})

const getPoetryList = state => state.poetryList
const getPoetryItem = state => state.poetryItem
const getUserInfo = state => state.userinfo
const getcommentlists = state => state.commentlistexport {
getPoetryList,
getPoetryItem,
getUserInfo,
getcommentlists
}

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
}

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

const forMatDate = utc => {
if (utc) {
let date = new Date(utc)
let y = date.getUTCFullYear()
let M = date.getUTCMonth() + 1 >= 10 ? date.getUTCMonth() + 1 : `0${date.getUTCMonth() + 1}`
let d = date.getUTCDate() >= 10 ? date.getUTCDate() : `0${date.getUTCDate()}`
let h = date.getUTCHours() + 8 >= 10 ? date.getUTCHours() + 8 : `0${date.getUTCHours() + 8}`
let m = date.getUTCMinutes() >= 10 ? date.getUTCMinutes() : `0${date.getUTCMinutes()}`
let s = date.getUTCSeconds() >= 10 ? date.getUTCSeconds() : `0${date.getUTCSeconds()}`
return `${y}-${M}-${d} ${h}:${m}:${s}`
}
} export {
forMatDate
}