前端语言开发模板

内容概要

前端

简介
HTML
CSS（选择器/样式操作）
JS（流程控制/函数/内置对象/BOM操作/DOM操作）
前端类库之jQuery框架
前端页面框架Bootstrap
页面框架核心知识
页面框架样式
HTTP协议
手写web框架

简介

前端(前台接待员)
    任何与用户直接打交道的界面 都可以称之为是前端
后端(幕后操作者)
    不直接与用户打交道 主要负责业务核心逻辑的执行
"""
开玩笑:IT行业存在一个鄙视链
    后端程序员  >  运维、测试、前端、产品经理
"""

前端核心知识
    HTML
    构建网页的骨架     类似于光着身子的蜡笔小新
  CSS
    调节HTML样式            类似于给蜡笔小新穿衣服、化妆
  JavaScript
    控制动态效果           类似于让拉比小新跳舞
 
代码模拟
    代码模拟服务端 浏览器充当客户端请求数据
  无法直接交互 数据格式需要符合HTTP协议(超文本传输协议)

HTML

超文本标记语言 是构建网页的骨架(也可以笼统说所有浏览器展示出来的花里胡哨的页面都是有它构建而来)
    eg:淘宝 京东 拼夕夕
"""
浏览器上肉眼看到的内容肯定不是内部真正的模样!!! 内部肯定需要对应一段代码
"""
1.文件结构
    <html>
    <head>浏览器不直接展示出来的内容</head>
    <body>浏览器会直接展示出来的内容</body>
  </html>
2.语法注释
    <!--注释内容-->
3.标签分类
    双标签:一部分双标签很多情况下都可以在内部嵌套其他标签
    <h1></h1>
  单标签
    <img/>
4.head内常见标签
    title               网页小标题
  style                 内部编写css代码
  link                  通过href属性引入外部css文件
  script                内部编写js代码或者通过src属性引入外部js文件
5.body内常见标签
    5.1.基本标签
    h1~h6       标题标签
    u i s b 下划线、斜体、删除线、加粗
    p               段落标签
    hr          水平分割线
    br          换行符
  5.2.常见符号
    &nbsp;  空格符
    &gt;        大于号(避免普通文本的符号与html标签符号冲突)
    &lt;        小于号(避免普通文本的符号与html标签符号冲突)
    &yen;   羊角符
    5.3.布局标签
    div         专门做页面的前期规划布局(使用频率最高)
    span        专门提供普通文本的内容(使用频率较低)
    5.4.常见标签
    a               链接标签  href属性跳转网页
    img         图片标签  src属性展示图片
  5.5.列表标签
    ul  
        li
            无序列表  
            页面上只要是有规则排列的横向或者竖向的多行内容 一般都是无序列表
  5.6.表格标签
    table       模拟excel表格存储数据的样式
        thead  表头
        tr   一行
            th/td 
      tbody  表单
        tr   一行
            td
    5.7.表单标签(重要)
    form                        能够通过前端页面获取用户数据并且发送给后端
        action参数
        控制数据提交的后端地址
        input标签         获取用户数据
            type属性
            text            普通文本
          password  密文展示
          radio         单选
          checkbox  多选
          date          日历
          email         邮箱
          file          获取文件
          submit        触发提交数据动作的按钮
          reset         重置按钮
          button        普通按钮
      select标签      下拉框
            option标签    一个个下拉选项
      textarea标签     一次性获取大段文本内容

6.块儿级标签与行内标签
    块儿级标签独占浏览器窗口一行
  行内标签取决于内部文本 不独占一行

CSS选择器

层叠样式表  用于对html标签调整样式
"""
页面上很多标签都是相同的 但是样式又不同 如何区分???
    一般情况下我们都会给标签设置两个非常重要的属性
        id属性(指名道姓 精准查找)
            类似于标签的身份证号 同一个页面上id不能重复
            <div id='d1'></div>
        class属性(分类管理 批量查找)
            类似于分类管理 多个标签可以有相同的类名
            <div class='c1'></div>
            <p class='c2'></p>
            <span class='c1'></span>
"""
语法结构
    选择器 {样式名:样式值; 样式名:样式值;...}
注释语法
    /*注释内容*/
