摘要:项目介绍利用服务端框架写的博客,喜欢就给个支持一下。运行部署使用说明关于演示不能上传图片,不能发表文章或者修改属于正常情况,因为只是为了展示。
next-blog 项目介绍
利用react服务端框架next.js写的博客,喜欢就给个Star支持一下。
https://github.com/Weibozzz/next-blog
线上地址: http://www.liuweibo.cn
本项目使用next.js经验分享:http://www.liuweibo.cn/p/206
软件架构说明
react.js next.js antd mysql node koa2 fetch
前端:React(16.x) Next.js antd-design fetch Less
后端:node框架koa和mysql (目前前后端分离,这里只负责写接口,和平常的ajax获取接口一样,这里就不开放源码了)
网站目的:业余学习,记录技术文章,学以致用
网站功能
markdown发布文章
修改文章(增删改查)
用户评论
上传图片到七牛云存储
安装教程1.快速开始
虽然是服务端渲染,但是也要调用接口,所以需要调用后端的接口
进入config文件夹下的env.js的isShow设置为true,这里只是调用了我自己线上的接口,当然你
只能看不能修改接口哦。如果为false则调不到接口,需要自己去写接口。
2.运行
cnpm i npm run dev
3.部署
cnpm i npm run build npm start使用说明
关于演示不能上传图片,不能发表文章或者修改属于正常情况,因为只是为了展示。
关于路看不到发布文章路由和后台管理也属于正常情况,可以修改代码展示路由效果。
网站截图1.详情页
2.列表页
3.编辑页面和发布文章,上传图片到七牛云
完全借助于 next.js 开发的个人网站,线上地址 http://www.liuweibo.cn 总结一下开发完成后的心得和使用体会。gtihub源码https://github.com/Weibozzz/next-blog。喜欢就给个Star支持一下。为什么使用服务器端渲染(SSR)?
网站是要推广的,所以需要更好的 SEO,搜索引擎可以抓取完整页面
访问速度,更快的加载静态页面
网站使用技术前端:React(16.x) Next.js antd-design fetch Less
后端:node框架koa和mysql (目前前后端分离,这里只负责写接口,和平常的ajax获取接口一样,这里就不开放源码了)
网站目的:业余学习,记录技术文章,学以致用
网站功能
发布文章
修改文章(增删改查)
用户评论
源码剖析这里就只讲重点了入口文件server.js
这里用的官方提供的express,同时开启gzip压缩
const express = require("express") const next = require("next") const compression = require("compression") const dev = process.env.NODE_ENV !== "production" const app = next({ dev }) const handle = app.getRequestHandler() let port= dev?4322:80 app.prepare() .then(() => { const server = express() if (!dev) { server.use(compression()) //gzip } //文章二级页面 server.get("/p/:id", (req, res) => { const actualPage = "/detail" const queryParams = { id: req.params.id } app.render(req, res, actualPage, queryParams) }) server.get("*", (req, res) => { return handle(req, res) }) server.listen(port, (err) => { if (err) throw err console.log("> Ready on http://localhost " port) }) }) .catch((ex) => { process.exit(1) })page根组件_app.js
用于传递redux数据,store就和普通react用法一样了,还有header和footer可以放在这里,同理还有_err.js用于处理404页面
import App, {Container} from "next/app" import React from "react" import {withRouter} from "next/router" // 接入next的router import withReduxStore from "../lib/with-redux-store" // 接入next的redux import {Provider} from "react-redux" class MyApp extends App { render() { const {Component, pageProps, reduxStore, router: {pathname}} = this.props; return (网站的服务端渲染页面Blog页面) } } export default withReduxStore(withRouter(MyApp))
link用于跳转页面,利用as把原本的http://*.com?id=1变为漂亮的 /id/1
head可以嵌套meta标签进行seo
配置不需要seo的组件
import dynamic from "next/dynamic"; //不需要seo const DynasicTopTipsNoSsr = dynamic(import("../../components/TopTips"),{ ssr:false }) import React, {Component} from "react" import {connect} from "react-redux" import Router from "next/router" import "whatwg-fetch" // 用于fetch请求数据 import Link from "next/link"; // next的跳转link import Head from "next/head" // next的跳转head可用于seo class Blog extends Component { render() { return (静态资源) } } //这里才是重点,getInitialProps方法来请求数据进行渲染,达到服务端渲染的目的 Blog.getInitialProps = async function (context) { const {id = 1} = context.query let queryStringObj = { type: ALL, num: id, pageNum } let queryTotalString = {type: ALL}; const pageBlog = await fetch(getBlogUrl(queryStringObj)) const pageBlogData = await pageBlog.json() return {pageBlogData} } // 这里根据需要传入redux const mapStateToProps = state => { const {res, searchData, searchTotalData} = state return {res, searchData, searchTotalData}; } export default connect(mapStateToProps)(Blog){BLOG_TXT}»{COMMON_TITLE} {current}
根目录创建static文件夹,这里是强制要求,否则加载不到静态资源
配置antd和主题并且按需加载 主题配置antd-custom.less
@primary-color: #722ED0; @layout-header-height: 40px; @border-radius-base: 0px;
styles.less
@import "~antd/dist/antd.less"; @import "./antd-custom.less";
最后统一配置在公共head
按需加载配置
.babelrc文件
{ "presets": ["next/babel"], "plugins": [ "transform-decorators-legacy", [ "import", { "libraryName": "antd", "style": "less" } ] ] }
next.config.js文件配置
const withLess = require("@zeit/next-less") module.exports = withLess( { lessLoaderOptions: { javascriptEnabled: true, cssModules: true, } } )页面css
感觉和vue的scope一样,style的jsx,加了global为全局,否则只在这里生效
render() { return (页面顶部加载进度条)
import Router from "next/router" import NProgress from "nprogress" Router.onRouteChangeStart = (url) => { NProgress.start() } Router.onRouteChangeComplete = () => NProgress.done() Router.onRouteChangeError = () => NProgress.done()markdown发表文章和代码高亮
使用只需要marked("放入markdown字符串");
import marked from "marked" import hljs from "highlight.js"; hljs.configure({ tabReplace: " ", classPrefix: "hljs-", languages: ["CSS", "HTML, XML", "JavaScript", "PHP", "Python", "Stylus", "TypeScript", "Markdown"] }) marked.setOptions({ highlight: (code) => hljs.highlightAuto(code).value, gfm: true, tables: true, breaks: false, pedantic: false, sanitize: true, smartLists: true, smartypants: false });学累了,来个图放松下 参与贡献
Fork 本项目
新建 Feat_xxx 分支
提交代码
新建 Pull Request
遗留问题访问量大的时候要做数据缓存
cdn node查看图片日期
配置图片描述和更改
上传图片高质量暂未支持上传,上传代码改进
上传为刚好1M bug
登陆后支持收藏文章和修改评论
顶部加载滚动条首次没loading
增加koa子模块
评论支持markdown,评论内容过多建议去sf平台
待学习修改开发环境 warning.js:33 Warning: A component is contentEditable
eslint
关于作者 / Aboutgithub:https://github.com/Weibozzz
个人博客:http://www.liuweibo.cn
segmentfault:https://segmentfault.com/u/weibozzz
版权声明所有原创文章的著作权属于 Weibozzz。
作者:刘伟波
链接:http://www.liuweibo.cn/p/206
来源:刘伟波博客
本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/58021.html
摘要:细说后端模板渲染客户端渲染中间层服务器端渲染前端与后端渲染方式的发展大致经历了这样几个阶段后端模板渲染客户端渲染中间层服务器端渲染。与后端模板渲染刚好相反,客户端渲染的页面渲染都是在客户端进行,后端不负责任何的渲染,只管数据交互。 细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr) 前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染、客户端渲染、node ...
摘要:是一个基于和的服务器端和浏览器端的的前后端全栈应用框架。是的组件,并且会进行数据初始化不但可以支持的数据初始化,还可以合并和的,使用同一个,和的无缝结合。 koa-cola是一个基于koa和react的服务器端SSR(server side render)和浏览器端的SPA(single page application)的web前后端全栈应用框架。 koa-cola使用typescr...
摘要:斯坦福宣布使用作为计算机课程的首选语言近日,某位有年教学经验的斯坦福教授决定放弃,而使用作为计算机入门课程的教学语言。斯坦福官方站点将它们新的课程描述为是最流行的构建交互式的开发语言,本课程会用讲解中的实例。 前端每周清单第 11 期:Angular 4.1支持TypeScript 2.3,Vue 2.3优化服务端渲染,优秀React界面框架合集 为InfoQ中文站特供稿件,首发地址为...
摘要:在整个年,看到发布版增加了许多功能,包括新的生命周期方法新的上下文指针事件延迟函数和。它在等待渲染异步响应时数据,是延迟函数背后用来管理组件的代码分割的。发布自第版开始将近年后,于年发布。 前端发展发展迅速,非常的快。 本文将回顾2018年一些重要的前端新闻,事件和 JavaScript 趋势。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! showImg(ht...
摘要:服务端渲染两种方式根据上文介绍对服务端渲染利弊有所了解,我们可以根据利弊权衡取舍,最近在做服务端渲染的项目,找到多种服务端渲染解决方案,大致分为两类。第一种方式传统方式服务端渲染,解决用户体验和更好的,有诸多工具使用这种方式如的的等。 最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权...
阅读 2120·2023-04-25 14:29
阅读 1214·2021-11-22 09:34
阅读 2495·2021-11-22 09:34
阅读 3242·2021-11-11 10:59
阅读 1608·2021-09-26 09:46
阅读 1989·2021-09-22 16:03
阅读 1731·2019-08-30 12:56
阅读 375·2019-08-30 11:12