系列文章目录
前言
一、使用步骤
1.引入后台接口有两种方式
（1）建api文件夹，在下面建js文件
import request from '@/utils/request'
export default {
//1 讲师列表（条件查询分页）
//current当前页 limit每页记录数 teacherQuery条件对象
getTeacherListPage(page, limit, teacherQuery) {
return request({
//url: '/eduservice/teacher/pageTeacherCondition/'+current+"/"+limit,
url: `/eduservice/teacher/${page}/${limit}`,
method: 'post',
//teacherQuery条件对象，后端使用RequestBody获取数据
//data表示把对象转换json进行传递到接口里面
data: teacherQuery
})
},
//2.删除讲师
deleteTeacherId(id) {
return request({
url: `/eduservice/teacher/${id}`,
method: 'delete'
})
},
//3.增加讲师
addTeacher(teacher) {
return request({
url: `/eduservice/teacher/addTeacher`,
method: 'post',
data: teacher
})
},
//4.根据id查询讲师
getTeacherInfo(id) {
return request({
url: `/eduservice/teacher/${id}`,
method: 'get'
})
},
//5.修改讲师
updateTeacherInfo(teacher) {
return request({
url: `/eduservice/teacher/updateTeacher`,
method: 'post',
data: teacher
})
}
}
在views文件下引入js文件
<script>
//引入调用teacher.js文件
import teacher from '@/api/edu/teacher'
export default {
//写核心代码位置
// data:{
// },
data() { //定义变量和初始值
return {
list:null,//查询之后接口返回集合
page:1,//当前页
limit:10,//每页记录数
total:0,//总记录数
teacherQuery:{} //条件封装对象
}
},
created() { //页面渲染之前执行，一般调用methods定义的方法
//调用
this.getList()
},
methods:{ //创建具体的方法，调用teacher.js定义的方法
//讲师列表的方法
getList(page=1) {
this.page = page
teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
.then(response =>{//请求成功
//response接口返回的数据
//console.log(response)
this.list = response.data.rows
this.total = response.data.total
console.log(this.list)
console.log(this.total)
})
},
resetData() {//清空的方法
//表单输入项数据清空
this.teacherQuery = {}
//查询所有讲师数据
this.getList()
},
//删除讲师的方法
removeDataById(id) {
this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //点击确定，执行then方法
//调用删除的方法
teacher.deleteTeacherId(id)
.then(response =>{//删除成功
//提示信息
this.$message({
type: 'success',
message: '删除成功!'
});
//回到列表页面
this.getList()
})
}) //点击取消，执行catch方法
}
}
}
</script>
（2）直接在view文件下引入后台接口
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/schedule/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'beanName': this.dataForm.beanName
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
}
}
1.api的url有两种方式
//第一种用`符号和${}
deleteTeacherId(id) {
return request({
url: `/eduservice/teacher/${id}`,
method: 'delete'
})
},
//第二种用字符串拼接
deleteTeacherId(id) {
return request({
url: '/eduservice/teacher/'+id,
method: 'delete'
})
},
views的vue文件里导入api的js，methods方法调用api的方法，
methods里的方法在created方法初始化，methods方法里的变量在data里
定义（data里的变量在调用时加this.）
<script>
import courseApi from "@/api/edu/course";
export default {
data() {
return {
saveBtnDisabled: false, // 保存按钮是否禁用
chapterVideoList: [],
courseId:''//课程id
}
},
created() {
//获取路由的id值，要在data里定义变量
if (this.$route.params && this.$route.params.id) {
//从路径获取id值
this.courseId = this.$route.params.id
this.getAllChapterVideo()
}
console.log("chapter created");
},
methods: {
//根据课程id查询章节和小节
getChapterVideo() {
chapterApi.getAllChapterVideo(this.courseId).then((response) => {
this.chapterVideoList = response.data.allChapterVideo
})
},
}
}
</script>
2.403错误码
（1）检查后端跨域注解 （2）检查前端api的路径
3.切换路由页面不变化 ，加监听
created() {
//页面渲染之前执行
this.init();
},
watch: {
//监听
$route(to, from) {
//路由变化方式，路由发生变化，方法就会执行
this.init();
}
},
methods: {
init() {
//判断路径有id值,做修改
if (this.$route.params && this.$route.params.id) {
//从路径获取id值
const id = this.$route.params.id;
//调用根据id查询的方法
this.getInfo(id);
} else {
//路径没有id值，做添加
//清空表单
this.teacher = {};
}
}
}
- //跳转页面 vue方式
this.$router.push({ path: "/login" });
//跳转页面 js方式
window.location.href = "/";
5.//把字符串转换成json对象(js对象形式)
把 var str ="{'name':'lucy','age':20}"
转为 {'name':'lucy','age':20}
方法是
JSON.parse(str);
6.后台重定向
@getMapping("login")
public String getWxCode(){
//请求微信地址
return "redirect:http://localhost:3000"
}
7.vue取到地址栏 路径中带参数名称的值
this.$route.query.名称
例如：this.$router.query.token
this.$refs.tree.filter(val) 获取到这个树的对象
2.其他
8.父组件调用子组件
父传子
9.vue中 关于$emit的用法
vue之父子组件间通信实例讲解props、ref、emit
vuex中的this.美元符store.commit…
10.vue 列表中显示年月日不显示时分秒
<el-table-column
header-align="center"
align="center"
label="检验日期">
<template slot-scope="scope">
{{(scope.row.inspectionDates || '').split(' ')[0]}}
</template>
</el-table-column>
11.Vue组件prop属性
Prop
13在Vue 项目中动态引入 .js 文件，替换mport引入
17.数组加验证：
（1）data()里加：
data() {
const urlArrayValidator = (rule, value, callback) => {
if (this.urlArray.length > 0) {
callback();
} else {
callback(new Error("请选择岗位负责人"));
}
};
（2）rule里加：
urlArray: [
{ required: true, validator: urlArrayValidator, trigger: "change" },
],
3.行政区划
vue仿京东省市区三级联动选择组件
vue实现省市区三级联动
Vue实现省市区三级联动插件
vue + elementUI实现省市县三级联动的方法示例
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
