首页 > 其他分享> 文章详细

谷粒商场学院day05

2021-09-23 11:33:10 阅读：242 来源： 互联网

标签：data 商场 day05 teacher 添加谷粒讲师 id 页面

一、修改登录接口

1.将登录地址修改成本地 http://localhost:8001

在config下的dev.env.js下

2.实现模拟登录

进行登录调用2个方法，login登录操作方法和info登录之后获取用户的方法。

（1）login返回token值（2）info返回 roles name avatar

3.根据前端需要编写后端代码

创建一个新的controller

编写内容

   /**登录接口*/
    @PostMapping("login")
    public R login(){
        return R.ok().data("token", "admin");
    }

    /**获取登录用户信息*/
    @GetMapping("info")
    public R info(){
        return R.ok().data("roles", "admin").data("name", "admin").data("avatar", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0820%252F0142054dp00qy3hyz0019d200u0015dg00u0015d.png%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634440222&t=bfa361b71f6a6a988859a0c3dfda7a2c");
    }

4.重启前端 nmp run dev

出现跨域问题

1.出现跨域的原因

通过一个地址去访问另一个地址，这个过程中有3个地方有任意一处不一样则会出现跨域问题

访问协议	http	https
ip地址	192.168.1.1	172.11.11.1
端口号	9528	8001

以我们的前后端地址为例

前端：

后端：

前后端端口明显不一样！！！！

2.跨域的解决方式

1.在controller中加上@CrossOrigin注解进行解决

2.使用网关解决（后边讲到）

登录成功

如果图片不出来，打开控制台看到报错403，百度了一下好像该图片设置了防盗。去其他地方找图片即可，一般带了水印都是没有设置防盗的

二.前端框架开发过程

1.框架使用过程

1.添加路由

2.点击某个路由，显示对应的界面

3.在api文件夹下边创建一个js文件，定义接口参数，地址

4.在创建的vue页面引入js文件，调用方法实现

2.讲师列表前端实现

1.添加路由

在router下的js文件中constantRouterMap标题内添加一段代码

{
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table',
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/table/index'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加讲师',
        component: () => import('@/views/tree/index'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
  },

2.创建路由相对于的页面

在view文件夹下边新建edu文件夹在里边在创建teacher文件夹，在teacher文件夹里边创建一个list.vue跟save.vue文件

最后修改路由里边的路径

3.编写测试跳转内容分别在list.vue跟save.vue文件中编写测试内容

<template>
    <div class="app-app-container">
        讲师列表
    </div>
</template>

4.在api文件下创建一个teacher.js文件

import request from '@/utils/request'

export default{
    getTeacherList(current,limit,teacherQuery){
        //1 讲师列表（条件查询待分页）
        return request({
            // url: '/teacher/pageTeacherCondition/'+current+"/"+limit,  //第一种写法
            url: `/teacher/pageTeacherCondition/${current}/${limit}`,
            method: 'post',
            //teacherQuery条件对象，后端使用@RequestBody获取数据
            //data表示把对象转换成json进行传递到接口里边
            data: teacherQuery
        })    
    }
}

5.在讲师列表页面list.vue页面调用定义方法接口,得到返回数据

<template>
    <div class="app-app-container">
        讲师列表
    </div>
</template>
<script>
//引用teacher.js文件
import teacher from "@/api/teacher.js"

export default {
    //核心代码位置
    // data:{

    // },
    data(){     //定义变量跟初始值
        return{
            list:null,//查询之后接口返回集合
            page:1,  //当前页
            limit:10, //每页显示的数据
            total:0,//总记录数
            teacherQuery:{}   //条件封装对象

        }
    },
    created(){//在页面渲染之前执行，一般调用methods里边的方法
        //调用
        this.getList()
    },
    methods:{//创建具体方法，调用teacher.js定义的方法
        //讲师列表方法
        getList(){
            teacher.getTeacherList(this.page,this.limit,this.teacherQuery)
            .then(response=>{//请求成功
                //response请求回来的数据
                console.log(response)
            }) 
            .catch(error=>{//请求失败
                console.log(error)
            })
        }
    }


}
</script>

后端代码，可能与前边的不一样导致数据出不来。已该代码为准

 //4.条件查询带分页方法
    @ApiOperation("条件查询带分页方法")
    @PostMapping("pageTeacherCondition/{current}/{limit}")
    public R pageTeacherCondition(@PathVariable Long current,@PathVariable Long limit,
                                  @RequestBody(required = false) TeacherQuery teacherQuery){
        String name = teacherQuery.getName();
        Integer level = teacherQuery.getLevel();
        String begin = teacherQuery.getBegin();
        String end = teacherQuery.getEnd();

        Page<EduTeacher> pageList = new Page<>(current, limit);
        QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();
        //判断条件值是否为空，如果不为空，拼接条件
        //判断是否有传入教师名
        if (!StringUtils.isEmpty(name)){
            //构建条件
            wrapper.like("name",name);//参数1：数据库字段名； 参数2：模糊查询的值
        }
        //判断是否传入教师头衔
        if (level!=null){
            //构造条件
            wrapper.eq("level",level);
        }
        if (!StringUtils.isEmpty(begin)){
            //构造条件
            wrapper.ge("gmt_create",begin);//ge：大于等于
        }
        if (!StringUtils.isEmpty(begin)){
            //构造条件
            wrapper.le("gmt_modified",end);//le:小于等于
        }

        IPage<EduTeacher> teacherPageList = eduTeacherService.page(pageList,wrapper);
        List<EduTeacher> records = teacherPageList.getRecords();
        long total = teacherPageList.getTotal();
        Map<String,Object> data = new HashMap<>();
        data.put("tatol", total);
        data.put("rows", records);
        return R.ok().data(data);

    }

请求得到数据

6.把请求接口的数据在页面中进行展示，使用组件element-ui实现

在list.vue下的<template>标签及<div>标签内粘贴

        <!-- 表 格 -->
<el-table
    v-loading="listLoading"
    :data="list"
    element-loading-text="数据加载中" 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?'普通讲师' : scope.row.level===2?'高级讲师':'超级讲师' }}
    </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="'/edu/teacher/edit/'+scope.row.id">
    <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(scope.row.id)">删除</el-button>
    </template>
    </el-table-column>
    </el-table>

