Nuxt.js项目实战
感悟
经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给予帮助,再次感谢Nuxt.js的开发团队。
路由鉴权
第一个拦路虎就是登陆时候的鉴权问题,如何把token保存到本地。官方使用express-session解决这个问题,但是这样做后端也需要使用nodejs,而我们公司使用的PHP。转念一想或许cookie可以一试,于是我是这样做的:
app.post('/api/login', function (req, res) {
// 后台验证用户信息,并返回token
async function login () {
const { data } = await axiosServer.post('/login', req.body)
return data
}
login().then(function (data) {
// 把token存储到cookie中
const { token } = data
if (token) {
res.cookie('token', token, {
maxAge: 60000 * 60 * 24
})
}
// 原封不动返回
return res.json(data)
})
})
我把登录请求用nodejs做了一次转发,把用户提交的数据传给后端,后端返回的token设置到cookie里,然后把数据返会给前端,前端再用vuex保存token状态,这样token同时存在于cookie和内存里,刷新页面也是正常的
前端存储token:
async nuxtServerInit ({ dispatch, commit }, { req, res }) {
if (req.cookies && req.cookies.token) {
// 存储token
commit('SET_USER', req.cookies.token)
}
},
// SET_USER
SET_USER (state, token) {
state.token = token
},
于是这个问题就这样解决了,所有需要存储到本地的数据都可以这样做来解决
渲染组件内的数据
另一个小问题是components里数据如何渲染。在Nuxt.js中只有page里的组件有fetch
和asyncData
方法,所以当我们使用layout布局页面时如果组件需要请求数据,就无法渲染了,解决方法是在nuxtServerInit
方法里初始化组件内的数据,如下:
async nuxtServerInit ({ dispatch, commit }, { req, res }) {
// 初始化组件内的数据
await dispatch('ADMIN_INFO')
await dispatch('TAGS')
await dispatch('ARCHIVES')
}
这样组件内的数据也可渲染成功了
过滤器的使用
Nuxt.js的plugins设计的个人感觉还是很人性化的,用起来简直是不能再简单。在plugins新建一个filters.js,过滤器可以这样玩:
import Vue from 'vue'
// 时间格式化
export function formatDate (date, fmt) {
let newDate = new Date(date)
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (newDate.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': newDate.getMonth() + 1,
'd+': newDate.getDate(),
'h+': newDate.getHours(),
'm+': newDate.getMinutes(),
's+': newDate.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
let filters = {
formatDate
}
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
export default filters
然后在nuxt.config.js中注册一下:
plugins: [
'~plugins/filters.js'
]
在组件中就可以这样happy的用起来了:
<!-- 时间格式化 -->
<div>
<span>{{date | formatDate('yyyy-MM-dd')}}</span>
</div>
中间件
比如说用户未登录状态下,通过路由闯入了需要鉴权的页面,我们可以自定义一些错误:
// auth.js
export default function ({ store, error }) {
// 可通过组件的props接收error信息
if (!store.state.token) {
error({
message: 'cookie失效或未登录,请登录后操作',
statusCode: 403
})
}
}
在组件中使用该中间件:
export default {
middleware: 'auth',
// 还可以把用户重定位到登录页
fetch ({redirect, store}) {
if (!store.state.token) {
redirect('/login')
}
},
}
多级路由嵌套
官方说这种情况用的较少,但是我发现用的挺多的,比如说不同分类又有不同分页,这样分类和分页都要是动态路由,如图所示:
编译后的结果:
项目部署
大概在8月份时候,写了几篇关于如何部署nodejs项目的文章,回头看写的果然比较菜,随着时间推移,修复了一些错误,发现了一些错误,整体写的太乱。于是抽了一天时间,在新的服务器上一边实践一边记录,把上面几篇文章用gitbook汇总了一下,不在这里展开了,太长了,增加了自动部署的相关内容
项目实践
这个小项目是我在几月前写的,最近一月用Nuxt.js进行了重构,前端使用了Nuxt.js + vuex,后端使用了Nodejs + MongoDB, 用vue写了一个markdown编辑器,支持图片上传和服务端渲染,效果图:
首页
编辑器
Nuxt.js项目实战的更多相关文章
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- 前端技术之:使用npx创建一个Nuxt.js项目
$ npx create-nuxt-app my-first-nuxtjs npx: 401 安装成功,用时 43.891 秒 > Generating Nuxt.js project in / ...
- 第10章-Vue.js 项目实战
一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...
- React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法
在前段时间折腾过搭建react服务器端项目架构,点击这里了解下,正好最近有个重构PC网站的需求,考虑SEO等因素.在做技术选型的时候决定采用nextjs.项目开发过程中,nextjs的体验非常棒,个人 ...
- Vue.js项目实战-多语种网站(租车)
首先来看一下网站效果,想写这个项目的读者可以自行下载哦,地址:https://github.com/Stray-Kite/Car: 在这个项目中,我们主要是为了学习语种切换,也就是右上角的 中文/En ...
- Vue.js项目实战-打造线上商城
首先上一下完成后的效果: 首页: 商品详情页: 购物车页(其实还有个订单页,只是和购物车页基本类似,所以就不截图啦): 开始项目: 由于涉及的是前后端分离,所以我们的后台数据就模拟存储于浏览器端(co ...
- Vue(三十二)SSR服务端渲染Nuxt.js
初始化Nuxt.js项目步骤 1.使用脚手架工具 create-nuxt-app 创建Nuxt项目 使用yarn或者npm $ yarn create nuxt-app <项目名> 注:根 ...
- Nuxt.js 学习笔记
起源 最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作.搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成 ...
- Nuxt.js开启SSR渲染快速入门
第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多 ...
随机推荐
- Linux TC(Traffic Control)框架原理解析
近日的工作多多少少和Linux的流控有点关系.自打几年前知道有TC这么一个玩意儿而且多多少少理解了它的原理之后,我就没有再动过它,由于我不喜欢TC命令行,实在是太繁琐了.iptables命令行也比較繁 ...
- ActiveX学习笔记二 ActiveX在IE中安全级别问题-实现IObjectSafety接口
http://blog.csdn.net/freedomqx/article/details/4955512 使用MFC开发ActiveX控件,在IE中会提示安全问题,这个可以通过实现IObjectS ...
- [Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例
转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮 ...
- WordPress主题开发:输出指定页面导航
实例: <ul> <li class="widget widget_nav_menu"> <?php if(is_page(array(12,14,1 ...
- Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘.dot.mul运算详解 2016年09月02日 00:00:36 -牧野- 阅读数:59593 标签: Opencv矩阵相乘点乘dotmul 更多 个人分类: O ...
- STM32 F103 F407 F429 F767对比图
- zeromq学习笔记2——简单的客户端和服务端测试程序
1.前言 zeromq提供了guide,http://zguide.zeromq.org/,可以帮助新手快速上手,提供了C\C++\PHP等多种语言. 2.测试程序 使用zeromq给的hwserve ...
- Spark:实现行转列
示例JAVA代码: import static org.apache.spark.sql.functions.col; import static org.apache.spark.sql.funct ...
- sublime text3怎么安装Package Control
sublime text3地址:https://packagecontrol.io/installation#st3 1.打开Preferences——Browse Packages,打开一个文件夹C ...
- sql语句语法
13.1. 数据定义语句 . ALTER DATABASE语法 . ALTER TABLE语法 . CREATE DATABASE语法 . CREATE INDEX语法 . CREATE TABLE语 ...