1.在调整标签样式之前我们得先学会如何查找标签
    1.1.基本选择器
    id选择器                                       #id值
    class选择器(类选择器)           .class值
    tag选择器(标签选择器)                标签名
    1.2.组合选择器
    """
    <div>div
      <span>div>span</span>
      <p>div>p
          <span>div>p>span</span>
      </p>
      <span>div>span</span>
    </div>
    <span>123</span>
    <span>321</span>
    前端会将标签嵌套的结构使用亲戚关系来表述
        儿子、后代、弟弟、哥哥、祖先
    """
        /*后代选择器>>>:空格*/
        /*div span {*/
        /*    color: red;*/
        /*}*/
        /*儿子选择器>>>:大于号*/
        /*div>span {*/
        /*    color: greenyellow;*/
        /*}*/
        /*毗邻选择器>>>:加号*/
        /*div+span {*/
        /*    color: red;*/
        /*}*/
        /*弟弟选择器>>>:小波浪号*/
        div~span {
            color: red;
        }
        混合使用
        div,span {
            color: red;
        }
        #d1,.c1,span {
            color: red;
        }
    1.3.伪类选择器
        a:hover {  鼠标悬浮动态加载样式
            color: red;
        }
2.选择器优先级
    只需要掌握以下两种情况即可
        1.选择器相同 
        就近原则
    2.选择器不同 
      行内式   > id选择器 > 类选择器 > 标签选择器

CSS样式操作

1.字体相关操作
    font-size           大小
  font-weight       粗细
  color                 三种
        red
        rgb()
      #4e4e4e
      ps:取色方式有很多
            方式1:pycharm取色
          方式2:软件自带截图
    text-align      布局
  text-decoration 文字修饰
        a标签自带下划线 需要我们自己处理

2.背景相关操作
    background-color: red;
  background-image: url('1.jpg');

3.边框相关操作
  border
  border-raduis

4.展示相关操作
    display:none  
    
5.盒子模型
    所有的标签都有四个重要的属性
    margin          外边距                 标签与标签之间的距离
    border          边框                   标签边框属性
    padding         内边距                 边框与标签内部文本的距离
    content         标签内容             标签内部文本
 
6.浮动布局
    所有的网站几乎都需要使用浮动才可以完成页面布局的操作
    float
    
7.溢出属性
    overflow:hidden
 
8.定位属性
    position:fixed
    
9.z-index
    前端页面其实是一个三维坐标系 z轴指向用户

JS

JavaScript跟Java没有任何关系 纯粹是为了当初蹭Java热度
JS也是一门编程语言

JS的代码结束符是分号 但是很多时候不写也没啥大问题 逻辑不是很严谨

'''学习阶段直接使用浏览器console界面编写js更加方便'''

1.变量与常量
    var name = 'jason'
  let name = 'jason'
  ps:var和let是申明变量的关键字 var是5.1版本之前通用的 let是5.1之后发明的
     var声明的变量作用于全局 let则可以声明局部名称空间变量
    const pi = 3.14

2.注释语法
    // 单行注释
  /* 多行注释 */

3.基本数据类型
    回顾python基本数据类型
    整型int、浮点型float、字符串str、列表list、字典dict、元组tuple、集合set、布尔值bool
    JS基本数据类型
    数值类型number、字符类型string、布尔类型boolean、undefined类型、对象类型object(array 自定义对象)

4.数据类型
    '''js中查看数据类型的方式  typeof'''
    1.数值类型number(包含了整型与浮点型)
    let i = 11
    let f = 11.11
    NaN:Not A Number
  2.字符类型string
    let name = 'jason'
    let name = "jason"
    let name = `多行文本`
            格式化输出  `${变量名}`
    常见内置方法
            js中的方法                              python中的方法
                .length                                 len()
            .trim()                                 strip()\lstrip()\rstrip()
          .concat()                             join()
          .slice()                              索引切片
          .toLowerCase()                    lower()
          .toUpperCase()                    upper()
          .split()                              split()
    3.布尔类型boolean   
            js中布尔值                            python中的布尔值
                true                                        True
            false                                       False
    4.undefined类型
            null的意思是空 undefined的意思是没有定义
    5.对象object
            数组 类似于python中的列表  []
    常见内置方法
            js中的方法                              python中方法
            .length                                 len()
            .push()                                 append()
          .pop()                                    pop()
          .unshift()                            insert()
          .concat()                             extend()
    6.自定义对象
            自定义对象 类似于python中的字典 {}
                let obj1 = new Object()  # 空字典
            let obj2 = {'name':'jason'}  # 自定义字典
        可以通过句点符的方式直接操作键值对

JS流程控制

