應同學要求,本人將react項目創建后台及上線流程書寫如下:
前端部分
略……
后台部分
(注:這里的后台是用的nodejs搭建的,使用的是express框架+ejs模板)
首先通過express快速搭建后台環境
express -e 項目名
cd 項目名
npm i
有可能你的電腦里面沒有全局安裝express獲安裝了頁顯示不是內部命令,這時,就需要使用如下命令在命令提示符里面下載.
命令如下:
npm install -g express-generator npm install -g express
然后跟着操作就行了
后台環境搭建好后如果是用的假數據就可以在路由里進行配置了,具體配置如下:
router.get('/lists', function(req, res, next) {
https.get("https://api.mlwei.com/music/api/?key=523077333&id=3641614987&type=songlist&cache=1&size=hq",(getRes)=>{ var content =""; // var doubanData=[]; getRes.on("data",(chunk)=>{ content+=chunk;//得到數據,並拼接到一起 }); getRes.on("end",()=>{ // 數據傳輸結束 var data = JSON.parse(content); //輸出到頁面上,以對象的形式 res.send(JSON.stringify(data)); // console.log(JSON.stringify(doubanData)) }) }) });
注:此處代碼僅供參考,主要是為了給前端提供數據接口、如果是假數據可以這樣做。
倘若你是使用的反向代理進行代理的別人的數據。那么可以看下面這一種方式。在后台進行反向代理
首先,需要下載一個中間件
npm i -S http-proxy-middleware
然后,引入兩個模塊
var proxy = require('http-proxy-middleware');
最后,進行配置
app.use('/music/api/*', proxy({target: 'https://api.mlwei.com/', changeOrigin: true}));
然后將前端文件進行npm run build
得到如下文件:
然后,將所文件拷貝到后台的根目錄的public中
將index.html文件的后綴改為ejs,並放在后台文件的根目錄下的views中
這樣,就可以運行后台文件,看一下運行起后是否能得到數據,如果能得到數據,說明反向代理配置成功了,就可以進行上線啦。
上線部分
想要將項目方在線上,就需要找一個第三方平台去創建一個雲應用,這里就以新浪雲為例:
在新浪雲上創建好一個應用后,會得到
這樣的信息,然后我們將后台的除了node_modules的其他所有文件放入一個文件夾,將其git到這個遠程倉庫中就可以啦。