上一次搞定了登录验证和跳转的问题,不过存在一处bug。在Vue的main.js中,使用了Vue-router的路由钩子来判断是否可以访问受保护的资源,问题就出在这里,先修复上次的bug。 /* 全局路由钩子 访问资源时需要验证localStorage中是否存在token 以及token是否过期 验证成功可以继续跳转 失败返回登录页重新登录*/ router.beforeEach((to, from, next) => {if(localStorage.token && new Date().getTime() < localStorage.tokenExpired)...
1、HTML模板和字符串模板 HTML模板:直接在HTML页面挂载的模板。(即非字符串模板)非字符串模板:在单文件里用 <template></template> 指定的模板,换句话说,写在 html 中的就是非字符串模板。 字符串模板:在js字符串中定义的模板。 2、Props属性:HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名): (1)、HTML模板: Vue....
相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是 他没有一个html该有的样子。。。 所以我还是决定使用swig,页面结构,样子都是熟悉的样子,使用起来顺手了许多。很多朋友也在纠结二者的优缺点,这个根据需求因人而异吧 这是两者的比较http://vschart.com/compare/swig-template-engine/vs/jade-template-engin下面我们一起学习下swig这个前端模板引擎 swig的简单介绍 swig是JS模板...
1、文档声明 我们在开始写一个 html 页面的时候,首先要写上 DOCTYPE 文档声明的,现在通常情况下我们都是采用 HTML5 的文档声明方式,那么在 jade 里面我们应该怎么写呢? 在 jade 里面编写文档声明有2种方式: 我们可以直接在 jade 文件里面写 doctype html 即可jade 为我们提供了一个简单的写法,(不过好像 jade 在升级之后的新版本中不推荐使用此方法了 -_-||| )当然,jade 还默认支持其他类型的文档声明,只需要使用 doctype ...
在“Node.js开发入门——Express安装与使用”里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本的目录结构、模板、stylesheet、routers等。虽然那只是一个简单的HelloWorld类的小东西,可里面包含的内容还是有些多了,为了更好的理解Express所支持的jade模板引擎的用法,我们这次提供一个手动创建的小网站,可以显示来访者的IP,并对访问进行计数。 安装jade npm install -g jade执行上面...
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来。为了使用户界面与业务数据(内容)分离,就产生了『模板引擎』这个概念。说的简单点,模板引擎就是一个字符串中有几个变量待定,通过模板引擎函数把数据动态的塞进去。今天我们就来聊一聊 Jade 的使用方法和语法说明。Jade官网:jade-lang.com/ Jade 命...
背景我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略。同源分别是:协议,域名,端口。如果浏览器访问服务器不同源的话,就会访问不到数据。那开发中常常访问的服务器不同源,那么可以借助一个服务器当做中介来访问需要访问的服务器从而获得数据。因为同源策略是浏览器的安全机制,而服务器之间是不受此限制的。之前vue-cli模板build文件夹下有dev-serve.js文件,可以在此文件中配置本地node服务器实现跨域,现在的模板...
这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下。 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境。百度搜索node,进入官网根据自己的操作系统进行下载即可。现在的版本都是自带npm的了。所以安装后,环境变量正常情况下会自动配置,开启一个命令行终...
如下所示: <div id="app"> <h1>我是直接写在构造器里的模板1</h1> </div> <template id="demo3"> <h1 style="color:red">我是选项模板3</h1> </template> <script type="x-template" id="demo4"> <h1 style="color:red">我是script标签模板4</h1> </script> <script> var vm=new Vue({ el:"#app", data:{ message:1 }, //第2种模板 写在构造器里 //template:`<h1 style="color:red">我是选项模板2</h1>` //第3种模板 写在<temp...
本文为大家分享了微信小程序模板template的使用方法,供大家参考,具体内容如下 效果图 以MUI的实例首页和列表页面为实例 通过上图,可以看出两个页面的列表部分很相近,以每行作为单元制作模板。template模板 1、模板存放的位置以及使用模板页面存放的位置 template模板的WXML <!--右侧无箭头 --> <template name="listNone"><view class="tui-menu-list"><navigator url="{{item.url}}"><block><text>{{item.title}}</text></blo...
什么是ejsExcel? ejsExcel是一款国人开发的、在Node.js应用程序中使用我们预先设置好的Excel模板导出Excel表格的模板引擎。 Excel模板导出后Github地址ejsExcel 如果因为众(ni)所(dong)周(de)知的原因打不开github,没有关系,它的语法很简单,都是一些对Excel模板格式的定义:这篇文章是我在工作中因为业务需要,用到了ejsExcel这个模板引擎,觉得很不错,但是坑也不少。而网上相关的资料又太少,所以趁此机会总结了一下我...
Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近。并且,Jade也支持空格。 1、标签 在Jade里,一行开头的任何文本都被默认解释成HTML标签。并且你只需要你写开始标签——注意:不需要加“<>”。因为Jade会帮我们渲染闭合和开始标签。例如: body div h1 Jade是Node.js的一个模板引擎p 它借鉴了Haml的很多地方,所以语法上和Haml比较相近。div footer © Pandora上面的Jade模板最终渲染出的HTM...
安装环境 安装node.js并配置环境变量安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org安装webpack,cnpm install webpack -g安装脚手架npm install vue-cli -g创建项目 在硬盘上找一个文件夹放工程用的,在终端中进入该目录,cd目录路径 根据模板创建项目,vue init webpack-simple 工程名字<工程名字不能用中文>,vue init webpack 工程名字<工程名字不能用中文>,模板解读cd进入创建的工程目录安装项...
React 组件化思想受到越来越多开发者的关注,组件化思想帮助开发者将页面解耦成一个一个组件,代码更加模块化, 更易扩展。而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是: 需要学习各类模板引擎定义的语法,如 {{if}}, {{loop}}对组件化支持不够强,实现复杂,不易用针对以上痛点,笔者基于 React 造出了 noox 这样一个工具,专注于后端模板的解析,让模板解析更加简单,易用。 使用方法 安装 npm install noox简...
1、github github地址:https://github.com/MengFangui/VueProjectTemplate 2、webpack配置 (1)基础配置webpack.base.config.js const path = require(path); //处理共用、通用的js const webpack = require(webpack); //css单独打包 const ExtractTextPlugin = require(extract-text-webpack-plugin); module.exports = {//入口文件entry: {main: ./src/main,vendors: ./src/vendors},output: {path: path.join(__dirname, ./di...