js中的分支结构                                            python中的分支结构
let age = 18                                            age = 18
if(age>18){                                             if age > 18:
  console.log('猜大了')                            print('猜大了')
}else if(age<18){                                   elif age < 18:
  console.log('猜小了')                            print('猜小了')
}else{                                                      else:
  console.log('猜对了')                            print('猜对了')
}


js中的for循环                                             python中的for循环
let l1 = [11, 22, 33, 44, 55]            l1 = [11, 22, 33, 44, 55]  
for(let i=0;i<l1.length;i++){      for i in l1:
  console.log(l1[i])                                 print(i)
}

js中的while循环                                         python中的while循环
let count = 1                                           count = 1
while(count < 10){                              while count < 10:
  console.log(count)                                print(count)
  count++;                                                  count += 1
}

JS函数

js中的函数语法结构                                      python中的函数语法结构
function 函数名(形参){                               def 函数名(形参):
  /*函数注释*/                                               '''函数注释'''
  函数体代码                                                      函数体代码
  return 返回值                                                return 返回值
}
'''js中的函数形参与实参的个数可以不一致'''
function f1(){                                          def f1():
  console.log('hello js')                           print('hello pythonn')
}           
f1()                                                                f1()
f1(1,2,3,4)

function f2(a, b){                                  def f2(a, b):
  console.log(a, b)                                     print(a, b)
}
f2(1,2)                                                         f2(1, 2)
f2()
f2(1)
f2(1,2,3,4,5)
'''js中函数体代码自带一个关键字arguments用于接收所有的实参'''
等价于python中*args和**kwargs的功能

JS内置对象

类似于python中的内置模块
js中的内置对象                                            python中的内置模块
Date对象                                                   time模块
let d1 = new Date()                             import time
d1.toLocaleString()                             time.strftime('%Y/%m/%d %X')

JSON对象                                                      json模块
JSON.stringify()                                json.dumps()
JSON.parse()                                            json.loads()
                                                                    
RegExp对象                                                    re模块
let r1 = new RegExp('^ja$')       re.findall('^ja$',待匹配的文本)
r1.test(待匹配的文本内容)

BOM操作

通过js代码与浏览器做交互       BOM:浏览器对象模型
1.window.open()                                 浏览器打开全新的窗口
2.window.close()                            关闭浏览器窗口
3.window.navigator.userAgent        获取浏览器信息
4.window.history.forward()      浏览器前进一页
5.window.history.back()                 浏览器后退一页
6.window.location.reload()          浏览器重新加载
7.window.location.href                  获取页面地址
8.window.location.href = url    重新指定访问地址
9.alter()                                               警告框
10.confirm()                                        确认框
11.prompt()                                         提示框
12.setTimeout()/clearTimeOut()  延时执行
13.setInterval()/clearInterval()循环执行

DOM操作

通过js代码与html页面做交互 DOM:文档对象模型
1.先学会如何查找标签
    核心
    document.getElementById()
    document.getElementsByClassName()
    document.getElementsByTagName()
    扩展
    parentElement            父节点标签元素
    children                 所有子标签
    firstElementChild        第一个子标签元素
    lastElementChild         最后一个子标签元素
    nextElementSibling       下一个兄弟标签元素
    previousElementSibling   上一个兄弟标签元素
  
2.操作标签
    1.创建标签
    let aEle = document.createElement('a')
    2.添加文本
    aEle.innerText = '点我去搜狗'
    3.设置属性
    aEle.setAttribute('href','https://www.sogo.com/')
  4.文档操作
    let divEle = document.getElementById('d1')
    divEle.append(aEle)
  5.样式操作
    aEle.style.color = 'red'
    6.获取标签值
    innerText       主要用于页面普通标签
        只作用于内部文本 不识别标签
    innerHTML   主要用于页面普通标签
        内部文本和标签都识别
    value               主要用于获取用户数据的标签
        用于普通数据的获取
    files               主要用于获取用户数据的标签
        用于文件数据的获取
  
