六、vue整合ssm开发学生系统
1、index.html首页整合vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>开始使用 layui</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>学生ID</th>
<th>学生名称</th>
<th>学生年龄</th>
<th>学生地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<th>{{user.id}}</th>
<th>{{user.name}}</th>
<th>{{user.age}}</th>
<th>{{user.addres}}</th>
<th>操作</th>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
users: []
}
},
mounted() {
// 页面加载完成之后 加载数据
var _this = this;
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://127.0.0.1/user/getUsersAll',
}).then(function (result) {
var code = result.data.code;
var data = result.data.data;
if (code == "200") {
_this.users = data;
}
})
}
});
</script>
</body>
</html>
2、新增数据整合vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增用户数据</title>
<!-- 引入layui css -->
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名称</label>
<div class="layui-input-block">
<input type="text" name="name" v-model="user.name" required lay-verify="required" placeholder="请输入用户名称"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户年龄</label>
<div class="layui-input-block">
<input type="text" name="age" v-model="user.age" required lay-verify="required" placeholder="请输入用户年龄"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">用户地址</label>
<div class="layui-input-block">
<textarea name="addres" v-model="user.addres" placeholder="请输入地址" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="button" class="layui-btn" @click="suAddUser()" value="立即提交">
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
user: {}
}
},
methods: {
suAddUser() {
alert("点击提交" + this.user.name + "," + this.user.name);
var _this = this;
axios({
method: "POST",
url: "http://127.0.0.1/user/insertUser/",
data: _this.user,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).then(resp => {
var code = resp.data.code;
if (code == "200") {
alert("新增数据成功");
window.location.href = "vueIndex.html";
} else {
alert("新增数据失败");
}
})
}
}
})
</script>
</body>
</html>
3、修改数据整合vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改用户数据</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户ID</label>
<div class="layui-input-block">
<input type="text" name="id" v-model="user.id" id="id" required lay-verify="required"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名称</label>
<div class="layui-input-block">
<input type="text" name="name" v-model="user.name" id="name" required lay-verify="required"
placeholder="请输入用户名称"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户年龄</label>
<div class="layui-input-block">
<input type="text" name="age" v-model="user.age" id="age" required lay-verify="required"
placeholder="请输入用户年龄"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">用户地址</label>
<div class="layui-input-block">
<textarea name="addres" v-model="user.addres" id="addres" placeholder="请输入地址"
class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="button" class="layui-btn" @click="updateUser()" value="立即修改">
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script>
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null)
return unescape(r[2]);
return null; //返回参数值
}
new Vue({
el: "#app",
data() {
return {
user: {}
}
},
methods: {
updateUser() {
alert("修改用户数据");
var _this = this;
axios({
method: "PUT",
url: "http://127.0.0.1/user/updateUser/",
data: _this.user,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).then(resp => {
var code = resp.data.code;
if (code == "200") {
alert("修改数据成功");
window.location.href = "vueIndex.html";
} else {
alert("修改数据失败");
}
})
}
},
mounted() {
//1.获取地址栏参数
var id = getUrlParam("id");
//2.发送ajax请求
var _this = this;
axios({
// 请求方式
method: 'get',
// 请求的地址
url: 'http://127.0.0.1/user/getById/' + id,
}).then(function (result) {
var code = result.data.code;
if (code == "200") {
_this.user = result.data.data;
} else {
alert("查询用户信息数据失败!");
}
})
}
})
</script>
</body>
</html>
4、删除数据整合vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>开始使用 layui</title>
<!-- 引入layui css -->
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
<!--引入vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<a href="vueAddUser.html">新增数据</a>
<div id="app">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>学生ID</th>
<th>学生名称</th>
<th>学生年龄</th>
<th>学生地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,i) in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.addres}}</td>
<td><a href="#" @click="delUser(i,user.id)">删除</a> <a
:href="'vueUpdateUser.html?id='+user.id">修改</a></td>
</tr>
</tbody>
</table>
</div>
<script>
/**
* 页面加载完毕之后开始发送ajax请求
*/
new Vue({
el: "#app",
data() {
return {
users: []
}
},
methods: {
delUser(index, id) {
alert(index + "," + id);
//id根据id 调用到后端接口
var _this = this;
axios({
// 请求方式
method: 'delete',
// 请求的地址
url: 'http://127.0.0.1/user/deleteById/' + id,
}).then(function (result) {
var code = result.data.code;
if (code == "200") {
// 如果code值是为200 后端数据就删除成功
//前端技术将该行数据删除
alert("删除成功");
_this.users.splice(index, 1);
}
})
}
},
mounted() {
// 页面加载完成之后处理;
// 发送ajax获取
var _this = this;
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://127.0.0.1/user/getUsersAll',
}).then(function (result) {
var code = result.data.code;
var data = result.data.data;
if (code == "200") {
// 返回200 后端接口中响应 data数据 给users
_this.users = data;
}
})
}
});
</script>
</body>
</html>