java开发为何要会vue,vue如何和后端结合
相反,使用管理员权限运行以下命令
$ 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) //返回接口返回的错误信息
});