效果

7.分页组件

<!-- 分 页 -->
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper" @current-change="getList"
/>

8、顶部查询表单

注意：

element-ui的 date-picker组件默认绑定的时间值是默认世界标准时间，和中国时间差8小时设置 value-format="yyyy-MM-dd HH:mm:ss" 改变绑定的值

   <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
    <el-form-item>
    <el-input v-model="teacherQuery.name" 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-option :value="3" 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>

9、清空查询条件

        resetData() {//清空的方法
        //表单查询条件清空
        this.teacherQuery = {}
        //查询所有讲师数据 
        this.getList()
        }

3.讲师删除功能

1.在每条记录后边添加一个删除按钮

上边的代码已添加

2.在按钮上绑定事件

3.在绑定事件方法上传递需要删除的讲师id值

4.在api文件teacher.js文件中定义删除的接口地址

    deteleTeacherId(id){
        //2 删除讲师方法
        return request({
            url: `/teacher/${id}`,
            method: 'delete'
        })    
    }

5.定义methods方法添加删除讲师方法

使用MessageBox 弹框组件增加用户体验

  //删除讲师方法
        removeDataById(id){

        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
	    confirmButtonText: '确定',
	    cancelButtonText: '取消',
	    type: 'warning'
        })
        .then(() => {     //弹窗之后的执行方法
		return teacher.deteleTeacherId(id)})
        .then(() => {     //执行deteleTeacherId(id)方法成功之后
        //调用获取全部数据接口 刷新页面数据
        this.getList()      
        //提示信息
	    this.$message({     
	    type: 'success',
	    message: '删除成功!'})
	    })
        .catch((response) => { // 失 败
	    if (response === 'cancel') {
	    this.$message({
	    type: 'info',
	    message: '已取消删除'})
	    } else {
	    this.$message({
	    type: 'error',
	    message: '删除失败'})
	             }
	        })
      }

展示效果

4.讲师添加功能

1.定义api

src/api/edu/teacher.js

    save(eduTeacher) {
        return request({
            url: `teacher/addTeacher`, 
            method: 'post', 
            data: eduTeacher
        })
    }

2.初始化组件

src/views/edu/teacher/save.vue

html部分

<template>
    <div class="app-app-container">
        添加讲师
	<el-form label-width="120px">
	<el-form-item label="讲师名称">
	<el-input v-model="teacher.name"/>
	</el-form-item>
	<el-form-item label="讲师排序">
		<el-input-number v-model="teacher.sort" controls-position="right" min="0"/>
	</el-form-item>
	<el-form-item label="讲师头衔">
	<el-select v-model="teacher.level" clearable placeholder="请选择">
	<!--
	数据类型一定要和取出的json中的一致，否则没法回填
	因此，这里value使用动态绑定的值，保证其数据类型是number
    -->
	<el-option :value="1" label="普通讲师"/>
    <el-option :value="2" label="高级讲师"/>
    <el-option :value="3" label="超级讲师"/>
	</el-select>
    </el-form-item>
    <el-form-item label="讲师资历">
    <el-input v-model="teacher.career"/>
    </el-form-item>
    <el-form-item label="讲师简介">
    <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
    </el-form-item>
    <!-- 讲师头像：TODO -->
    <el-form-item>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
    </el-form-item>
    </el-form>


    </div>
</template>

js部分

<script>
export default {
    data(){
        return { 
        teacher: {
            name: '', 
            sort: 0,
            level: 1, 
            career: '',
            intro: '',
            avatar: ''
            },
        saveBtnDisabled: false // 保存按钮是否禁用,
        }

    },
    created(){

    },
    methods:{

    }
}
</script>

查看效果

