23智科+23数科12.29实验课作业

第一题分为三步，全部在index.html中进行

1.首先在index.html代码中 删除第88行：z-index：999；不删除这一行会导致登录框变灰色。
2.补全 <ul class="navbar-nav ml-auto">处内容，大约在index.html的第199行。代码在课本的193页。也可参照下面的代码，与课本相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="http://127.0.0.1:5000/">首页</a>
                </li>

                <li class="nav-item" id="user">
                    {% if request.cookies.get('name') %}
                    <!--处于登录状态-->
                    <!--用户名、退出登录-->
                    <a id='u_name' class="nav-link" href="/user/{{ request.cookies.get('name') }}">{{
                        request.cookies.get('name') }}</a>
                    {% else %}
                    <!--没有处于登录装填下，才显示登录按钮-->
                    <a class="nav-link" data-toggle="modal" data-target="#login" href="">登录</a>
                    {% endif %}
                </li>

                {% if request.cookies.get('name') %}
                <li class="nav-item">
                    <a class="nav-link" id="logout" href="">退出登录</a>
                </li>
                {% endif %}
            </ul>

3.登录框和注册框的实现。代码位置：注释 <!--注册登录--><!-- 暂不实现 -->处，位置在footer标签的上面上
补全内容：

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
<div class="row info-line">
        <div class="col-lg-8 col-md-10 mx-auto">
            <!-- 注册窗口 -->
            <div id="register" class="modal fade login_form" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body m-header">
                            <button class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-title">
                            <h1 class="text-center">注册</h1>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" id="registeform" action="/register" method="post">
                                <div class="form-group">
                                    <label for="" class="form-info">用户名</label>
                                    <input class="form-control" name="username" type="text" placeholder="6-15位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">密码</label>
                                    <input class="form-control" name="password" type="password" placeholder="至少6位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">再次输入密码</label>
                                    <input class="form-control" name="confirmPassword" type="password"
                                           placeholder="至少6位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">邮箱</label>
                                    <input class="form-control" name="email" type="email" placeholder="例如:123@123.com">
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" id='registe-btn'>提交</button>
                                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                </div>
                                <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login"
                                   class="switch-info">已有账号？点我登录</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 登录窗口 -->
            <div id="login" class="modal fade login_form">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body m-header">
                            <button class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-title">
                            <h1 class="text-center">登录</h1>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" id="loginform" action="/login" method="post">
                                <div class="form-group">
                                    <label for="" class="form-info">用户名</label>
                                    <input class="form-control" name="username" type="text" placeholder="">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">密码</label>
                                    <input class="form-control" name="password" type="password" placeholder="">
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" id='login-btn'>登录</button>
                                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                </div>
                                <a href="" data-toggle="modal" data-dismiss="modal"
                                   data-target="#register" class="switch-info">还没有账号？点我注册</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

作业2：新建user.py放在根目录,内容可直接参照如下代码,并在app.py中注册相关蓝图。

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
from flask import Blueprint, request, Response, jsonify, render_template, redirect, make_response
from models import User, House
from settings import db
import json

user_page = Blueprint('user_page', __name__)


@user_page.route('/register', methods=["POST"])
def register():
    # 获取用户的注册信息，包括用户名、密码、邮箱
    name = request.form['username']
    password = request.form['password']
    email = request.form['email']
    # 查询数据库中
    result = User.query.filter(User.name == name).all()
    # 判断用户是否已经注册，如果没有注册在返回的结果中设置Cookie
    if len(result) == 0:
        user = User(name=name, password=password, email=email)
        db.session.add(user)
        db.session.commit()
        json_str = json.dumps({'valid': '1', 'msg': user.name})
        res = Response(json_str)  # 实例化的过程中需要给他传入响应内容
        res.set_cookie('name', user.name, 3600 * 2)
        return res
    # 用户名已经被注册过
    else:
        return jsonify({'valid': '0', 'msg': '用户已注册！'})


