vue el-select 根据后台返回值显示_电商后台管理系统2

一、登录和退出功能

有跨域问题，用token维持登录状态；无跨域问题，用cookie和session维持登录状态

token原理：

登录页面的布局

通过 Element-UI 组件实现布局，用到了：

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

前端文件的根目录下打开终端

打开可视化面板查看项目运行效果

前端文件的根目录下打开powershell，执行vue ui

把打开的页面重置为空白页面

把app.vue清理干净

<template>
 <div id="app">
    APP根组件
 </div>
</template>

<script>
export default {
    
 name: 'app',
}
</script>

<style>
</style>

把router下的index.js里routes数组清空

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
    
    routes: [

    ]
})

components文件夹清空，除了App.vue 其他组件都删除

components下新建Login.vue

<template>
    <div>
        登录组件
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
</style>

打开router.js 引入组件，定义路由规则

import Login from './compoents/login.vue'
routes: [
    {
     path:'/login', component:Login }
]

app.vue中添加占位符

<router-view></router-view>

打开router.js书写重定向规则

{
     path: '/', radirect: '/login' },

login.vue 命名标签 书写样式

<div class="login_container">

.login_container {
    
    background-color: #2b4b6b;
    height: 100%
}

安装依赖 开发依赖 less-loader less 重新启动

assets文件夹下新建css文件夹 里面新建global.css文件，书写全局样式

html,
body,
#app {