Project series directory:
Table of contents
1. Realization of the main interface
Create shouye.html. Home page (shouye.html) code:
Second, the realization of the function of loading data
The user.html code is as follows:
The specific code of UserController is as follows:
UserDao writes the method of loading the database t_user table:
The specific code of UserService is as follows:
Directly attach the renderings:
"Follow-up content is being continuously updated! ! ! "
foreword
In this tutorial, we will implement the main interface of the previous issue and realize the correct display of the t_user table of the database.
1. Realization of the main interface
Import of js package:
Import the element-ui and vue packages in the js folder. If not, you can download it from my resources (link:...).
Create the main.html file (you don't need to build it if you have built it before).
Write the main.html code:
<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>Create shouye.html. Home page (shouye.html) code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<H1 align="center">欢迎来到Sping学习系统！</H1>
</body>
</html>At this point, the main.html interface has been implemented:
At this point, the main interface design has been completed (you can beautify and modify the interface according to your own needs!)
In the next step, we will implement the function of displaying database user management information.
Second, the realization of the function of loading data
Now, we will proceed to implement the display function of the database table.
Here, we still need to design the page. Create a user folder and create a user.html file. As follows:
The user.html interface needs to be designed to display the columns to be displayed in the t_user table of its own database. So you need to create the corresponding header. There also needs to be buttons for the corresponding addition, deletion, modification, and query functions. The specific interface is shown in the figure below (you can design it according to your own needs, here is just a reference!).
The user.html code is as follows:
<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>
<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>So far, we have only realized the layout design of the page, and we can easily find that the data is not displayed, that is because we have not written the corresponding method.
Next, we write the corresponding method to realize the corresponding function.
Create user-related classes:
Three UserBean, UserService, and UserController. (UserDao has been created before, so it will not be created here.)
Compared with the previous one, the database needs to be improved: add the beizhu field.
UserBean class:
Define four parameters: id, name, pass, beizhu. There is almost no need to modify it later, and all the parameters that can be used are defined at one time.
private int id; private String name; private String pass; private String beizhu;
UserBean complete code:
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:
Reference annotation @Controller control.
@Controller
Write annotations to define the corresponding mappings:
@RequestMapping("/user")
The specific code of UserController is as follows:
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 writes the method of loading the database t_user table:
Just follow the UserDao in the previous issue.
public List loadData() {
String sql = "select * from study.t_user where WhetherDelete=0";
JdbcTemplate tem = db.getTem();
return tem.queryForList(sql);
}The specific code of UserService is as follows:
@Service
public class UserService {
@Autowired
UserDao dao;
public List loadData() {
{
return dao.loadData();
}
}So far, the loading of the project shows that the function of the database has been completed and can run correctly! !
Directly attach the renderings:
We will continue to write the content of the project in the next issue. Thanks for watching! ! !
"Follow-up content is being continuously updated! ! ! "
Please bookmark and follow to not get lost! ! !