A full stack project on vue+mysql+express (ii)------front-end construction

First, the use of VUE-CLI scaffolding construction

1 <!--global installation VUE-CLI-- 2 npm install-g vue-CLI  3 <!--set Vue webpack template--> ; 4 vue init webpack my- Project 5 <!--entry to project-- 6 CD my-project  7 <!--installation dependent- 8npm Install 9 <!--startup Project- -npm Run Dev

Second, install Axios and unified Processing request interface (two times package Axios)

1. Installation

NPM Install Axios--save

2. Get the current domain name

1Exportdefault functionGetbaseurl (type) {2Let [baseUrl, protocol] = [' https://xxxxxxx ', '/HTTP ']3   //Judgment Protocol4   if(Location.protocol = = = ' https: ') {5protocol = ' https://'6   }7   if(location.hostname!== ' localhost ') {8BASEURL = protocol +Location.hostname9   }Ten   returnBASEURL One}

3. Package Axios

Import Axios from ' Axios 'Import QS from' Qs 'Import GetUrl from'./baseurl 'Import i18n from‘.. /.. /language '//Configuring config for AxiosConst LANGUAGE = ' MX 'Let config= {  //' BaseURL ' will be automatically added to the ' URL ', unless ' URL ' is an absolute URL.   //It is possible to pass a relative URL for a method of Axios instances by setting a ' BaseURL 'Baseurl:geturl (),//' withcredentials ' indicates whether credentials are required when cross-domain requests (cookies are used when logging in)Withcredentials:true, headers: {//Set' Content-type ': ' application/x-www-form-urlencoded '}, Transformrequest: [function(data) {//process the data before sendingdata =qs.stringify (data)returnData}], data: {//Global ParametersChanneltype: ' 6 ', Channeltag:' 6_7_0_0 ', Language:language}}//Intercept RequestAxios.interceptors.request.use (config) = {  //Console.log (' before request ')  if(channeltype) {Config.data.channelType=Channeltype}if(Channeltag) {Config.data.channelTag=Channeltag}returnconfig}, error= {  returnpromise.reject (Error)})//Axios Intercept ResponseAxios.interceptors.response.use (data) ={Let Resdata=Dataif(Data.data.errCode = = = 3 && Data.data.retCode = = 3) {  }  returndata}, error= {  returnpromise.reject (Error)}) Const GET= (URL, params) = ={URL=urlencode (URL, params)returnaxios.get (URL, config)}const post= (URL, params, con) = = {  returnaxios.post (URL, params, config)}//the parameters used to stitch the GET requestLet UrlEncode = (url, data) = = {  if(typeof(URL) = = = ' Undefined ' | | url = = =NULL|| url = = = ")return‘‘if(typeof(data) = = = ' Undefined ' | | data = = =NULL||typeof(data)!== ' object ')returnURL url+ = (url.indexof ('? ')!==-1)? ‘‘ : ‘?‘ for(Let Kinchdata) {URL+ = ((url.indexof (' = ')!==-1)? ' & ': ') + k + ' = ' +encodeURI (Data[k])}returnUrl}export {get, post}

4. In the SRC directory, create a new API folder (under which we place all our request interfaces) as

Iii. introduction of Vuex for state management

Create a new store folder in the SRC directory, and then click New Actions.js/getters.js/index.js/mutation-types.js/mutation.js/state.js

Index.js

import vue from ' vue ' Vuex '* As the actions from './actions '* as getters from './getters '  './state './mutations 'vuex/dist/logger '= Process.env.NODE_ENV!== ' production '   defaultnew  vuex.store ({  actions,  getters, state  ,  mutations,  Strict:debug,  huh? [Createlogger ()]: []})

2.getter.js

Const GETPOETRYLIST =state = "state =" state "= state =" state "= state = State.commentlist Export {  getpoetrylist,  Getpoetryitem,  getuserinfo,  getcommentlists}

3.mutation-types.js

Const Set_poetry_list = ' Set_poetry_list '= ' Set_poetry_item '= ' Set_user_info '= ' 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 '= {  [types. Set_poetry_list] (state, list) {    = list  },  [types. Set_poetry_item] (state, item) {    = Item  },  [types. Set_user_info] (state, userinfo) {    = userinfo  },  [types. Set_comment_list] (state, commentlist) {    = commentlist  default mutations

5.actions.js (used for asynchronous operation)

Four, set the filter (here is a simple time filter)

Create a new filter.js within the JS folder in the common directory

1Const FormatDate = UTC = = {2   if(UTC) {3Let date =NewDate (UTC)4Let y =date.getutcfullyear ()5Let M = Date.getutcmonth () + 1 >= 10? Date.getutcmonth () + 1: ' 0${date.getutcmonth () + 1}`6Let d = date.getutcdate () >= 10? Date.getutcdate (): ' 0${date.getutcdate ()} '7Let H = date.getutchours () + 8 >= 10? Date.getutchours () + 8: ' 0${date.getutchours () + 8}`8Let M = date.getutcminutes () >= 10? Date.getutcminutes (): ' 0${date.getutcminutes ()} '9Let S = date.getutcseconds () >= 10? Date.getutcseconds (): ' 0${date.getutcseconds ()} 'Ten     return' ${y}-${m}-${d} ${h}:${m}:${s} ' One   } A } -  - Export { the formatdate -}

Setting filters in Main.js

The above four steps, is a Vue project simple settings, of course, is not very comprehensive, but for our project is enough, as for the inside of some of the plug-ins or something, we will introduce the following.

A full stack project on vue+mysql+express (ii)------front-end construction