{BLOG_TXT}»{COMMON

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","Weibozzz","page",1,"limit",20,"total","id","34829","avatar_url","https://avatars1.githubusercontent.com/u/28883104?v=4","githubUsername","create_at","2018-09-13 11:45:46.484","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":31,"_47":48,"_25":44,"_49":50},"36482","author_id","tab","share","content","# next-blog\r\n\r\n## 项目介绍\r\n利用react服务端框架next.js写的博客，喜欢就给个Star支持一下。\r\n[https://github.com/Weibozzz/next-blog](https://github.com/Weibozzz/next-blog)\r\n线上地址： [http://www.liuweibo.cn](http://www.liuweibo.cn)\r\n本项目使用next.js经验分享：[http://www.liuweibo.cn/p/206](http://www.liuweibo.cn/p/206)\r\n\r\n## 软件架构\r\n软件架构说明\r\n`react.js next.js antd mysql node koa2 fetch `\r\n\r\n## 网站使用技术\r\n\r\n- 前端：React(16.x) Next.js antd-design fetch Less\r\n- 后端：node框架koa和mysql （目前前后端分离，这里只负责写接口，和平常的ajax获取接口一样，这里就不开放源码了）\r\n- 网站目的：业余学习，记录技术文章，学以致用\r\n- 网站功能\r\n - markdown发布文章\r\n - 修改文章（增删改查）\r\n - 用户评论\r\n - 上传图片到七牛云存储\r\n\r\n## 安装教程\r\n\r\n1. 快速开始\r\n虽然是服务端渲染，但是也要调用接口，所以需要调用后端的接口\r\n\r\n**进入config文件夹下的env.js的isShow设置为true**,这里只是调用了我自己线上的接口，当然你\r\n只能看不能修改接口哦。如果为false则调不到接口，需要自己去写接口。\r\n\r\n\r\n2. 运行\r\n```bash\r\ncnpm i\r\nnpm run dev\r\n```\r\n3. 部署\r\n```bash\r\ncnpm i\r\nnpm run build\r\nnpm start\r\n```\r\n\r\n\r\n## 使用说明\r\n\r\n- 关于演示不能上传图片，不能发表文章或者修改属于正常情况，因为只是为了展示。\r\n- 关于路看不到发布文章路由和后台管理也属于正常情况，可以修改代码展示路由效果。\r\n\r\n## 网站截图\r\n\r\n1. 详情页\r\n![http://pd96wjt4m.bkt.clouddn.com/image/common/detail_1536836727000_459470_1536836749510.png](http://pd96wjt4m.bkt.clouddn.com/image/common/detail_1536836727000_459470_1536836749510.png)\r\n2. 列表页\r\n![http://pd96wjt4m.bkt.clouddn.com/image/common/list_1536836639000_822188_1536836780676.png](http://pd96wjt4m.bkt.clouddn.com/image/common/list_1536836639000_822188_1536836780676.png)\r\n3. 编辑页面和发布文章，上传图片到七牛云\r\n![http://pd96wjt4m.bkt.clouddn.com/image/common/edit_1536836607000_802376_1536836825962.png](http://pd96wjt4m.bkt.clouddn.com/image/common/edit_1536836607000_802376_1536836825962.png)\r\n\r\n\r\n## 网站技术介绍\r\n> 完全借助于 [next.js](https://github.com/zeit/next.js) 开发的个人网站，线上地址 [http://www.liuweibo.cn](http://www.liuweibo.cn) 总结一下开发完成后的心得和使用体会。gtihub源码[https://github.com/Weibozzz/next-blog](https://github.com/Weibozzz/next-blog)。喜欢就给个Star支持一下。\r\n\r\n### 为什么使用服务器端渲染(SSR)？\r\n- 网站是要推广的，所以需要更好的 SEO，搜索引擎可以抓取完整页面\r\n- 访问速度，更快的加载静态页面\r\n\r\n### 网站使用技术\r\n\r\n- 前端：React(16.x) Next.js antd-design fetch Less\r\n- 后端：node框架koa和mysql （目前前后端分离，这里只负责写接口，和平常的ajax获取接口一样，这里就不开放源码了）\r\n- 网站目的：业余学习，记录技术文章，学以致用\r\n- 网站功能\r\n - 发布文章\r\n - 修改文章（增删改查）\r\n - 用户评论\r\n\r\n### 源码剖析\r\n> 这里就只讲重点了\r\n\r\n#### 入口文件`server.js`\r\n这里用的官方提供的`express`，同时开启`gzip`压缩\r\n\r\n```js\r\nconst express = require('express')\r\nconst next = require('next')\r\n\r\nconst compression = require('compression')\r\nconst dev = process.env.NODE_ENV !== 'production'\r\nconst app = next({ dev })\r\nconst handle = app.getRequestHandler()\r\nlet port= dev?4322:80\r\n\r\napp.prepare()\r\n .then(() => {\r\n const server = express()\r\n\r\n if (!dev) {\r\n server.use(compression()) //gzip\r\n }\r\n //文章二级页面\r\n server.get('/p/:id', (req, res) => {\r\n const actualPage = '/detail'\r\n const queryParams = { id: req.params.id }\r\n app.render(req, res, actualPage, queryParams)\r\n })\r\n\r\n server.get('*', (req, res) => {\r\n return handle(req, res)\r\n })\r\n\r\n server.listen(port, (err) => {\r\n if (err) throw err\r\n console.log('> Ready on http://localhost ' port)\r\n })\r\n })\r\n .catch((ex) => {\r\n process.exit(1)\r\n })\r\n\r\n```\r\n#### page根组件_app.js\r\n用于传递redux数据,store就和普通react用法一样了，还有header和footer可以放在这里,同理还有`_err.js`用于处理404页面\r\n\r\n```js\r\n\r\nimport App, {Container} from 'next/app'\r\nimport React from 'react'\r\nimport {withRouter} from 'next/router' // 接入next的router\r\nimport withReduxStore from '../lib/with-redux-store' // 接入next的redux\r\nimport {Provider} from 'react-redux'\r\n\r\n\r\nclass MyApp extends App {\r\n render() {\r\n\r\n const {Component, pageProps, reduxStore, router: {pathname}} = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withReduxStore(withRouter(MyApp))\r\n\r\n```\r\n#### 网站的服务端渲染页面Blog页面\r\n - `link`用于跳转页面，利用as把原本的http://***.com?id=1变为漂亮的 /id/1\r\n - `head`可以嵌套meta标签进行seo\r\n - 配置不需要seo的组件\r\n\r\n```js\r\nimport dynamic from 'next/dynamic';\r\n\r\n//不需要seo\r\nconst DynasicTopTipsNoSsr = dynamic(import('../../components/TopTips'),{\r\n ssr:false\r\n})\r\n\r\nimport React, {Component} from 'react'\r\nimport {connect} from 'react-redux'\r\nimport Router from 'next/router'\r\nimport 'whatwg-fetch' // 用于fetch请求数据\r\nimport Link from 'next/link'; // next的跳转link\r\nimport Head from 'next/head' // next的跳转head可用于seo\r\n\r\nclass Blog extends Component {\r\n\r\n render() {\r\n return (\r\n

\r\n \r\n {BLOG_TXT}»{COMMON_TITLE}\r\n \r\n \r\n \r\n {current}\r\n \r\n \r\n

\r\n )\r\n }\r\n}\r\n//这里才是重点，getInitialProps方法来请求数据进行渲染，达到服务端渲染的目的\r\nBlog.getInitialProps = async function (context) {\r\n const {id = 1} = context.query\r\n let queryStringObj = {\r\n type: ALL,\r\n num: id,\r\n pageNum\r\n }\r\n let queryTotalString = {type: ALL};\r\n const pageBlog = await fetch(getBlogUrl(queryStringObj))\r\n const pageBlogData = await pageBlog.json()\r\n\r\n\r\n return {pageBlogData}\r\n}\r\n// 这里根据需要传入redux\r\nconst mapStateToProps = state => {\r\n const {res, searchData, searchTotalData} = state\r\n return {res, searchData, searchTotalData};\r\n}\r\nexport default connect(mapStateToProps)(Blog)\r\n\r\n```\r\n\r\n#### 静态资源\r\n根目录创建`static`文件夹，这里是强制要求，否则加载不到静态资源\r\n#### 配置antd和主题并且按需加载\r\n#### 主题配置\r\nantd-custom.less\r\n```css\r\n@primary-color: #722ED0;\r\n\r\n@layout-header-height: 40px;\r\n@border-radius-base: 0px;\r\n\r\n```\r\nstyles.less\r\n```css\r\n@import \"~antd/dist/antd.less\";\r\n@import \"./antd-custom.less\";\r\n\r\n```\r\n最后统一配置在公共`head`\r\n```html\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n```\r\n#### 按需加载配置\r\n`.babelrc`文件\r\n\r\n```json\r\n{\r\n \"presets\": [\"next/babel\"],\r\n \"plugins\": [\r\n \"transform-decorators-legacy\",\r\n [\r\n \"import\",\r\n {\r\n \"libraryName\": \"antd\",\r\n \"style\": \"less\"\r\n }\r\n ]\r\n ]\r\n}\r\n\r\n```\r\n`next.config.js`文件配置\r\n```js\r\nconst withLess = require('@zeit/next-less')\r\n\r\nmodule.exports = withLess(\r\n {\r\n lessLoaderOptions: {\r\n javascriptEnabled: true,\r\n cssModules: true,\r\n\r\n }\r\n }\r\n)\r\n\r\n```\r\n#### 页面css\r\n感觉和`vue`的`scope`一样，`style`的`jsx`,加了`global`为全局，否则只在这里生效\r\n```js\r\nrender() {\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n )\r\n```\r\n\r\n#### 页面顶部加载进度条\r\n```js\r\nimport Router from 'next/router'\r\nimport NProgress from 'nprogress'\r\n\r\nRouter.onRouteChangeStart = (url) => {\r\n NProgress.start()\r\n}\r\nRouter.onRouteChangeComplete = () => NProgress.done()\r\nRouter.onRouteChangeError = () => NProgress.done()\r\n```\r\n\r\n#### markdown发表文章和代码高亮\r\n使用只需要`marked('放入markdown字符串');`\r\n```js\r\nimport marked from 'marked'\r\nimport hljs from 'highlight.js';\r\n\r\nhljs.configure({\r\n tabReplace: ' ',\r\n classPrefix: 'hljs-',\r\n languages: ['CSS', 'HTML, XML', 'JavaScript', 'PHP', 'Python', 'Stylus', 'TypeScript', 'Markdown']\r\n})\r\nmarked.setOptions({\r\n highlight: (code) => hljs.highlightAuto(code).value,\r\n gfm: true,\r\n tables: true,\r\n breaks: false,\r\n pedantic: false,\r\n sanitize: true,\r\n smartLists: true,\r\n smartypants: false\r\n});\r\n```\r\n\r\n## 学累了，来个图放松下\r\n\r\n![http://pd96wjt4m.bkt.clouddn.com/image/common/2a35e89324d3ad64d52683ad1343732e_1535531349000_84470_1535531469641.jpg](http://pd96wjt4m.bkt.clouddn.com/image/common/2a35e89324d3ad64d52683ad1343732e_1535531349000_84470_1535531469641.jpg)\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n## 参与贡献\r\n\r\n1. Fork 本项目\r\n2. 新建 Feat_xxx 分支\r\n3. 提交代码\r\n4. 新建 Pull Request\r\n\r\n\r\n## 遗留问题\r\n\r\n1. 访问量大的时候要做数据缓存\r\n2. cdn node查看图片日期\r\n3. 配置图片描述和更改\r\n4. 上传图片高质量暂未支持上传,上传代码改进\r\n7. 上传为刚好1M bug\r\n10. 登陆后支持收藏文章和修改评论\r\n7. 顶部加载滚动条首次没loading\r\n8. 增加koa子模块\r\n9. 评论支持markdown，评论内容过多建议去sf平台\r\n\r\n\r\n### 待学习修改\r\n1. 开发环境 warning.js:33 Warning: A component is `contentEditable`\r\n5. eslint\r\n\r\n## 关于作者 / About\r\n\r\n- github:[https://github.com/Weibozzz](https://github.com/Weibozzz)\r\n- 个人博客:[http://www.liuweibo.cn](http://www.liuweibo.cn)\r\n- segmentfault:[https://segmentfault.com/u/weibozzz](https://segmentfault.com/u/weibozzz)\r\n\r\n## 版权声明\r\n- 所有原创文章的著作权属于 Weibozzz。\r\n\r\n作者：刘伟波\r\n\r\n链接：[http://www.liuweibo.cn/p/206](http://www.liuweibo.cn/p/206)\r\n\r\n来源：[刘伟波博客](http://www.liuweibo.cn)\r\n\r\n本文原创版权属于刘伟波，转载请注明出处，谢谢合作","title","react 服务端(ssr) 框架next.js开发个人网站分享","last_reply_at","2018-09-14 08:19:54.468","good","top","visit_count",5067,"author",{"_13":14,"_22":23}]