Qt+Cutelyst学习笔记（十六）win10+Qt5.15.2 添加基本样式表

前言：

本篇是在前一篇基础上修改的，为前端的显示结果上，添加一个基本样式表

一、为视图创建一个包装器

在src/myapp.cpp中编辑视图，修改如下

bool MyApp::init()
{
    ...
    auto view = new GrantleeView(this);
    view->setIncludePaths({ pathTo("root/src") });
    ...
    view->setWrapper("wrapper.html"); // Add this line
    ...
}

 创建root/src/wrapper.html文件，添加如下内容

 



    {% comment %} Insert the page title {% endcomment %}
    
{{ site.title }}

    


    Navigation:
    

        
Home
        
Welcome
        

 

    {% comment %} Status and error messages {% endcomment %}
        {{ status_msg }}
        {{ error_msg }}
    {% comment %} This is where Grantlee will stick all of your template's contents.{% endcomment %}
    {{ content }}


 
Copyright (c) your name goes here

 

 这个文件是个包装器模板。基本上，网站的整体布局，都放到这个文件中

二、创建基本样式表

创建root/static/css/main.css文件（上面包装器的样式表href链接中引用的文件），并添加如下

#header {
    text-align: center;
}
#header h1 {
    margin: 0;
}
#header img {
    float: right;
}
#footer {
    text-align: center;
    font-style: italic;
    padding-top: 20px;
}
#menu {
    font-weight: bold;
    background-color: #ddd;
}
#menu ul {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0 0 50% 5px;
    font-weight: normal;
    background-color: #ddd;
    width: 100px;
}
#content {
    margin-left: 120px;
}
.message {
    color: #390;
}
.error {
    color: #f00;
}

 三、设置静态资源访问

1.修改src/CMakeLists.txt工程

target_link_libraries(myapp
    ...
    Cutelyst::StaticSimple # Add this line
    ...
}

2.注册插件

修改src/myapp.cpp,添加如下内容

...
#include 
...
bool myapp::init()
{
    ...
    new StaticSimple(this);
    ...
}

注册完成后，直接编译，可以得到生成的动态库

windows下是myapp.dll

linux下是libmyapp.so

四、运行新的动态库

 设置好环境变量,执行如下命令

#运行服务
cutelyst3-qt5.exe --server --app-file src/myapp -- --chdir ..

#--app-file 后的参数是应用程序（dll库）的位置，请读者自行修改
#注：可以省略dll扩展名

注：可以省略应用程序后缀，如.so, .dll, .dylib，因为它会自动查找带有适当后缀的文件。

注：--chdir 后面的参数，是root所在的目录，同时也是数据库文件放置的目录，使用影子编译的小伙伴要注意下，一定要放对参数

运行后，打开本地浏览器，输入 http://localhost:3000/site/test，显示如下

​

  至此，本次测试完成

 本次测试示例源码下载

后记：

笔者感觉自己跑偏方向了，日后估计也很少会用到这些，所以接下来继续深入学习