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