<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>基于vue-router的案例</title>
<script src="vue-2.4.0.js"></script>
<script src="vue-router v3.5.3.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<style type="text/css">
html,
body,
#app {
margin: 0;
padding: 0px;
height: 100%;
}
.header {
height: 50px;
background-color: indianred;
line-height: 50px;
text-align: center;
font-size: 24px;
color: #fff;
}
.footer {
height: 40px;
line-height: 40px;
background-color: #888;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
}
.main {
display: flex;
position: absolute;
top: 50px;
bottom: 40px;
width: 100%;
}
.content {
flex: 1;
text-align: center;
height: 100%;
}
.left {
flex: 0 0 20%;
background-color: indianred;
}
.left a {
color: white;
text-decoration: none;
}
.right {
margin: 5px;
}
.btns {
width: 100%;
height: 35px;
line-height: 35px;
background-color: #f5f5f5;
text-align: left;
padding-left: 10px;
box-sizing: border-box;
}
button {
height: 30px;
background-color: #ecf5ff;
border: 1px solid lightskyblue;
font-size: 12px;
padding: 0 20px;
}
.main-content {
margin-top: 10px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
height: 45px;
line-height: 45px;
background-color: lightcoral;
color: #fff;
cursor: pointer;
border-bottom: 1px solid #fff;
}
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid #eee;
line-height: 35px;
font-size: 12px;
}
th {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
var App = {
template: `<div>
<!-- 头部区域 -->
<header class="header">后台管理系统</header>
<!-- 中间主体区域 -->
<div class="main">
<!-- 左侧菜单栏 -->
<div class="content left">
<ul>
<li><router-link to="/users">用户管理</router-link></li>
<li><router-link to="/quanxian">权限管理</router-link></li>
<li><router-link to="/shangpin">商品管理</router-link></li>
<li><router-link to="/dingdan">订单管理</router-link></li>
<li><router-link to="/system">系统设置</router-link></li>
</ul>
</div>
<!-- 右侧内容区域 -->
<div class="content right"><div class="main-content">
<router-view></router-view>
</div></div>
</div>
<!-- 尾部区域 -->
<footer class="footer">版权信息</footer>
</div>`
}
var Users = {
data() {
return {
id: '',
name: '',
age: '',
keywords: '',
userlist: [{
id: 1,
name: '梦想',
age: 19
},
{
id: 2,
name: '张杰',
age: 19
},
{
id: 3,
name: '陈锦',
age: 19
},
{
id: 4,
name: '发财',
age: 49
},
]
}
},
created(){
this.newList()
},
methods: {
xiangqing(item) {
//保存到本地缓存--localStorage只能保存字符串，所以先将对象转为字符串
localStorage.setItem('userInfo',JSON.stringify(item))
this.$router.push('/userinfo/' + item.id)
},
newList(){
var listArr = JSON.parse(localStorage.getItem('userInfo')||'[]')
this.userList=listArr
},
del(id) {
var index = this.userlist.findIndex(item => {
if (item.id == id) {
return true;
}
})
this.userlist.splice(index, 1)
},
add() {
var car = {
id: this.id,
name: this.name,
age: this.age,
}
this.userlist.push(car)
},
//查找
search(keywords) {
return this.userlist.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
},
initUserInfo(){
const userInfoString = localStorage.getItem('userInfo')
if(userInfoString){
//将字符串转为对象
const userInfo = JSON.parse(userInfoString)
//从当前列表中查找是否有和缓存里相同的用户，如果有使用缓存里的替换
let result = []
this.userlist.forEach(u=>{
if(u.id == userInfo.id){
u = userInfo
}
result.push(u)
})
this.userlist = result
}
}
},
//页面加载时从localStorage读取是否有修改的用户数据,mounted是vue生命周期的一部分，表示页面初始化完成
mounted(){
this.initUserInfo()
},
template: `<div>
<h3>用户管理</h3>
<input type="text" v-model="id">
<input type="text" v-model="name">
<input type="text" v-model="age">
<input type="button" value="添加" @click="add()">
<label>
搜索名称关键字：
<input type="text" v-model="keywords">
</label>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><a href="javascript:;" @click="xiangqing(item)">详情</a>
<a href="javascript:;" @click="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>`
}
var UserInfo = {
props: ['id'],
data(){
return {
// id: '',
// name: '',
// age: '',
userInfo:{}
}
},
template: `<div>
<h5>用户详情页 --- 用户Id为：{{id}}</h5>
<input type="text" v-model="userInfo.id" disabled>
<input type="text" v-model="userInfo.name">
<input type="text" v-model="userInfo.age">
<input type="button" value="修改" @click="xiugai()">
<button @click="goback()">后退</button>
</div>`,
methods: {
goback() {
// 后退功能
this.$router.go(-1)
},
xiugai() {
// 每个component的data都是私有的，其他页面是无法访问的，修改后把数据保存到localStorage中
// this.userlist[this.index].id = this.id
// this.userlist[this.index].name = this.name
// this.userlist[this.index].age = this.age
// this.id = this.name = this.index = ''
localStorage.setItem('userInfo',JSON.stringify(this.userInfo))
},
getUserInfo(){
const userInfo = localStorage.getItem('userInfo')
if(userInfo){
//将字符串转为对象
this.userInfo = JSON.parse(userInfo)
}
}
},
//加载页面获取用户详情
mounted(){
this.getUserInfo()
}
}
var Rights = {
template: '<div><h3>权限管理</h3></div>'
}
var Goods = {
template: '<div><h3>商品管理</h3></div>'
}
var Orders = {
template: '<div><h3>订单管理</h3></div>'
}
var Settings = {
template: '<div><h3>系统设置管理</h3></div>'
}
var router = new VueRouter({
routes: [{
path: '/',
component: App,
redirect: '/users',
children: [{
path: '/users',
component: Users
},
{
path: '/userinfo/:id',
component: UserInfo,
props: true
},
{
path: '/rights',
component: Rights
},
{
path: '/goods',
component: Goods
},
{
path: '/orders',
component: Orders
},
{
path: '/settings',
component: Settings
}
]
}]
})
var vm = new Vue({
el: '#app',
router
})
</script>
</body>
</html>
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
