前言：真正意義上的前后端分離，前端ssr服務器渲染頁面，加載靜態資源，數據還是儲存在后台服務器中。
1.packjson配置：
“script”:{ "dev": "node server", "start": "npm run build && cross-env NODE_ENV=production node server", // start命令即創造生產環境 "export": "next export", "build": "next build" }
2.強制把異步操作同步：
(1) async function(){ await axios請求 }
在使用 async/await 的時候，可以使用 Promise.all 來 await 多個 async 函數
await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
(2) co,yield
import co from 'co' co(function * () { // *代表是異步的 let result = yield Promise.resolve(1) console.log(result) // 1 }).catch(function (err) { console.log(err) })
3.react生命周期（^15.6.2）:
componentWillMount()
在組件掛載之前調用一次。如果在這個函數里面調用setState，本次的render函數可以看到更新后的state，並且只渲染一次。
componentDidMount()
在組件掛載之后調用一次。這個時候，子主鍵也都掛載好了，可以在這里使用refs(dom)。 // ssr渲染此生命周期被取消掉,直接用:
static getInitialProps = async (props) => { const channelRes = await fetcher(', {}) const channelInfos = channelRes.data return { channelRes, channelInfos, } }
componentWillUnMount() { clearInterval(this.timer); }
組件被銷毀時調用，如果有計時器記得把組件內的計時器clear掉
4.react規范：
map生成的元素需要key值，組件合理閉合，無需包裹其他元素要 />結束
jsx寫法：<>內容html渲染,{ }花括號內容js渲染，return（）圓括號寫內容 (jsx內組件名要大寫字母開頭！！！)
react性能優化:
盡量減少無意義的render,可用PureComponent（淺比較）或者 react-addons-pure-render-mixin插件,
import React, { Component } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
class App extends Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
5.設置默認props(react) :
static getDefaultProps = async ()=> {
await axios 請求
return {your need props}
}
next.js中用getInitialProps獲取初始化數據,服務器渲染,componentDidmount周期失效
注：此props只最外層組件可用，子組件請用react生命周期請求接口
6.監視HTTP請求，獲得url參數：
運用next.js服務端框架渲染頁面，server.js文件里：
const Koa = require('koa')
const router = require('koa-router')() //運用koa服務端解析框架搭開發環境
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev }) // dev可決定next庫的版本是開發環境還是生產環境
const MobileDetect = require('mobile-detect') //node里的方法，判斷請求源的設備信息
app.prepare() // next.js方法
.then(() => {
const server = new Koa()
router.get('/somePage/:somePageId', async (ctx) => {
const actualPage = '/somePage'
const queryParams = { somePageId: ctx.params.somePageId }
const md = new MobileDetect(ctx.req.headers['user-agent'])
if (md.phone()) {
ctx.redirect('https://baidu.com/play/' + ctx.params.somePageId) //重定向url
} else {
await app.render(ctx.req, ctx.res, actualPage, queryParams)//next.js框架方法，用於渲染頁面
}
server.listen(5677, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:5677')
}) // 啟動服務器並監視端口號5677
server.use(router.routes())
})
next.js里的render()方法用來手動渲染頁面，參數(req, res, '/a', query)：ctx.request,ctx.response,頁面路徑，路徑所帶參數(傳入一個對象)
<div dangerouslySetInnerHTML={{ __html:item.mdata.videos[0].intro.slice(0, 300) + '...' }}></div>
注：dangerouslySetInnerHTML和_html成套搭配
vue:
<div v-html=""></div>
8.es6語法：
模版字符串：`${props.height}px` === ' '+props.height+'px'
處理數組：map(遍歷並返回新數組),fliter(過濾並返回新數組),forEach(遍歷改變不返回新數組),reduce(累計並返回結果)
箭頭函數 ：const a =（a,b）=> a+b === function a(a,b){return a+b}
對變量的聲明 const:變量被聲明后就不被改變，let:變量上下文塊級作用域，聲明一次即可
參數賦默認值：var test =（params = {} ）=> { console.log(typeof params) } ； test(); //object (賦值為了防止忘了傳參數報錯)
{ a } === { a : a }
9.開發流程：
開發dev :package.json=>next.config.js=>server.js
生產start : next build => next.config.js=>server.js
10.數據請求：
前端用node服務器做頁面渲染，數據儲存還是在后台服務器里，
A服務器請求B服務器接口拿到數據，有兩種方法：
1.cros后台設返回設置允許瀏覽器跨域。（跨域是瀏覽器這邊的攔截）
2:Nginx轉發
3:node的request模塊做代理
下面介紹node怎么做轉發：
const Koa = require('koa')
const router = require('koa-router')()
const request = require(‘request’) //做轉發
const app = next()
app.prepare()
.then(() => {
router.post('/api', function (req, res, next) {
const objUrl = 'url§ionid=' + req.body.activityId
request(objUrl, function (error, response, body) {
if (!error && response.statusCode === '200') {
res.send(body)
}
})
})
})