Nodejs页面开发

采用express前端框架+ejs模板
当然也踩了一些express的坑
1、style引用
按照网上说的设置后css没有被应用,查找之后发现是没有被下载,地址错了,就找ejs的错误,发现ejs是这么写的:

我就是这么写的哪错了呢?
因为express框架里有个东西叫静态资源托管
app.use(express.static(path.join(__dirname, ‘public’)));
nodejs初始化工程的时候设置上了,于是原本需要../public/style/style1.css的资源只需要style/style1.css就能直接访问
正确答案:
我就奇怪我引入的bootstrap怎么就不起作用呢。

2、weui
微信的前端框架,我一开始没明白,后来发现应该是bootstrap一样的东西,提供的css样式库和 js

3、ejs调用js函数
这个不可为不是个大坑,一度让我都想把页面换成html重写了
常见的JS 调用的方法主要有两个:
ejs.compile(str, options);
// => Function
ejs.render(str, options);
// => str
但这俩都是从router的js跳转到ejs页面时的调用,我要在页面里使用就犯难了,然后凭着之前做项目用ejs的印象我终于想起来了
首先在head或者body的script标签里得写一个 function onUpload()
然后在页面里直接写:

<!--a tag-->
<a id=uploaderCustomBtn href="javascript:onUpload()"  class="weui-btn weui-btn_primary">上传</a> 
<!--button tag-->
<button id=uploaderCustomBtn onclick="javascript:onUpload()" class="weui-btn weui-btn_primary">下载</button> </div>

点击按钮就可以触发到onUpload了,自己测试可以用alert(“time”);看效果直观而且快,毕竟你在js里面的log在控制台可看不出来。
另外
var ejs = require(“ejs”);
//使用set方法,为系统变量“views”和“view engine”指定值。
app.set(“views”, __dirname + “/views”);
// 指定模板文件的后缀名为html
app.set(‘view engine’, ‘html’);
// 运行hbs模块
app.engine(‘html’, ejs.__express);
以上方法使用之后,由于view engine指定解析模板为html,整个服务都不能在解析你自己写的ejs了

4、js的三种弹框
这三种弹框的共同点是必须关闭了用户才能继续在页面上操作
1)警告消息框alert
alert 方法有一个参数,即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框,并且该消息框是模式对话框
window.alert(“欢迎!请按“确定”继续。”);
2)确认消息框confirm
使用确认消息框可向用户问一个“是-或-否”问题,并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框:用户必须在响应该对话框(单击一个按钮)将其关闭后,才能进行下一步操作。
var truthBeTold = window.confirm(“单击“确定”继续。单击“取消”停止。”);
if (truthBeTold) {
window.alert(“欢迎访问我们的 Web 页!”);
} else window.alert(“再见啦!”);
这里写图片描述
3)提示消息框prompt
提示消息框提供了一个文本字段,用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数,则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则,默认文本为 “”。
与alert( ) 和 confirm( ) 方法类似,prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框
var theResponse = window.prompt(“欢迎?”,”请在此输入您的姓名。”);
其中theResponse是弹窗中的输入值
在实践中发现和上述不太一样这里写图片描述
所以我们在网站上看到的有title,有msg的都是自定义的弹窗,可以参考

5、

发布了66 篇原创文章 · 获赞 5 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/yuemitengfeng/article/details/79494483