Web前端最新Day225,微信web开发者工具使用教程

后话

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试,说几句个人观点。

面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。

所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。

{

path: ‘/hospSet’,

component: Layout,

redirect: ‘/hospSet/list’,

name: ‘医院设置管理’,

meta: { title: ‘医院设置管理’, icon: ‘example’ },

children: [

{

path: ‘list’,

name: ‘医院设置列表’,

component: () => import(‘@/views/hospset/list.vue’),

meta: { title: ‘医院设置列表’, icon: ‘table’ }

},

{

path: ‘add’,

name: ‘医院设置添加’,

component: () => import(‘@/views/hospset/add.vue’),

meta: { title: ‘医院设置添加’, icon: ‘tree’ }

},

{

path: ‘edit/:id’,

name: ‘医院设置编辑’,

component: () => import(‘@/views/hospset/add.vue’),

meta: { title: ‘医院设置编辑’, icon: ‘tree’ },

hidden:true

}

]

},

1.2 定义api模块

创建文件 src/api/hospitalSet.js

import request from ‘@/utils/request’

//多条件分页查询

export default {

getHospSetList(page,limit,searchObj) {

return request({

url: /admin/hosp/hospitalSet/findPageCondition/${page}/${limit},

method: ‘post’,

data: searchObj //使用json传递

})

}

}

1.3 定义页面组件脚本

src/views/hosp/hospitalSet/list.vue

1.4 定义页面组件模板

<el-table

:data=“hospsetList”

stripe

style=“width: 100%”>

{{ scope.row.status === 1 ? ‘可用’ : ‘不可用’ }}

1.5 配置分页插件

image-20210319142808312

@Configuration

@MapperScan(“com.achang.yygh.hosp.mapper”)

public class HospConfig {

//分页插件

@Bean

public PaginationInterceptor paginationInterceptor(){

return new PaginationInterceptor();

}

}

1.6 测试数据通信

启动项目

命令行执行:npm run dev

打开浏览器调试状态

image-20210319152715067

测试失败,接口请求了,但是没有返回结果,这是为什么呢?其实这就是跨域的问题,


1.7 跨域处理

跨域:浏览器对于javascript的同源策略的限制 。

以下情况都属于跨域:

| 跨域原因说明 | 示例 |

| — | — |

| 域名不同 | www.jd.com 与 www.taobao.com |

| 域名相同,端口不同 | www.jd.com:8080 与 www.jd.com:8081 |

| 二级域名不同 | item.jd.com 与 miaosha.jd.com |

如果域名和端口都相同,但是请求路径不同,不属于跨域,如:

www.jd.com/item

www.jd.com/goods

http和https也属于跨域

而我们刚才是从localhost:3000去访问localhost:8201,这属于端口不同,跨域了。

如何解决呢?

Spring早就给我们提供了解决方案,我们只需要在对应controller上添加一个标签就可以了@CrossOrigin

我们在HospitalSetController类上添加跨域标签@CrossOrigin,再进行测试,则测试成功!

使用网关统一转发也可以解决


2、分页查询


2.1 定义页面组件脚本

src/views/hosp/hospitalSet/list.vue

methods: {

//医院设置列表

getList(page=1) {

this.page=page

hospset.getHospSetList(this.page, this.limit, this.seachObj).then(resp => {

//返回数据集合

this.hospsetList = resp.data.records

//总记录数

this.total = resp.data.total

}).catch(error => {

console.log(error)

})

}

}

2.2 定义页面组件模板

在table组件下面添加分页组件

<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”

/>

  • 效果

image-20210319154554470

2.3 表单查询

<el-button type=“primary” icon=“el-icon-search” @click=“getList()”>查询

<el-button type=“danger” icon=“el-icon-delete” @click=“getClear()”>清空

  • js

methods: {

//医院设置列表

getList(page=1) {

this.page=page

hospset.getHospSetList(this.page, this.limit, this.seachObj).then(resp => {

//返回数据集合

this.hospsetList = resp.data.records

//总记录数

this.total = resp.data.total

}).catch(error => {

console.log(error)

})

},

//清空表单查询栏

getClear(){

this.seachObj={};

this.getList();

}

}

  • 效果

