本篇文章给大家谈谈模板中网站头部ul点击样式，以及网页的头部对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享模板中网站头部ul点击样式的知识，其中也会对网页的头部进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

1. koa流程？

1、koa流程？

1. EJS模板引擎的使用：

1.1 安装koa-views和ejs：

npm install koa-views --save

npm install ejs --save

1.2 引入koa-views配置中间件：

const views = require(#39;koa-views#39;);

/**引入koa-views配置中间件：指定模板文件的目录，ejs为模板引擎*/

app.use(views(__dirname #39;/views#39;, {

map: {html: #39;ejs#39;},

}));

上面的代码中，指定了模板文件的目录为/views，且使用ejs做为模板引擎。

1.3 在Koa中使用ejs：

通过ctx.render(#39;index.html#39;, data:data)，向模板文件传递数据：

/*Koa代码*/

router.get(#39;/#39;, async (ctx, next)=gt;{

let title = #39;Hello Joyitsai#39;;

await ctx.render(#39;index#39;, {title: title})

})

1.4 ejs绑定上面发送的数据用等号lt;%=title%gt;:

lt;!--html模板代码--gt;

lt;!DOCTYPE htmlgt;

lt;html lang=#34;en#34;gt;

lt;headgt;lt;/headgt;

lt;bodygt;

lt;h3gt;lt;%=title%gt;lt;/h3gt;

lt;/bodygt;

lt;/htmlgt;

1.5 ejs绑定html语句：

如果从后端传送的数据是html语句，那么要用lt;%-data%gt;来解析html语句：

router.get(#39;/#39;, async (ctx, next)=gt;{

let data = #39;lt;h2gt;这是从后端发来的html语句lt;/h2gt;#39;

await ctx.render(#39;index#39;, {data:data})

})

lt;!DOCTYPE htmlgt;

lt;html lang=#34;en#34;gt;

lt;headgt;lt;/headgt;

lt;bodygt;

lt;!--解析后端发送的html语句用减号--gt;

lt;%-data%gt;

lt;/bodygt;

lt;/htmlgt;

1.6 ejs引入模板：

在实际开发中，像导航栏这样公共的页面结构会单独分离成一个模板文件，然后在其他页面中直接导入即可，同样，这里也可以通过lt;%include header.html%gt;引入模板页面，模板文件结构如下：

|——app.js

|—— ...

|——views

|——public

|——header.html

|——index.html

其中，header.html为要在index.html中引入的模板，那么引入代码如下：

lt;!--public/header.html--gt;

lt;h2gt;这是头部信息页面lt;/h2gt;

lt;!--index.html--gt;

lt;!DOCTYPE htmlgt;

lt;html lang=#34;en#34;gt;

lt;headgt;lt;/headgt;

lt;bodygt;

lt;!--默认views/为主目录了，引入路径不加双引号或单引号--gt;

lt;%include public/header.html%gt;

lt;/bodygt;

lt;/htmlgt;

1.7 ejs模板判断语句：

在ejs模板中。if...else..语句要包在lt;%%gt;中

/**后端代码*/

router.get(#39;/#39;, async (ctx, next)=gt;{

let age = 24

await ctx.render(#39;index#39;, { age:age})

})

lt;!DOCTYPE htmlgt;

lt;html lang=#34;en#34;gt;

lt;headgt;lt;/headgt;

lt;bodygt;

lt;%if(agegt;20){%gt;

大于20岁

lt;%}else{%gt;

小于等于20岁

lt;%}%gt;

lt;/bodygt;

lt;/htmlgt;

1.8 ejs模板中的循环数据：

同样，将for(var i=0;ilt;data.length;i ){}循环包含在lt;%%gt;中，示例代码如下：

/**后端代码*/

router.get(#39;/#39;, async (ctx, next)=gt;{

let datalist = [#39;joyitsai#39;, #39;ming#39;, #39;bob#39;];

await ctx.render(#39;index#39;, {datalist:datalist})

})

lt;bodygt;

lt;br/gt;

lt;ulgt;

lt;%for(var i=0;ilt;datalist.length;i ){%gt;

lt;ligt;lt;%=datalist[i]%gt;lt;/ligt;

lt;%}%gt;

lt;/ulgt;

lt;/bodygt;

另外，如果需要在每一个页面都要获取像用户信息这样的数据，每次ctx.render()时都传递这个数据会比较麻烦，解决办法是，通过ctx.state = {data:data}来设置公共数据，绑定在ctx.state上的数据，可以在任何一个页面中直接调用，而不需要通过ctx.render()来传递了。

关于ejs模板引擎的一些常用用法都列举出来了，多多练习就记熟了，其实并没什么难度。

2. art-template模板引擎的使用：

art-template是常用模板引擎中渲染速度最快的，看下面一张测试图：

image.png

art-template支持ejs语法，所以可以完全按照ejs的语法来写。

2.1 安装art-template引擎：

npm install art-template --save

npm install koa-art-template --save

2.2 引入并配置art-template：

const Koa = require(#39;koa#39;);

const render = require(#39;koa-art-template#39;);

const path = require(#39;path#39;);

const app = new Koa();

render(app, {

root: path.join(__dirname, #39;views#39;), //模板文件所在目录

extname: #39;.html#39;, //声明模板文件的后缀名

debug: process.env.NODE_ENV !== #39;production#39; //是否开启调试模式

})

2.3 art-template模板引擎语法：

基本与ejs的相同，除引入其他模板文件除外，在art-template中，引入其他模板文件的语法如下：

lt;bodygt;

lt;!--art-template中引入模板时要加括号和引号--gt;

lt;%include(#39;header.html#39;)%gt;

lt;h3gt;lt;%=title%gt;lt;/h3gt;

lt;/bodygt;

其他语法自行参考官方文档：art-template语法。

第一步:安装koa和mongodb到项目中

1.

首先在项目根目录下建立文件夹service,然后进入文件。 1 2 3 mkdirservice cdservice

2.

使用npm init -y生成并初始化package.json 文件。

3.

在终端中使用npm来安装koa npminstall--savekoa index.js文件 constKoa=require(#39;koa#39;)

到此，以上就是小编对于模板中网站头部ul点击样式的问题就介绍到这了，希望介绍关于模板中网站头部ul点击样式的1点解答对大家有用。