3.在页面实现调用

 saveOrUpdate(){
            //添加讲师方法
            this.saveTeacher()
        },
        //添加讲师方法  
        saveTeacher(){
            teacherApi.addTeacher(this.teacher)
            .then(response=>{//添加成功
            //提示信息
            this.$message({     
	            type: 'success',
	            message: '添加成功!'
	        });
            //回到列表页面  路由跳转
            this.$router.push({path:'/teacher/table'})

            })
            
        }

5.讲师修改功能

1.在每条记录后边添加一个修改按钮

2.点击修改按钮进入表单页面进行数据回显

调用后端

该接口

3.通过路由跳转进入数据回显页面，在路由index.js页面添加路由

4.在表单页面实现数据回显

在teacher.js中定义根据id查询接口

    getTeacherInfo(id) {
        //根据id获取讲师信息
        return request({
            url: `teacher/getById/${id}`, 
            method: 'get'
        })
    }

5.在页面编写接口实现数据回显

6.调用根据id查询教师方法（较麻烦）

因为修改跟添加都是在同一个页面，需要区别是添加还是修改，只有修改的时候会调用数据回显接口

判断路径里边是否含有id值，有的话即是修改，没有就算添加

   console.log('created')
        //判断路由是否有id值
    if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        const id = this.$route.params.id
        //调用根据id获取讲师信息方法
        this.getInfo(id)

7.在teacher.js中定义修改接口

    updateTeacherInfo(teacher) {
        //根据id修改讲师信息
        return request({
            url: `teacher/updateById`, 
            method: 'post',
            data: teacher
        })
    }

8.在页面定义调用修改方法

        //添加讲师方法  
        saveTeacher(){
            teacherApi.addTeacher(this.teacher)
            .then(response=>{//添加成功
            //提示信息
            this.$message({     
	            type: 'success',
	            message: '添加成功!'
	        });
            //回到列表页面  路由跳转
            this.$router.push({path:'/teacher/table'})
            })
            
        }

        saveOrUpdate(){
            //判断是修改还是添加
            //根据teacher是否有id
            if(this.teacher.id){
                //修改讲师方法
                this.updateTeacher()
            }else{
            //添加讲师方法
            this.saveTeacher()
            }
        },
        //修改讲师的方法
        updateTeacher(){
            teacherApi.updateTeacherInfo(this.teacher)
            .then(response=>{
                //提示信息
                this.$message({     
	            type: 'success',
	            message: '修改成功!'
	        });
                //回到列表页面  路由跳转
                this.$router.push({path:'/teacher/table'})
            })
        },

5.路由切换问题及演示和解决

点击修改讲师的时候出现该页面，但是在此点击添加讲师列表也是该页面。正常应该是添加讲师的页面。

1.在save.vue中添加判断代码

并没有清空，无法达到我们想要的效果

2.为什么该代码没有实现我们的需求

多次路由跳转到同一个页面，页面中的created方法只会执行第一次，后边在进行跳转的时候不会在执行

3.使用vue监听

在save.vue中将created中的判断方法抽取出来

保存去页面查看效果

标签：data,商场,day05,teacher,添加,谷粒,讲师,id,页面
来源： https://blog.csdn.net/gugugubird/article/details/120344135

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

谷粒商场学院day05

一、修改登录接口

1.将登录地址修改成本地 http://localhost:8001

2.实现模拟登录

3.根据前端需要编写后端代码

4.重启前端 nmp run dev

1.出现跨域的原因

2.跨域的解决方式

二.前端框架开发过程

1.框架使用过程

1.添加路由

2.点击某个路由，显示对应的界面

3.在api文件夹下边创建一个js文件，定义接口参数，地址

4.在创建的vue页面引入js文件，调用方法实现

2.讲师列表前端实现

1.添加路由

2.创建路由相对于的页面

3.编写测试跳转内容分别在list.vue跟save.vue文件中编写测试内容

4.在api文件下创建一个teacher.js文件

5.在讲师列表页面list.vue页面调用定义方法接口,得到返回数据

6.把请求接口的数据在页面中进行展示，使用组件element-ui实现

7.分页组件

8、顶部查询表单

3.讲师删除功能

1.在每条记录后边添加一个删除按钮

2.在按钮上绑定事件

3.在绑定事件方法上传递需要删除的讲师id值

4.在api文件teacher.js文件中定义删除的接口地址

5.定义methods方法添加删除讲师方法

4.讲师添加功能

1.定义api

2.初始化组件

3.在页面实现调用

5.讲师修改功能

1.在每条记录后边添加一个修改按钮

2.点击修改按钮 进入表单页面 进行数据回显

3.通过路由跳转进入数据回显页面，在路由index.js页面添加路由

4.在表单页面实现数据回显

5.在页面编写接口实现数据回显

6.调用根据id查询教师方法（较麻烦）

7.在teacher.js中定义修改接口

8.在页面定义调用修改方法

5.路由切换问题及演示和解决

1.在save.vue中添加判断代码

2.为什么该代码没有实现我们的需求

3.使用vue监听

2.点击修改按钮进入表单页面进行数据回显