python-flask 后台传递用户信息显示在html中

Posted 2023-04-06

参考技术A 用法：

1.导入render_template函数

2.当你创建完成flask项目后，会自动生成static文件夹用来放css,js文件，templates文件夹放html文件。在templates文件夹下新建index.html文件

3.在app.py中渲染html,templates文件夹是自动生成的，当使用render_template渲染html时，它会自动去templates文件夹下找，所以这里不用谢文件夹名字，直接写html的名字就可以。

效果图

在网页中用户登录后，显示用名字，就是后台向前端界面传递用户的信息，前端接收到后显示出来。

用法：在渲染模板时将参数写在后面

在html文件中获取参数，读取值使用参数名

当传递参数较多时，将它们放在字典中，然后使用**字典名进行传递

读取方法还相同

补充：如果字典中有对象，要在html中获取对象的属性值，对象名.属性，如果字典中还有字典，同样获取值使用字典名.属性

java后台配置信息如何传递到前端jsp页面

需求:  系统前端jsp使用的是easyUi的datagrid展示了一些任务信息，任务信息中有个状态信息显示的值是数字，

        需要根据后台保存的映射关系，将状态显示为描述信息。

 

原来的jsp前端显示：

 

解决方案，在后台使用创建json数据，然后传递到前台jsp页面中，并使用eval解析后获取值对应的描述，操作如下：

1. 创建json数据(java)

    //任务列表
    public static final String TASK_PENDING = "0"; 
    //命令处理成功
    public static final String TASK_COMMAND_SUCCESS = "1";    
    //命令处理失败
    public static final String TASK_COMMAND_FAILED = "2";
    //下载处理成功
    public static final String TASK_DOWN_SUCCESS = "3";
    //下载处理失败
    public static final String TASK_DOWN_FAILED = "4";
    //邮件发送成功
    public static final String TASK_MAIL_SUCCESS = "5";
    //邮件发送失败
    public static final String TASK_MAIL_FAILED = "6";
    //处理成功
    public static final String TASK_COMPLETE = "99";


    public static String getStatusJson(){

        JSONObject statusJson = new JSONObject();
        statusJson.put(TASK_PENDING, "待处理");
        statusJson.put(TASK_COMMAND_SUCCESS, "脚本执行成功");
        statusJson.put(TASK_COMMAND_FAILED, "脚本执行失败");
        statusJson.put(TASK_DOWN_SUCCESS, "文件下载成功");
        statusJson.put(TASK_DOWN_FAILED, "文件下载失败");
        statusJson.put(TASK_MAIL_SUCCESS, "邮件发送成功");
        statusJson.put(TASK_MAIL_FAILED, "邮件发送失败");
        statusJson.put(TASK_COMPLETE, "完成");
        
        return statusJson.toString();
    }

 

2. 传值(java)

String statusJson = Constants.getStatusJson();
resultMap.put("statusJson",statusJson);

 

3. 前端jsp中使用js获取值(js)

//根据传入的状态代码获取状态描述
function getStatusDesc(key){
    var obj = eval("(" + \'${statusJson}\' + ")");
    return obj[key];
}    

 

4. 使用datagrid的formatter调用function

 1 { 
 2     field: \'status\', 
 3     title: \'状态\', 
 4     halign: \'left\',
 5     align : \'left\',
 6     width : \'100\',
 7     formatter:function(value,row,index){
 8         var desc = getStatusDesc(value);
 9         return desc;
10     }
11 },

view code

 

最终显示结果如下:

 

后话: 刚开始是在后台使用map作为传值，js中解析map比较复杂，后来改用json后方便多了。