1.第一步:拿到后端给的数据,先进行测试,看数据是否能拿到,是有开发需求文档,按文档进行操作即可;接口 http://119.23.246.178:80/stu/stu_list
2.第二步:数据测试没问题之后,开始创建项目,配置基础文件
前提是你的node.js以及vue脚手架都安装完成
cnpm/npm i @vue/cli@4.5.13 -g
3.第三步:vue create 项目名称(不要有中文)
4.初始化:里面所有文件全部删掉,根据自己的需求进行配置,不要的全部删掉
5.App.vue修改如下,主要是配置出口
<template>
<div id="app">
<!-- 一定要给一个出口 显示一级路由页面 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
#app{
height: 100%;
}
</style>
6.导入自己需要的相关静态文件(css,images,fonts等) 在main.js中全局配置
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "./assets/css/base.css";
// 导入css样式
import "./assets/css/bootstrap.css";
// 引入axios
import Axios from "axios";
// 第二步 配置根路径
Axios.defaults.baseURL = "http://127.0.0.1:3000";
Vue.config.productionTip = false;
// 挂载到vue中的原型对象中,我们使用 $axios我们自己起的名字
Vue.prototype.$axios = Axios
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
7.可以在App.vue中测试项目是否搭建完成
<button class="btn btn-danger">我是按钮</button>
8.此时需要根据需要配置views文件夹
9.router/index.js代码 这个项目是二级路由 配置二级路由
import Vue from "vue";
import VueRouter from "vue-router";
// 配置一个二级路由的页面 显示二级路由
import student from "../views/Student.vue";
import teacher from "../views/Teacher.vue";
Vue.use(VueRouter);
const routes = [
// 重定向 页面一进来就加载
{ path: "/", redirect: "/student" },
// 学生管理路由 一级路由必须加 /
{
path: "/student",
name: "student",
// 每一级路由都需要一个出口
component: student,
children: [
// 二级路由前面不要添加 /
// 二级路由也需要重定向
{ path: "/", redirect: "list" },
// 学生列表
{ path: "list", component: () => import("../views/student/List.vue") },
// 添加
{ path: "add", component: () => import("../views/student/Add.vue") },
// 修改
{ path: "upd", component: () => import("../views/student/Upd.vue") },
// 删除需不需要页面 一般不需要页面
// { path: "del", component: () => import("../views/List.vue") },
],
},
{
path: "/teacher",
name: "teacher",
component: teacher,
children: [
{ path: "/", redirect: "list" },
// 二级路由前面不要添加 /
// 学生列表
{ path: "list", component: () => import("../views/teacher/List.vue") },
// 添加
{ path: "add", component: () => import("../views/teacher/Add.vue") },
// 修改
{ path: "upd", component: () => import("../views/teacher/Upd.vue") },
// 删除需不需要页面 一般不需要页面
// { path: "del", component: () => import("../views/List.vue") },
],
},
];
const router = new VueRouter({
routes,
// 改路由被选中的class类名 这个是默认的,我们可以改,router-link-active
linkActiveClass: "active",
});
export default router;
10.注意:路由被选中的时候会自动的加一个class
class = "router-link-active"
可以更改,改完之后就可以在样式下面写.active
const router = new VueRouter({
// 改 路由被选中的class名称
// 值为修改的名称
linkActiveClass: "active",
routes
})
11.所有样式写完之后,此时需要发异步请求,请求数据,渲染页面
vue中用的是axios
首先下载axios: npm i axios
// 第一步 引入axios
import Axios from "axios";
// 第二步 配置根路径
Axios.defaults.baseURL = "http://127.0.0.1:3000";
// 挂载到vue中的原型对象中,我们使用 $axios我们自己起的名字
Vue.prototype.$axios = Axios
12.发异步请求:
<script>
export default {
data() {
return {
list: [],
}
},
// 发异步请求
created() {
// 请求完调用这个
this.getList()
},
methods: {
// 定义一个方法
async getList() {
let res = await this.$axios({
// 请求方式
methods: "get",
// 请求路径
url: "/stu/stu_list"
})
this.list = res.data.data
}
},
}
</script>
13.请求数据和删除数据完整代码:
<template>
<div>
<div class="">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.sid">
<td>{{item.sid}}</td>
<td>{{item.sname}}</td>
<td>{{item.sex}}</td>
<td>{{item.address}}</td>
<td>{{item.age}}</td>
<td>
<router-link to="/student/upd">修改</router-link>
<a href="#" @click="del(item.sid)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
// 生命周期 页面加载就要现实数据
export default {
data() {
return {
list: [],
}
},
// 创建后发异步请求数据
// axios 是基于promise开发的 async await 语法糖
created() {
this.getList()
},
methods: {
// 定义一个方法
async getList() {
let res = await this.$axios({
methods: "get",
url: "/stu/stu_list",
//parmas get传参
// data post传参
});
// 拿到list数据 把数据存到数组里面
this.list = res.data.data
// console.log(this.list);
},
// 删除数据
async del(id) {
let res = await this.$axios({
methods: "get",
url: `/stu/deltodb?sid=${id}`,
//parmas get传参
// data post传参
});
if (res.data.code == 200) {
alert('删除成功')
this.getList()
} else {
return alert('删除失败')
}
}
},
}
</script>
<style lang="less" scoped>
.container {
height: 500px;
overflow: auto;
}
</style>
14.配置编程式路由
1).在列表页面配置数据 前面是query传参
// 配置编程式路由
toUpd(sid) {
this.$router.push({
// 跳转到修改的页面
path: "/student/upd",
// 要把sid传过去
query: { sid }
})
},
2).修改列表方法中配置获取数据 后面也是query接收
// 发异步请求
async created() {
console.log(this.$router);
let res = await this.$axios({
method: "get",
url: "/stu/findOneBySid",
params: {
sid: this.$route.query.sid,
}
})
修改页面完整代码
<template>
<div>
<div class="container">
<h1>修改学生信息</h1>
<hr>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="aa" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="aa" placeholder="请输入姓名" v-model="obj.sname" />
</div>
</div>
<div class="form-group">
<label for class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" v-model="obj.sex"
value="m" /> 男
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" v-model="obj.sex"
value="f" /> 女
</label>
</div>
</div>
<div class="form-group">
<label for class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" id placeholder="请输入年龄" v-model="obj.age" />
</div>
</div>
<div class="form-group">
<label for class="col-sm-2 control-label">地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" id placeholder="请输入地址" v-model="obj.address" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-12" style="text-align:right;">
<button type="button" class="btn btn-warning">取消</button>
<!-- 因为submit 有一个默认的提交 -->
<button type="button" class="btn btn-primary" @click="toUpd">修改</button>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
export default {
filters: {
chuliSex: function(str) {
return str== "f" ? "女" : "男";
}
},
data() {
return {
obj: {}
}
},
// 发异步请求
async created() {
console.log(this.$router);
let res = await this.$axios({
method: "get",
url: "/stu/findOneBySid",
params: {
sid: this.$route.query.sid,
}
})
console.log(res.data.data);
// 返回一个对象
this.obj = res.data.data[0]
},
methods: {
async toUpd() {
const res = await this.$axios({
method: "post",
url: "/stu/updatetodb",
data: this.obj
})
console.log(res);
// 修改成功需要跳转到首页
if (res.data.code == 200) {
this.$router.push({
path:"/student/list"
})
alert("修改成功")
} else {
alert("修改失败")
}
}
},
}
</script>
<style lang="less" scoped>
</style>
15.配置路由守卫
1).首先在登录成功时拿到token值
2).在index.js路由配置
// 导航守卫 next要调用一次 不然页面不能相互跳转
// 方法2 定一个数组
// const pathArr = ["/student/list", "/tea/list", "/student/upd"]
// if(pathArr.indexOf(to.path) !== -1 ){ }
router.beforeEach(function (to, from, next) {
const token = localStorage.getItem("token");
if (to.path == "/login") {
if (token) {
next("/student/list");
} else {
next();
}
} else {
if (token) {
next();
} else {
next("/login");
}
}
});
16.最后可以把2个学生加老师页面整合为一个Layout页面