项目准备（git版本控制）--＞ 项目--登录功能（一）

版本控制

  1 git init  ->.git     创建.git隐藏文件
  2 git status      查看状态
  3 git add .     监控工作区的状态树 会把工作时的所有变化提交到暂存区
  4 git commit -m '注释'   
  5 在代码托管平台（github）新建远程仓库
  6 git remote add origin https://gitee.com/renghonhai/webqianduan.git    关联仓库
  7 git push -u origin master  推送到远程仓库master分支 之后 再push 直接git push 

登录功能

1 新建分支 —— 专门写登录功能
git branch —— 查看当前有什么分支
git checkout -b 分支名 ————新建分支 并切换到新建分支

新建组件

<template>
  <div>
    <p>登录</p>
  </div>
</template>

<script>
  export default {
    name:'Login'
  }
</script>

<style scoped>

</style>

配置路由

const Login = () => import('@/views/login/Login.vue')  导入组件

  {
      path: '/login',
      name: 'login',
      component: Login
   }

注意每完成一个小功能就提交一次 等写完整个功能再推送
但是推送操作要master去完成 并合并

引入表单组件

在登录组件引入el-form

<el-form :label-position="labelPosition" label-width="80px" :model="formData">
      <h2>用户登录</h2>
      <el-form-item label="用户名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formData.region"></el-input>
      </el-form-item>
       <el-button type="primary">登录按钮</el-button>
    </el-form>

需要data数据

 data() {
          return {
            labelPosition: 'top',  //可选值为 top、left，当设为 top 时标签会置于表单域的顶部
            formData: {
              name: '',
              region: '',
              type: ''
            }
          };
        }

样式调整

新建一个css文件初始化样式 存放公共样式 assets>css>reset.css

html,
body{
  height: 100%;
  padding: 0;
  margin: 0;
}

在main.js引用

import '@/assets/css/reset.css'

2 ，在app.vue添加高度 因为 app.vue还有个盒子 而我们登录组件是在这个盒子内

#app {
  height: 100%;
}

登录组件样式

  .login-wrap{ /*dav样式*/
    height: 100%;
    background-color: #324152;
    display: flex; /* 弹性盒子布局*/
    justify-content: center; /* 水平居中*/
    align-items: center; /* 上下居中*/
  }

  .login-wrap .login-form {  /* form表单样式*/
    width: 500px;
    background-color: #fff;
    border-radius: 10px;  /* 圆角的边框*/
    padding: 30px; /* 内边距*/
  }

  .login-wrap .login-btn {/* 按钮样式 */
    width: 100%;
  }

安装axios 插件

npm install axios -save

将axios变成插件使用
1.新建目录 plugins 该目录放置自己定义的插件
2.在plugins目录下新建 http.js 文件

//插件模块
import axios from 'axios'

const MyHttpServer={}

MyHttpServer.install = (Vue) => {

axios.defaults.baseURL='http://localhost:8888/api/private/v1/'  //配置基准地址

  // 4. 添加实例方法
  Vue.prototype.$http =axios
}

export default MyHttpServer

3，在main导入使用插件

import MyHttpServer from '@/plugins/http.js'
Vue.use(MyHttpServer);

配置跨域

proxyTable: {
       '/api': {
              target:'http://127.0.0.1:8888/api/private/v1/', // 你请求的第三方接口
              changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
              pathRewrite:{  // 路径重写，
                '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
              },

            }

    }

发送登录axios请求 跳转到主页

给登录按钮添加登录方法
@click.prevent="handleLogin()"

在methods:{}编写登录请求方法
handleLogin(){

            this.$http.post('/api/login',this.formData).then((res)=>{
                console.log(res)
                const {
                  data,meta:{msg,status}
                } = res.data
                //登录成功
                if(status===200) {
                  //1.跳转home
                  this.$router.push({name:'Home'})
                  //2.提示成功
                  this.$message.success(msg);

                }else{
                  //不成功
                  //1.提示消息
                  this.$message.error(msg);
                }
            });

编写home组件 并配置路由

<template>
  <div>
    home
  </div>
</template>

<script>
  export default {
    name:'Home'
  }
</script>

<style scoped>

</style>

配置路由

const Home = () => import('@/views/home/Home.vue')
	{
      path: '/',
      name: 'Home',
      component: Home
    }

简化登录请求代码

需求 希望异步操作的代码 看起来像同步代码
ES7 async +await

/*
          需求 希望异步操作的代码 看起来像同步代码
          async +await
          1.找到异步操作 有结果的代码  前面加上 await 同时接受异步操作的结果res
          2.找到距离异步操作有结果的最近的方法 加上async
          */

         async handleLogin(){

          const res =await this.$http.post('/api/login',this.formData)
              const {
                 data,meta:{msg,status}
               } = res.data
               //登录成功
               if(status===200) {

                 //1.跳转home
                 this.$router.push({name:'Home'})
                 //2.提示成功
                 this.$message.success(msg);

               }else{
                 //不成功
                 //1.提示消息
                 this.$message.error(msg);
               }

登录保存token值

目的:防止用户没登陆 通过url 直接来到home组件
在登录成功时 保存正确用户的token值

localStorage.setItem('toke',data.token)  存储到本地

localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value)：将value存储到key字段