Project series directory:
Table of contents
User.html specific code implementation:
user.html specific implementation code:
The specific code of UserBean.java is as follows:
The specific code of UserController is as follows:
The specific code of UserDao is as follows:
The specific code of UserService is as follows:
user.html specific implementation code:
The specific code of UserController is as follows:
The specific code of UserDao is as follows:
The specific code of UserService is as follows:
3. Modify information function
user.html specific implementation code:
The specific code of UserController is as follows:
The specific code of UserDao is as follows:
The specific code of UserService is as follows:
4. Delete information function
user.html specific implementation code:
The specific code of UserController is as follows:
The specific code of UserDao is as follows:
The specific code of UserService is as follows:
foreword
In this article, we will complete the end of the project and realize the four functions of adding, deleting, modifying and checking!
1. Add information function
It is actually very simple to implement the function of adding information. The principle is that you need to add the information you want to add to each field of the database. So we follow this line of thought to implement specific functions.
First of all, we need to write specific code to realize the function of clicking the Add Information button to pop up a specific dialog box, and then display the fields we want to add in the form of input boxes.
User.html specific code implementation:
<!--对话框-->
<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> data:{
tableData:[],
dialogVisible:false,
name:'',
pass:'',
beizhu:'',
sename:'',
title:'用户添加',
key:'save',
id:''
},
operate(){
//保存
if (this.key == 'save') {
this.save();
}else{
this.updateInfo();
}
},
openSave(){
this.key = 'save';
this.title = '用户添加';
//打开对话框
this.dialogVisible= true;
vue.name = '';
vue.pass = '';
vue.beizhu = '';
},The above is the code to realize the specific function of the dialog box. Next, you need to write the relevant code for the function of saving method and loading data method.
user.html specific implementation code:
//保存方法
save(){
axios({
method:'post',
url:'http://localhost:8080/spring_study_war_exploded/user/save.do',
params:{
name:vue.name,
pass:vue.pass,
beizhu:vue.beizhu
}
}).then(function (re) {
var re = re.data;
if (re.result == 'success') {
alert('保存成功');
vue.dialogVisible=false;
vue.loadData();
}else{
alert('保存失败');
}
}).catch(function (error) { // 请求失败处理
});
},
//加载数据
loadData() {
axios({
method:'post',
url:'http://localhost:8080/spring_study_war_exploded/user/loadData.do',
params:{
}
}).then(function (re) {
vue.tableData = re.data;
}).catch(function (error) { // 请求失败处理
});
}Then add related classes to make the function realizable:
Create the above four classes (you can name them according to your own naming habits!)
UserBean is to define each field name, just paste the code here!
The specific code of UserBean.java is as follows:
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;
}
}
Next, like the login function, a controller is required.
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();
}
@RequestMapping("/save.do")
@ResponseBody
public Map save(UserBean bean){
return userService.save(bean);
}
}UserDao needs to write specific SQL statements to achieve the function.
The specific code of UserDao is as follows:
package com.study.user;
import com.study.db.DB;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Component
public class UserDao {
@Autowired
private DB db;
public List loadData() {
String sql = "select * from study.t_user where WhetherDelete=0";
JdbcTemplate tem = db.getTem();
return tem.queryForList(sql);
}
public Map save(UserBean bean) {
Map map = new HashMap();
try {
String sql = "insert into study.t_user values(0,'"+bean.getName()+"','"+bean.getPass()+"','"+bean.getBeizhu()+"',0)";
JdbcTemplate tem = db.getTem();
tem.execute(sql);
map.put("result", "success");
} catch (Exception e) {
map.put("result", "error");
e.printStackTrace();
}
return map;
}
}The specific code of UserService is as follows:
package com.study.user;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
@Service
public class UserService {
@Autowired
UserDao dao;
public List loadData() {
{
return dao.loadData();
}
}
public Map save(UserBean bean) {
return dao.save(bean);
}
}At this point, the save method can be realized, and then you need to continue to write the functions of query, modification and deletion. In fact, they are all written in the same way. Pretty much the same routine.
Paste the relevant code directly below. If you don’t understand anything, you can private message me or leave a message in the comment area to ask me!
2. Query information function
user.html specific implementation code:
selectInfos(){
axios({
method:'post',
url:'http://localhost:8080/spring_study_war_exploded/user/selectInfos.do',
params:{
name:vue.sename
}
}).then(function (re) {
vue.tableData = re.data;
}).catch(function (error) { // 请求失败处理
});
},The specific code of UserController is as follows:
@RequestMapping("/selectInfos.do")
@ResponseBody
public List selectInfos(UserBean bean){
return userService.selectInfos(bean);
}The specific code of UserDao is as follows:
public List selectInfos(UserBean bean) {
String sql = "select * from study.t_user where WhetherDelete=0 and name like '%"+bean.getName()+"%'";
JdbcTemplate tem = db.getTem();
return tem.queryForList(sql);
}The specific code of UserService is as follows:
public List selectInfos(UserBean bean) {
{
return dao.selectInfos(bean);
}
}3. Modify information function
user.html specific implementation code:
openupdateInfo(id){
this.id=id;
this.key = 'update';
this.title = '用户修改';
//打开对话框
this.dialogVisible= true;
this.loadData();
//加载数据
axios({
method:'post',
url:'http://localhost:8080/spring_study_war_exploded/user/getInfo.do',
params:{
id:id,
}
}).then(function (re) {
var re = re.data;
var id = re.id;
vue.name = re.name;
vue.pass = re.pass;
vue.beizhu = re.beizhu;
}).catch(function (error) { // 请求失败处理
});
},
//修改
updateInfo(){
axios({
method:'post',
url:'http://localhost:8080/spring_study_war_exploded/user/updateInfo.do',
params:{
name:vue.name,
pass:vue.pass,
beizhu:vue.beizhu,
id:vue.id
}
}).then(function (re) {
var re = re.data;
if (re.result == 'success') {
alert('修改成功');
vue.dialogVisible=false;
vue.loadData();
}else{
alert('修改失败');
}
}).catch(function (error) { // 请求失败处理
});
},The specific code of UserController is as follows:
@RequestMapping("getInfo.do")
@ResponseBody
public Map getInfo(UserBean bean){
return userService.getInfo(bean);
}
@RequestMapping("updateInfo.do")
@ResponseBody
public Map updateInfo(UserBean bean){
return userService.updateInfo(bean);
}The specific code of UserDao is as follows:
public Map getInfo(UserBean bean) {
String sql = "select * from study.t_user where id="+bean.getId();
JdbcTemplate tem = db.getTem();
return tem.queryForMap(sql);
}
public Map updateInfo(UserBean bean) {
Map map = new HashMap();
try {
String sql = "update study.t_user set name = '"+bean.getName()+"',pass = '"+bean.getPass()+"',beizhu = '"+bean.getBeizhu()+"' where id="+bean.getId();
JdbcTemplate tem = db.getTem();
tem.execute(sql);
map.put("result", "success");
} catch (Exception e) {
map.put("result", "error");
e.printStackTrace();
}
return map;
}The specific code of UserService is as follows:
public Map getInfo(UserBean bean) {
return dao.getInfo(bean);
}
public Map updateInfo(UserBean bean) {
return dao.updateInfo(bean);
}4. Delete information function
user.html specific implementation code:
deleteInfo(id){
axios({
method:'post',
url:'http://localhost:8080/spring_study_war_exploded/user/deleteInfo.do',
params:{
id:id,
}
}).then(function (re) {
var re = re.data;
if (re.result == 'success') {
alert('删除成功');
vue.loadData();
}else{
alert('删除失败');
}
}).catch(function (error) { // 请求失败处理
});
},The specific code of UserController is as follows:
@RequestMapping("deleteInfo.do")
@ResponseBody
public Map deleteInfo(UserBean bean){
return userService.deleteInfo(bean);
}The specific code of UserDao is as follows:
public Map deleteInfo(UserBean bean) {
Map map = new HashMap();
try {
String sql = "update study.t_user set WhetherDelete=1 where id="+bean.getId();
JdbcTemplate tem = db.getTem();
tem.execute(sql);
map.put("result", "success");
} catch (Exception e) {
map.put("result", "error");
e.printStackTrace();
}
return map;
}The specific code of UserService is as follows:
public Map deleteInfo(UserBean bean) {
return dao.deleteInfo(bean);
}So far, the four functions of adding, deleting, modifying and checking items have all been realized. You can try the specific function operation.
If you find the column article useful, give a free like and favorite! !
thank you all! ! !