尚医通_第12章_用户平台首页数据

尚医通_第12章_用户平台首页数据

第一节、首页静态数据整合

一、首页静态数据整合

1、添加静态资源

将静态资源下面的css、images文件夹添加到assets目录

2、修改页面布局

2.1 提取头文件

创建layouts/myheader.vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.2 提取尾文件

创建layouts/myfooter.vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.3 修改默认布局页面

修改layouts/default.vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

*2.4 修改pages/index.vue页面*

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244

*启动项目*：npm run dev

访问项目：http://localhost:3000/

第二节、首页数据显示功能

一、首页数据显示

1、医院列表显示（接口）

1.1 service接口与实现

在管理平台 医院分页列表时已经提供，目前我们可以直接使用

1.2 添加controller方法

创建HospitalApiController

@Api(tags = "医院显示接口")
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospitalApiController {
    @Autowired
    private HospitalService hospitalService;
    @ApiOperation(value = "获取分页列表")
    @GetMapping("{page}/{limit}")
    public R index(
            @PathVariable Integer page,
            @PathVariable Integer limit,
            HospitalQueryVo hospitalQueryVo) {
    
        Page<Hospital> pageModel = hospitalService.selectHospPage(page, limit, hospitalQueryVo);
        return R.ok().data("pages",pageModel);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、医院搜索（接口）

2.1 service接口与实现

在HospitalService添加接口和实现

/**
     * 根据医院名称获取医院列表
     */
List<Hospital> findByHosname(String hosname);
        
@Override
public List<Hospital> findByHosname(String hosname) {
    return hospitalRepository.findHospitalByHosnameLike(hosname);
}
1
2
3
4
5
6
7
8
9

在HospitalRepository类添加方法

List findHospitalByHosnameLike(String hosname);
1

2.2 .HospitalApiController 添加方法

@ApiOperation(value = "根据医院名称获取医院列表")
@GetMapping("findByHosname/{hosname}")
public R findByHosname(
    @ApiParam(name = "hosname", value = "医院名称", required = true)
    @PathVariable String hosname) {
    List<Hospital> list = hospitalService.findByHosname(hosname);
    return R.ok().data("list",list);
}
1
2
3
4
5
6
7
8

3、首页数据前端

3.1 封装api

（1）创建api文件夹，创建/api/yygh/hospital.js

import request from '@/utils/request'
const api_name = `/api/hosp/hospital`
export default {
    getPageList(page, limit, searchObj) {
        return request({
            url: `${api_name}/${page}/${limit}`,
            method: 'get',
            params: searchObj
        })
    },
    getByHosname(hosname) {
        return request({
            url: `${api_name}/findByHosname/${hosname}`,
            method: 'get'
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

（2）创建/api/yygh/dict.js

import request from '@/utils/request'
const api_name = '/admin/cmn/dict'
export default {
    findByDictCode(dictCode) {
        return request({
            url: `${api_name}/findByDictCode/${dictCode}`,
            method: 'get'
        })
    },
    findByParentId(parentId) {
        return request({
            url: `${api_name}/findChildData/${parentId}`,
            method: 'get'
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.2 添加组件

（1）修改pages/index.vue组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259

3.3 修改utils里面request.js路径

修改utils/request.js文件

// 请求地址端口号修改为 gateway网关地址
const service = axios.create({
    baseURL: 'http://localhost:8222/',
    timeout: 15000 // 请求超时时间
})
    
...................    
    
// http response 拦截器
// 返回状态码改为 20000
service.interceptors.response.use(
    response => {
        if (response.data.code !== 20000) {
            
................... 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第三节、医院详情功能

一、医院详情

1、医院详情接口

需要获取医院信息（医院基本信息、预约信息）和科室信息

（1）添加service接口与实现

在HospitalService添加

/**
     * 医院预约挂号详情
     */
Map<String, Object> item(String hoscode);
//实现方法
@Override
public Map<String, Object> item(String hoscode) {
    Map<String, Object> result = new HashMap<>();
    //医院详情
    Hospital hospital = this.packHospital(this.getByHoscode(hoscode));
    result.put("hospital", hospital);
    //预约规则
    result.put("bookingRule", hospital.getBookingRule());
    //不需要重复返回
    hospital.setBookingRule(null);
    return result;
}    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

（2）HospitalApiController添加方法

@Autowired
private DepartmentService departmentService;
@ApiOperation(value = "获取科室列表")
@GetMapping("department/{hoscode}")
public R index(
    @ApiParam(name = "hoscode", value = "医院code", required = true)
    @PathVariable String hoscode) {
    List<DepartmentVo> list = departmentService.findDeptTree(hoscode);
    return R.ok().data("list",list);
}
@ApiOperation(value = "医院预约挂号详情")
@GetMapping("{hoscode}")
public R item(
    @ApiParam(name = "hoscode", value = "医院code", required = true)
    @PathVariable String hoscode) {
    Map<String, Object> map = hospitalService.item(hoscode);
    return R.ok().data(map);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、医院详情前端

2.1 封装api方法

在hospital.js定义方法

show(hoscode) {
    return request({
        url: `${api_name}/${hoscode}`,
        method: 'get'
    })
},
findDepartment(hoscode) {
    return request({
        url: `${api_name}/department/${hoscode}`,
        method: 'get'
    })
}
1
2
3
4
5
6
7
8
9
10
11
12

2.2 动态路由

（1）创建方式

如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名

（2）创建/pages/hospital/_hoscode.vue组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

2.3 医院详情

创建/pages/hospital/detail/_hoscode.vue组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

2.4 预约规则

创建/pages/hospital/notice/_hoscode.vue组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93