摘要:基于的框架仿的社区服务端渲染,主要是为了优化以及首屏加载速度线上地址地址技术栈目录结构配置文件封装工具函数滚动条操作函数静态资源实例化之前执行的插件注册全局组件注册全局服务端渲染时保存供服务端请求时的获取页面级组件首页登录页未读消
nuxt-cnode
</>复制代码
基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度
线上地址 http://nuxt-cnode.foreversnsd.cn
github地址 https://github.com/Kim09AI/nu...
vue
vue-router
vuex
nuxt
axios
simplemde
ES6/7
stylus
目录结构</>复制代码
├─npm-shrinkwrap.json
├─nuxt.config.js # nuxt配置文件
├─package.json
├─README.md
├─utils
| ├─axios.js # axios封装
| ├─index.js # 工具函数
| └scroll.js # 滚动条操作函数
├─store # store
| ├─actions.js
| ├─getters.js
| ├─index.js
| ├─mutation-types.js
| ├─mutations.js
| ├─README.md
| └state.js
├─static # 静态资源
| ├─favicon.ico
| └README.md
├─plugins # vue实例化之前执行的插件
| ├─component.js # 注册全局组件
| ├─filter.js # 注册全局filter
| ├─README.md
| └ssrAccessToken.js # 服务端渲染时保存access_token,供服务端请求时的api获取
├─pages # 页面级组件
| ├─index.vue # 首页
| ├─login.vue # 登录页
| ├─README.md
| ├─user
| | ├─messages.vue # 未读消息页
| | ├─_id
| | | ├─index.vue # 用户信息页
| | | └collections.vue # 用户收藏的主题页
| ├─topic
| | ├─create.vue # topic创建页,复用为编辑页
| | ├─_id
| | | └index.vue # topic详情页
├─mixins # mixins
| └index.js
├─middleware # 中间件,页面渲染之前执行
| ├─auth.js # 用户权限中间件
| ├─checkRoute.js # 主要是对404页面的重定向
| └README.md
├─layouts # 布局
| ├─default.vue
| └README.md
├─filters # 全局filter
| └index.js
├─components
| ├─alert.vue # 提示组件
| ├─backTop.vue
| ├─clientPanel.vue
| ├─commentList.vue # 评论列表
| ├─commonFooter.vue
| ├─commonHeader.vue
| ├─mainLayout.vue # 页面内的主布局,划分左右两栏
| ├─markdown.vue # 基于simplemde封装的组件
| ├─messageList.vue # 消息列表
| ├─pageNav.vue # 分页组件
| ├─panel.vue
| ├─README.md
| ├─tabHeader.vue
| ├─topicCreatePanel.vue
| ├─topicList.vue # 文章列表
| └userInfoPanel.vue
├─assets
| ├─README.md
| ├─css
| | ├─common.styl
| | ├─icon.styl
| | ├─index.styl
| | ├─mixin.styl
| | ├─reset.styl
| | └simplemdecover.styl
├─api # 请求api
| └index.js
实现的功能
首页
topic详情页
新建topic
编辑topic
收藏topic
用户收藏的topic
取消收藏topic
新建topic的评论
新建评论的评论
点赞评论
个人信息及用户信息
登录/退出
未读消息页
cookie的共享只要做服务端渲染,不管是vue还是react,都必然会遇到cookie共享的问题,因为在服务器上不会为请求自动带cookie,所以需要手动来为请求带上cookie,以下方法主要是借鉴vue-srr导出一个创建app、router、store工厂函数的方法,导出一个创建axios的工厂函数,然后把创建的axios实例注入store,建立store与axios一一对应的关系,
然后就可以通过store.$axios或state.$axios去请求就会自动带cookie了
</>复制代码
export const nuxtServerInit = async ({ commit, dispatch, state }, { req }) => {
let accessToken = parseCookieByName(req.headers.cookie, "access_token")
if (!!accessToken) {
try {
let res = await state.$axios.checkAccesstoken(accessToken)
if (res.success) {
let userDetail = await state.$axios.getUserDetail(res.loginname)
userDetail.data.id = res.id
// 提交登录状态及用户信息
dispatch("setUserInfo", {
loginState: true,
user: userDetail.data,
accessToken: accessToken
})
}
} catch (e) {
console.log("fail in nuxtServerInit", e.message)
}
}
}
导出一个创建axios的工厂函数
</>复制代码
class CreateAxios extends Api {
constructor(store) {
super(store)
this.store = store
}
getAccessToken() {
return this.store.state.accessToken
}
get(url, config = {}) {
let accessToken = this.getAccessToken()
config.params = config.params || {}
accessToken && (config.params.accesstoken = accessToken)
return axios.get(url, config)
}
post(url, data = {}, config = {}) {
let accessToken = this.getAccessToken()
accessToken && (data.accesstoken = accessToken)
return axios.post(url, qs.stringify(data), config)
}
// 返回服务端渲染结果时会用JSON.stringify对state处理,因为store与$axios实例循环引用会导致无法序列化
// 添加toJSON绕过JSON.stringify
toJSON() {}
}
export default CreateAxios
在创建store时创建axios并把axios注入store
</>复制代码
const createStore = () => {
let store = new Vuex.Store({
state,
getters,
mutations,
actions
})
store.$axios = store.state.$axios = new CreateAxios(store)
if (process.browser) {
let replaceState = store.replaceState.bind(store)
store.replaceState = (...args) => {
replaceState(...args)
store.state.$axios = store.$axios
replaceState = null
}
}
return store
}
export default createStore
之后就可以在asyncData函数中使用store.$axios、在组件内使用this.$store.$axios、在axtion中使用state.$axios或rootState.$axios发起请求了,这些请求都会自动的带上cookie中的东西
Build Setup</>复制代码
若该项目对你有帮助,欢迎 star
</>复制代码
# install dependencies
$ npm install # Or yarn install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm start
# generate static project
$ npm run generate
For detailed explanation on how things work, checkout the Nuxt.js docs.
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94073.html
摘要:原文链接开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是极不友好。基于它,我们可以快速开发一个基于的单页面应用。只有数据流存在相关配置时可用。引入后,所有页面均有效。 原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好。除非,vue 能在服务端渲染(ssr)并直接返回已经渲...
摘要:是一款基于的服务端渲染框架,跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的。 我们知道,SPA前端渲染存在两大痛点:(1)SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使...
摘要:是一款基于的服务端渲染框架,跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的。 我们知道,SPA前端渲染存在两大痛点:(1)SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使...
摘要:公司的招聘要求都提到了至少熟悉其中一种前端框架,有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型,并来说说选其技术的几大优势。技术的优势互联网前端大潮后,前端出现了大框架,分别是与。 1、技术选型的背景前端技术发展日新月异,互联网上出现的新型框架也比较多,如何让新招聘的人员...
摘要:为了解决问题,推出了服务端预渲染,以便提高对优化。应用,到了,单页面应用优秀的用户体验,逐渐成为了主流,页面整体式渲染出来的,称之为客户端渲染。客户端接收数据,然后完成最终渲染。通过对客户端服务端基础框架的抽象组织,主要关注的是应用的渲染。 现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular、React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前...
阅读 3783·2021-11-23 09:51
阅读 2113·2021-11-16 11:42
阅读 3413·2021-11-08 13:20
阅读 1199·2019-08-30 15:55
阅读 2278·2019-08-30 10:59
阅读 1337·2019-08-29 14:04
阅读 1213·2019-08-29 12:41
阅读 2308·2019-08-26 12:22