image-20210319155210419


3、删除


3.1 定义api模块

在 src/api/hospitalSet.js添加方法

//根据id删除数据

removeDataById(id) {

return request({

url: /admin/hosp/hospitalSet/deleteHospitalById/${id},

method: ‘delete’

})

}

3.2 定义页面组件模板

在table组件中添加删除列

<el-button type=“danger” size=“mini”

icon=“el-icon-delete” @click=“deleteById(scope.row.id)”>

3.3 定义页面组件脚本

//根据id删除医院设置

deleteById(id){

this.$confirm(‘此操作将永久删除该医院设置信息, 是否继续?’, ‘提示’, {

confirmButtonText: ‘确定’,

cancelButtonText: ‘取消’,

type: ‘warning’

}).then(() => {

//删除医院设置信息

hospset.removeDataById(id).then(resp=>{

this.$message({

type: ‘success’,

message: ‘删除成功!’

});

//刷新页面

this.getList();

})

}).catch(() => {

this.$message({

type: ‘info’,

message: ‘已取消删除’

});

});

}

}


4、批量删除


4.1 定义api模块

在 src/api/hospitalSet.js添加方法

//批量删除

batchRemove(idList){

return request({

url: /admin/hosp/hospitalSet/deleteBatch,

method: ‘delete’,

data:idList

})

}

4.2定义页面模版

image-20210319165529031

4.3页面js脚本

image-20210319165612601

// 当表格复选框选项发生变化的时候触发

handleSelectionChange(selection) {

this.multipleSelection = selection

},

//批量删除

batchDelete() {

this.$confirm(‘此操作将永久【批量删除】该医院设置信息, 是否继续?’, ‘提示’, {

confirmButtonText: ‘确定’,

cancelButtonText: ‘取消’,

type: ‘warning’

}).then(() => {

//从multipleSelection中获取每个选中的id值

var idList = [];

for (var i = 0; i <this.multipleSelection.length; i++) {

var obj = this.multipleSelection[i];

var id = obj.id;

//封装带idList中

idList.push(id);

}

//删除医院设置信息

hospset.batchRemove(idList).then(resp => {

this.$message({

type: ‘success’,

message: ‘删除成功!’

});

//刷新页面

this.getList();

})

}).catch(() => {

this.$message({

type: ‘info’,

message: ‘已取消删除’

});

});

}


5、锁定与取消锁定


5.1 定义api模块

在 src/api/hospitalSet.js添加方法

//医院设置锁定和解锁

lockHospitalSet(id,status){

return request({

url: /admin/hosp/hospitalSet/lockHospitalSet/${id}/${status},

method: ‘put’

})

}

5.2 定义页面组件模板

<el-button type=“danger” size=“mini”

icon=“el-icon-delete” @click=“deleteById(scope.row.id)”>

<el-button v-if=“scope.row.status==1” type=“primary” size=“mini”

icon=“el-icon-delete” @click=“lockHostSet(scope.row.id,0)”>锁定

<el-button v-if=“scope.row.status==0” type=“primary” size=“mini”

icon=“el-icon-delete” @click=“lockHostSet(scope.row.id,1)”>解锁

5.3 定义页面组件脚本

医院设置锁定和解锁

lockHostSet(id,status){

hospset.lockHospitalSet(id,status).then(resp=>{

if (status===1){

this.$message({

type: ‘success’,

message: ‘解锁成功!’

});

}

if (status===0){

this.$message({

type: ‘success’,

message: ‘锁定成功!’

});

}

//刷新列表

this.getList();

})

}


6、添加医院设置


6.1 定义api模块

//添加医院设置信息

addHospSet(hospitalSet){

return request({

url: /admin/hosp/hospitalSet/addHospitalSet,

method: ‘post’,

data:hospitalSet

})

},

6.2 定义页面组件脚本

src/views/hosp/hospitalSet/form.vue,完善data定义

6.3 定义页面组件模板

src/views/hosp/hospitalSet/form.vue

<el-button type=“primary” @click=“addHospSet()”>创建

<el-button @click=“resetForm()”>重置

前端资料汇总

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。

首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。

更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

  • 22
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值