项目系列目录：

前言

本期教程我们将要实现上期的main界面，以及实现数据库的t_user表的正确显示。

一、main界面的实现

js包的导入：

在js文件夹中导入element-ui和vue的包。如果没有的话，可以到我的资源里下载（链接为：...）。

创建main.html文件（之前建过的就不需要再建了）。

写入main.html代码：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/spring_study_war_exploded/js/element-ui/lib/theme-chalk/index.css" />
    <script src="/spring_study_war_exploded/js/vue/vue.min.js"></script>
    <script src="/spring_study_war_exploded/js/element-ui/lib/index.js"></script>
    <script src="/spring_study_war_exploded/js/vue/axios.min.js"></script>
    <script src="/spring_study_war_exploded/js/vue/qs.js"></script>

    <style>
        html body {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="width: 100%;height:100%">
        <el-aside style="width: 200px;">
            <div style="text-align: center;margin-top: 10px">
                <i class="el-icon-reading"></i><span style="color: #303133;font-size: 18px;font-weight: bold;margin-left: 5px">spring学习系统</span>
            </div>
            <el-menu>
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
                    <el-menu-item index="1-1" @click="menuClick('用户管理')">用户管理</el-menu-item>
                    <el-menu-item index="1-2" @click="menuClick('部门管理')">部门管理</el-menu-item>
                    <el-menu-item index="1-3" @click="menuClick('角色管理')">角色管理</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-edit"></i>作业管理</template>
                    <el-menu-item index="2-1">我的作业</el-menu-item>
                    <el-menu-item index="2-2">作业成绩</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container style="height: 100%">
            <el-header style="height: 50px;background-color: #089bf1"></el-header>
            <el-main style="margin: 0px;padding: 0px" >
                <iframe :src="url" style="width: 100%;height: 100%" scrolling="auto"></iframe>

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
</html>
<script>
    <!--新建一个vue对象-->
    new Vue({
        el:'#app',
        data:{
            url:'/spring_study_war_exploded/shouye.html'
        },
        methods:{
            menuClick(name){
                if (name == '用户管理') {
                    this.url = '/spring_study_war_exploded/user/user.html';
                }else if (name=="部门管理") {
                    this.url = '/spring_study_war_exploded/org/org.html';
                }
            }
        }
    });
</script>

创建shouye.html。首页（shouye.html）代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<H1 align="center">欢迎来到Sping学习系统！</H1>
</body>
</html>

到这里，main.html的界面已经实现：

到这里，main的界面设计已经完成（可以根据自己的需要进行对界面的美化和修改！）

下一步，我们将进行实现数据库用户管理信息展示的功能。

二、加载数据功能的实现

现在，我们将进行实现数据库表的显示功能。

在这里，我们依然需要进行页面的设计。建立user文件夹、建立user.html文件。如下所示：

user.html界面需要设计的是将自己数据库的t_user表的所要展示的列展示出来。于是就需要创建对应的表头。还需要有对应的增删改查功能的按钮等等。具体的界面如下图所示（可以根据自己的需求进行设计，这里只是做个参考！）。

user.html代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/spring_study_war_exploded/js/element-ui/lib/theme-chalk/index.css" />
    <script src="/spring_study_war_exploded/js/vue/vue.min.js"></script>
    <script src="/spring_study_war_exploded/js/element-ui/lib/index.js"></script>
    <script src="/spring_study_war_exploded/js/vue/axios.min.js"></script>
    <script src="/spring_study_war_exploded/js/vue/qs.js"></script>
</head>
<body>
<div id="app">
    <el-row style="height: 40px;width: 100%;background-color: #ececec">
        <el-col :span="8"> &nbsp;
        </el-col>
        <el-col :span="8">
            账号：<el-input v-model="sename" style="width: 200px;height: 35px"></el-input>
            <el-button size="small" type="primary" icon="el-icon-search" @click="selectInfos()">查询</el-button>
        </el-col>
        <el-col :span="8">

            <el-button  size="small" type="primary" icon="el-icon-plus" @click="openSave()">新增</el-button>
        </el-col>
    </el-row>


    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="name"
                label="账号"
                width="300">
        </el-table-column>
        <el-table-column
                prop="pass"
                label="密码"
                width="300">
        </el-table-column>
        <el-table-column
                prop="beizhu"
                label="备注">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button icon="el-icon-edit"
                           type="primary"
                           size="mini"
                           @click="openupdateInfo(scope.row.id)">编辑</el-button>
                <el-button icon="el-icon-delete"
                           size="mini"
                           type="danger"
                           @click="deleteInfo(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--对话框-->
    <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="50%"
    >
        <!--form表单-->
        <el-form   class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="pass"  placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="beizhu"  type="textarea" placeholder="备注"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="operate()">确 定</el-button>
  </span>
    </el-dialog>
</div>
</body>
</html>
<script>

    var vue =  new Vue({
        el:'#app',
      
        methods:{
            
            //加载数据
            loadData() {
                axios({
                    method:'post',
                    url:'http://localhost:8080/spring_study_war_exploded/user/loadData.do',
                    params:{
                        // op:'loadData',
                    }

                }).then(function (re) {
                    vue.tableData =  re.data;

                }).catch(function (error) { // 请求失败处理

                });
            }
        },
        mounted(){
            this.loadData();
        }

    })
</script>

到这里，只是实现了页面的布局设计，我们很容易发现，数据并没有显示出来，那是因为我们没有写相对应的方法。

接下来，我们进行写相对应的方法来实现相对应的功能。

创建user相关的类：

UserBean、UserService、UserController三个。（UserDao之前已经创建过了，这里就不再创建。）

数据库和之前的相比，需要再完善一下：添加beizhu字段。

UserBean类：

定义四个参数：id、name、pass、beizhu。这里在之后几乎都不需要修改，一次性把能用到的参数全部定义下。

private int id;
private String name;
private String pass;
private String beizhu;

UserBean完整代码：

package com.study.user;

public class UserBean {
    private int id;

    private String name;

    private String pass;

    private String beizhu;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPass() {
        return pass;
    }

    public void setPass(String pass) {
        this.pass = pass;
    }

    public String getBeizhu() {
        return beizhu;
    }

    public void setBeizhu(String beizhu) {
        this.beizhu = beizhu;
    }
}

UserController控制器：

引用注解@Controller控制。

@Controller

编写注解来定义相对应的映射：

@RequestMapping("/user")

UserController具体代码如下：

package com.study.user;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserService userService;

    @RequestMapping("/loadData.do")
    @ResponseBody
    public List loadData(){
        return userService.loadData();
    }
   
  

}

UserDao书写加载数据库t_user表的方法：

直接接着上期的UserDao写就行。

public List loadData() {
        String sql = "select * from study.t_user where WhetherDelete=0";
        JdbcTemplate tem = db.getTem();
        return tem.queryForList(sql);
    }

UserService的具体代码如下：

@Service
public class UserService {
    @Autowired
    UserDao dao;
    public List loadData() {
        {
            return   dao.loadData();
        }

    }

到这里为止，项目的加载显示数据库的功能已经完成，并且可以正确的运行！！

直接附上效果图：

我们下期继续编写项目内容。谢谢观看！！！

《后续内容持续更新中！！！》

麻烦点个收藏点个关注不迷路！！！

手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（四）（持续更新中）

前言