项目演示
登录
系统管理
用户管理
角色管理
菜单管理
部门管理
岗位管理
最核心
创建了用户,授予了角色,因为角色有权限,这个用户就有权限
如果这个用户有权限,进入到系统,就能看到相关的操作,如果没有权限,就不能操作
路飞前台全局css,全局配置文件
整理项目
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
router/index.js
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]
HomeView.vue
<template>
<div class="home">
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
其他页面组件和小组件都删除
全局css
正常写前端项目,需要去掉所有标签的默认样式,css
第一步:新建一个assets-css -----global.css
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
margin: 0;
padding: 0;
font-size: 15px;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
table {
border-collapse: collapse; /* 合并边框 */
}
第二步:全局生效 main.js中配置
使用全局css样式,只需要导入就会生效
import '@/assets/css/global.css'
全局js
向后端发送请求,请求地址测试阶段127.0.0.1:8000--》后期上线,地址要变,如果在组件中把地址写死,以后,要改,每个都要改
写一个全局js,js中有个url地址,以后所有组件中发送请求时,都是用这个url地址
导入导出
使用步骤:
第一步:新建
assets --js ----settings.js
export default {
BASE_URL:'http:127.0.0.1:8000/api/v1'
}
第二步:在main.js中引入
//引入settings.js,把settings对象放入到vue的原型中
import settings from "@/assets/js/settings";
Vue.prototype.$settings = settings
// 以后在任意组件中只需要 this.$settings.BASE_URL
第三步:在任意组件中使用
this.$settings.BASE_URL this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{
})
安装axios
跟后端交互
# 使用步骤:
第一步:安装 cnpm install axios -S
第二步:把axios放到vue原型中,main.js中
import axios from "axios";
Vue.prototype.$axios=axios
第三步:在任意组件中使用
this.$ajax.get()
安装vue-cookies
后期登录成功,token存在cookie中
# 使用步骤
第一步:安装 cnpm install vue-cookies -S
第二步:把vue-cookies放到vue原型中,main.js中
import cookies from "vue-cookies";
Vue.prototype.$cookies=cookies
第三步:在任意组件中使用
this.$cookies.set()
this.$cookies.set()
安装elementui
样式,使用elementui
# 使用步骤:
第一步:安装 cnpm install element-ui -S
第二步:main.js配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
第三步:复制,粘贴
标签:cookies,vue,主页,settings,js,路飞,axios,模块,css
From: https://www.cnblogs.com/xm15/p/17166185.html