TP8框架和前端开发中一些技巧

243 阅读1分钟

TP部分

搜索指定文件

TP中的模板文件和系统文件通常隐藏较深,使用正常目录点击模式,很难找到目标文件位置,可以在根目录中使用搜索文件功能。

session的启用

需要在全局中间件中启动中间件配置,注意有两个中间件,一个在app目录下,另一个在app/config目录下,要配置app目录下middlewire.php文件,该文件为全局中间件文件。使用session需要先导入session类。导入代码:use think\facade\Session;

控制器的代码组织

一般分为加载页面和接收页面,加载页面只显示HTML模板和默认数据;POST和GET提交的请求应发送到接收页面。可以把代码分为两个模块进行分隔。

控制器和方法模块

  • 默认访问URL为:http://severname/index.php/控制器名/方法名
  • index.php可以隐藏,在public目录下的.htaccess文件中配置,具体配置代码见TP8文档。

构建数组

掌握构建数组的方法,如下:

$responseData = [
    'received_name' => $name,
    'received_age' => $age
];

JSON方法

json()方法可以将数据库中查询的数据或者构建的数组变成json格式。

前端部分

美学

  • 元素间距。适当的元素间距可以产生意想不到舒适感。
  • 背景。无论是登录页面还是管理页面,添加一层背景使页面更有层次。
  • 颜色。合理的颜色搭配和统一的颜色风格,可以提升页面的美观度。
  • 图标。好的文字需要配套图标,图文并茂才更生动。
  • 动画。为事件操作添加动画,提升用户的操作体验。
  • LOGO。LOGO是产品的灵魂所在,要设计好。
  • 细节。合理使用透明度、圆角、过渡动画、字体、flex布局。

关于表单提交

  • 提交表单:form.submit()
  • 阻止表单提交:e.preventDefault()
  • 阻止代码继续执行:return false
  • jquery AJAX
$.ajax({
        type: "post",
        url: "login_post.html",
        data: postData,
        dataType: "json",
        success: function (response) {
            if(response=='1'){
                $("#login_submit").text('登录中…');
                message('登录成功!',2);
                setTimeout(function(){
                    window.location.href = 'home.html';
                },1000)
            }else{
                message('账号或者密码错误!',1);
                return false;
            }
        }
});
  • setTimeout函数的使用要掌握
  • button元素disabled属性的使用可以阻止表单重复响应
  • 消息提示框的设计要灵动美观