BitMap实现打卡

BitMap实现打卡(一) 前提说明

• 这里我们采用Vue3 + TS进行前端打卡页面的编写
• 采用Element Plus: https://element-plus.org/zh-CN
• 后端我们使用Spring Boot2.6.5 + JDK17进行编码

很显然,用这些主要是为了装x,其实用其他的并没有啥区别

前端环境搭建 创建项目

控制台输入指令

yarn create @vitejs/app clock_in

选择vue然后选择vue-ts

创建.env.development

# 开发环境
VITE_APP_TITLE = "打卡"
#端口号
VITE_APP_PORT = "3002"
# 请求接口
VITE_APP_DEV_URL = "http://localhost:8080"
# 前缀
VITE_APP_BASE_API = "/api"

创建.env.production

# 开发环境
VITE_APP_TITLE = "打卡"
#端口号
VITE_APP_PORT = "3002"
# 请求接口
VITE_APP_DEV_URL = "http://localhost:8080"
# 前缀
VITE_APP_BASE_API = "/api"

配置vite.js

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path')
const resolve = (dir: string) => path.join(__dirname, dir)

export default ({mode}) => defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve('./src'),
            '@v': resolve('./src/views'),
            '@c': resolve('./src/components'),
            '@u': resolve('./src/utils'),
            '@a': resolve('./src/api'),
        },
    },
    server: {
        host: '0.0.0.0',
        port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
        strictPort: true,
        https: false,
        open: true,
        proxy: {
            '/api': {
                target: mode==='development'?loadEnv(mode, process.cwd()).VITE_APP_DEV_URL:loadEnv(mode, process.cwd()).VITE_APP_PROD_URL,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        },
        hmr: {
            overlay: true
        }
    },
    build: {
        chunkSizeWarningLimit: 1500,
        rollupOptions: {
            output: {
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
                    }
                }
            }
        }
    }
})

安装包依赖

cnpm i

允许使用node(爆红再使用)

cnpm i --save-dev @types/node  

安装Element Plus

cnpm install element-plus --save 

安装sass

cnpm install sass --save 

修改main.ts

import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'


const app = createApp(App)

app.use(ElementPlus, {
    locale: zhCn,
})
app.mount('#app')

安装Axios

cnpm install axios --save 

安装moment.js

cnpm install moment --save

创建type.ts

export interface IResponse {
    success: boolean,
    errCode: string,
    errMessage: string,
    data: any
}

配置axios

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
import {ElMessage} from "element-plus";
import {IResponse} from "./type";

let service: AxiosInstance = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API + "/api",
    headers: {'Content-Type': 'application/json;charset=utf-8'}
});

// 请求拦截器
service.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        return config;
    },
    (error: any) => {
        return Promise.reject(error);
    }
)

// 响应拦截器
service.interceptors.response.use(
    (response: AxiosResponse) => {
        let res: IResponse = response.data
        if (!res.success) {
            ElMessage.error({message: res.errMessage || '请求失败', duration: 5 * 1000})
        }
        return Promise.resolve(res.data)
    },
    (error: any) => {
        const {response} = error;
        if (response) {
            ElMessage.error({message: '请求失败', duration: 5 * 1000})
            return Promise.reject(response.data);
        } else {
            ElMessage.warning('网络连接异常,请稍后再试!');
        }
    }
);


export default service

编写测试接口

import request from "../util/request";

export const test = () => {
    return request({
        url: '/test',
        method: 'GET'
    })
}

创建一个打卡界面