搭建环境

创建vue项目：vue create day16_element_student
安装第三方组件：axios、element

npm install axios

vue add elment

SQL

tb_class:

CREATETABLE`tb_class` (
`c_id`varchar(32) NOTNULLCOMMENT'班级ID',
`c_name`varchar(50) DEFAULTNULLCOMMENT'班级名称',
`desc`varchar(200) DEFAULTNULLCOMMENT'班级描述',
PRIMARYKEY (`c_id`)
) ENGINE=InnoDBDEFAULTCHARSET=utf8;
insertinto`tb_class`(`c_id`,`c_name`,`desc`) values ('c001','Java12班','花儿222'),('c002','Java34班','艺术223'),('c003','虚拟的班级','111'),('c004','222','22');

tb_student:

CREATETABLE`tb_student` (
`s_id`varchar(32) NOTNULLCOMMENT'学生ID',
`sname`varchar(50) DEFAULTNULLCOMMENT'姓名',
`age`int(11) DEFAULTNULLCOMMENT'年龄',
`birthday`datetimeDEFAULTNULLCOMMENT'生日',
`gender`char(1) DEFAULTNULLCOMMENT'性别',
`c_id`varchar(32) DEFAULTNULL,
PRIMARYKEY (`s_id`),
KEY`c_id` (`c_id`),
CONSTRAINT`tb_student_ibfk_1`FOREIGNKEY (`c_id`) REFERENCES`tb_class` (`c_id`)
) ENGINE=InnoDBDEFAULTCHARSET=utf8;
insertinto`tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values ('s001','赵三',19,'2001-01-17 00:00:00','1','c001'),('s002','刘悦11',60,'1998-10-08 00:00:00','0','c002'),('s003','孙五',18,'2002-03-15 00:00:00','1','c001'),('s004','李三',19,'2001-04-14 00:00:00','0','c002'),('s005','梁桐',35,'2001-02-02 00:00:00','1','c002'),('s006','刘悦22',60,'2022-02-07 00:00:00','0','c002'),('s21','小红',20,'2022-03-20 00:00:00','0','c002');

tb_user:

DROPTABLEIFEXISTS`tb_user`;
CREATETABLE`tb_user` (
`u_id`varchar(32) NOTNULLCOMMENT'用户编号',
`user_name`varchar(50) DEFAULTNULLCOMMENT'用户名',
`password`varchar(32) DEFAULTNULLCOMMENT'密码',
`gender`bit(1) DEFAULTNULLCOMMENT'性别,1表示男，0表示女',
PRIMARYKEY (`u_id`),
UNIQUEKEY`user_name` (`user_name`)
) ENGINE=InnoDBDEFAULTCHARSET=utf8;
insertinto`tb_user`(`u_id`,`user_name`,`password`,`gender`) values ('1','jack','1234',''),('10','jack5','1234',''),('2','rose','1234','\0'),('3','张三','1234',''),('4','tom','1234',''),('5','jack2','1234',''),('6','jack1','1234',''),('7','jack3','1234',''),('8','jack4','1234',''),('cd0d2523b5024589af142787de8a7b2a','jack6','1234','');

后端

链接：https://pan.baidu.com/s/1FAb2WUSUwpRuwIB9Spy3oQ

提取码：1234

关键代码

ClassesController：

packagecom.czxy.controller;
importcom.czxy.domain.Classes;
importcom.czxy.service.ClassesService;
importcom.czxy.vo.BaseResult;
importorg.springframework.web.bind.annotation.*;
importjavax.annotation.Resource;
importjava.util.List;
/*** @Author 刘嘉俊* @Date 2022/2/21*/@RestController@RequestMapping("/classes")
@CrossOriginpublicclassClassesController {
@ResourceprivateClassesServiceclassesService;
@GetMappingpublicBaseResult<List<Classes>>list(){
List<Classes>list=classesService.selectAll();
returnBaseResult.ok("查询成功",list);
    }
@PostMappingpublicBaseResultadd(@RequestBodyClassesclasses){
booleanresult=classesService.add(classes);
if(result){
returnBaseResult.ok("添加成功");
        }
returnBaseResult.error("添加失败");
    }
@GetMapping("/{cid}")
publicBaseResult<Classes>selectById(@PathVariable("cid") Stringcid){
Classesclasses=classesService.selectById(cid);
returnBaseResult.ok("查询详情成功",classes);
    }
@PutMappingpublicBaseResultupdate(@RequestBodyClassesclasses){
try {
booleanresult=classesService.update(classes);
if(result){
returnBaseResult.ok("查询成功");
            }
returnBaseResult.error("更新失败");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@DeleteMapping("/{classesId}")
publicBaseResultdelete(@PathVariable("classesId") StringclassesId){
booleanresult=classesService.deleteById(classesId);
if(result){
returnBaseResult.ok("删除成功");
        }
returnBaseResult.error("删除失败");
    }
}

StudentController：

packagecom.czxy.controller;
importcom.czxy.domain.Student;
importcom.czxy.service.StudentService;
importcom.czxy.vo.BaseResult;
importcom.czxy.vo.StudentVo;
importcom.github.pagehelper.PageInfo;
importorg.springframework.web.bind.annotation.*;
importjavax.annotation.Resource;
importjava.util.List;
/*** @Author 刘嘉俊* @Date 2022/2/21*/@RestController@RequestMapping("/student")
@CrossOriginpublicclassStudentController {
@ResourceprivateStudentServicestudentService;
@PostMapping("/condition/{pageSize}/{pageNum}")
publicBaseResultcondition(
@PathVariable("pageSize") IntegerpageSize,
@PathVariable("pageNum") IntegerpageNum,
@RequestBodyStudentVostudentVo) {
// 查询PageInfo<Student>pageInfo=studentService.condition(pageSize,pageNum,studentVo);
// 返回结果returnBaseResult.ok("查询成功", pageInfo);
    }
@GetMapping("/{sid}")
publicBaseResultselectById(@PathVariable("sid") Stringsid){
Studentstudent=studentService.selectById(sid);
returnBaseResult.ok("查询成功",student);
    }
@PutMappingpublicBaseResultupdate(@RequestBodyStudentstudent){
System.out.println(student);
try {
booleanresult=studentService.update(student);
if(result){
returnBaseResult.ok("更新成功");
            }else{
returnBaseResult.error("更新失败");
            }
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@DeleteMapping("/{sid}")
publicBaseResultdelete(@PathVariable("sid")Stringsid){
System.out.println("sid"+sid);
try {
booleanresult=studentService.delete(sid);
if(result){
returnBaseResult.ok("删除成功");
            }
returnBaseResult.error("删除失败");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@PostMappingpublicBaseResultaddStudent(@RequestBodyStudentstudent){
try {
booleanresult=studentService.addStudent(student);
if(result){
returnBaseResult.ok("添加成功");
            }
returnBaseResult.error("添加失败");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@PostMapping("/save")
publicBaseResultsave(@RequestBodyStudentstudent){
try {
booleanresult=studentService.saveOrUpdate(student);
if(result){
returnBaseResult.ok("编辑 | 添加 成功");
            }else{
returnBaseResult.error("编辑 | 添加 失败");
            }
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@PostMapping("/batchDelete")
publicBaseResultdeleteIds(@RequestBodyList<String>ids){
try {
studentService.deleteIds(ids);
returnBaseResult.ok("删除成功");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
}

UserController:

packagecom.czxy.controller;
importcom.czxy.domain.User;
importcom.czxy.service.UserService;
importcom.czxy.vo.BaseResult;
importorg.springframework.web.bind.annotation.*;
importjavax.annotation.Resource;
/*** @Author 刘嘉俊* @Date 2022/3/16*/@RestController@RequestMapping("/user")
@CrossOriginpublicclassUserController {
@ResourceprivateUserServiceuserService;
@PostMapping("/login")
publicBaseResultlogin(@RequestBodyUseruser){
UserloginUser=userService.login(user);
if(loginUser!=null){
returnBaseResult.ok("登录成功",loginUser);
        }else{
returnBaseResult.error("用户名或密码不匹配");
        }
    }
@PostMapping("/check")
publicBaseResultcheck(@RequestBodyUseruser){
UserfindUser=userService.findByUsername(user.getUsername());
if(findUser==null){
returnBaseResult.ok("用户名可用");
        }else{
returnBaseResult.error("用户名已存在");
        }
    }
}

查询所有前端

显示页面

创建页面

配置路由

constroutes= [
  {
path: '/studentList',
name: '学生列表',
component: () =>import('../views/StudentList.vue')
  }
]

访问路径

http://localhost:8080/studentList

ajax操作

<template><div>    {{studentPage}}
</div></template><script>// 导入axiosimportaxiosfrom'axios'exportdefault {
data() {
return {
studentVo: {    //条件查询      },
studentPage: {    //分页数据pageNum: 1,
pageSize: 3      }
    }
  },
methods: {
asynccondition() {
// ajax查询varurl=`http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} =awaitaxios.post(url, this.studentVo)
// 保存结果this.studentPage=baseResult.data    }
  },
