2020/6/8工作日报

早上固定背面试题，今天讲了后台系统的登录功能，从登录的布局到实现功能带着我们详细的走了一遍，还给我们说了接口的标准rest full,对于这一块以前光知道用get，post请求接口，但他的一个意思今天也是知道了

获取：GET     
创建：POST 
全部更新PUT   
部分更新 PATCH 
删除  DELETE    

顺便给我们讲了element-ui框架的使用

下载：npm i element-ui -S

在main.js中完整引入：
import ElementUI from 'element-ui';
Vue.use(ElementUI);import 'element-ui/lib/theme-chalk/index.css';  //框架的样式

按需引入：安装babel-plugin-component
npm install babel-plugin-component -D
然后在babel.config.js文件中添加一下代码
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
    [
        "component",
    {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
        }
    ]
]
}
之后就可以在main.js中引入
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)

讲完之后对于登录我自己也练习了，实现了登录功能，包括封装axios

request.js文件

import axios from "axios";
const instace = axios.create({
    baseURL: "https://www.liulongbin.top:8888/api/private/v1",
    timeout: 3000
});

//请求拦截器
instace.interceptors.request.use(
config => {
    return config;
},
error => {
    return Promise.reject("请求失败", error);
}
);

//响应拦截
instace.interceptors.response.use(
    res => {
        return res;
    },
    error => {
        return Promise.reject("请求失败", error);
    }
);
export default instace;

api.js文件

import request from "./request";
export function login(username, password) {
    return request({
        url: "/login",
        method: "POST",
        data: { username, password }  //传参
    });
}