后台管理系统笔记一（用户登录页面）

 一 准备

（1）运行 cmd命令窗口输入命令

vue ui

创建vue2项目，

 配置  

下载axios依赖

（2）创建gitee仓库（最好与项目同名），将此项目托管到上面

二 创建login与Home页面并配置相应路由

开头：在项目终端创建分支login：

（1）main.js页面：

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import router from './router'
import './assets/css/global.css'
import './assets/fonts/iconfont.css'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$http=axios
axios.defaults.baseURL=' https://lianghj.top:8888/api/private/v1/'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

（2）components/login.vue:

前提：

npm i less
npm install less-loader --save-dev

<template>
    <div class="login_container">
      <div class="login_box">
        <div class="avatar_box">
            <img src="../assets/logo.png">
        </div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form" >
            <!-- 用户区 -->
                    <!-- prop对于规则rules -->
            <el-form-item prop="username">
                 <el-input v-model="loginForm.username"  prefix-icon="iconfont icon-user" ></el-input>
             </el-form-item>
             <!-- 密码区 -->
             <el-form-item prop="password">
                 <el-input type="password" v-model="loginForm.password"  prefix-icon="iconfont icon-3702mima"></el-input>
             </el-form-item >
             <!-- 按钮区 -->
             <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item >
        </el-form>
     </div>
    </div>
</template>
<script>
export default {
  data(){
    return{
        //登录表单的数据对象
        loginForm:{
        username:'admin',
        password:'123456'
        },
        loginFormRules:{
            username:[
                {required: true, message: '请输入登录名称', trigger: 'blur'},//触发方式：鼠标失去焦点时
                {min: 3, max: 10, message: '登录在 3 到 10个字符', trigger: 'blur'}
            ],
            password:[
                 {required: true, message: '请输入登录密码', trigger: 'blur'},//触发方式：鼠标失去焦点时
                {min:6, max: 15, message: '登录在 6到 15个字符', trigger: 'blur'}
            ]
        }
    }
  },
  methods:{
    resetLoginForm(){
        //console.log(this);
        this.$refs.loginFormRef.resetFields();
    },
    login(){
        this.$refs.loginFormRef.validate(async valid=>{
            //console.log(valid);//验证成功返回true,失败返回false
        if(!valid)return;
        const {data:res}=await this.$http.post("login",this.loginForm)
        console.log(res);
        if(res.meta.status!=200)return this.$message.error('登录失败')
          this.$message.success('登录成功')
          window.sessionStorage.setItem("token",res.data.token)
          this.$router.push("/home")
        })
    }
  }
}
</script>

<style lang="less" scoped>
 .login_container{
    background-color: aqua;
    height:100%
 }
 .login_box{
    width:450px;
    height:300px;
    background-color: #fff;
    border-radius:5px;
    position: absolute;
    left:50%;
    top:50%;
    //x、y轴正方向向右和下
     transform: translate(-50%,-50%);
  .avatar_box{
    height:130px;
    width:130px;
    border:1px solid #eee;
    position:absolute;
    left:50%;
    transform: translate(-50%,-50%);
     background: #fff;
    border-radius: 50%;
     padding:10px;
     box-shadow: 0 0 10px #ddd;
    img{
        width:100%;
        height:100%;
        border-radius: 50%;
         background: #eee;
    }
  }
 }
 .login_form{
    position:absolute;
    bottom:0;
    box-sizing: border-box;//让width包含边框和内边距，一般content-box为默认值
    width:100%;
    padding:10px;
 }
 .btns{
    display:flex;
     justify-content: flex-end;
 }
</style>

由于在点击登录时要获取数据库中的数据所以要提前启动MySql，并运行相应接口

（3）components/Home.vue:

<template>
     <div>
        <el-button type="info" @click="logout">退出</el-button>
     </div>
</template>
<script>
export default {
    methods:{
        logout(){
            window.sessionStorage.clear()
            this.$router.push('/login')
        }
    }
}
</script>
<style lang="less" scoped>

</style>

（4）plugins/element.js(按需引入elment-ui):

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message

（5）router/index.vue页面：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/login.vue'
import Home from '../components/Home.vue'
Vue.use(Router)
const router=new Router({
    routes:[
        //访问/，默认到login页面
        {path:'/',redirect:'/login'},
        {path:'/login',component:Login},
        {path:'/home',component:Home}
    ]
})
// 挂载路由导航守卫
router.beforeEach((to,from,next)=>{
    //to将要访问的路径
    //from代表从那个路径跳转而来
    //next是一个函数，表示放行
      //next()放行  next('/login)强制跳转
     if(to.path==='/login')return next()
     const tokenStr=window.sessionStorage.getItem('token')
     if(!tokenStr)return next('/login')
     next()
})
export default router;

（6）app.vue页面：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

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

<style>
#app {
 
}
</style>

效果：

 结尾提交代码到云端仓库：

git status
git add ./
git status
git commit -m "完成了登录功能"
git branch
git checkout master
git merge login    //master合并login分支代码
git push    //把本地代码推送到码云中

//接下来是把分支提交到码云中
git checkout login
git branch
git push -u origin login