• Vue+Element之SpingBoot学生管理系统

    目录

    前后端分离

            1.1后端

            1.1.1配置generatorConfig.xml中的mysql文件目录,自动生成代码

            1.1.2mapper层

            1.1.2.1mapper.xml层

            1.1.3StudentService-->将BookMapper复制到Service

            1.1.4StudentServiceImpl（业务逻辑层）

            1.1.5StudentController层

            1.2前端

            1.2.1在cmd中下载依赖npm i(install)

            1.2.2在api中action.js配置请求路径

            1.2.3前端views写前端页面功能代码

            1.2.4在cmd中跑起来npm run dev

    查询+主页面绑值

    新增

    generatorConfig.xml

    mapper层

    1.  
    2. @Repository
    3. public interface StudentMapper {
    4.  
    5.     /**
    6.      * 新增
    7.      * @param record
    8.      * @return
    9.      */
    10.     int insert(Student record);
    11.  
    12.     /**
    13.      * 查询
    14.      * @param student
    15.      * @return
    16.      */
    17.     List all(Student student);
    18. }

     mapper.xml层

    1. "1.0" encoding="UTF-8" ?>
    2. mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    3. <mapper namespace="com.zking.spboot.mapper.StudentMapper" >
    4.   <resultMap id="BaseResultMap" type="com.zking.spboot.model.Student" >
    5.     <constructor >
    6.       <idArg column="sid" jdbcType="INTEGER" javaType="java.lang.Integer" />
    7.       <arg column="sname" jdbcType="VARCHAR" javaType="java.lang.String" />
    8.       <arg column="score" jdbcType="VARCHAR" javaType="java.lang.String" />
    9.       <arg column="sex" jdbcType="VARCHAR" javaType="java.lang.String" />
    10.     constructor>
    11.   resultMap>
    12.   <sql id="Base_Column_List" >
    13.     sid, sname, score, sex
    14.   sql>
    15.  
    16.     <select id="all" resultType="com.zking.spboot.model.Student">
    17.       select <include refid="Base_Column_List" /> from t_student where 1=1
    18.       <if test="sname!=null">
    19.         and sname like concat('%',#{sname},'%')
    20.       if>
    21.     select>
    22.  
    23.   <insert id="insert" parameterType="com.zking.spboot.model.Student" >
    24.     insert into t_student (sname, score,sex)
    25.     values (#{sname,jdbcType=VARCHAR}, #{score,jdbcType=VARCHAR},#{sex,jdbcType=VARCHAR})
    26.   insert>
    27.  
    28. mapper>

    StudentService

    1.  
    2. public interface StudentService {
    3.  
    4.     /**
    5.      * 新增
    6.      * @param record
    7.      * @return
    8.      */
    9.     int insert(Student record);
    10.  
    11.     /**
    12.      * 查询
    13.      * @param student
    14.      * @return
    15.      */
    16.     List all(Student student);
    17. }

    StudentServiceImpl 

    1. @Service
    2. public class StudentServiceImpl implements StudentService {
    3.     @Autowired
    4.     private StudentMapper studentMapper;
    5.     @Override
    6.     public int insert(Student record) {
    7.         return studentMapper.insert(record);
    8.     }
    9.  
    10.     @Override
    11.     public List all(Student student) {
    12.         return studentMapper.all(student);
    13.     }
    14. }

    StudentController层

    1. package com.zking.spboot.controller;
    2.  
    3. import com.zking.spboot.model.Student;
    4. import com.zking.spboot.service.StudentService;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.RequestMapping;
    7. import org.springframework.web.bind.annotation.RestController;
    8.  
    9. import java.util.HashMap;
    10. import java.util.List;
    11. import java.util.Map;
    12.  
    13. @RestController
    14. @RequestMapping("/student")
    15. public class StudentController {
    16.  
    17.     @Autowired
    18.     private StudentService studentService;
    19.  
    20.     /**
    21.      * 查询
    22.      * @param student
    23.      * @return
    24.      */
    25.     @RequestMapping("/list")
    26.     public Map all(Student student){
    27.         List all = studentService.all(student);
    28.         Map rs=new HashMap<>();
    29.         rs.put("code",200);
    30.         rs.put("list",all);
    31.         return  rs;
    32.     }
    33.  
    34.     /**
    35.      * 新增
    36.      * @param student
    37.      * @return
    38.      */
    39.     @RequestMapping("/add")
    40.     public Map add(Student student){
    41.         int i = studentService.insert(student);
    42.         Map rs=new HashMap<>();
    43.        if (i>0)
    44.            rs.put("code",200);
    45.         return  rs;
    46.     }
    47.  
    48. }

    api中action.js

    1. /**
    2.  * 对后台请求的地址的封装，URL格式如下：
    3.  * 模块名_实体名_操作
    4.  */
    5. export default {
    6. 	//服务器
    7. 	'SERVER': 'http://localhost:8080/spboot', 
    8. 	'ADD':'/student/add',
    9. 	'ALL':'/student/list',
    10. 	//获得请求的完整地址，用于mockjs测试时使用
    11. 	'getFullPath': k => {
    12. 		return this.SERVER + this[k];
    13. 	}
    14. }

    views

    1. <template>
    2. 	<div>
    3. 		
    4. 		
    5. 		<el-form :inline="true">
    6. 			<el-form-item label="学生名称">
    7. 				<el-input v-model="sname" placeholder="书本名称">el-input>
    8. 			el-form-item>
    9. 			<el-form-item>
    10. 				<el-button type="primary" @click="query">查询el-button>
    11. 				<el-button type="primary" @click="open">新增el-button>
    12. 			el-form-item>
    13. 		el-form>
    14.  
    15. 		
    16. 		<el-table :data="tableData" style="width: 100%">
    17. 			<el-table-column prop="sid" label="学生编号" width="180">
    18. 			el-table-column>
    19. 			<el-table-column prop="sname" label="学生名称" width="180">
    20. 			el-table-column>
    21. 			<el-table-column prop="score" label="学生成绩">
    22. 			el-table-column>
    23. 			<el-table-column prop="sex" label="学生性别">
    24. 			el-table-column>
    25. 		el-table>
    26.  
    27. 		
    28. 		<el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close">
    29. 			<el-form :model="student" :rules="rules" ref="student">
    30. 				<el-form-item prop="sname" label="学生名称" label-width="90px">
    31. 					<el-input v-model="student.sname" autocomplete="off">el-input>
    32. 				el-form-item>
    33. 				<el-form-item prop="score" label="学生成绩" label-width="90px">
    34. 					<el-input v-model="student.score" autocomplete="off">el-input>
    35. 				el-form-item>
    36. 				<el-form-item prop="sex" label="学生性别" label-width="90px">
    37. 					<el-select style="width: 100%;" v-model="student.sex" placeholder="请选择书本类型">
    38. 						<el-option label="玄幻" value="玄幻">el-option>
    39. 						<el-option label="文学" value="文学">el-option>
    40. 					el-select>
    41. 				el-form-item>
    42. 			el-form>
    43. 			<div slot="footer" class="dialog-footer">
    44. 				<el-button @click="dialogFormVisible = false">取 消el-button>
    45. 				<el-button type="primary" @click="save">确 定el-button>
    46. 			div>
    47. 		el-dialog>
    48. 	div>
    49. template>
    50.  
    51. <script>
    52. 	export default {
    53. 		data: function() {
    54. 			return {
    55. 				ts: new Date().getTime(),
    56. 				//搜索框
    57. 				sname: '',
    58. 				//表格数据
    59. 				tableData: [],
    60. 				//弹出框是否显示
    61. 				dialogFormVisible: false,
    62. 				//弹出框数据
    63. 				student: {
    64. 					sname: '',
    65. 					score: '',
    66. 					sex: ''
    67. 				},
    68. 				//表单验证
    69. 				rules: {
    70. 					sname: [{
    71. 						required: true,
    72. 						message: '请输入书本名称',
    73. 						trigger: 'blur'
    74. 					}, ],
    75. 					score: [{
    76. 						required: true,
    77. 						message: '请输入书本价格',
    78. 						trigger: 'blur'
    79. 					}, ],
    80. 					sex: [{
    81. 						required: true,
    82. 						message: '请选择书本类型',
    83. 						trigger: 'change',
    84. 					}, ]
    85. 				}
    86. 			};
    87. 		},
    88. 		methods: {
    89. 			close: function() {
    90. 				//清空表单数据
    91. 				this.student = {
    92. 				sname: '',
    93. 				score: '',
    94. 				sex: ''
    95. 				};
    96. 				//清空表单验证
    97. 				this.$refs['student'].resetFields();
    98. 			},
    99. 			//新增方法
    100. 			save: function() {
    101. 				this.$refs['student'].validate((valid) => {
    102. 					if (valid) {
    103. 						let url = this.axios.urls.ADD;
    104. 						this.axios.post(url, this.student).then(resp => {
    105. 							let data = resp.data;
    106. 							if (data.code == 200) {
    107. 								//关闭弹出框
    108. 								this.dialogFormVisible = false;
    109. 								//再次查询列表方法
    110. 								this.query();
    111. 							} else {
    112. 								this.$message.error('新增失败！');
    113. 							}
    114. 						}).catch(err => {
    115.  
    116. 						})
    117. 					} else {
    118. 						console.log('error submit!!');
    119. 						return false;
    120. 					}
    121. 				});
    122. 			},
    123. 			//查询方法
    124. 			query: function() {
    125. 				//1.定义查询参数
    126. 				let params = {
    127. 					sname: this.sname
    128. 				};
    129. 				//2.获取请求路径
    130. 				let url = this.axios.urls.ALL;
    131. 				//3.发起ajax请求
    132. 				this.axios.post(url, params).then(resp => {
    133. 					let data = resp.data;
    134. 					this.tableData = data.list;
    135. 					console.log(data);
    136. 				}).catch(err => {
    137. 					console.log(err);
    138. 				})
    139. 			},
    140. 			//打开弹出框的方法
    141. 			open: function() {
    142. 				this.dialogFormVisible = true;
    143. 			}
    144. 		}
    145.  
    146. 	}
    147. script>
    148.  
    149. <style>
    150. style>

     views


     

     
     

     views 


     

     
     

  • 相关阅读:
    python使用pandas中的read_csv函数读取csv数据为dataframe、使用isnull函数查看数据中是否包含缺失值
    Ansys（Maxwell、Simplorer）与Simulink联合仿真（二）直线电机
    Spring STOMP-权限
    Codeforces Round #802 (Div. 2) C D
    基于hexo框架快速从0到1搭建个人博客----文章写作（四）
    Qt之元对象metaObject
    AI变现之数字人工具库账号引流
    基于 CentOS7 制作 Apache HTTPD 2.4.58 的RPM安装包
    day58 单调栈.p1
    年搜索量超 7 亿次背后：这款 APP 用火山引擎 DataTester 完成“数据驱动”
  • 原文地址：https://blog.csdn.net/weixin_62356088/article/details/127824590