首页 > 编程语言 >python之路 78 路飞项目、路飞前台全局css,全局配置文件、安装axios、vue-cookies、elementui、bootstrap和jq 、后台主页模块表设计、后台主页模块轮播图接口、

python之路 78 路飞项目、路飞前台全局css,全局配置文件、安装axios、vue-cookies、elementui、bootstrap和jq 、后台主页模块表设计、后台主页模块轮播图接口、

时间:2023-02-28 21:55:33浏览次数:51  
标签:cookies vue 主页 settings js 路飞 axios 模块 css

项目演示

登录
系统管理
   用户管理
   角色管理
   菜单管理
   部门管理
   岗位管理
   
最核心
   创建了用户,授予了角色,因为角色有权限,这个用户就有权限
   如果这个用户有权限,进入到系统,就能看到相关的操作,如果没有权限,就不能操作

路飞前台全局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

相关文章