@user_page.route('/user/<name>')
def user(name):
    # 查询数据库中用户名为name的User类对象
    user = User.query.filter(User.name == name).first()
    # 判断用户是否存在
    if user:   # 该用户存在
        collect_id_str = user.collect_id    # 获取当前用户收藏的房源ID
        if collect_id_str:                  # 若不为空
            collect_id_list = collect_id_str.split(',')
            collect_house_list = []
            # 根据房源ID获取对应的房源对象
            for hid in collect_id_list:
                house = House.query.get(int(hid))
                # 将房源对象添加到列表中
                collect_house_list.append(house)
        else:                     # 若为空
            collect_house_list = []

        seen_id_str = user.seen_id       # 获取当前用户的浏览记录
        if seen_id_str:
            seen_id_list = seen_id_str.split(',')
            seen_house_list = []
            # 根据房源ID获取对应的房源对象
            for hid in seen_id_list:
                house = House.query.get(int(hid))
                seen_house_list.append(house)
        else:
            seen_house_list = []
        return render_template('user_page.html', user=user,
                               collect_house_list=collect_house_list,
                               seen_house_list=seen_house_list)
    else:
        # 重定向到首页
        return redirect('/')


@user_page.route('/login', methods=['POST'])
def login():
    # 首先需要获取用户提交的信息用户的名字和密码
    name = request.form['username']
    password = request.form['password']
    # 根据用户名进行校验  
    user = User.query.filter(User.name == name).first()
    # 用户名存在的时候
    if user:
        # 判断用户输入的密码是否正确
        if user.password == password:
            # 将响应信息变化成JSON字符串
            result = {'valid': '1', 'msg': user.name}
            result_json = json.dumps(result)
            # 构建返回数据
            res = Response(result_json)
            # 设置Cookie的过期时间
            res.set_cookie('name', user.name, 3600 * 2)
            return res
        else:
            return jsonify({'valid': '0', 'msg': '密码不正确！'})
    # 用户不存在的时候
    else:
        return jsonify({'valid': '0', 'msg': '用户名不正确！'})


@user_page.route('/logout')
def logout():
    # 在Cookie中获取用户信息
    name = request.cookies.get('name')
    # 用户处于登录状态下
    if name:
        result = {'valid': '1', 'msg': '退出登录成功！'}
        json_str = json.dumps(result)
        res = Response(json_str)
        # 删除用户的Cookie
        res.delete_cookie('name')
        return res
    # 用户处于未登录状态下
    else:
        return jsonify({'valid': '0', 'msg': '未登录！'})


@user_page.route('/modify/userinfo/<option>', methods=['POST'])
def modify_info(option):
    if option == 'name':
        y_name = request.form['y_name']  # 获取旧的用户名
        name = request.form['name']  # 获取新的用户名
        # 查询用户是否存在
        user = User.query.filter(User.name == y_name).first()
        # 用户存在
        if user:
            # 更新昵称
            user.name = name
            db.session.commit()
            result = {'ok': '1'}
            json_str = json.dumps(result)
            # 创建响应对象
            res = Response(json_str)
            res.set_cookie('name', user.name, 3600 * 2)
            return res
        # 用户不存在
        else:
            return jsonify({'ok': '0'})
    elif option == 'addr':
        # 获取用户名
        y_name = request.form['y_name']
        # 获取新的住址
        addr = request.form['addr']
        # 查询用户是否存在
        user = User.query.filter(User.name == y_name).first()
        # 用户存在
        if user:
            # 更新住址
            user.addr = addr
            db.session.commit()
            # 返回JSON字符串
            return jsonify({'ok': '1'})
        # 用户不存在
        else:
            return jsonify({'ok': '0'})
    elif option == 'password':
        # 获取用户名
        y_name = request.form['y_name']
        # 获取新的密码
        password = request.form['password']
        # 查询用户是否存在
        user = User.query.filter(User.name == y_name).first()
        # 用户存在
        if user:
            # 更新密码
            user.password = password
            db.session.commit()
            return jsonify({'ok': '1'})
        # 用户不存在
        else:
            return jsonify({'ok': '0'})
    elif option == 'email':
        # 获取用户名
        y_name = request.form['y_name']
        # 获取新的邮箱
        email = request.form['email']
        # 查询用户是否存在
        user = User.query.filter(User.name == y_name).first()
        # 用户存在
        if user:
            # 更新邮箱
            user.email = email
            db.session.commit()
            return jsonify({'ok': '1'})
        # 用户不存在
        else:
            return jsonify({'ok': '0'})
    return 'ok'


