效果图(elementUI)

项目结构

web.xml
- "1.0" encoding="UTF-8"?>
- <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
- version="4.0">
-
- <servlet>
- <servlet-name>DispatcherServletservlet-name>
- <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
- <init-param>
- <param-name>contextConfigLocationparam-name>
- <param-value>classpath:springmvc.xmlparam-value>
- init-param>
- <load-on-startup>1load-on-startup>
- servlet>
- <servlet-mapping>
- <servlet-name>DispatcherServletservlet-name>
- <url-pattern>/url-pattern>
- servlet-mapping>
-
- <filter>
- <filter-name>CharacterEncodingFilterfilter-name>
- <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
- <init-param>
- <param-name>encodingparam-name>
- <param-value>utf-8param-value>
- init-param>
- filter>
- <filter-mapping>
- <filter-name>CharacterEncodingFilterfilter-name>
- <url-pattern>/*url-pattern>
- filter-mapping>
-
- <context-param>
- <param-name>contextConfigLocationparam-name>
- <param-value>classpath:spring.xmlparam-value>
- context-param>
- <listener>
- <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
- listener>
- <filter>
- <filter-name>httpPutFormContentFilterfilter-name>
- <filter-class>org.springframework.web.filter.HttpPutFormContentFilterfilter-class>
- filter>
- <filter-mapping>
- <filter-name>httpPutFormContentFilterfilter-name>
- <url-pattern>/*url-pattern>
- filter-mapping>
- web-app>
springMVC
- "1.0" encoding="UTF-8"?>
- <beans xmlns="http://www.springframework.org/schema/beans"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xmlns:context="http://www.springframework.org/schema/context"
- xmlns:mvc="http://www.springframework.org/schema/mvc"
- xsi:schemaLocation="http://www.springframework.org/schema/beans
- http://www.springframework.org/schema/beans/spring-beans.xsd
- http://www.springframework.org/schema/context
- http://www.springframework.org/schema/context/spring-context.xsd
- http://www.springframework.org/schema/mvc
- http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">
-
- <context:component-scan base-package="com.etime.controller">context:component-scan>
- <mvc:annotation-driven>mvc:annotation-driven>
- <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
- <property name="prefix" value="/">property>
- <property name="suffix" value=".html">property>
- bean>
- beans>
spring
- "1.0" encoding="UTF-8"?>
- <beans xmlns="http://www.springframework.org/schema/beans"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xmlns:context="http://www.springframework.org/schema/context"
- xmlns:aop="http://www.springframework.org/schema/aop"
- xmlns:tx="http://www.springframework.org/schema/tx"
- xsi:schemaLocation="http://www.springframework.org/schema/beans
- http://www.springframework.org/schema/beans/spring-beans.xsd
- http://www.springframework.org/schema/context
- http://www.springframework.org/schema/context/spring-context.xsd
- http://www.springframework.org/schema/aop
- http://www.springframework.org/schema/aop/spring-aop.xsd
- http://www.springframework.org/schema/tx
- http://www.springframework.org/schema/tx/spring-tx.xsd">
-
- <context:component-scan base-package="com.etime.service">context:component-scan>
- <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
- <property name="basePackage" value="com.etime.dao">property>
- bean>
-
-
- <context:property-placeholder location="classpath:db.properties"/>
- <bean id="pool" class="com.mchange.v2.c3p0.ComboPooledDataSource">
- <property name="driverClass" value="${jdbc.driver}"/>
- <property name="jdbcUrl" value="${jdbc.url}"/>
- <property name="user" value="${jdbc.username}"/>
- <property name="password" value="${jdbc.password}"/>
- bean>
-
- <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
-
- <property name="dataSource" ref="pool"/>
-
- <property name="typeAliasesPackage" value="com.etime.pojo"/>
-
- <property name="mapperLocations" value="classpath:com/etime/dao/*.xml"/>
-
- <property name="plugins">
- <array>
- <bean class="com.github.pagehelper.PageInterceptor">bean>
- array>
- property>
- <property name="configLocation" value="classpath:mybatis.xml">property>
- bean>
-
-
- <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
- <property name="dataSource" ref="pool"/>
- bean>
-
- <tx:annotation-driven transaction-manager="transactionManager"/>
- beans>
- "1.0" encoding="UTF-8"?>
- configuration
- PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
- "http://mybatis.org/dtd/mybatis-3-config.dtd">
- <configuration>
- <settings>
-
- <setting name="logImpl" value="STDOUT_LOGGING" />
- settings>
- configuration>
studentDao.xml
- "1.0" encoding="UTF-8"?>
- mapper
- PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
- "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
- <mapper namespace="com.etime.dao.StudentDao">
-
- <select id="getAllStudent" parameterType="Student" resultMap="getAllStudentMap">
- SELECT * FROM student s,class c where s.class_id = c.cid
- <if test="sname != ''">
- and sname like concat('%',#{sname},'%')
- if>
- <if test="gender != ''">
- and gender = #{gender}
- if>
- <if test="class_id != 0">
- and class_id = #{class_id}
- if>
- select>
- <resultMap id="getAllStudentMap" type="Student">
- <id property="sid" column="sid">id>
- <result property="gender" column="gender">result>
- <result property="sname" column="sname">result>
- <association property="clazz" javaType="Clazz">
- <id property="cid" column="cid">id>
- <result property="caption" column="caption">result>
- association>
- resultMap>
-
- <select id="getAllCourseBySid" parameterType="int" resultMap="getAllCourseBySidMap">
- select *
- from score s,
- course c,
- teacher t
- where c.cid = s.course_id
- and c.teacher_id = t.tid
- and s.student_id = #{sid}
- select>
- <resultMap id="getAllCourseBySidMap" type="Score">
- <id property="sid" column="sid">id>
- <result property="student_id" column="student_id">result>
- <result property="course_id" column="course_id">result>
- <result property="num" column="num">result>
- <collection property="courses" ofType="Course">
- <id property="cid" column="cid">id>
- <result property="cname" column="cname">result>
- <result property="teacher_id" column="teacher_id">result>
- <association property="teacher" javaType="Teacher">
- <id property="tid" column="tid">id>
- <result property="tname" column="tname">result>
- association>
- collection>
- resultMap>
-
- <delete id="deleteStudents">
- delete from student where sid in
- <foreach collection="array" item="sid" separator="," open="(" close=")">
- #{sid}
- foreach>
- delete>
- mapper>
studentDao
- @Repository
- public interface StudentDao {
- List
getAllStudent(Student student); -
- @Select("select * from class")
- List
getAllClass(); -
- List
getAllCourseBySid(int sid); -
- int deleteStudents(int[] sids);
-
- @Insert("insert into student(gender,class_id,sname) values(#{gender},#{class_id},#{sname})")
- int addStudent(Student student);
-
- @Update("update student set sname = #{sname},class_id=#{class_id},gender=#{gender} where sid = #{sid}")
- int editStudent(Student student);
- }
studentService
- @Service
- public class StudentServiceImpl implements StudentService {
-
- @Autowired
- private StudentDao studentDao;
-
- @Override
- public PageInfo
getAllStudent(int page,int rows,Student student) { - PageHelper.startPage(page,rows);
- List
list = studentDao.getAllStudent(student); - PageInfo
info = new PageInfo<>(list); - System.out.println(info);
- return info;
- }
-
- @Override
- public List
getAllCourseBySid(int sid) { - return studentDao.getAllCourseBySid(sid);
- }
-
- @Override
- public List
getAllClass() { - return studentDao.getAllClass();
- }
-
- @Override
- public boolean deleteStudents(int[] sids) {
- return studentDao.deleteStudents(sids)==0?false:true;
- }
-
- @Override
- public boolean addStudent(Student student) {
- return studentDao.addStudent(student) == 0?false:true;
- }
-
- @Override
- public boolean editStudent(Student student) {
- return studentDao.editStudent(student)==0?false:true;
- }
-
- }
controller
-
- @Controller
- @RequestMapping("student")
- @ResponseBody
- @CrossOrigin
- public class StudentController {
-
- @Autowired
- private StudentService studentService;
-
- /*分页展示加搜索*/
- @GetMapping("getAllStudent")
- public PageInfo
getAllStudent(int page, int rows, String sname, String gender, String cid) { - int cids;
- if (cid == null || cid == "") {
- cids = 0;
- } else {
- cids = Integer.parseInt(cid);
- }
- System.out.println(sname + "," + gender);
- return studentService.getAllStudent(page, rows, new Student(gender, cids, sname));
- }
-
- /*查所有班级*/
- @GetMapping("getAllClass")
- public List
getAllClass(){ - return studentService.getAllClass();
- }
-
- /*查询学生所有课程信息*/
- @GetMapping("getAllCourseBySid/{sid}")
- public List
getAllCourseBySid(@PathVariable("sid")int sid) { - return studentService.getAllCourseBySid(sid);
- }
-
- /*删除*/
- @DeleteMapping("deleteStudents")
- public boolean deleteStudents(@RequestBody int[] sids){
- return studentService.deleteStudents(sids);
- }
-
- /*添加*/
- @PostMapping("addStudent")
- public boolean addStudent(@RequestBody Student student){
- return studentService.addStudent(student);
- }
-
- /*修改*/
- @PutMapping("editStudent")
- public boolean editStudent(@RequestBody Student student){
- return studentService.editStudent(student);
- }
index.html
- <head>
- <title>title>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css" />
- <script type="text/javascript" src="vue/vue-v2.6.10.js">script>
- <script type="text/javascript" src="element-ui-2.13.0/lib/index.js">script>
- <script type="text/javascript" src="vue/axios-0.18.0.js">script>
- head>
-
- <body>
- <div id="app">
- <template>
- <el-table :data="tableData" @selection-change="handleSelectionChange" size="medium"
- highlight-current-row="true" style="width: 100%">
- <el-table-column type="selection" width="55" prop="sid">
- el-table-column>
- <el-table-column width="100px" label="序号" type="index">
- el-table-column>
- <el-table-column label="姓名" prop="sname">
- el-table-column>
- <el-table-column label="性别" prop="gender">
- el-table-column>
- <el-table-column label="班级" prop="clazz.caption">
- el-table-column>
- <el-table-column>
- <template slot="header" slot-scope="scope">
- <el-input v-model="search" placeholder="请输入姓名" />
- template>
- el-table-column>
- <el-table-column>
- <template slot="header" slot-scope="scope">
- <el-select v-model="cid" placeholder="请选择班级">
- <el-option v-for="item in classes" :key="item.cid" :label="item.caption" :value="item.cid">
- el-option>
- el-select>
- template>
- el-table-column>
- <el-table-column>
- <template slot="header" slot-scope="scope">
- <el-radio v-model="sex" label="男">男el-radio>
- <el-radio v-model="sex" label="女">女el-radio>
- template>
- <template slot-scope="scope">
- <el-button size="mini" @click="handleLook(scope.$index, scope.row)">查看课程信息el-button>
- template>
- el-table-column>
- <el-table-column>
- <template slot="header" slot-scope="scope">
- <el-button type="success" @click="findAll()">搜索el-button>
- template>
- <template slot-scope="scope">
- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改el-button>
- template>
- el-table-column>
- el-table>
- template>
- <br />
- <el-row>
- <el-button type="warning" @click="delAll()">删除选中el-button>
- <el-button type="primary" @click="add()">添加用户el-button>
- el-row>
- <template>
- <div class="block" align="right">
- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
- :current-page="currentPage" :page-sizes="[3, 4, 5, 6, 7, 8]" :page-size="pageSize"
- layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
- el-pagination>
- div>
- template>
-
-
- <el-dialog title="查看课程信息" :visible.sync="dialogFormVisible">
- <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
- <el-form-item label="学生姓名">
- <el-input v-model="ruleForm.sname" style="width: 210px;" readonly>el-input>
- el-form-item>
- el-form>
- <el-table :data="tableCourse" @selection-change="handleSelectionChange" size="medium"
- highlight-current-row="true" style="width: 100%">
- <el-table-column width="100px" label="序号" type="index">
- el-table-column>
- <el-table-column label="课程" prop="courses[0].cname">
- el-table-column>
- <el-table-column label="成绩" prop="num">
- el-table-column>
- <el-table-column label="老师" prop="courses[0].teacher.tname">
- el-table-column>
- el-table>
- el-dialog>
-
- <el-dialog title="添加学生信息" :visible.sync="diaAdd">
- <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
- <el-form-item label="姓名" prop="sname">
- <el-input v-model="ruleForm.sname" style="width: 210px;">el-input>
- el-form-item>
- <el-form-item label="性別" prop="gender">
- <el-radio-group v-model="ruleForm.gender">
- <el-radio label="男">男el-radio>
- <el-radio label="女">女el-radio>
- el-radio-group>
- el-form-item>
- <el-form-item label="班级" prop="class_id">
- <el-select v-model="ruleForm.class_id" placeholder="请选择班级">
- <el-option v-for="item in classes" :key="item.cid" :label="item.caption" :value="item.cid">
- el-option>
- el-select>
- el-form-item>
- <el-form-item>
- <el-button type="primary" @click="submitForm()">立即添加el-button>
- el-form-item>
- el-form>
- el-dialog>
-
- <el-dialog title="修改学生信息" :visible.sync="dialogVisible">
- <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
- <el-form-item label="姓名" prop="sname">
- <el-input v-model="ruleForm.sname" style="width: 210px;">el-input>
- el-form-item>
- <el-form-item label="性別" prop="gender">
- <el-radio-group v-model="ruleForm.gender">
- <el-radio label="男">男el-radio>
- <el-radio label="女">女el-radio>
- el-radio-group>
- el-form-item>
- <el-form-item label="班级" prop="class_id">
- <el-select v-model="ruleForm.clazz.cid" placeholder="请选择班级">
- <el-option v-for="item in classes" :key="item.cid" :label="item.caption" :value="item.cid">
- el-option>
- el-select>
- el-form-item>
- <el-form-item>
- <el-button type="primary" @click="submitFormEd()">立即修改el-button>
- el-form-item>
- el-form>
- el-dialog>
- div>
- body>
- <script>
- axios.defaults.withCredentials = false
- new Vue({
- el: "#app",
- data: {
- /*表格数据*/
- tableData: [],
- tableCourse: [],
- /*条件查询关键字*/
- search: '',
- sex: "",
- //批量删除存放选中的复选框
- multipleSelection: [],
- //存放删除的数据
- delarr: [],
- //当前页
- currentPage: 1,
- //每页显示条数
- pageSize: 5,
- //总条数
- totalCount: '',
- //总页数
- totalPage: '',
- // 是否展示课程信息对话框
- dialogFormVisible: false,
- diaAdd: false,
- dialogVisible: false,
- ruleForm: {
- sid: '',
- sname: '',
- gender: '',
- clazz: '',
- class_id: '',
- cid: '',
- },
- classes: '',
- cid: '',
- },
- methods: {
-
- findAll() {
- axios({
- method: "get",
- url: "http://localhost:8080/day11_war_exploded/student/getAllStudent",
- params: {
- page: this.currentPage,
- rows: this.pageSize,
- sname: this.search,
- gender: this.sex,
- cid: this.cid
- }
- }).then(obj => {
- console.log(obj)
- this.tableData = obj.data.list;
- this.totalCount = obj.data.total;
- });
- },
-
- getAllClass() {
- axios({
- method: "get",
- url: "http://localhost:8080/day11_war_exploded/student/getAllClass",
- }).then(obj => {
- this.classes = obj.data
- });
- },
-
- handleSizeChange: function (size) {
- this.pageSize = size;
- this.findAll();
- },
-
- handleCurrentChange: function (currentPage) {
- this.currentPage = currentPage;
- this.findAll();
- },
-
- // 详情
- handleLook(index, row) {
- this.dialogFormVisible = true
- this.ruleForm = row
- axios({
- method: "get",
- url: "http://localhost:8080/day11_war_exploded/student/getAllCourseBySid/" + row.sid,
- }).then(obj => {
- this.tableCourse = obj.data
- });
- },
-
- delAll() {
- //获取删除的ID
- this.delarr = [];
- for (let i = 0; i < this.multipleSelection.length; i++) {
- this.delarr.push(this.multipleSelection[i].sid);
- }
- //判断要删除的文件是否为空
- if (this.delarr.length == 0) {
- this.$message.warning("请选择要删除的数据!")
- } else {
- this.$confirm("是否确认删除?", "提示", { type: 'warning' }).then(() => {
- //点击确认删除
- axios({
- method: "delete",
- url: "http://localhost:8080/day11_war_exploded/student/deleteStudents",
- data: this.delarr
- }).then(obj => {
- if (obj.data) {
- this.$message.success("删除成功");
- } else {
- this.$message.console.error("删除失败");
- }
- this.findAll();
- });
- });
- }
- },
-
- handleSelectionChange(val) {
- this.multipleSelection = val;
- },
- // 添加
- add() {
- this.diaAdd = true;
- },
-
- submitForm() {
- axios({
- method: "post",
- url: "http://localhost:8080/day11_war_exploded/student/addStudent",
- data: {
- sname: this.ruleForm.sname,
- gender: this.ruleForm.gender,
- class_id: this.ruleForm.class_id
- }
- }).then(obj => {
- if (obj.data) {
- this.$message.success("添加成功");
- } else {
- this.$message.error("添加失败");
- }
- this.findAll();
- });
- },
- // 修改
- handleEdit(index, row) {
- this.dialogVisible = true;
- this.ruleForm = row;
-
- },
- submitFormEd() {
- axios({
- method: "put",
- url: "http://localhost:8080/day11_war_exploded/student/editStudent",
- data: {
- sname: this.ruleForm.sname,
- gender: this.ruleForm.gender,
- class_id: this.ruleForm.clazz.cid,
- sid:this.ruleForm.sid
- }
- }).then(obj => {
- if (obj.data) {
- this.$message.success("修改成功");
- } else {
- this.$message.error("修改失败");
- }
- this.findAll();
- });
- },
- },
-
- created() {
- this.findAll();
- this.getAllClass();
- }
-
- })
- script>
-
- html>