后话
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
对于面试，说几句个人观点。
面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。
{
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 配置分页插件
@Configuration
@MapperScan(“com.achang.yygh.hosp.mapper”)
public class HospConfig {
//分页插件
@Bean
public PaginationInterceptor paginationInterceptor(){
return new PaginationInterceptor();
}
}
1.6 测试数据通信
启动项目
命令行执行：npm run dev
打开浏览器调试状态
测试失败，接口请求了，但是没有返回结果，这是为什么呢？其实这就是跨域的问题，
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.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”
/>
- 效果
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();
}
}
- 效果
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.1 定义api模块
在 src/api/hospitalSet.js添加方法
//批量删除
batchRemove(idList){
return request({
url: /admin/hosp/hospitalSet/deleteBatch,
method: ‘delete’,
data:idList
})
}
4.2定义页面模版
4.3页面js脚本
// 当表格复选框选项发生变化的时候触发
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.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.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()”>重置
前端资料汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
