学生管理系统Element UI版，java高级开发面试视频

最新推荐文章于 2024-06-07 09:07:32 发布

2401_84446712

最新推荐文章于 2024-06-07 09:07:32 发布

阅读量225

点赞数 3

分类专栏： 2024年程序员学习文章标签： ui java 面试

本文链接：https://blog.csdn.net/2401_84446712/article/details/137944880

版权

2024年程序员学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Java开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024b （备注Java）

正文

    // 查询

    PageInfo<Student> pageInfo = studentService.condition(pageSize,pageNum,studentVo);



    // 返回结果

    return BaseResult.ok("查询成功", pageInfo);

}



@GetMapping("/{sid}")

public BaseResult selectById(@PathVariable("sid") String sid){

    Student student = studentService.selectById(sid);



    return BaseResult.ok("查询成功",student);

}



@PutMapping

public BaseResult update(@RequestBody Student student){

    System.out.println(student);

    try {

        boolean result = studentService.update(student);

        if(result){

            return BaseResult.ok("更新成功");

        }else{

            return BaseResult.error("更新失败");

        }

    } catch (Exception e) {

        e.printStackTrace();

        return BaseResult.error(e.getMessage());

    }

}



@DeleteMapping("/{sid}")

public BaseResult delete(@PathVariable("sid")String sid){

    System.out.println("sid" + sid);

    try {

        boolean result = studentService.delete(sid);

        if(result){

            return BaseResult.ok("删除成功");

        }

        return BaseResult.error("删除失败");

    } catch (Exception e) {

        e.printStackTrace();

        return BaseResult.error(e.getMessage());

    }

}



@PostMapping

public BaseResult addStudent(@RequestBody Student student){

    try {

        boolean result = studentService.addStudent(student);

        if(result){

            return BaseResult.ok("添加成功");

        }

        return BaseResult.error("添加失败");

    } catch (Exception e) {

        e.printStackTrace();

        return BaseResult.error(e.getMessage());

    }

}



@PostMapping("/save")

public BaseResult save(@RequestBody Student student){

    try {

        boolean result = studentService.saveOrUpdate(student);

        if(result){

            return BaseResult.ok("编辑 | 添加 成功");

        }else{

            return BaseResult.error("编辑 | 添加 失败");

        }

    } catch (Exception e) {

        e.printStackTrace();

        return BaseResult.error(e.getMessage());

    }

}



@PostMapping("/batchDelete")

public BaseResult deleteIds(@RequestBody List<String> ids){

    try {

        studentService.deleteIds(ids);



        return BaseResult.ok("删除成功");

    } catch (Exception e) {

        e.printStackTrace();

        return BaseResult.error(e.getMessage());

    }

}

}




### UserController:

package com.czxy.controller;

import com.czxy.domain.User;

import com.czxy.service.UserService;

import com.czxy.vo.BaseResult;

import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**

@Author 刘嘉俊
@Date 2022/3/16

@RestController

@RequestMapping(“/user”)

@CrossOrigin

public class UserController {

@Resource

private UserService userService;



@PostMapping("/login")

public BaseResult login(@RequestBody User user){

    User loginUser = userService.login(user);



    if(loginUser != null){

        return BaseResult.ok("登录成功",loginUser);

    }else{

        return BaseResult.error("用户名或密码不匹配");

    }

}



@PostMapping("/check")

public BaseResult check(@RequestBody User user){

    User findUser = userService.findByUsername(user.getUsername());



    if(findUser == null){

        return BaseResult.ok("用户名可用");

    }else{

        return BaseResult.error("用户名已存在");

    }

}

}




查询所有前端

======



显示页面

----



 创建页面



