react ssr php,react 服务端(ssr) 框架next.js开发个人网站分享

next-blog

项目介绍

软件架构

软件架构说明

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.编辑页面和发布文章，上传图片到七牛云

网站技术介绍

为什么使用服务器端渲染(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 (

)

}

}

export default withReduxStore(withRouter(MyApp))

网站的服务端渲染页面Blog页面

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 (

{BLOG_TXT}»{COMMON_TITLE}

{current}

)

}

}

//这里才是重点，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)

静态资源

根目录创建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

content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>

按需加载配置

.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 (

.fl{

float: left;

}

.fr{

float: right;

}

`}

)

页面顶部加载进度条

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

关于作者 / About

版权声明

所有原创文章的著作权属于 Weibozzz。

作者：刘伟波

本文原创版权属于刘伟波 ，转载请注明出处，谢谢合作