3.事件
    """
    html页面上JS代码的编写位置>>>:建议写在body内最下方
    当JS代码中涉及到标签查找 那么需要先确保页面上所有的标签全部加载完毕之后再查找避免报错 最简单的方式就是写在body内最下方(页面加载从上往下)
    """
    类似于给标签绑定一些功能 让其在特定的条件下自动触发
  onclick        当用户点击某个对象时调用的事件句柄。
  ondblclick     当用户双击某个对象时调用的事件句柄。
  onfocus        元素获得焦点。    // 练习：输入框
  onblur         元素失去焦点。    应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
  onchange       域的内容被改变。   应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
  onkeydown      某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
  onkeypress     某个键盘按键被按下并松开。
  onkeyup        某个键盘按键被松开。
  onload         一张页面或一幅图像完成加载。
  onmousedown    鼠标按钮被按下。
  onmousemove    鼠标被移动。
  onmouseout     鼠标从某元素移开。
  onmouseover    鼠标移到某元素之上。
  onselect      在文本框中的文本被选中时发生。
  onsubmit      确认按钮被点击，使用的对象是form。
  3.1.绑定事件的两种方式
    方式1:先查找标签再绑定事件
        <button id="d1">我是按钮1</button>
        let btnEle = document.getElementById('d1')
        btnEle.onclick = function () {
            alert(123)
            console.log(this)
        }
        '''上述绑定事件的函数内还可以用关键字this来指代当前被操作的标签'''
    方式2:先编写函数再赋值属性
        <button id="d2" onclick="func1()">我是按钮2</button>
        function func1() {
            confirm('哈哈哈')
        }
        
4.事件实战案例
    案例1:获取用户名和密码并校验是否正确 如果不正确展示提示信息
            // 1.查找提交数据的按钮
        let btnEle = document.getElementById('d3');
        // 2.给按钮绑定一个点击事件
        btnEle.onclick = function () {
            // 3.获取用户输入的用户名和密码
            let userNameVal = document.getElementById('d1').value
            let passWordVal = document.getElementById('d2').value
            // 4.校验数据是否符合条件
            // 针对用户名不能填写jason
            if(userNameVal === 'jason'){
                document.getElementsByClassName('errors')[0].innerText = '用户名不能是jason'
            }
            // 针对密码不能为空
            if(passWordVal.length === 0){
                document.getElementsByClassName('errors')[1].innerText = '密码不能为空'
            }
        }
    案例2:省市联动
        参考笔记或者博客即可
  案例3:搜索框内容变化
        let inEle = document.getElementById('d1');
      // input框聚焦事件(鼠标点击选中)
      inEle.onfocus = function () {
          this.removeAttribute('placeholder')
      }
      // input框失去焦点时间(鼠标点击其他标签)
      inEle.onblur = function () {
          this.setAttribute('placeholder','switch掌机')
      }
    案例4:锻炼逻辑能力  动态展示时间
        <script>
        // 1.查找标签
        let d1Ele = document.getElementById('d1');
        let d2Ele = document.getElementById('d2');
        let d3Ele = document.getElementById('d3');
        // 提前定义存储定时任务的变量
        let t = null;
        function showTime(){
            // 3.获取当前时间
            let cTimeObj = new Date();
            // 4.添加到input框中
            d1Ele.value = cTimeObj.toLocaleString()
        }
        // 2.给开始按钮绑定点击事件
        d2Ele.onclick = function () {
            if(!t){
                t = setInterval(showTime, 1000)  // 循环定时任务没开启一个都是全新的 变量t只能指代最后一个
            }
        }
        // 给结束按钮绑定点击事件
        d3Ele.onclick = function () {
            clearInterval(t)  // 只能结束t指代的那一个定时任务  只是把t指代的定时任务取消了 但是t的值并没有清空
            t = null;
        }
    </script>

前端类库之jQuery框架

jQuery内部封装了JS代码 能够让我们编写更少的代码实现更多的功能 并且兼容诸多浏览器
'''以前做前端比较头疼的一件事就是浏览器兼容性问题 甚至有时候同一个功能需要编写不同的代码针对不同的浏览器>>>:IE浏览器'''

使用jQuery之前 必须先导入(script标签引入jQuery的js文件)
    1.官网下载文件
    2.网络CDN(bootcdn)
    资源路径后缀如果有min一般情况下都表示该资源为压缩版本
    ps:为了偷懒 也可以使用pycharm自动添加模板的功能

使用jQuery可以用特殊符号$
    jQuery()    等价于  $()
  
jQuery对比JS代码复杂度
    编写代码让页面上的第一个标签内文本颜色变为红色 第二个变为绿色
  JS代码实现
    let h1EleList = document.getElementsByTagName('h1');
    h1EleList[0].style.color = 'red'
    h1EleList[1].style.color = 'green'
    jQuery代码实现
  $('h1').first().css('color','pink').next().css('color','orange')
  