@user_page.route('/add/collection/<int:hid>')
def add_collection_id(hid):
    name = request.cookies.get('name')  # 从Cookie中获取用户名
    if name:
        user = User.query.filter(User.name == name).first()  # 获取user对象
        collect_id_str = user.collect_id  # 通过user对象获取用户收藏房源数据
        # 判断当前用户是否有收藏房源数据
        if collect_id_str:
            collect_id_list = collect_id_str.split(',')
            set_id = set([int(i) for i in collect_id_list])
            if hid in set_id:
                return jsonify({'valid': '1', 'msg': '已经收藏过了!'})
            else:
                new_collect_id_str = collect_id_str + ',' + str(hid)
                user.collect_id = new_collect_id_str
                db.session.commit()
                return jsonify({'valid': '1', 'msg': '收藏完成!'})
        else:
            user.collect_id = str(hid)
            db.session.commit()
            return jsonify({'valid': '1', 'msg': '收藏完成!'})
    else:
        return jsonify({'valid': '0', 'msg': '需要登录后才能使用收藏功能'})


@user_page.route('/collect_off', methods=['POST'])
def collect_off():
    name = request.form['user_name']  # 获取用户名
    hid = request.form['house_id']  # 获取房源ID
    user = User.query.filter(User.name == name).first()  # 获取用户对象
    collect_id_str = user.collect_id  # 获取用户的收藏房源列表
    collect_id_list = collect_id_str.split(',')
    if hid in collect_id_list:  # 判断要删除的房源ID是否在收藏房源列表中
        collect_id_list.remove(hid)
        new_collect_id_str = ','.join(collect_id_list)  # 重新拼接收藏房源ID
        user.collect_id = new_collect_id_str
        db.session.commit()  # 更新数据库
        result = {'valid': '1', 'msg': '删除成功！'}
        return jsonify(result)
    else:
        result = {'valid': '0', 'msg': '删除失败！'}
        return jsonify(result)


@user_page.route('/del_record', methods=['POST'])
def del_record():
    # 获取前端传递过来的用户名
    name = request.form['user_name']
    # 获取用户对象
    user = User.query.filter(User.name == name).first()
    # 获取用户对象的浏览记录
    seen_id_str = user.seen_id
    # 浏览记录存在
    if seen_id_str:
        user.seen_id = ''
        db.session.commit()
        return jsonify({'valid':'1', 'msg':'删除成功!'})
    # 浏览记录不存在
    else:
        return jsonify({'valid': '0', 'msg': '暂无信息可以删除!'})

作业3：下载学习通，资料user_page.html压缩包,解压后放在templates文件夹下，补全第360行代码注释处，代码在课本196页下半，也可直接参照如下代码

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
<div class="user-info">  
                    <input value="{{ user.name }}" id="n-data" style="display: none">
                    <div class="row">
                        <div class="col-lg-8 c-1">
                            <span>昵称：</span>
                            <span class="nkname">{{ user.name }}</span>
                        </div>
                        <div class="col-lg-4">
                            <button class="btn-info c-2" id="btn-name"><i class="fa fa-pencil-square-o"
                                                                          aria-hidden="true"> 编辑</i>
                            </button>
                        </div>
                    </div>

                    <input value="{{ user.addr }}" id="a-data" style="display: none">
                    <div class="row">
                        <div class="col-lg-8 c-1">
                            <span>住址：</span>
                            <span class="nkaddr">{{ user.addr }}</span>
                        </div>
                        <div class="col-lg-4">
                            <button class="btn-info c-2" id="btn-addr"><i class="fa fa-pencil-square-o"
                                                                          aria-hidden="true"> 编辑</i>
                            </button>
                        </div>
                    </div>

                    <input value="{{ user.password }}" id="p-data" style="display: none">
                    <div class="row">
                        <div class="col-lg-8 c-1">
                            <span>密码：</span>
                            <span class="nkpd">{{ user.password }}</span>
                        </div>
                        <div class="col-lg-4">
                            <button class="btn-info c-2" id="btn-pd"><i class="fa fa-pencil-square-o"
                                                                        aria-hidden="true"> 编辑</i>
                            </button>
                        </div>
                    </div>

                    <input value="{{ user.email }}" id="e-data" style="display: none">
                    <div class="row">
                        <div class="col-lg-8 c-1">
                            <span>邮箱：</span>
                            <span class="nkemail">{{ user.email }}</span>
                        </div>
                        <div class="col-lg-4">
                            <button class="btn-info c-2" id="btn-email"><i class="fa fa-pencil-square-o"
                                                                           aria-hidden="true"> 编辑</i>
                            </button>
                        </div>
                    </div>
                </div>