web第八次作业

最新推荐文章于 2024-07-12 01:09:29 发布

Faith.777

最新推荐文章于 2024-07-12 01:09:29 发布

阅读量106

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/2303_80224736/article/details/139338026

版权

我是组长，我们组课程设计的题目是：图书管理，我认领的功能模块是：管理员管理

制作页面如下：

页面前端代码为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="js/element.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/element.js"></script>
  <script src="js/axios-0.18.0.js"></script>

</head>

<body>

<div id="app" style="width: 100%;height: 100%">
  <!--头导航栏-->
  <el-container >
    <el-header style="height: 60px;width: 100%;margin-top: 0;background-color: #545c64 ">
      <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
        <el-menu-item index="1" style="float: left">
          <template slot="title">图书管理</template>
        </el-menu-item>
        <el-menu-item index="1" style="float: right">处理中心</el-menu-item>
        <el-submenu index="2" style="float: right">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled style="float: right">消息中心</el-menu-item>
        <el-menu-item index="4" style="float: right"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
      </el-menu>
    </el-header>

    <!--左导航栏-->
    <el-container style="height: 900px;">
      <el-aside width="200px" height="900px" style="background-color:#545c64">
        <el-col  style="height: 100%;width: 300px;color:#545c64">
          <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>功能管理</span>
              </template>
              <el-menu-item-group>
                <template slot="title">核心功能</template>
                <el-menu-item index="1-1">借阅管理</el-menu-item>
                <el-menu-item index="1-2">图书管理</el-menu-item>
                <el-menu-item index="1-3">读者管理</el-menu-item>
                <el-menu-item index="1-4">公告管理</el-menu-item>
                <el-menu-item index="1-5">管理员管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>统计分析</span>
              </template>
              <el-menu-item-group>
                <template slot="title">图表统计</template>
                <el-menu-item index="2-1">统计分析</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

          </el-menu>
        </el-col>
      </el-aside>


      <!--主表格页面-->
      <el-main height="900px">
        <!--查询栏-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="font-size: 15px">
          <el-form-item label="用户名称">
            <el-input v-model="formInline.id" placeholder="用户名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="管理员类型">
            <el-select v-model="formInline.region" placeholder="管理员类型">
              <el-option label="高级管理员" value="top"></el-option>
              <el-option label="普通管理员" value="normal"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="gotoInsert" size="mini" icon="el-icon-circle-plus-outline">新增</el-button>
          </el-form-item>
        </el-form>

        <!--表格-->
        <el-table
                :data="tableData">
          <el-table-column align="center"
                           label="编号"
                           prop="id">
          </el-table-column>

          <el-table-column align="center"
                           label="用户名"
                           prop="username">
          </el-table-column>

          <el-table-column align="center" label="管理员类型" prop="adminType">
            <template slot-scope="scope">
              {{ scope.row.adminType === 1 ? '高级管理员' : '普通管理员' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      @click="gotoEdit(scope.row.id)">Edit
              </el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="deleteById(scope.row.id)">Delete
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <p align="center">
          <el-pagination
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[2, 3, 4, 10]"
                  :page-size="pageSize"
                  :total="total">
          </el-pagination>
        </p>
      </el-main>
    </el-container>
  </el-container>
</div>
</body>


<script>
  new Vue({
    el:"#app",
    data: {
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 100,
      formInline: {
        id: '',
        region: ''
      },
      tableData: []
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      },

      findAll() {
        var url = `/admin`;
        axios.get(url)
                .then(res => {
                  this.tableData = res.data.data;
                  console.log(this.tableData);
                })
                .catch(error => {
                  console.error(error);
                });
      }

    },
    created(){
      this.findAll();
    }

  })


</script>
</html>

controller为

package com.example.admin.controller;

import com.example.admin.pojo.Result;
import com.example.admin.service.AdminService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class AdminController {
    @Autowired
    AdminService adminService;

    @GetMapping("/admin")
    public Result findAll(){

        return Result.success(adminService.list());
    }
}

Mapper

package com.example.admin.mapper;

import com.example.admin.pojo.Admin;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;


import java.util.List;

@Mapper
public interface AdminMapper {
    @Select("select * from admin")
    public List<Admin> list();

}

Service为

package com.example.admin.service.impl;

import com.example.admin.mapper.AdminMapper;
import com.example.admin.pojo.Admin;
import com.example.admin.service.AdminService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class AdminServiceImpl implements AdminService {
    @Autowired
    private AdminMapper adminMapper;

    @Override
    public List<Admin> list() {
        return adminMapper.list();
    }
}