1.jQuery选择器(与CSS差不多)
    $('#d1')  id选择器 关键符号是警号
  $('.c1')  class选择器 关键符号是点好
  $('tag')  标签选择器 关键符号就是标签名
  $('div.c1')  查找class中含有c1的div标签
  $('#d1, .c1, span')  查找id是d1的或者class含有c1的或者span标签
  $('div p')  查找div内部所有的p标签(后代)
  $('div > p')  查找div内部第一层级的p(儿子)
  $('[name]')  查找含有name属性的标签
  $('[name="jason"]')  查找含有name属性并且值是jason的标签
  $('div[name="jason"]')  查找含有name属性并且值是jason的div标签
  表单筛选器(专门用于快速查找form表单内的一些标签)
  $(':text')  查找form表单内type=text的标签  === $('[type="text"]')
  筛选器方法
  .next()  同级别下一个标签
  .prev()  同级别上一个标签
  .parent()父标签
        ps:链式操作(调用了一个方法之后还可以继续调用)
  
2.jQuery操作标签                                                JS操作标签      
    $(选择器).addClass()                    标签对象.classList.add()
  $(选择器).removeClass()       标签对象.classList.remove()
  $(选择器).hasClass()          标签对象.classList.contains()
  $(选择器).toggleClass()       标签对象.classList.toggle()
  $(选择器).css('color','red')  标签对象.style.属性名 = 属性值
  text()                                             innerText
    html()                                           innerHTML
  val()                                              value

3.jQuery绑定事件                                                JS绑定事件
    $(选择器).click(function(){        标签对象.onclick = function(){
  })                                                        }   
               
  $(选择器).on('click',function(){
    
  })
     
4.取消后续事件
    我们在给标签绑定事件的时候 如果标签本身就含有事件功能 那么该如何执行
        eg:
        form表单提交数据的按钮 点击就会朝后端发送数据 
      a标签点击就会自动跳转到href属性后填写的网址
    '''默认情况下已经含有功能的标签绑定了其他事件之后会先执行事件功能然后再执行自身自带的功能'''
      在事件函数内部最后添加return false即可阻止标签后续事件的执行
        <a href="https://www.sogo.com/" id="d1">点我跳转</a>
    <script>
        $('#d1').click(function () {
            alert('嘿嘿嘿')
            return false
        })
    </script>
          
5.动画效果

前端页面框架Bootstrap

很多非常好看的页面样式其实都不需要我们自己编写 直接拷贝使用即可>>>:CV大法

https://www.bootcss.com/  建议使用3版本 较为成熟稳定
响应式布局:根据页面浏览器窗口的大小自动调整页面样式从而达到最佳的查看效果
  
1.如何使用Bootstrap
    需要在页面上提前导入相应的文件资源
  1.直接下载文件资源
  2.导入网络CDN资源
  ps:如果你想让pycharm自动提示框架对应的关键字 最好是先下载文件资源导入
    
2.文件资源准备
    css、js、jQuery
  通过查看框架源码发现js部分需要使用jQuery 所以我们要想确保框架资源的完整使用需要先导入jQuery然后再导入js

3.基本介绍
    CV拷贝即可使用

页面框架核心知识

"""使用前端页面框架一般情况下都只需要使用者操作标签的类属性即可"""
1.布局容器
    <div class="container"></div>                   左右两边有留白
  <div class="container-fluid"></div>           左右两边没有留白
2.栅格系统
    区域划分及响应式布局
  <div class="row">                                             一个row就是一行
        <div class="col-md-6 c1"></div>   一行只有12份
        <div class="col-md-6 c1"></div>   一行只有12份
    </div>
    
     超小屏幕   小屏幕       中等屏幕    大屏幕   
  .col-xs-  .col-sm-    .col-md-    .col-lg-

页面框架样式

1.表格样式
     class="table table-hover table-striped table-bordered"
2.表单样式  
     class="form-control"
3.按钮样式
     class='btn btn-颜色 btn-尺寸'
4.图标样式
     class='图标代码'
     fontawesome字体图标库
5.诸多组件
     借助于侧边栏提示 快速查找并拷贝即可
6.js动态插件
     模态框、轮播图
     sweetalert动态弹框

HTTP协议

超文本传输协议 规定了浏览器与服务端之间各项标准
1.四大特性
    1.基于请求响应
  2.基于TCP、IP作用于应用层之上的协议
  3.无状态
  4.无连接
  
