DAY 16 个人中心页面展示和个人信息设置保存

个人中心展示

用户的个人中心是一个新的模块，所以我们在modules文件夹新建一个user 的python文件夹，完成蓝图的

搭建，在app中完成注册，这里具体的过程就不说了，前面有

 

 

 

 

 

 完成之后。我们先把页面渲染出去

在views中建立视图来完成

 

个人中心只有用户登录后才能进入，所以我们第一步还是先判断用户是否登录，如果没有登录就重定向到主页面。只有当用户登录时才能够

访问页面，并进行操作

获取到的用户数据我们也需要传给前端进行数据展示，构造上下文传给前端就行

对前端进行简单的分析和修改：

当用户在新闻首页或者新闻详情页点击昵称时，我们需要让用户进入到个人中心，所以我们需要改一下跳转的URL，将个人中心的URL设置跳转就行

 

 这样就完成了首页和个人中心的交互，我们也需要当用户点击个人中心的新闻图标时跳转到新闻首页，方法一样：

 

 关于个人中心前端页面，还使用了大页面嵌入不同的小页面的展示,代码

 

这个部分是需要我们进行修改的，具体修改后续发生时再说

关于个人中心页面前端的相关代码大概就这些，需要根据用户信息渲染的内容对应修改就行

 

个人信息

我们新建一个视图来完成数据的接收和页面的展示

 

 

 这个视图我们需要接收两种请求，get请求拿到页面，post拿到用户填写后的数据，从from表单里获取，并由js的ajax中将数据变成json格式

所以我们还是接收的json数据

注释：

 

 

 个人中心所有的操作都是在用户登录后才能进行，所以必须校验用户登录状态，和不同请求下的分开处理

第一步

# 1. 校验用户登录状态
    user = g.user
    if not user:
        return redirect(url_for("index.index"))　 

当没有查找到用户信息时重定向到主页面

第二步

#     2. 根据不同的请求来进行不同的操作
#      2.1 GET 请求
    if request.method == "GET":
#        2.1.1 构造上下文
        context = {
            "user" : user
        }
#        2.1.2 页面渲染
        return render_template("news/user_base_info.html",**context)

GET 请求：渲染页面并且将用户信息构造上下文传给前端进行使用jinja2模板来进行动态渲染　　

当我们把页面渲染了之后就需要对主页面前端代码进行修改，把地址给到主页面来进行展示，也就是我之前提到过的代码

 

 

 用模板引擎 的写法把对应的视图给到href 标签，这样当我们点击时就会进行页面展示，不然会找不到页面

个人资料的页面展示会有一点小问题，当用户没有设置个性签名时，会显示NONE，这样不好看，我们可以设置一下

 

 

 当有值时显示他保存的内容，没有时显示空白

POST请求

#      2.2 POST 请求
    if request.method == "POST":
#        2.2.1  接收参数（signature，nick_name，gender）注意默认值
        signature = request.json.get("signature","")
        nick_name = request.json.get("nick_name")
        gender = request.json.get("gender","MAN")
#        2.2.2  校验参数
#          a 校验参数是否齐全
        if not all([nick_name,gender]):
            return jsonify(errno=RET.PARAMERR, errmsg="参数缺失")
#          b 校验gender是否合法
        if gender not in ["MAN","WOMAN"] :
            return jsonify(errno=RET.PARAMERR,errmsg="非法参数")
#        2.2.3 修改user的相关信息
        user.gender = gender
        user.signature = signature
        user.nick_name = nick_name
        
        try:
            db.session.commit()
        except Exception as e :
                current_app.logger.error(e)
                db.session.rollback()
                return jsonify(errno=RET.DBERR,errmsg="保存失败")
　　　　　

　　　　　　session["nick_name"] = nick_name

# 2.2.4 返回json return jsonify(errno=RET.OK,errmsg="成功")

 

将ajax传递的json格式的数据进行接收，并设定了默认值，为NONE 是数据库保存不了的，或者修改不了，，接收

完成后判断必须接收的参数以及部分参数是否合法，校验完成后就需要对u查询到的user的相关信息进行修改

不要忘记我们之前在session里存人了用户的昵称，完成修改后我们也需要进行修改

最后返回json让回调函数执行进行

js 代码：

function getCookie(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r ? r[1] : undefined;
}

$(function () {

    $(".base_info").submit(function (e) {
        e.preventDefault()

        var signature = $("#signature").val()
        var nick_name = $("#nick_name").val()
        var gender = $("input[name='gender']:checked").val()

        if (!nick_name) {
            alert('请输入昵称')
            return
        }
        if (!gender) {
            alert('请选择性别')
        }

        // TODO 修改用户信息接口
        var params = {
            "signature": signature,
            "nick_name": nick_name,
            "gender": gender
        }

        $.ajax({
            url: "/user/base_info",
            type: "post",
            contentType: "application/json",
            headers: {
                "X-CSRFToken": getCookie("csrf_token")
            },
            data: JSON.stringify(params),
            success: function (resp) {
                if (resp.errno == "0") {
                    // 更新父窗口内容
                    $('.user_center_name', parent.document).html(params['nick_name'])
                    $('#nick_name', parent.document).html(params['nick_name'])
                    $('.input_sub').blur()
                }else {
                    alert(resp.errmsg)
                }
            }　

 

当我们返回值时，ajax的回调函数会执行对类是“user_center_name”和id 是 “nick_name”的内容进行替换，也就是将页面上所以展示

用户ID 的地方进行替换，当我们更改昵称提交后，所有展示昵称的地方变成我们修改的内容，这是动态的替换，我们还需要刷新一下看是否会变回去

如果变回去了或者没有变化的话我们就需要对代码进行修改，添加回调函数的类或者添加id，并且将内容用模板引擎 进行动态渲染