模拟登陆
-
系统默认使用的地址:https://easy-mock.com/mock/5950abc231f35a6636/vue-admin/user/login
-
我们需要将config中的dev.env.js中的地址改为后端的地址
-
进行登陆调用两个方法,login登陆操作方法,和info登陆之后获取用户信息的方法.所以创建两个方法实现登陆
login 返回 token的值
info 返回roles name avatar
- 在后端controller中创建对应的两个方法
package com.sli.eduservice.controller;
import com.sli.commonutils.R;
import org.springframework.web.bind.annotation.*;
/**
* @author 1_f_
* @create 2021-10-19 8:59
*/
@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin//解决跨域问题
public class EduLoginController {
//login
@PostMapping("login")
public R login(){
return R.ok().data("token","admin");
}
//info
@GetMapping("info")
public R info(){
return R.ok().data("roles","[admin]").data("name","admin").data("avatar","xxxxxxx.jpg");
}
}
-
修改api中的login.js修改本地接口的路径
-
测试发现问题
-
跨域问题
通过一个地址访问另外一个地址,如果三个地方有任何一个不一样,都不行
访问协议:http https
ip地址: 192.168.1.1 172.11.11.11
端口号: 9528 8001
我们存在端口号不一样的问题,所以有跨域问题
解决:在后端的controller接口上添加注解(此阶段)
@CrossOrigin
然后配置一个config的类
package com.sli.eduservice.config;
import org.springframework.boot.SpringBootConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* @author 1_f_
* @create 2021-10-19 10:32
*/
@SpringBootConfiguration
public class CorsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
- 测试发现跨域问题已经解决
添加路由,也就是菜单栏
对应的效果:
点击某个路由,显示路由对应的页面内容
- 在views中创建
list
<template>
<div class="app-container">
讲师表单
</div>
</template>
save
<template>
<div class="app-container">
讲师列表
</div>
</template>
在api文件下面创建edu/teacher.js
定义接口和参数地址
在创建的vue页面引入js文件,调用方法实现功能
根据上面的步骤
1. 添加路由
2. 创建路由对应的页面
3. 在api文件夹创建edu/teacher.js定义访问接口的地址
根据后端接口编写
import request from '@/utils/request'
export default{
//1. 讲师列表(条件查询带分页)
//current:当前页,limit每页记录数,teacherQuery条件对象
getTeacherListPage(current,limit,teacherQuery){
return request({
// url: 'eduservice/teacher/pageTeacherCondition/' + current + "/" + limit,
url: `eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
method: 'post',
//teacherQuety条件对象,后端使用了RequestBody来获取rest数据则前端使用如下
//data表示把对象转换json进行传递到后端接口中
data: teacherQuery
})
}
}
4. 在创建的vue页面调用定义的方法
需先引入js文件import teacher from '@/api/edu/teacher'
import teacher from '@/api/edu/teacher'
//使用了axios返回json数据
export default{
//写核心代码位置
data() {//定义变量和初始值
return {
list:null,//查询之后返回的集合
page:1,//当前页
limit:10,//每页的记录数
total:0,//总记录数
teacherQuery:{}//条件封装对象
}
},
created(){//在页面渲染之前执行
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)
})
}
}
}
5. 表格的渲染,在上面的div中加入
<!-- 表格 -->
<el-table
:data="list"
border
fit
highlight-current-row>
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="名称" width="80" />
<el-table-column label="头衔" width="80">
<template slot-scope="scope">
{{ scope.row.level===1?'高级讲师':'首席讲师' }}
</template>
</el-table-column>
<el-table-column prop="intro" label="资历" />
<el-table-column prop="gmtCreate" label="添加时间" width="160"/>
<el-table-column prop="sort" label="排序" width="60" />
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/teacher/edit/'+">
<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
</router-link>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById()">删除</el-button>
</template>
</el-table-column>
</el-table>
启动项目查看
6. 分页的实现和添加条件查询
1. 分页的实现
在页面最下面插入如下的代码
然后在mothods中加入
2. 条件查询
在页面的最上面添加
<!--条件部分,也就是根据条件筛选-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="" placeholder="讲师名"/>
</el-form-item>
<el-form-item>
<el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
<el-option :value="1" label="高级讲师"/>
<el-option :value="2" label="首席讲师"/>
</el-select>
</el-form-item>
<el-form-item label="添加时间">
<el-date-picker
v-model="teacherQuery.begin"
type="datetime"
placeholder="选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="teacherQuery.end"
type="datetime"
placeholder="选择截止时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>
3. 清空功能的实现
- 清空表单中输入条件的数据
- 查询所有的数据
在methods中增加方法
具体的逻辑就是:
- 在config中配置了dev.env.js的BASE_API地址能访问到后端接口的地址
- 在router中配置了菜单栏中显示的内容(点击需要跳转到对应的页面)
- 创建router中配置的菜单栏的对应的页面(注意router中的地址要修改)
- 在api创建要访问的后端的js文件(也就是和后端交互的主要文件,往后端传递json和接收后端的json)使用模块化让页面中可以调用里面的方法
- 在菜单栏跳转到的页面引入4中的js文件,然后编写核心的代码大概就是如下
exprot default{
//核心代码的位置
data(){
return{
}
},
//页面加载之前执行
created(){
},
//创建具体的方法,调用引入的js中定义的方法
methods:{
}
}
- 在菜单栏跳转到的页面中编写对应的前端代码展示数据库中的数据
1. 代码中已经有删除的按钮了(如果没有,需要自己编写)
2. 给按钮绑定事件
@click="removeDataById"
3. 在绑定事件的方法传递删除讲师的id(因为数据库中拿到了所有的数据,只是前端没有展示)
@click="removeDataById()" //意思是取出每个的主键id.scope是整个表,row是每一行
4. 在api/edu/teacher.js定义删除接口的地址
//删除讲师
deleteTeacherId(id){
return request({
url: `eduservice/teacher/${id}`,
method: 'delete'
})
},
5. 在页面的mothods中增加绑定的方法
removeDataById(id){//删除讲师的方法
this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //点击确定 then方法
//调用删除的方法
teacher.deleteTeacherId(id)
.then(response => {//删除成功
//提示信息
this.$message({
type: 'success',
message: '删除成功!'
});
//回到刷新列表页面
this.getList()
})
})
}
概述
进入表单,输入讲师信息
1. 在api接口中添加讲师
//添加讲师
addTeacher(teacher){
return request({
url: `eduservice/teacher/addTeacher`,
method: 'post',
data: teacher//用json传到后端中用于创建对象
})
},
2. 在save页面增加methods方法
saveTeacher(){
teacherApi.addTeacher(this.teacher)
.then(response =>{//添加成功
//提示信息
this.$message({
type: 'success',
message: '添加成功!'
});
//回到列表页面 路由跳转(重定向)
this.$router.push({path:'/teacher/table'})
})
}
1. 在每条记录后面添加修改按钮(代码中以及编写)
2. 点击修改按钮,进入表单界面,进行数据回显
根据讲师的id查询数据进行显示(因为查询了之后前端没有展示主键,但是还是可以调用主键)
3. 添加路由(菜单不需要显示,默认和添加用一个表就行)
通过路由跳转进入数据回显页面,在路由index页面添加路由
因为已经单向绑定了id
4. 在表单页面实现数据回显
- 在teacher.js定义根据id查询的调用后端的接口
//根据id查询讲师
getTeacherInfo(id){
return request({
url: `eduservice/teacher/getTeacher/${id}`,
method: 'get'
})
},
- 在页面调用接口进行数据的回显(也就是在methods中定义查询方法)
getInfo(id){
teacherApi.getTeacherInfo(id)
.then(response => {
this.teacher=response.data.teacher
})
},
- 调用根据id查询的方法
因为添加和修改使用save的页面,区别添加还是修改,只有修改的时候查询数据回显
所以判断路径中是否有讲师的id值,如果有id则为修改,如果没有就是添加
created(){
//不需要在页面渲染之前调用,是点了保存按钮之后调用
//判断路径是否有id值
if(this.$route.params && this.$route.params.id){
//从路径中获取id值
const id = this.$route.params.id
//调用根据id查询的方法
this.getInfo(id)
} else { //路径中没有id值做添加
this.teacher = {}
}
}
1. 在api的teacher.js定义修改的接口
2. 在页面调用修改的方法
1.
第一次点击修改,进行数据回显,然后点击添加讲师,进入表单页面,发现表单的页面还是显示修改回显数据,正常应该是表单的数据清空
解决
使用vue的监听解决
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
