首页天道酬勤java开发为何要会vue,vue如何和后端结合

java开发为何要会vue,vue如何和后端结合

admin 05-05 16:45 213次浏览

相反,使用管理员权限运行以下命令

$ sudo npm install -g vue-cli

$ vue init网络包t cloud

$ cd tcloud

$ npm run dev

完成了利用脚手架创建和启动vue的项目。 访问http://localhost:8080,通过查看下图中的界面指示项目已成功启动。

二、引入vuex实现数据持久化

1 .首先调整目录结构,然后:

assets前端静态资源包括图像、样式和js插件

组件可重用组件

lang国际化/多语言环境简介cn.js商务相关文本翻译-简体tw.js商务相关文本翻译-繁体

pages业务组件

路由器路由配置文件

vuex store相关配置

App.vue根组件

main.js门户文件

安装vuex

$ npm install vuex --save

创建store文件

importvuefrom ' vue ' importvuexfrom ' vuex ' vue.use (vuex )

常数状态={

test:1,

lang:'cn'}

常数={

add:(state,data )={

state.select goods.push (数据)

state.test }

}

常数动作={

addtest:(commit ),data )={

commit (添加)、数据)。

}

}

导出默认newvuex.store ({ (

状态

mutations,

动作游戏

() )

4 .在门户文件main.js中引入store

导入存储自'./存储/存储'

//装载到根实例

newvue({

El : ' # APP ',

商店、

劳特、

组件: { app },

template: ''} )

5 .通过持久状态实现数据持久化

vuex可以进行全局状态管理,但刷新后数据会消失

安装

$ npminstallvuex -永久状态--save

在store.js中部署和配置

importcreatepersistedstatefrom ' vuex -永久状态' conststore=newvuex.store (.

plugins : [ createpersistedstate ]

storage : window.session storage,//不将默认存储设置为本地存储

指定需要reducer{val}{return{//持续化的状态

lang: val.lang

}

}

() ) ]

启用后,在浏览器存储中显示效果

三.实现多语言环境-简单繁体字转换

安装vue-i18n

$ npm install vue-i18n --save

2 .准备业务相关文本的翻译文件

创建VueI18n实例

代码如下

importvuefrom ' vue ' import vue i18n from ' vue-i18n ' importcnlocalefrom './cn ' importtwlocalefrom './tw ' importsttore

constI18n=newvueI18n({

locale : store.state.lang|| ' cn ',

消息传递3360 {

cn:

{ ...cnlocale },

tw: { ...twlocale }

}

})

exportdefault i18n

4.在main.js中引入vue-i18n

import i18n from './lang/index'

//把 i18n 挂载到 vue 根实例上

newVue({

el:'#app',

i18n,

axios,

store,

router,

components: { App },

template:''})

5.引用

//在HTML模板中引用

{{$t('log.out')}}

//在 js 模板中使用

this.$t('log.in')

6.解决切换语言后刷新界面时出现一瞬间白屏的问题

利用在app.vue的加上v-if属性和provide/inject,具体代码实现如下:

//App.vue文件

name:'App',

provide () {return{

reload:this.reload

}

},

data () {return{

isAlive:true}

},

methods: {

reload () {this.isAlive = false

this.$nextTick(function() {this.isAlive = true})

}

}

}

接下来在需要刷新的组件中注入reload函数

name:'refresh',

inject: ['reload'],

methods: {

refresh () {this.reload()

}

}

}

四、实现登录拦截

1.路由拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录(token存在),则顺利进入路由, 否则就进入登录页面。

const routes =[

{

path:'/',

name:'/',

component: Index

},

{

path:'/repository',

name:'repository',

meta: {

requireAuth:true, //添加该字段,表示进入这个路由是需要登录的

},

component: Repository

},

{

path:'/login',

name:'login',

component: Login

}

];

定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断

router.beforeEach((to, from, next) =>{if (to.meta.requireAuth) { //判断该路由是否需要登录权限

if (store.state.token) { //通过vuex state获取当前的token是否存在

next();

}else{

next({

path:'/login',

query: {redirect: to.fullPath}//将跳转的路由path作为参数,登录成功后跳转到该路由

})

}

}else{

next();

}

})

每个钩子方法接收三个参数:

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航

2.axios拦截器

当前token失效了,但是token依然保存在本地,这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。 这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断

//http request 拦截器

axios.interceptors.request.use(

config=>{if (store.state.token) { //判断是否存在token,如果存在的话,则每个http header都加上token

config.headers.Authorization =`token ${store.state.token}`;

}returnconfig;

},

err=>{returnPromise.reject(err);

});//http response 拦截器

axios.interceptors.response.use(

response=>{returnresponse;

},

error=>{if(error.response) {switch(error.response.status) {case 401://返回 401 清除token信息并跳转到登录页面

store.commit(types.LOGOUT);

router.currentRoute.name !== 'login' &&

router.replace({

path:'login',

query: {redirect: router.currentRoute.fullPath}

})

}

}return Promise.reject(error.response.data) //返回接口返回的错误信息

});

CPSession
layui框架,vue脚手架搭建项目步骤 vscode怎么创建vue项目,vue cli是什么
相关内容