![](https://img-blog.csdnimg.cn/33c3da09b2104330a7e982af7dce1ae8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_8,color_FFFFFF,t_70,g_se,x_16)



 配置路由

const routes = [

{

path: '/studentList',

name: '学生列表',

component: () => import('../views/StudentList.vue')

}

]




访问路径



> [http://localhost:8080/studentList]( )



ajax操作

------

{{studentPage}}




整合element ui

------------

<!-- 表单start -->

<el-form :inline="true" :model="studentVo" size="mini" >

  <el-form-item label="班级">

    <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>

      <el-option label="Java12班" value="c001"></el-option>

      <el-option label="Java56班" value="c003"></el-option>

    </el-select>

  </el-form-item>

  <el-form-item label="姓名">

    <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>

  </el-form-item>

  <el-form-item label="年龄">

    <el-col :span="11">

      <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>

    </el-col>

    <el-col class="line" :span="2">-</el-col>

    <el-col :span="11">

      <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>

    </el-col>

  </el-form-item>

  <el-form-item>

    <el-button type="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-column

    type="selection"

    width="55">

  </el-table-column>

  <el-table-column

    prop="sid"

    label="编号"

    width="180">

  </el-table-column>

  <el-table-column

    prop="sname"

    label="姓名"

    width="180">

  </el-table-column>

  <el-table-column

    prop="cid"

    label="班级"

    width="180">

  </el-table-column>

  <el-table-column

    prop="age"

    label="年龄"

    width="180">

  </el-table-column>

  <el-table-column

    prop="birthday"

    label="生日"

    width="180">

  </el-table-column>

  <el-table-column

    prop="gender"

    label="性别"

    width="180">

    <template slot-scope="scope">

      {{scope.row.gender == 1 ? "男" : "女"}}

    </template>

  </el-table-column>

  <el-table-column label="操作">

    <template slot-scope="scope">

      <el-button size="mini">编辑</el-button>

      <el-button size="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 -->




导航(嵌套路由)

========



*   步骤1：创建页面

    

    *   创建登录页面（模板页面）

        

    *   编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）

        

    *   创建页面：ClassesList.vue

        

*   步骤2：配置路由

    

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

    



![](https://img-blog.csdnimg.cn/e250bfa1f7ff4d60ae31c95cf515857d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)



步骤1：创建页面



*   创建登录页面（模板页面）

    

*   编写首页Home（上中下布局），编写导航（首页、班级管理/班级列表、学生管理/学生列表）

    

*   创建页面：ClassesList.vue

    



![](https://img-blog.csdnimg.cn/f8dd690323374713bc7c78fd44e827f3.png)



 步骤2：配置路由

const routes = [

{

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加载顺序（配置重置样式）

    



![](https://img-blog.csdnimg.cn/03b98249a1b748a3bcdd611d8f07b43f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_14,color_FFFFFF,t_70,g_se,x_16)



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



 ![](https://img-blog.csdnimg.cn/ab5b7c9f1047469d89dfdd496cdce396.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_13,color_FFFFFF,t_70,g_se,x_16)



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

<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>




编辑学生(弹出框)

=========



分析

--



*   页面布局：

    

    *   添加一个“添加”按钮，点击可以显示弹出层

        

    *   拷贝添加的弹出框Dialog，且要求表单（班级列表、id、名称、年龄、生日、性别）

        

*   提供student变量，用于表单数据的绑定

    

*   ajax操作

    

    *   查询班级列表

        

    *   添加按钮绑定事件，进行ajax提交（成功：刷新列表关闭弹出框，失败：错误提示，但不关闭弹出框）

        



页面布局

----



页面布局：



添加一个“添加”按钮，点击可以显示弹出层



![](https://img-blog.csdnimg.cn/dbfe34e7223241c8a870b1b8d0acfac3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)



拷贝添加的弹出框Dialog，且要求表单（班级列表、id、名称、年龄、生日、性别）

<el-dialog title="添加学生" :visible.sync="addStudentDialogVisible">

  <el-form :model="student" label-width="80px">

    <el-form-item label="班级列表" >

      <el-select v-model="student.cid" placeholder="请选择班级">

        <el-option label="区域一" value="shanghai"></el-option>

      </el-select>

    </el-form-item>

    <el-form-item label="id" >

      <el-input v-model="student.sid"></el-input>

    </el-form-item>

    <el-form-item label="名称" >

      <el-input v-model="student.sname"></el-input>

    </el-form-item>

    <el-form-item label="生日" >

      <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker>

    </el-form-item>

    <el-form-item label="年龄" >

      <el-input v-model="student.age"></el-input>

    </el-form-item>

    <el-form-item label="性别" >

      <el-radio-group v-model="student.gender">

        <el-radio label="1">男</el-radio>

        <el-radio label="0">女</el-radio>

      </el-radio-group>

    </el-form-item>

  </el-form>

  <div slot="footer" class="dialog-footer">

    <el-button @click="addStudentDialogVisible = false">取 消</el-button>

    <el-button type="primary" @click="addStudentDialogVisible = false">确 定</el-button>

  </div>

</el-dialog>

<!-- 添加的弹出框end -->




提供student变量，用于表单数据的绑定



![](https://img-blog.csdnimg.cn/0e54d6c6f35b40548a5e728d1818fdb0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)



添加：ajax操作

---------



查询班级列表



![](https://img-blog.csdnimg.cn/e5ae6b3710eb42a18a0746ef1c97da70.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)



添加按钮绑定事件，进行ajax提交（成功：刷新列表关闭弹出框，失败：错误提示，但不关闭弹出框）



![](https://img-blog.csdnimg.cn/6530509a6f1340c3ae11ce856ac10470.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)

<!-- 表单start -->

<el-form :inline="true" :model="studentVo" size="mini" >

  <el-form-item label="班级">

    <el-select v-model="studentVo.cid" placeholder="请选择班级" clearable>

      <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>

    </el-select>

  </el-form-item>

  <el-form-item label="姓名">

    <el-input v-model="studentVo.sname" placeholder="请输入姓名" clearable></el-input>

  </el-form-item>

  <el-form-item label="年龄">

    <el-col :span="11">

      <el-input v-model="studentVo.startAge" placeholder="请输入开始年龄" clearable></el-input>

    </el-col>

    <el-col class="line" :span="2">-</el-col>

    <el-col :span="11">

      <el-input v-model="studentVo.endAge" placeholder="请输入结束年龄" clearable></el-input>

    </el-col>

  </el-form-item>

  <el-form-item>

    <el-button type="primary" @click="condition(1)">查询</el-button>

  </el-form-item>

</el-form>

<!-- 表单end -->

<el-button type="primary" @click="openAddDialog" >添加</el-button>

<!-- 添加的弹出框start -->

<el-dialog title="添加学生" :visible.sync="addStudentDialogVisible">

  <el-form :model="student" label-width="80px">

    <el-form-item label="班级列表" >

      <el-select v-model="student.cid" placeholder="请选择班级">

        <el-option v-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option>

      </el-select>

    </el-form-item>

    <el-form-item label="id" >

      <el-input v-model="student.sid"></el-input>

    </el-form-item>

    <el-form-item label="名称" >

      <el-input v-model="student.sname"></el-input>

    </el-form-item>

    <el-form-item label="生日" >

      <el-date-picker type="date" placeholder="选择生日" v-model="student.birthday" style="width: 100%;"></el-date-picker>

    </el-form-item>

    <el-form-item label="年龄" >

      <el-input v-model="student.age"></el-input>

    </el-form-item>

    <el-form-item label="性别" >

      <el-radio-group v-model="student.gender">

        <el-radio label="1">男</el-radio>

        <el-radio label="0">女</el-radio>

      </el-radio-group>

    </el-form-item>

  </el-form>

  <div slot="footer" class="dialog-footer">

    <el-button @click="addStudentDialogVisible = false">取 消</el-button>

    <el-button type="primary" @click="addStudent">确 定</el-button>

  </div>

</el-dialog>

<!-- 添加的弹出框end -->

<!-- 表格start -->

<el-table

  :data="studentPage.list"

  @selection-change="handleSelectionChange"

  style="width: 100%">

  <el-table-column

    type="selection"

    width="55">

  </el-table-column>

  <el-table-column

    prop="sid"

    label="编号"

    width="180">

  </el-table-column>

  <el-table-column

    prop="sname"

    label="姓名"

    width="180">

  </el-table-column>

  <el-table-column

    prop="cid"

    label="班级"

    width="180">

  </el-table-column>

  <el-table-column

    prop="age"

    label="年龄"

    width="180">

  </el-table-column>

  <el-table-column

    prop="birthday"

    label="生日"

    width="180">

  </el-table-column>

  <el-table-column

    prop="gender"

    label="性别"

    width="180">

    <template slot-scope="scope">

      {{scope.row.gender == 1 ? "男" : "女"}}

    </template>

  </el-table-column>

  <el-table-column label="操作">

    <template slot-scope="scope">

      <el-button size="mini">编辑</el-button>

      <el-button size="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 -->