2.数据格式
    请求格式(客户端给服务端发送的数据格式)
    1.请求首行(请求方法、协议版本)
    2.请求头(一大堆K:V键值对)
    3.换行符
    4.请求体(携带数据 不是所有的请求都有请求体)
    
  响应格式(服务端朝客户端发送的数据格式)
        1.响应首行(响应状态码、协议版本)
    2.响应头(一大堆K:V键值对)
    3.换行符
    4.响应体(即将给客户端查找的数据内容)
    
3.响应状态码
    用数字来表达指定的情况
  1XX:服务端已经接受到了请求数据正在处理 客户端可以等待或者继续提交数据
    2XX:200 OK 服务端已经返回了一些数据
    3XX:重定向(原本想要访问A页面但是莫名其妙的跳转到了B页面)
    4XX:403请求不合法  404请求资源不存在
    5XX:服务器内部错误
    在日常工作中HTTP协议提供的状态码远远不够 程序员还需要自定义状态码
  一般情况下自定义状态码是从10000开始
  参考网站:聚合数据

手写web框架

'''听懂流程思路即可 代码无需掌握'''
1.纯手撸web框架
    web框架可以简单的理解为是一个基于网络通信的server(服务端)
  我们编写的服务端无法直接与浏览器做数据交互 因为我们编写的数据不符合规范
  浏览器肯定是遵循请求格式的 问题就出在我们编写的服务端发送响应的时候
  1.先让浏览器可以和我们的服务端无障碍的数据交互
  2.如何根据用户输入的路由(网址后缀)不同返回不同的响应数据
    请求首行中有用户想要访问的路由(网址后缀) 针对fav...直接忽略即可
    '''
    1.服务端代码需要反复编写
    2.针对HTTP格式数据的处理过于简单 兼容性不强
    3.路由匹配非常多的情况下大量的if肯定不合适
    '''

2.基于wsgiref模块
    from wsgiref.simple_server import make_server
  def run(request, response):
      """
      :param request: 请求相关的数据(自动处理成字典格式)
      :param response: 响应相关的数据
      :return: 返回给客户端的数据
      """
      response('200 OK', [])  # 固定写法 此处不用研究
      return [b'hello wsgiref']
  if __name__ == '__main__':
      server = make_server('127.0.0.1', 8080, run)  # 监控本机的8080端口 一旦有请求自动调用run
      server.serve_forever()
   
3.路由匹配优化
    1.将具体业务逻辑封装成函数
    2.构造路由与函数的对应关系
  3.根据功能的不同拆分成不同的模块
    views.py                专门存储业务逻辑代码
    urls.py                 专门存储路由与函数匹配关系
    4.拆分完成后 如果想再添加一个功能 那么将非常的简单
    只需要在上述两个py文件中填写各自的代码即可
    5.针对文件类型的不同还可以优化
    templates文件夹    专门存储HTML文件
    static文件夹           专门存储静态文件(css js 框架)
 
4.动态网页(数据来源于后端)
    需求1:后端获取当前时间 想办法渲染到html页面上并让浏览器展示出来
            利用字符串替换
    需求2:后端有数据类型 想办法渲染到html页面上并且在页面上还可以使用类似于后端的操作方法来处理这些数据类型
        模板语法(新知识)
        能够在html页面上使用类似于后端的代码来操作数据
  
5.jinja2模块
    pip install jinja2
  <p>{{ user_data }}</p>
  <p>{{ user_data.get('username') }}</p>
  <p>{{ user_data.pwd }}</p>
  <p>{{ user_data['hobby'] }}</p>

6.课堂练习
    能否查询MySQL里面的表数据 然后展示到前端页面(前端+后端+MySQL)
  {% for user_dict in xxx %}
    <tr>
      <td>{{user_dict.id}}</td>
      <td>{{user_dict.name}}</td>
      <td>{{user_dict.age}}</td>
    </tr>
  {% endfor %}

相关阅读:
支付宝开发平台之第三方授权登录与获取用户信息
 Struts2之访问路径
 Struts2之命名空间与Action的三种创建方式
 vs和vim
linux下的各个目录(待填)
linux-CentOS初学terminal命令(3)rm、chmod、mkdir、who、w、id、systemctl、
gcc和vs在c的一些区别
 利用putty在window下控制linux的terminal、ftp传输
 linux-CentOS初学terminal命令(2)vi、gcc、g++、./、mv、cp、ifconfig
linux初学terminal命令(1)ls、cd、su、man、pwd、useradd、passwd、cat、Ctrl+C、Ctrl+Z、Ctrl+L
原文地址：https://www.cnblogs.com/A121/p/16728837.html