用户信息介绍页

用户基本信息

用户信息介绍页可以做的与账号页一样。

user/index.html

{% extends 'forum/base.html' %} {% block header_script %}
<link rel="stylesheet" href="/static/layui/css/layui.css" />
{#首页内容样式#}
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/layui/css/layui.css" />

<link rel="stylesheet" href="/static/css/account.css" />
<link rel="stylesheet" href="/static/css/article.css" />
<script src="/static/layui/layui.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/js/account.js"></script>
{% endblock %} {% block header %}
<a href="/" class="logo"> 正心全栈论坛 </a>

<!--登录注册栏-->
<div class="login">
  <a href="javascript:;" class="login_btn">登录</a> /
  <a href="javascript:;" class="register_btn">注册</a>
</div>
<!-- 用户登录后显示下面 -->
<div class="login" style="display: none">
  <img src="/static/images/person01.png" class="login-pic" alt="" />
  <a href="#">用户张三</a>
  <a href="#">退出</a>
</div>
{% endblock %} {% block main %}
<div class="account_left">
  <div class="user_avatar">
    <img src="/static/images/user_pic.png" alt="用户图片" />
  </div>
  <div class="user_name">用户李思</div>

  <!--个人信息操作列表-->
  <ul class="option_list">
    <li class="active">
      <a href="/user/info.html?user_id={{ user.id }}">基本资料</a>
    </li>
    <li>
      <a href="/user/article_list.html?user_id={{ user.id }}">文章列表</a>
    </li>
  </ul>
</div>

<div class="account_right">
  {% block right_container %}
  <h3>作者信息</h3>
  {% endblock %}
</div>

{% endblock %} {% block footer %}
<div class="footer-links">
  <a href="">关于我们</a>
  <span>|</span>
  <a href="">联系我们</a>
  <span>|</span>
  <a href="">招聘人才</a>
  <span>|</span>
  <a href="">友情链接</a>
</div>
<p class="copyright">CopyRight © 2024 正心全栈编程 All Rights Reserved</p>
<p class="copyright">电话：010-****888 湘 ICP 备*******8号</p>

{% endblock %} {% block footer_script %} {% endblock %}

user/info.html

{% extends 'user/index.html' %}

{% block right_container %}
    <h3>作者信息</h3>
    <form class="layui-form" action="" style="width: 500px;" lay-filter="re-info-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input" value="{{ user.nickname }}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">个性签名</label>
            <div class="layui-input-block">
                <textarea name="signature" placeholder="个性签名" class="layui-textarea">{{ user.signature }}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="男" title="男" {% if user.gender == '男' %} checked {% endif %}>
                <input type="radio" name="gender" value="女" title="女" {% if user.gender == '女' %} checked {% endif %}>
                <input type="radio" name="gender" value="保密" title="保密" {% if user.gender == '保密' %} checked {% endif %}>
            </div>
        </div>
    </form>

{% endblock %}

{% block footer_script %}
    <script>
        layui.use(function () {
            let $ = layui.$
            let form = layui.form
        })
    </script>
{% endblock %}

后端接口

@index_bp.get('/user/info.html')
def user_info_view():
    user_id = request.args.get('user_id', type=int)
    if not user_id:
        abort(404)
    user = UserORM.query.get(user_id)

    return render_template('user/info.html', user=user)

用户文章页

user/article_list.html

{% extends 'user/index.html' %}

{% block right_container %}
    <h3>文章列表页</h3>

    <table class="layui-hide" id="my_article_list-table" lay-filter="my_article_list-table"></table>


{% endblock %}

{% block footer_script %}
    <script>
        layui.use(function () {
            let table = layui.table;
            let user_id = {{ user.id }};
            // 创建渲染实例
            table.render({
                elem: '#my_article_list-table',
                url: `/api/v1/user_article_list?user_id=${user_id}`,
                page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                    //curr: 5, // 设定初始在第 5 页
                    groups: 1,
                    first: false,
                    last: false
                },
                cols: [[
                    {field: 'id', width: 80, title: 'ID'},
                    {field: 'title', title: '文章名', templet: (d) => `<a href='/article/${d.id}'>${d.title}<a/>`},
                ]]
            });
        });
    </script>
{% endblock %}

forum/views/index.py

@index_bp.get('/user/article_list.html')
def user_article_list_view():
    user_id = request.args.get('user_id', type=int)
    if not user_id:
        abort(404)
    user = UserORM.query.get(user_id)

    return render_template('user/article_list.html', user=user)

forum/api/index.py

@index_api.get("/user_article_list")
def user_article_list():
    page = request.args.get("page", type=int, default=1)
    limit = request.args.get("limit", type=int, default=10)
    user_id = request.args.get("user_id", type=int)
    if not user_id:
        abort(404)

    user = UserORM.query.get(user_id)
    paginate = db.paginate(
        user.article_list, page=page, per_page=limit, error_out=False
    )

    return {
        "code": 0,
        "msg": "获取个人文章成功",
        "count": paginate.total,
        "data": [r.as_json() for r in paginate.items],
    }

实际上还可以添加更多的页面