写一个vue小demo

写一个vue小demo

从数据库中查新和修改数据显示到页面

创建sql

DROP TABLE IF EXISTS user;
CREATE TABLE user (
id int(11) NOT NULL AUTO_INCREMENT,
age int(11) DEFAULT NULL,
username varchar(20) DEFAULT NULL,
PASSWORD varchar(50) DEFAULT NULL,
email varchar(50) DEFAULT NULL,
sex varchar(20) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

INSERT INTO user VALUES (‘1’, ‘33’, ‘张老师’, ‘123’, ‘zzz@itcast.cn’, '男 ');
INSERT INTO user VALUES (‘2’, ‘31’, ‘刘老师’, ‘123’, ‘lll@itcast.cn’, ‘女’);
INSERT INTO user VALUES (‘3’, ‘17’, ‘赵工’, ‘213’, ‘zg@itcast.cn’, ‘女’);
INSERT INTO user VALUES (‘4’, ‘40’, ‘高管’, ‘213’, ‘gg@itcast.cn’, ‘female’);
INSERT INTO user VALUES (‘5’, ‘28’, ‘李总’, ‘312’, ‘lz@jxjt.com’, ‘male’);
INSERT INTO user VALUES (‘6’, ‘34’, ‘王董’, ‘312’, ‘wd@jxjt.com’, ‘male’);
INSERT INTO user VALUES (‘7’, ‘55’, ‘孙老板’, ‘4321’, ‘slb@xzjt.com’, ‘男’);
INSERT INTO user VALUES (‘8’, ‘19’, ‘陈秘书’, ‘4321’, ‘cms@xzjt.com’, ‘女’);

创建web项目

domain

dao

service

web层

user.js

new Vue({
el:"#app",
data:{
user:{
id:"",
username:"",
password:"",
email:"",
age:"",
sex:""
},
userList:[]
},
methods:{
findAll:function(){
//在当前方法中定义一个变量，表明是vue对象
var _this = this;
axios.get(’/day01_eesy_vuejsdemo/user/findAll.do’)
.then(function (response) {
_this.userList = response.data;//响应数据给userList赋值
console.log(response);
})
.catch(function (error) {
console.log(error);
})
},
findById:function (userid) {
//在当前方法中定义一个变量，表明是vue对象
var _this = this;
axios.get(’/day01_eesy_vuejsdemo/user/findById.do’,{params:{id:userid}})
.then(function (response) {
_this.user = response.data;//响应数据给userList赋值
$("#myModal").modal(“show”);
})
.catch(function (error) {
console.log(error);
})
},
update:function (user) {//post请求
//在当前方法中定义一个变量，表明是vue对象
var _this = this;
axios.post(’/day01_eesy_vuejsdemo/user/updateUser.do’, _this.user)
.then(function (response) {
_this.findAll();
})
.catch(function (error) {
console.log(error);
});
}
},
created:function() {//当我们页面加载的时候触发请求，查询所有
this.findAll();
}
});