首页 > 其他分享 >13- 项目梳理-用户中心页面--users

13- 项目梳理-用户中心页面--users

时间:2023-02-14 18:26:23浏览次数:65  
标签:username 13 users -- request 用户 mobile userinfo

1. 创建视图函数

# 需要处于登陆的视图,多继承:LoginRequiredMixin,View
class UserinfoView(LoginRequiredMixin, View):
    def get(self, request):
        # 登陆-->进入用户中心页面;不登陆-->进入登陆页面
        data = {"username": request.user.username, "mobile": request.user.mobile}
        return render(request, "users/userinfo.html", context=data)

2. 创建路由

    # 用户中心
    re_path(r'userinfo/$', UserinfoView.as_view(), name="userinfo"),

3. 创建userinfo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>喵喵商城-用户中心</title>
    <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
    <script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
</head>
<body>
<div id="app">
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到喵喵商城</div>
            <div class="fr">
                <div class="login_btn fl">
                    欢迎您:<em>{[ username ]}</em>
                    <span>|</span>
                    <a href="{{ url('users:logout') }}">退出</a>
                </div>
                <div class="user_link fl">
                    <span>|</span>
                    <a href="{{ url('users:userinfo') }}">用户中心</a>
                    <span>|</span>
                    <a href="">我的购物车</a>
                    <span>|</span>
                    <a href="">我的订单</a>
                </div>
            </div>
        </div>
    </div>
    <div class="search_bar clearfix">
        <a href="{{ url('shouye:index') }}" class="logo fl"><img src="{{ static('images/logo.png') }}"></a>
        <div class="search_wrap fl">
            <form method="get" action="/search/" class="search_con">
                <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                <input type="submit" class="input_btn fr" name="" value="搜索">
            </form>
            <ul class="search_suggest fl">
                <li><a href="#">满199减100</a></li>
                <li><a href="#">家装建材</a></li>
                <li><a href="#">潮流家电</a></li>
                <li><a href="#">华为新品</a></li>
            </ul>
        </div>
    </div>
    <div class="main_con clearfix">
        <div class="left_menu_con clearfix">
            <h3>用户中心</h3>
            <ul>
                <li><a href="{{ url('users:userinfo') }}" class="active">· 个人信息</a></li>
                <li><a href="">· 收货地址</a></li>
                <li><a href="">· 全部订单</a></li>
                <li><a href="">· 修改密码</a></li>
            </ul>
        </div>
        <div class="right_content clearfix" v-cloak>
            <div class="info_con clearfix">
                <h3 class="common_title2">基本信息</h3>
                <ul class="user_info_list">
                    <li><span>用户名:</span>{[ username ]}</li>
                    <li><span>联系方式:</span>{[ mobile ]}</li>
                </ul>
            </div>

        </div>
    </div>
    <div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2018 北京*******有限公司 All Rights Reserved</p>
        <p>电话:010-******* 京ICP备********号</p>
    </div>
</div>

</body>
<script type="text/javascript">
    let username = "{{ username }}";
    let mobile = "{{ mobile }}";
</script>
<script type="text/javascript" src="{{ static('js/userinfo.js') }}"></script>
</html>

4. 创建userinfo,js

var v = new Vue({
    el: "#app",
    delimiters: ["{[", "]}"],
    data: {
        username: username,
        mobile: mobile,

    },
    mounted() {

    },
    methods: {}
})

标签:username,13,users,--,request,用户,mobile,userinfo
From: https://www.cnblogs.com/kh-1314/p/17120501.html

相关文章

  • docker swarm 部署minio集群
    Minio本示例compose文件会拉起4个节点的minio集群,节点用swarmnode标签replica来标记。docker-compose文件准备docker-compose-minio-new.ymlversion:'3.7'#Settin......
  • docker安装seata
    dockerrun--nameseata-server\-p8091:8091\-eSEATA_IP=xxx.xxx.xxx.xxx\-eSEATA_PORT=8091\-eSEATA_CONFIG_NAME=fi......
  • fiddler详细介绍
    csdn知名作者:极客小俊   的全网最强HTTP+Fiddler抓包实战教程干得不能再干(超级全面图文)得到了我的认可!!!链接在这:极客小俊......
  • 创建线程的三种基本方式
    多线程的基本概念,线程创建的三种基本方式及线程的生命周期等其他线程相关的简要介绍Author:MsuenbDate:2023-02-14多线程基本概念程序(program):为完成特定任务......
  • 2023-2-14 微信小程序 <view>组件字体居中 方法
    当我想要编辑一行文本时,第一个想到的方法是:直接在view组件里面打上想要的字,再设置其text-align属性为centertest.wxml<viewclass="test">测试</view>test.wxss.test......
  • jwt配置文件 drf-jwt源码执行流程 自定义用户实现jwt的签发和认证 simpleui 权限控制(
    昨日内容回顾#1接口文档的编写-1word,md编写---->存放位置:存放共享文件平台,git上-2第三方的接口文档编写平台-3公司自己开发,使用开源搭建yapi......
  • 单链表:用C语言实现-单链表头文件相关定义
    一、公共头文件#ifndef__MYHEAD_H__#define__MYHEAD_H__/*******************************************************************@file:myhead.h*@brief:公......
  • json查询
    json查询procedureTFunc1549.select(req,res:TSerialize);vardb:tdb;pool:tdbpool;jo:variant;begintrytrypool:=GetDBPool('1');......
  • maven使用指定的pom文件构建子模块
    有条件的同学建议直接浏览原文:https://stackoverflow.com/questions/33396390/custom-pom-xml-filename-in-maven-multimodule-for-tycho maven工程包含多个子模块的结......
  • o批现在会什么
    搜索DFSBFS折半搜索A*字符串哈希KMPTrie树ManacherZAlogrithm(ExKMP)动态规划背包DP01背包完全背包分组背包多重背包区间DP状压DP树形DP记......