main.js 代码:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Codemirror from 'vue-codemirror'
import ElementUI from 'element-ui'
import VueHighlightJS from 'vue-highlightjs'
import VueResource from 'vue-resource'
import VueCookies from 'vue-cookies'
import echarts from 'echarts'
import yamljs from 'yamljs'
import api from '@/utils/api'
import EventBus from './lib/eventBus.js'

import './lib/css'
import './lib/script'
import './lib/global'

import 'xterm/dist/xterm.css'
import 'codemirror/lib/codemirror.css'
import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css'
import './assets/icon/iconfont.css'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueHighlightJS)
Vue.use(VueResource)
Vue.use(VueCookies)
Vue.use(yamljs)
Vue.use(Codemirror, /* { 
  options: { theme: 'base16-dark', ... },
  events: ['scroll', ...]
} */)

Vue.prototype.$bus = EventBus
Vue.prototype.$echarts = echarts
Vue.prototype.api = api
Vue.prototype.getUrlKey = function(name) {
	return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)
(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null
}
const baseUrl = process.env.NODE_ENV === "development" ? "" : ""

Vue.http.interceptors.push((request, next) => {
  request.url = baseUrl + request.url
	next((response) => {
	 console.log(response.body)
	 if (response.status >= 400) {
	   vue.$message({
		message: response.statusText,
		type: 'error'})
	 } else if (response.body && !response.body.success) {
	   vue.$message({
		message: response.body.errorMsg || '操作失败!',
		type: 'error'})
	 }
  })
})

/* eslint-disable no-new */
const vue = new Vue({
	el: '#app',
	router,
	components: { App },
	template: '<App/>'
})

export default vue

自上到下分别导入组件并use(install),非install组件直接prototype指向

然后对http做了intercepter 拦截处理,最后调用到了main.js 同目录下的app.vue

app.vue 在<script>mounted() {}</script>中调用了登陆校验请求,同时请求传入了校验成功之后跳转的url,这个url对应的vue页面

就是该前端项目的页面,在mounted(){} 方法中将用户sesstion传入后端。

Logo

前往低代码交流专区

更多推荐