项目系列目录：
手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（一）
手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（二）
手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（三）
目录
创建shouye.html。首页（shouye.html）代码：
前言
本期教程我们将要实现上期的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">
</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>到这里，只是实现了页面的布局设计，我们很容易发现，数据并没有显示出来，那是因为我们没有写相对应的方法。
接下来，我们进行写相对应的方法来实现相对应的功能。
创建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();
}
}到这里为止，项目的加载显示数据库的功能已经完成，并且可以正确的运行！！
直接附上效果图：
我们下期继续编写项目内容。谢谢观看！！！
《后续内容持续更新中！！！》
麻烦点个收藏点个关注不迷路！！！