前列のヒント: プロジェクトのソースコードは記事の最後にあります
Vue+Springboot+mysql ベースの従業員勤怠管理システム (マルチロールログイン、退勤、チェックイン)
開発環境: Springboot+ Mysql+Vue+Nodejs+Maven+JDK1.8
テクノロジー スタック: spring-boot、mysql、mybatis-plus、druid 接続プール。[023]に比べて、[024]はカルーセル機能が追加されており、データベースのテストケース作成も比較的わかりやすく、コース設計レポートも
2種類あり、絶対お値打ちです！アイデンティティディレクトリ:
ソースコード、データベース、カリキュラムの入手:
百度云链接：https://pan.baidu.com/s/1qXJwWxwh2PUD-BnM9N9jjg
提取码：6wsw
一部の機能とコードの紹介:
1.従業員の種類: 部長、次長、部長、人事担当者、財務担当者
<el-form-item label="员工角色">
<el-select v-model="employer.role" placeholder="请选择员工类型">
<el-option label="员工" value="0"></el-option>
<el-option label="部门经理" value="1"></el-option>
<el-option label="副总经理" value="2"></el-option>
<el-option label="总经理" value="3"></el-option>
<el-option label="人事人员" value="4"></el-option>
<el-option label="财务人员" value="5"></el-option>
</el-select>
2.パンチの種類
<el-button type="primary" @click="changeState(0)" :disabled='isHere'>上班打卡</el-button>
<el-button type="success" @click="changeState(1)" :disabled='!isHere'>下班打卡</el-button>
<el-button type="danger" @click="changeState(2)" :disabled='!isHere'>外出打卡</el-button>
<el-button type="warning" @click="changeState(3)" :disabled='isHere'>返回打卡</el-button>
3.タイプを残す:
formatType(row){
if (row.type == 0) {
return '事假';
} else if (row.type == 1) {
return '年假';
} else if (row.type == 2) {
return '婚假';
} else if (row.type == 3) {
return '产检';
} else if (row.type == 4) {
return '产假';
} else if (row.type == 5) {
return '哺乳';
} else if (row.type == 6) {
return '陪产';
} else if (row.type == 7) {
return '外出';
}
},
4.従業員情報の表示
<el-table
:data="page"
border
style="width: 100%"
>
<el-table-column
prop="empId"
label="员工ID"
>
</el-table-column>
<el-table-column
prop="account"
label="工号">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="gender"
label="性别"
:formatter="formatGender"
>
</el-table-column>
<el-table-column
prop="phone"
label="手机号"
>
</el-table-column>
<el-table-column
prop="role"
label="职位"
:formatter="formatRole">
</el-table-column>
</el-table>
いくつかのレポートのスクリーンショット:
1. Vscode フロントエンド実行プロセス:
1. インストールの依存関係
npm i
また
npm i
2. プロジェクトを開始する
npm run dev
6. ジャンプして開きます
(データベースはご自身でインポートしてください。ここでは展開されません)
IDEA バックエンド接続データベース チュートリアル (ナニー レベル):
(注: jdk1.8 を使用することをお勧めします)
対応するディレクトリを選択します
外部モデルから Maven プロジェクトをインポートするオプション
右側のデータベースに接続し
、ユーザー名、データベースのパスワード、データベース名をそれぞれ入力します。
springboot-vue-student-master\springboot-vue-student-master\src\main\resources にある application.yml 構成ファイルのパスワードを、必ず独自のデータベースのパスワードに変更してください。
Maven ファイルを更新して
正常に実行します
上記の操作を設定したら、次の画面を開くことができます。
http://localhost:8080/#/login
それを実行します
ソースコード取得：
Baiduクラウドリンク：https://pan.baidu.com/s/1CKMhVbtp8UTu7YRs2PDZug
抽出コード：6r5m
取得を追加することもできますcynm-2233。意図に注意してください。コードワードは簡単ではありません。親指を立ててください~