bootstap_小项目

通过bootstrap画一个简单的后台管理页面，知识有限，页面粗糙，一种记录方式

页面效果展示

首页页面代码

	
		
		
		
		
		
		
		
		
		
		
		
	
	
		
		
		

			
			

				

					系统管理
					

						
用户管理
						
部门管理
						
角色管理
					
					存库管理
					

						
库存列表
						
进货管理
						
出货管理
						
调配管理
					
					客户管理
					

						
客户列表
						
客户回访
					
				
			
			
			

				
			
		
	
	

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

主体轮播图代码

	
		
		
		
		
		
		
		
		
		
		
		
		
		
	
	
		

			
			

				

				

				

			
			
			

				

					
					
标题1
				
				

					
					
标题1
				
				

					
					
标题1
				
			
			
			
				
				Previous
			
			
				
				Next
			
		
	

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

用户管理页面代码：

	
		
		
		
		
		
		
	
	
		

			
用户列表
			

				删除
			
			

				

					
全选
					
用户名
					
姓名
					
年龄
					
性别
					
住址
					
部门
					
角色
					
操作
				
				

					

						

						
{{ user.username }}
						
{{ user.name }}
						
{{ user.age }}
						
{{ user.gender }}
						
{{ user.address }}
						
{{ user.dept }}
						
{{ user.role }}
						

							
								编辑
							
							
								新增
							
						
					
				
			
			

				

					
总条数：{{totalCount}}
					
每页条数：
					

						上一页
					
					

						{{page}}
					
					

						下一页
					
				
			
		
	
	

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

用户编辑页面代码

	
		
		
		
		
		
		
		
		
		
		
		
	
	
		

			
用户编辑
			

				

					用户名
					

						
					
				
				

					姓名
					

						
					
				
				

					年龄
					

						
					
				
				

					性别
					

						
					
				
				

					住址
					

						
					
				
				

					部门
					

						
					
				
				

					角色
					

						
					
				
				

					保存
				
			
		
	
	

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

6_1.json

{
 "totalCount":100,
 "users":[
  {"id":1,"username":"daqiao","name":"大乔","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"经理"},
  {"id":2,"username":"xiaoqiao","name":"小乔","age":19,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"},
  {"id":3,"username":"sunshangxiang","name":"孙尚香","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"},
  {"id":4,"username":"xishi","name":"西施","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"},
  {"id":5,"username":"diaochan","name":"貂蝉","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"},
  {"id":6,"username":"yangguifei","name":"杨贵妃","age":20,"gender":"女","address":"山东临沂","dept":"人力资源部","role":"员工"}
 ]
}

1
2
3
4
5
6
7
8
9
10
11
12

6_2.json

{
 "totalCount":100,
 "users":[
  {"id":7,"username":"liubei","name":"刘备","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"经理"},
  {"id":8,"username":"zhangfei","name":"张飞","age":19,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"},
  {"id":9,"username":"guanyu","name":"关羽","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"},
  {"id":10,"username":"zhaoyun","name":"赵云","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"},
  {"id":11,"username":"zhugeliang","name":"诸葛亮","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"},
  {"id":12,"username":"pangtong","name":"庞统","age":20,"gender":"男","address":"山东临沂","dept":"销售部","role":"员工"}
 ]
}

1
2
3
4
5
6
7
8
9
10
11
12

部门管理页面代码

	
		
		
		
		
		
		
		
		
		
		
		
		
		
	
	
		

			
			

				

					
部门管理
					
部门列表
				
			
			

				

			
			

			
			
		
	
	

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

部门列表页面代码

	
		
		
		
		
		
		
		
		
		
		
		
	
	
			

				
部门列表
				

					删除
				
				

					

						
全选
						
部门编码
						
部门名称
						
所属公司
						
部门经理
						
上级部门
						
部门属性
						
通讯地址
						
激活状态
					
					

						

							

							
{{ dept.code }}
							
{{ dept.name }}
							
{{ dept.company }}
							
{{ dept.manager }}
							
{{ dept.subDept }}
							
{{ dept.status }}
							
{{ dept.address }}
							
{{ dept.use }}
							

								
									编辑
								
								
									新增
								
							
						
					
				
				

					

						
总条数：{{totalCount}}
						
每页条数：
						

							上一页
						
						

							{{page}}
						
						

							下一页
						
					
				
			
		
		
	
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

dept_data.json

{
 "totalCount":100,
 "depts":[
  {"id":"11111","code":"10000","name":"xxx有限公司","company":"xxx有限公司","manager":"刘备","subDept":null,"status":"职能部门","address":"山东临沂","use":"启用"},
  {"id":"11112","code":"100001","name":"销售部","company":"xxx有限公司","manager":"刘备","subDept":"11111","status":"职能部门","address":"山东临沂","use":"启用"},
  {"id":"11113","code":"100002","name":"人力资源部","company":"xxx有限公司","manager":"刘备","subDept":"11111","status":"职能部门","address":"山东临沂","use":"启用"}
 ]
}

1
2
3
4
5
6
7
8
9

部门编辑页面代码

	
		
		
		
		
		
		
		
		
		
		
		
	
	
			

				
部门列表
				

					删除
				
				

					

						
全选
						
部门编码
						
部门名称
						
所属公司
						
部门经理
						
上级部门
						
部门属性
						
通讯地址
						
激活状态
					
					

						

							

							
{{ dept.code }}
							
{{ dept.name }}
							
{{ dept.company }}
							
{{ dept.manager }}
							
{{ dept.subDept }}
							
{{ dept.status }}
							
{{ dept.address }}
							
{{ dept.use }}
							

								
									编辑
								
								
									新增
								
							
						
					
				
				

					

						
总条数：{{totalCount}}
						
每页条数：
						

							上一页
						
						

							{{page}}
						
						

							下一页
						
					
				
			
		
		
	
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