mounted() {
// 查询this.condition()
  },
}
</script><style></style>

整合element ui

<template><div><!--表单start--><el-form :inline="true" :model="studentVo"size="mini"><el-form-itemlabel="班级"><el-selectv-model="studentVo.cid"placeholder="请选择班级"clearable><el-optionlabel="Java12班"value="c001"></el-option><el-optionlabel="Java56班"value="c003"></el-option></el-select></el-form-item><el-form-itemlabel="姓名"><el-inputv-model="studentVo.sname"placeholder="请输入姓名"clearable></el-input></el-form-item><el-form-itemlabel="年龄"><el-col :span="11"><el-inputv-model="studentVo.startAge"placeholder="请输入开始年龄"clearable></el-input></el-col><el-colclass="line" :span="2">-</el-col><el-col :span="11"><el-inputv-model="studentVo.endAge"placeholder="请输入结束年龄"clearable></el-input></el-col></el-form-item><el-form-item><el-buttontype="primary"@click="condition(1)">查询</el-button></el-form-item></el-form><!--表单end--><!--表格start--><el-table      :data="studentPage.list"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="cid"label="班级"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><templateslot-scope="scope">          {{scope.row.gender==1?"男" : "女"}}
</template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini">编辑</el-button><el-buttonsize="mini"type="danger">删除</el-button></template></el-table-column></el-table><!--表格end--><!--分页条start--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"      :current-page="studentPage.pageNum"      :page-sizes="[1, 2, 3, 5, 10]"      :page-size="studentPage.pageSize"layout="total, sizes, prev, pager, next, jumper"      :total="studentPage.total"></el-pagination><!--分页条end--></div></template><script>// 导入axiosimportaxiosfrom'axios'exportdefault {
data() {
return {
studentVo: {    //条件查询      },
studentPage: {    //分页数据pageNum: 1,
pageSize: 3      }
    }
  },
methods: {
asynccondition(num) {
if(num) {
this.studentPage.pageNum=num      }
// ajax查询varurl=`http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} =awaitaxios.post(url, this.studentVo)
// 保存结果this.studentPage=baseResult.data    },
handleSelectionChange(val) {
console.info('批量删除')
    },
handleSizeChange(val) {
console.log(`每页${val} 条`);
this.studentPage.pageSize=valthis.studentPage.pageNum=1// 重新开始this.condition()
    },
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.studentPage.pageNum=val// 重新开始this.condition()
    }
  },
mounted() {
// 查询this.condition()
  },
}
</script><style></style>

