一.运行环境
参考：vue-cli脚手架安装
二.实现效果预览
1.登录界面
2.管理界面
3.增
4.改
三.组件分支
四.登录login
1.设计login静态页面
<template>
<div class="container">
<h3>登录页面</h3>
<div class="inp">
<label for>用户名：</label>
<input type="text" placeholder="请输入用户名/手机号" v-model="details.username" />
</div>
<div class="inp second">
<label for>密码：</label>
<input type="password" placeholder="请输入密码" v-model="details.userpassword" />
</div>
<div class="btn">
<button class="btn btn-primary" @click="isLogin">登录</button>
<button class="btn btn-danger">注册</button>
</div>
</div>
</template>
2.login设定
（1）将input与data中的details双向绑定，点击登录触发isLogin事件，第一步判断用户信息是否正确，因为没有涉及到数据库，就暂时给用户名以及密码设定为死值，如果验证错误就给用户提示弹框；
（2）第二步，如果验证通过，就将用户输入信息存储在sessionStorage中，这个步骤是给全局前置导航守卫做铺垫；
methods: {
isLogin() {
//验证输入信息
if (this.details.username == "" || this.details.userpassword == "") {
alert("账号或密码不能为空");
return;
} else if (
this.details.username == "vermouth" &&
this.details.userpassword == "123123"
) {
//存储数据实现页面跳转
sessionStorage.setItem("userdetails", this.details.username);
this.$router.push("/index/student");
} else {
alert("账号或密码错误");
return;
}
}
}
（3）在src>main.js中设置全局前置守卫，当to与sessionStorage都满足条件时，进行页面拦截，否则按照路由规则正常进行；
//导航守卫拦截页面
router.beforeEach((to,from,next)=>{
console.log(to.fullPath)
if(to.fullPath!=="/login" && sessionStorage.getItem("userdetails") == null){
next("/login")
}else{
next()
}
})
五.表格组件（formTable组件）
1.设计formTable组件的静态页面
<template>
<div class="container">
<button class="btn btn-primary" id="add" @click="addBtn">添加信息</button>
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) of studentInfo" :key="item.stuNum">
<td>{{index+1}}</td>
<td>{{item.stuNum}}</td>
<td>{{item.stuName}}</td>
<td>{{item.stuClass}}</td>
<td>{{item.stuPhone}}</td>
<td>
<button class="btn btn-danger" @click="remove(index)">删除</button>
<button class="btn btn btn-default" @click="alter(index)">编辑</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
2.在src>router>index.js中将表格组件设置成index的子路由
{
path: "/index",
component: index,
children:[
{
path: "student",
component: formTable
}
]
}
六.main>left组件
1.在<template></template>中设置路由导航，路由导航里面的to属性表示导航到哪个路由中：
<template>
<div>
<ul>
<li>
<router-link to="/index/student" active-class="manager">学生管理</router-link>
</li>
<li>
<router-link to="/index/teacher" active-class="manager">教师管理</router-link>
</li>
<li>
<router-link to="/index/class" active-class="manager">课程管理</router-link>
</li>
</ul>
</div>
</template>
2.与之相对应的是在main>right组建中设置导航可视区
<template>
<div>
<router-view></router-view>
</div>
</template>
七.信息编辑组件（inform组件）
（1）设计inform组件的静态页面
<template>
<div class="container">
<h1>学生信息{{str}}页面</h1>
<form>
<div class="form-group">
<label for="exampleInputEmail1">学生学号</label>
<input
type="text"
class="form-control"
id="exampleInputEmail1"
placeholder="id"
v-model="stuInform.stuNum"
/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">学生姓名</label>
<input
type="text"
class="form-control"
id="exampleInputPassword1"
placeholder="name"
v-model="stuInform.stuName"
/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">学生班级</label>
<input
type="text"
class="form-control"
id="exampleInputPassword1"
placeholder="class"
v-model="stuInform.stuClass"
/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">学生手机号</label>
<input
type="text"
class="form-control"
id="exampleInputPassword1"
placeholder="phone"
v-model="stuInform.stuPhone"
/>
</div>
<button type="button" class="btn btn-danger" @click="success">{{str}}</button>
</form>
</div>
</template>
（2）该组件在src>router>index.js中路由规则位置应当与formTable组件同级
八.表格（formTable组件）的增删改
1.增
实现效果：点击增加，跳转信息新增页面，在信息新增页面，点击新增，表格中渲染出新增数据
（1）在formTable组件中为“添加信息button”添加“addBtn”点击事件，当点击时跳转到信息新增页面：
addBtn() {
this.$router.push("/student/inform");
}
（2）在inform组件中使input与data中的参数双向绑定，当点击“新增”按钮时，将参数传值到localStoreage中（注意:localStoreage只能存储字符串类型的对象），进行页面跳转到/index/student
success() {
//设置空数组来接收对象，如果是非空数组，就使用非空数组
var message = JSON.parse(localStorage.getItem("stuMessage")) || [];
//将双向绑定的参数添加到message数组中
message.push(this.stuInform);
//将message数组转为字符串
var messageStr = JSON.stringify(message);
//向localStorage中设定值
localStorage.setItem("stuMessage", messageStr);
//跳转页面
this.$router.push("/index/student");
}
（3）此时.localStorage中已经存储了上一步新增的数据，接下来是跳转到/index/formtable后的渲染 :
（4）在formtable组件中的生命周期钩子函数mounted（数据和DOM挂载完成后），从localStorage中拿数据，并将数据赋给data中的接收参数，之后再进行循环遍历接受的参数，完成表格的渲染
mounted() {
//从localStorage中拿值
var get = localStorage.getItem("stuMessage");
//转为对象
var getObj = JSON.parse(get);
//给接收参数赋值
this.studentInfo = getObj;
}
2.删
（1）添加remove点击事件，并传递参数index，首先用变量接收到localStorage的数据，进行删除，再给localStorage设置进去（数据就覆盖了），再将data里面的参数删除相应的那个对象：
remove(n){
var localObj = JSON.parse(localStorage.getItem("stuMessage"))
localObj.splice(n,1)
this.studentInfo.splice(n,1)
localStorage.setItem("stuMessage",JSON.stringify(localObj))
},
3.改（编辑页面路由为/student/alter/参数）
（1）修改的主要逻辑为设置动态路由，在/index/student的编辑按钮中设置点击事件+携带参数并进行页面跳转,在"/student/alter/参数"获取到参数，拿到localStorage对应下标的对象，赋值给input，实现当前页面渲染；点击修改按钮，进行替换；
（2）第一步，在src>router>index.js里面与/index/student同级的位置上设置新的路由，该路由供单条数据编辑使用，因此需要携带参数（该参数是单条数据的唯一值）：
{
path:"/student/alter/:stuId",
component:myInform
}
（3）第二步，/index/student中为“编辑”按钮添加点击事件，并且携带参数（该参数是每条数据对象的唯一值），传参+跳转页面：
alter(c){
this.$router.push("/student/alter/"+c)
}
（4）以上两步的目的是为了使每条数据和动态路由挂上联系；
（5）在"/student/alter/参数"的mounted中获取唯一值的参数并在localStorage对应的数据，渲染在当前输入框内：
mounted() {
if (this.$route.params.stuId) {
this.str = "修改";
var num = this.$route.params.stuId;
var stuStr = JSON.parse(localStorage.getItem("stuMessage"));
this.stuInform = stuStr[num];
}
}
（6）修改完成以后利用数组替换的方法对localStorage的数据进行替换，在设置进去并进行页面跳转，改可与增加写在一起，按钮内容可设置为变量：
//添加/修改信息
success() {
var message = JSON.parse(localStorage.getItem("stuMessage")) || [];
let num = this.$route.params.stuId;
if (num) {
message.splice(num, 1, this.stuInform);
} else {
message.push(this.stuInform);
}
var messageStr = JSON.stringify(message);
localStorage.setItem("stuMessage", messageStr);
this.$router.push("/index/student");
}
谢谢浏览~~~~~
