Vue + Springboot 開發的簡單的用戶管理系統
後臺接口以下：html
頁面以下：vue
1. 主頁，顯示全部的用戶信息post
2. 點擊詳情，看到某個id的用戶的詳細信息fetch
3. 點擊編輯按鈕，跳轉到的詳細的編輯（更新）頁面this
4. 添加用戶頁面spa
對應的vue代碼以下component
1. 查看全部用戶的信息orm
<template>
<div class="customers container">
<Alert v-if="alert" v-bind:message="alert"></Alert>
<h1 class="page-header">用戶管理系統</h1>
<input type="text" class="form-control" placeholder="搜索" v-model="filterInput">
<br>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>電話</th>
<th>郵箱</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="customer in filterBy(customers,filterInput)" :key="customer.name">
<td>{{customer.name}}</td>
<td>{{customer.phone}}</td>
<td>{{customer.email}}</td>
<td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">詳情</router-link></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import Alert from './Alert'
export default {
name: 'customers',
data () {
return {
customers:[],
alert:"",
filterInput:""
}
},
methods:{
fetchCustomers(){
this.$http.get("http://10.201.11.128:8085/showall")
.then((response) => {
console.log(response);
this.customers = response.data;
})
},
filterBy(customers,value){
return customers.filter(function(customer){
return customer.name.match(value);
})
}
},
created(){
if (this.$route.query.alert) {
this.alert = this.$route.query.alert;
}
this.fetchCustomers();
},
updated(){
this.fetchCustomers();
},
components:{
Alert
}
}
</script>
2. 某個id的用戶的詳細信息，頁面中有編輯和刪除按鈕router
<template>
<div class="details container">
<router-link to="/" class="btn btn-default">返回</router-link>
<h1 class="page-header">
{{customer.name}}
<span class="pull-right">
<router-link class="btn btn-primary" v-bind:to="'/edit/'+customer.id">
編輯
</router-link>
<button class="btn btn-danger" @click="deleteCustomer(customer.id)">刪除</button>
</span>
</h1>
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-asterisk">
{{customer.phone}}
</span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus">
{{customer.email}}
</span>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-asterisk">
{{customer.education}}
</span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus">
{{customer.graduationschool}}
</span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-asterisk">
{{customer.profession}}
</span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus">
{{customer.profile}}
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'cumstomerdetails',
data () {
return {
customer:""
}
},
methods:{
fetchCustomers(id){
this.$http.get("http://10.201.11.128:8085/users/"+id)
.then((response) => {
console.log(response);
this.customer = response.data;
})
},
deleteCustomer(id){
console.log(id);
this.$http.delete("http://10.201.11.128:8085/users/"+id)
.then((response) => {
this.$router.push({path:"/",query:{alert:"用戶刪除成功!"}});
})
}
},
created(){
this.fetchCustomers(this.$route.params.id);
}
}
</script>
3. 更新頁面htm
<template>
<div class="edit container">
<Alert v-if="alert" v-bind:message="alert"></Alert>
<h1 class="page-header">編輯用戶</h1>
<form v-on:submit="updateCustomer">
<div class="well">
<h4>用戶信息</h4>
<div class="form-group">
<label>姓名</label>
<input type="text" class="form-control" placeholder="name" v-model="customer.name">
</div>
<div class="form-group">
<label>電話</label>
<input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
</div>
<div class="form-group">
<label>郵箱</label>
<input type="text" class="form-control" placeholder="email" v-model="customer.email">
</div>
<div class="form-group">
<label>學歷</label>
<input type="text" class="form-control" placeholder="education" v-model="customer.education">
</div>
<div class="form-group">
<label>畢業學校</label>
<input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
</div>
<div class="form-group">
<label>職業</label>
<input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
</div>
<div class="form-group">
<label>我的簡介</label>
<!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> -->
<textarea class="form-control" rows="10" v-model="customer.profile"></textarea>
</div>
<button type="submit" class="btn btn-primary">確認</button>
</div>
</form>
</div>
</template>
<script>
import Alert from './Alert'
export default {
name: 'add',
data () {
return {
customer:{},
alert:""
}
},
methods:{
fetchCustomer(id){
this.$http.get("http://10.201.11.128:8085/users/"+id)
.then((response) => {
console.log(response);
this.customer = response.data;
})
},
updateCustomer(e){
// console.log(123);
if (!this.customer.name || !this.customer.phone || !this.customer.email) {
// console.log("請添加對應的信息!");
this.alert = "請添加對應的信息!";
}else{
let updateCustomer = {
name:this.customer.name,
phone:this.customer.phone,
email:this.customer.email,
education:this.customer.education,
graduationschool:this.customer.graduationschool,
profession:this.customer.profession,
profile:this.customer.profile
}
this.$http.put("http://10.201.11.128:8085/edit/"+this.$route.params.id,updateCustomer)
.then((response) => {
console.log(response);
this.$router.push({path:"/",query:{alert:"用戶信息更新成功!"}});
})
e.preventDefault();
}
e.preventDefault();
}
},
created(){
this.fetchCustomer(this.$route.params.id);
},
components:{
Alert
}
}
</script>
4. 註冊頁面
<template>
<div class="add container">
<Alert v-if="alert" v-bind:message="alert"></Alert>
<h1 class="page-header">添加用戶</h1>
<form v-on:submit="addCustomer">
<div class="well">
<h4>用戶信息</h4>
<div class="form-group">
<label>姓名</label>
<input type="text" class="form-control" placeholder="name" v-model="customer.name">
</div>
<div class="form-group">
<label>電話</label>
<input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
</div>
<div class="form-group">
<label>郵箱</label>
<input type="text" class="form-control" placeholder="email" v-model="customer.email">
</div>
<div class="form-group">
<label>學歷</label>
<input type="text" class="form-control" placeholder="education" v-model="customer.education">
</div>
<div class="form-group">
<label>畢業學校</label>
<input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
</div>
<div class="form-group">
<label>職業</label>
<input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
</div>
<div class="form-group">
<label>我的簡介</label>
<!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> -->
<textarea class="form-control" rows="10" v-model="customer.profile"></textarea>
</div>
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</template>
<script>
import Alert from './Alert'
export default {
name: 'add',
data () {
return {
customer:{},
alert:""
}
},
methods:{
addCustomer(e){
// console.log(123);
if (!this.customer.name || !this.customer.phone || !this.customer.email) {
// console.log("請添加對應的信息!");
this.alert = "請添加對應的信息!";
}else{
let newCustomer = {
name:this.customer.name,
phone:this.customer.phone,
email:this.customer.email,
education:this.customer.education,
graduationschool:this.customer.graduationschool,
profession:this.customer.profession,
profile:this.customer.profile
}
this.$http.post("http://10.201.11.128:8085/users",newCustomer)
.then((response) => {
console.log(response);
this.$router.push({path:"/",query:{alert:"用戶信息添加成功!"}});
})
e.preventDefault();
}
e.preventDefault();
}
},
components:{
Alert
}
}
</script>
全部頁面中帶有一個alert組件
<template>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{message}}
</div>
</template>
<script>
export default {
name: 'alert',
props:["message"],
data () {
return {
}
}
}
</script>
相關文章
- 1. Vue + Springboot 開發的簡單的用戶管理系統
- 2. 簡單用戶管理系統（P-13）
- 3. 簡單用戶管理系統（P-06）
- 4. 簡單用戶管理系統（P-12）
- 5. 簡單用戶管理系統（P-01）
- 6. springboot+vue簡單的後臺管理（1）
- 7. 簡簡單單的Vue3（插件開發，路由系統，狀態管理）
- 8. Vue+springboot管理系統
- 9. 簡單的圖書管理系統
- 10. 開源一套簡單通用的後臺管理系統
- 更多相關文章...
- • 系統定義的TypeHandler - MyBatis教程
- • C# Windows 文件系統的操作 - C#教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