导航(嵌套路由)

步骤1：创建页面

创建登录页面（模板页面）
编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）创建页面：ClassesList.vue

步骤2：配置路由
步骤3：编写布局容器和导航

步骤1：创建页面

创建登录页面（模板页面）
编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）
创建页面：ClassesList.vue

constroutes= [
  {
path: '/',
redirect: '/home'//重定向  },
  {
path: '/login',
name: '登录',
component: () =>import('../views/Login.vue')
  },
  {
path: '/home',
name: '首页',
component: () =>import('../views/Home.vue'),
children: [
      {
path: '/studentList',
name: '学生列表',
component: () =>import('../views/StudentList.vue')
      },
      {
path: '/classesList',
name: '班级列表',
component: () =>import('../views/ClassesList.vue')
      }
    ]
  },
]

步骤3：编写布局容器和导航

修改main.js，配置css加载顺序（配置重置样式）

修改App.vue，配置样式，上下自动填充

编写Home页面，完成导航和二级路由显示

<template>
  <el-container>
    <el-header class="home-header">
      <!-- 导航start -->
      <el-menu
        :default-active="$route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="/classes">
          <template slot="title">班级管理</template>
          <el-menu-item index="/classesList">班级列表</el-menu-item>
        </el-submenu>
        <el-submenu index="/student">
          <template slot="title">学生管理</template>
          <el-menu-item index="/studentList">学生列表</el-menu-item>
        </el-submenu>
      </el-menu>
      <!-- 导航end -->
    </el-header>
    <el-main>
      <!-- 二级路由 -->
      <router-view></router-view>
    </el-main>
    <el-footer>学生管理系统Element UI 版</el-footer>
  </el-container>
</template>
<script>
export default {
}
</script>
<style>
  .el-container {
    height: 100%;
  }
  .home-header {
    padding: 0;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
</style>

学生管理系统Element UI版（一）

搭建环境

SQL

tb_class:

tb_student:

tb_user:

后端

关键代码

ClassesController：

StudentController：

UserController:

查询所有前端

显示页面

ajax操作

整合element ui

导航(嵌套路由)

热门文章

最新文章

相关电子书