基於ssm、Vue.js的簡單教師資訊管理系統
後端利用的是SSM框架，前端用的是elementUI+vue.js做的一個簡單的教師資訊管理
基於ssm、Vue.js的簡單教師資訊管理系統
一、資料庫設計
teacher 表
| 列段名 | 資料型別 | 含義 |
|---|---|---|
| tid | int | 教師編號：主鍵，標識列 |
| tname | varcahr | 教師名稱 |
| tjob | varcahr | 教師職稱 |
| tsal | int | 教師工資 |
生成表的sql語句
DROP TABLE IF EXISTS `teacher`;
CREATE TABLE `teacher` (
`tid` int(10) NOT NULL AUTO_INCREMENT COMMENT '教員編號',
`tname` varchar(25) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '教員姓名',
`tjob` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '教員職稱',
`tsal` int(10) DEFAULT NULL COMMENT '教員工資',
PRIMARY KEY (`tid`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
新增部分資料
INSERT INTO `teacher` VALUES (1, '王華', '初級教師', 2500);
INSERT INTO `teacher` VALUES (2, '李武', '中級教師', 5000);
INSERT INTO `teacher` VALUES (3, '趙迪', '高階教師', 6500);
當然也可以自己新增資料
二、專案後端程式碼
1、首先是使用搭建好的ssm專案，生成部分檔案
那就只需要在這個generatorConfig.xml 這個配置檔案中生成對應的model模型類，和mapper對映類
主要程式碼如下，在配置表資訊的部分，配置好表的資訊
<!-- 01 指定javaBean生成的位置 -->
<!-- targetPackage：指定生成的model生成所在的包名 -->
<!-- targetProject：指定在該專案下所在的路徑 -->
<javaModelGenerator targetPackage="com.zking.ssm.model"
targetProject="src/main/java">
<!-- 是否允許子包，即targetPackage.schemaName.tableName -->
<property name="enableSubPackages" value="false"/>
<!-- 是否對model新增建構函式 -->
<property name="constructorBased" value="true"/>
<!-- 是否針對string型別的欄位在set的時候進行trim呼叫 -->
<property name="trimStrings" value="false"/>
<!-- 建立的Model物件是否 不可改變 即生成的Model物件不會有 setter方法，只有構造方法 -->
<property name="immutable" value="false"/>
</javaModelGenerator>
<!-- 02 指定sql對映檔案生成的位置 -->
<sqlMapGenerator targetPackage="com.zking.ssm.mapper"
targetProject="src/main/resources">
<!-- 是否允許子包，即targetPackage.schemaName.tableName -->
<property name="enableSubPackages" value="false"/>
</sqlMapGenerator>
<!-- 03 生成XxxMapper介面 -->
<!-- type="ANNOTATEDMAPPER",生成Java Model 和基於註解的Mapper物件 -->
<!-- type="MIXEDMAPPER",生成基於註解的Java Model 和相應的Mapper物件 -->
<!-- type="XMLMAPPER",生成SQLMap XML檔案和獨立的Mapper介面 -->
<javaClientGenerator targetPackage="com.zking.ssm.mapper"
targetProject="src/main/java" type="XMLMAPPER">
<!-- 是否在當前路徑下新加一層schema,false路徑com.oop.eksp.user.model， true:com.oop.eksp.user.model.[schemaName] -->
<property name="enableSubPackages" value="false"/>
</javaClientGenerator>
<!-- 配置表資訊 -->
<!-- schema即為資料庫名 -->
<!-- tableName為對應的資料庫表 -->
<!-- domainObjectName是要生成的實體類 -->
<!-- enable*ByExample是否生成 example類 -->
<table schema="" tableName="teacher" domainObjectName="Teacher"
enableCountByExample="false" enableDeleteByExample="false"
enableSelectByExample="false" enableUpdateByExample="false">
<!-- 忽略列，不生成bean 欄位 -->
<!-- <ignoreColumn column="FRED" /> -->
<!-- 指定列的java資料型別 -->
<!-- <columnOverride column="LONG_VARCHAR_FIELD" jdbcType="VARCHAR" /> -->
</table>
2、TeacherMapper.java 對映類
package com.zking.ssm.mapper;
import com.zking.ssm.model.Teacher;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface TeacherMapper {
int deleteByPrimaryKey(Integer tid);
int insert(Teacher record);
int insertSelective(Teacher record);
Teacher selectByPrimaryKey(Integer tid);
int updateByPrimaryKeySelective(Teacher record);
int updateByPrimaryKey(Teacher record);
/**
* 查詢所有的教師資訊
* @param teacher
* @return
*/
List<Teacher> list(Teacher teacher);
}
注意：需要在原來生成的mapper的類中新增一個查詢所有的方法，方法的引數名Teacher物件，需要根據這個物件進行模糊查詢
在對映類的 TeacherMapper.xml 的配置檔案中新增一個list查詢的程式碼，不然在 TeacherMapper 的類中會報錯
list方法的程式碼
<select id="list" resultMap="BaseResultMap">
select <include refid="Base_Column_List"/>
from teacher where 1=1
<if test="tname!=null">
and tname like concat('%',#{tname},'%')
</if>
</select>
最後面說一句，也是最重要的，需要在TeacherMapper.java類中，新增持久類的註解
@Repository
不然到時候在Spring的上下文中找不到這個類
3、業務邏輯層也就是 Service層
ITeacherService
package com.zking.ssm.service;
import com.zking.ssm.model.Teacher;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Transactional
public interface ITeacherService {
int deleteByPrimaryKey(Integer tid);
int insert(Teacher record);
int insertSelective(Teacher record);
Teacher selectByPrimaryKey(Integer tid);
int updateByPrimaryKeySelective(Teacher record);
int updateByPrimaryKey(Teacher record);
List<Teacher> list(Teacher teacher);
}
需要新增@Transactional，在這裡宣告主要是為了在執行完目標方法之後根據執行情況提交或者回滾事務
TeacherServiceImpl
對應的實現類
package com.zking.ssm.service.impl;
import com.zking.ssm.mapper.TeacherMapper;
import com.zking.ssm.model.Teacher;
import com.zking.ssm.service.ITeacherService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class TeacherServiceImpl implements ITeacherService {
//到Spring上下文中去找到這個類
@Autowired
private TeacherMapper teacherMapper;
@Override
public int deleteByPrimaryKey(Integer tid) {
return teacherMapper.deleteByPrimaryKey(tid);
}
@Override
public int insert(Teacher record) {
return teacherMapper.insert(record);
}
@Override
public int insertSelective(Teacher record) {
return teacherMapper.insertSelective(record);
}
@Override
public Teacher selectByPrimaryKey(Integer tid) {
return teacherMapper.selectByPrimaryKey(tid);
}
@Override
public int updateByPrimaryKeySelective(Teacher record) {
return teacherMapper.updateByPrimaryKeySelective(record);
}
@Override
public int updateByPrimaryKey(Teacher record) {
return teacherMapper.updateByPrimaryKey(record);
}
@Override
public List<Teacher> list(Teacher teacher) {
return teacherMapper.list(teacher);
}
}
4、Controller層
package com.zking.ssm.controller;
import com.zking.ssm.model.Teacher;
import com.zking.ssm.service.ITeacherService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Repository;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping("/teacher")
@ResponseBody
public class TeacherController {
@Autowired
private ITeacherService teacherService;
/**
* 查詢的方法
* @param teacher
* @return
*/
@RequestMapping("list")//前端呼叫後端查詢的路徑
public Map<String,Object> list(Teacher teacher){
Map<String,Object> map=new HashMap<>();
List<Teacher> list = teacherService.list(teacher);
map.put("list",list);
return map;
}
/**
* 編輯教師資訊的方法
* @param teacher
* @return
*/
@RequestMapping("meger")//前端呼叫後端編輯的路徑
public Map<String,Object> meger(Teacher teacher){
if(null!=teacher.getTid()){
return update(teacher);
}else{
return add(teacher);
}
}
/**
* 新增的方法
* @param teacher
* @return
*/
private Map<String,Object> add(Teacher teacher){
Map<String,Object> map=new HashMap<>();
int i = teacherService.insertSelective(teacher);
if(i>0){
map.put("msg","教員新增成功");
}else{
map.put("msg","教員新增失敗");
}
map.put("code",i);
return map;
}
/**
* 修改的方法
* @param teacher
* @return
*/
private Map<String,Object> update(Teacher teacher){
Map<String,Object> map=new HashMap<>();
int i = teacherService.updateByPrimaryKeySelective(teacher);
if(i>0){
map.put("msg","教員資訊修改成功");
}else{
map.put("msg","教員資訊修改失敗");
}
map.put("code",i);
return map;
}
/**
* 刪除的方法
* @param teacher
* @return
*/
@RequestMapping("del")//前端呼叫後端刪除路徑的方法
public Map<String,Object> del(Teacher teacher){
Map<String,Object> map=new HashMap<>();
int i = teacherService.deleteByPrimaryKey(teacher.getTid());
if(i>0){
map.put("msg","教員資訊刪除成功");
}else{
map.put("msg","教員資訊刪除失敗");
}
map.put("code",i);
return map;
}
}
裡面的map中放的msg，code是到前端呼叫的之後的訊息提示和判斷
所有類之間的關係圖示
三、專案前端程式碼
1、下載一個SPA專案
2、元件的呼叫
import Vue from 'vue'
import Router from 'vue-router'
import Teacher from '@/views/Teacher'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Teacher',
component: Teacher
}
]
})
3、Teacher.vue
<template>
<div>
<div align="center">
<el-input v-model="form.tname" placeholder="請輸入內容" style="width: 10%"></el-input>
<el-button icon="el-icon-search" circle style="color: #409EFF;"></el-button>
<el-button @click="add()" type="warning" icon="el-icon-top" circle></el-button>
<el-table :data="tableData" stripe style="width: 60%">
<el-table-column prop="tid" label="教師編號" width="180">
</el-table-column>
<el-table-column prop="tname" label="教師名稱" width="180">
</el-table-column>
<el-table-column prop="tjob" label="教師職稱" width="180">
</el-table-column>
<el-table-column prop="tsal" label="教師工資">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="warning" size="mini" @click="edit(scope.row)">
<i class="el-icon-discover"></i>修改</el-button>
<el-button size="mini" type="danger" @click="deleteTeacher(scope.row)">
<i class="el-icon-delete-solid"></i>刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!--新增對話方塊 -->
<el-dialog center :title="title" :visible.sync="dialogFormVisible" style="width: 1000px;margin-left: 300px;">
<el-form :model="reform" status-icon :rules="rules" ref="reform">
<el-input type="hidden" v-model="reform.tid"></el-input>
<el-form-item label="教師名稱" prop="tname" label-width="100px">
<el-input placeholder="教師名稱" v-model="reform.tname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="教師職稱" prop="tjob" label-width="100px">
<el-input placeholder="教師職稱" v-model="reform.tjob" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="教師薪水" prop="tsal" label-width="100px">
<el-input placeholder="教師薪水" v-model.number="reform.tsal" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="doerror()">取 消</el-button>
<el-button type="primary" @click="doSubmit('reform')">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data: function() {
return {
title: "",
dialogFormVisible: false,
formLabelWidth: '120px',
tableData: [],
form: {},
reform: {},
rules: {
tsal: [{
required: true,
message: '工資不能為空'
},
{
type: 'number',
message: '工資只能為數字'
}
],
tjob: [{
required: true,
message: '職稱不能為空'
}],
tname: [{
required: true,
message: '教師名不能為空'
}],
}
};
},
methods: {
deleteTeacher: function(row) {
this.reform = row;
this.$confirm('此操作將永久刪除該檔案, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let url = "/teacher/del";
this.axios.post(url, this.reform).then((resp) => {
if (resp.data.code != 0) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.reform = {};
this.search();
} else {
this.$message.error(resp.data.msg);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
},
search: function() {
let url = "/teacher/list";
this.axios.post(url, this.form).then((resp) => {
this.tableData = resp.data.list;
})
},
edit: function(row) {
this.dialogFormVisible = true;
this.title = "修改教師資訊";
this.reform = row;
},
add: function() {
this.title = "新增教師資訊";
this.dialogFormVisible = true;
},
doSubmit: function(reform) {
this.$refs[reform].validate((valid) => {
if (valid) {
let url = "/teacher/meger";
this.axios.post(url, this.reform).then((resp) => {
if (resp.data.code > 0) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.dialogFormVisible = false;
this.search();
} else {
this.$message({
message: resp.data.msg,
type: 'error'
});
}
this.reform = {};
})
} else {
this.$message({
message: "請按提示輸入教師資訊",
type: 'error'
});
}
});
}
},
created: function() {
//載入表格資料
this.search();
}
}
</script>
<style>
</style>
4、各檔案之間的關係
四、演示
1、模糊查詢+查詢所有
2、新增教師資訊
它是有一個表單驗證的，需要填寫的所有值符合要求才能點選確定按鈕
新增成功會有提示
直接就可以在表格中看到這個新增的教師資訊
3、修改教師資訊
點選修改的按鈕會將個行所對應的的教師放到對話方塊中
當然修改之後會修改之後會有訊息提示
4、刪除教師資訊
在刪除資訊這裡一定要做的是就是詢問是否確認刪除
點選確認之後就會進行刪除，然後資料表格就是進行刪除
可以看到張平平這個人是被刪除了的，表格裡面也沒有這個人的資訊的了
五、小結一下
這個簡單的教師資訊的管理基本上可以說是沒有什麼業務邏輯的，有什麼不太理解的可以及時留言我看到就會回覆
有什麼想法的我們可以一起討論，請各位不吝賜教！！！！！
相關文章
- 073基於SSM酒店管理系統（前後臺）SSM
- 基於SSM框架的簡單問答社群SSM框架
- 基於SSM框架的文章管理系統（增加留言回覆功能）SSM框架
- 基於SSM開發的物業維修管理系統SSM
- 基於SSM開發的企業人事管理系統SSM
- 基於SSM框架的JavaWeb通用許可權管理系統SSM框架JavaWeb
- Java簡單學生資訊管理系統Java
- 基於php學生資訊管理系統PHP
- 基於SSM的職員考勤系統SSM
- java 基於SSM框架開發線上音樂視訊MV管理系統JavaSSM框架
- 基於java的社群居民資訊管理系統Java
- 基於JSP開發的物流資訊管理系統JS
- Python編寫簡單的學生資訊管理系統Python
- 基於SSM開發的健身俱樂部管理系統 JAVA MySQLSSMJavaMySql
- Java基於SSM框架的計算機學院管理系統（3）JavaSSM框架計算機
- 基於websocket的簡單廣播系統Web
- 基於Vue.js的簡單的svg進度條Vue.jsSVG
- 基於SSM的酒店管理系統畢業設計論文【範文】SSM
- 基於SpringBoot+Mybatis+Thymeleaf商品資訊管理系統Spring BootMyBatis
- Antted 視訊系統 v1.0.0 做簡單易用的視訊管理系統
- 基於Vue.js封裝一個簡單的select元件Vue.js封裝元件
- Python學生資訊管理系統-簡易版（Python基礎）Python
- SSM + easyUI 搭建簡易的人事管理系統 系統概要部分SSMUI
- 基於SSM的idea開發教師業績評價考核管理系統javaweb-php-asp.netC#-j2ee老師學生管理員三種許可權指標專案統計評分SSMIdeaJavaWebPHPASP.NETC#指標
- 關於SSM框架的一個簡單DemoSSM框架
- 基於Netty的Android系統IM簡單實現原理NettyAndroid
- 教務管理系統
- ssm星級酒店管理系統SSM
- 基於php的教學互動網站系統PHP網站
- 基於 Laravel5.5 的簡單個人部落格系統Laravel
- Java SSM練手小專案-手把手帶你搭建一個基於SSM框架的人力資源管理後臺系統JavaSSM框架
- 簡單介紹一個用於 Vue.js 的狀態管理庫：PiniaVue.js
- 配置一個簡單的傳統SSM專案SSM
- 基於java的大學生健康資訊管理系統的設計與實現Java
- C# 簡單的學生資訊管理系統，好看的UI介面，與資料庫互動C#UI資料庫
- SSM框架整合——書籍管理系統SSM框架
- 基於SSM開發的企業進存銷系統 JAVA MySQLSSMJavaMySql
- Java Swing+Mysql+beautyEye(介面優美)學校成績管理系統(管理員/學生/教師,資訊管理/選課管理/成績管理)JavaMySql