继续挖掘vue
vue 后台登录和 权限模块开发。
https://juejin.cn/post/6959388179380043784
https://shimo.im/docs/pxwyJHgqcWjWkTKX/read
（案例学习）
https://mp.weixin.qq.com/s/uD5_NgHryfJGWEP4uxlA5w
这个步骤和我的差不多思路。我没有使用shiro
还有一个b站里面
登录功能的完成。
axios 的使用，初始化。
// create an axios instance
const service = axios.create({
baseURL: 'http://192.168.1.138:1000', // url = base url + request url
timeout: 5000,
withCredentials: false
})
loginForm:{
name:'admin',
pass:'123456'
}
// 为给定 ID 的 user 创建请求
axios.post('/login')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
网络请求会遇到 跨域情况。这个几个项目里面都说了这一点。。。
基本都是对WebMvcConfigurer 拦截的重写。
/**
* 跨域问题解决 vue 访问出现的
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.maxAge(3600)
.allowCredentials(true);
}
开始写 首页 了。
学习vue 案例。开始实战中。
在router 里面添加index js 中添加路径
import home from '@/views/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
{
path: '/login',
name: 'login',
component: login
},
]
})
登录成功之后，进入首页。。。
localStorage.setItem("Token", data.token)
// console.log(data.token)
// alert(response.data.token);
this.$router.push({
path: '/'
}) // 登录成功之后重定向到首页
image.png
代码
<template>
<el-container style="height: 100%">
<!--左侧 菜单-->
<el-aside width="auto">
<el-menu :collapse='!showSidebar' :default-active="this.$route.path"
class="el-menu-vertical-demo" text-color="#595959">
<!-- logo -->
<div style="color: #1890ff; height: 40px; text-align: center; ">
<h1 style="font-size: 20px;" >xxxxx</h1>
<!--<h1 >125588</h1>-->
</div>
<!-- 菜单树 -->
<template v-for="item in menuList">
<el-submenu :index="item.url" :key="item.id" v-if="item.children.length != 0">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{item.name}}</span>
</template>
<el-menu-item :index="child.url" :key="child.id" @click="menuAction(child.url)"
style="margin-left: 10px;" v-for="child in item.children">
{{child.name}}
</el-menu-item>
</el-submenu>
<el-menu-item :index="item.url" :key="item.id" @click="menuAction(item.url)"
v-if="item.children.length === 0">
<i :class="item.icon"></i>
<span @click="menuAction(item.id)" slot="title">{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<!-- 右边详情界面 -->
<el-container>
<el-header>
<!-- 菜单树控制按钮 -->
<span>
<i :class="showSidebar ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click.stop="switchSidebar"
style="font-size: 25px;cursor:pointer;"></i>
</span>
<!-- 右侧 -->
<div class="header-right">
<el-dropdown style="margin-left: 5px;">
<span class="el-dropdown-link">
<i class="el-icon-user-solid" style="font-size: 20px">
<span style="font-size: 15px; margin-left: 5px; ">{{loginUser.name}}</span>
</i>
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" style="padding-bottom: 4px;">
<el-dropdown-item
@click.native="menuAction('/loginDetail',{code: loginUser.code})">个人中心
</el-dropdown-item>
<el-dropdown-item
@click.native="menuAction('/modifyPassword',{code: loginUser.code})">修改密码
</el-dropdown-item>
<el-dropdown-item @click.native="logout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
methods 是方法的地方。。。
例如退出登录
methods: {
/*菜单显示和隐藏*/
switchSidebar () {
this.showSidebar = !this.showSidebar
},
/*菜单的展示和显示*/
menuAction (url, query) {
this.$router.push({path: url, query: query})
},
logout(){
localStorage.clear()
this.$router.push({
path: '/login'
})
},
},
刚启动home 的页面的时候获取数据
/**
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
*/
created() {
},
这里获取权限和用户信息
权限先写死。。。一个json 串。。
然后在写两个界面。。。route.push 就可以了。。。
image.png
这样做就需要把route中index.js 修改了一下。
export default new Router({
routes: [
{
path: '/',
name: 'home',
meta: {tab: false},
component: home,
children: [
{
path: '/home',
name: 'index',
component: index
},
{
path: '/info',
name: 'info',
component: info
},
]
},
{
path: '/login',
name: 'login',
component: login
},
]
})
home 下有俩个路径，就代表着有俩个 文件，点击就是上面的效果了。。
登录路径没有在里面，所以登录时其它的界面。。。
首页搭建完成。开始从后台获取数据，然后显示出来。
首页几乎是静态的页面。
rout push 路径，只要在首页里面是他自路径就行了。
最近看了一篇文章
https://juejin.cn/post/6951649464637636622
还有
- vue3.x 版本 https://gitee.com/lyt-top/vue-next-admin
- vue2.x 版本 https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin
发现之前写的vue 后台模块1中既有vue2的内容，也有vue3的内容。
之后都是vue2的内容了。
至此，更正一下。。。
vue 模块环境不同而已。
vue3 的环境看
https://juejin.cn/post/6951649464637636622
vue2的可以继续看。
网友评论