Angular+nodeJS+redis前端自測開發模式

Jucuzzi發表於2019-04-16
AngularNodeJSRedis前端模式

為什麼要這樣搞？

這段時間在開發一個較大的專案，後臺前期的準備時間會比較長，後期開發很快，而前臺的前期開發會比較快，後期開發也需要等比例的時間，在進度上存在不協調的情況，後臺的介面格式已經給出，雖然可以直接mockjson返回，但是在諸多（比如說新增，刪除，修改）這些需要有響應的操作面前也顯得十分無力，需要一個簡易後臺，能滿足即時開發和除錯的需要，具體有以下需求：

  1. 自動化，別配個環境半天時間
  2. 協同開發，彼此的資料庫可以不一樣，但基礎必須一致
  3. 高效能，別編譯一下☕都涼了
  4. 親和力好，最好就是js，作為前端寫起來看起來也方便

於是在這些條件的篩選下，最後我選擇了nodejs+redis的方案，啟動編譯很快，資料庫的遷移備份和主從都很方便

這套東西怎麼用？

工程目錄結構

|—mock_server		// 模擬後臺的主目錄
	|——node_modules		// 主要有express，redis，body-parser等類庫
	|——rest		// 裡面放node的路由，根據模組分類，符合restful規範
        	|——case.js
        	|——...
        |——dump.rdb		// 用於同步協同開發的資料庫備份
	|——package.json
	|——changebase.sh    // 資料庫變基的時候使用
	|——setup.sh		// 安裝redis指令碼，確保redis版本一致，只執行一次
	|——startup.sh  	// 啟動redis，把dump.rdb放到redis的bin目錄下，恢復資料
	|——startmock.js		// node伺服器的入口函式
...
複製程式碼

指令碼內容

setup.sh

#!/bin/bash

# shell的執行選項：
# -n 只讀取shell指令碼，但不實際執行
# -x 進入跟蹤方式，顯示所執行的每一條命令
# -c "string" 從strings中讀取命令

# 下載目錄
downloadsDir=/root/Downloads
# 安裝目錄
appDir=/usr/local/redis

# 判斷備份目錄是否存在，不存時新建目錄 
[ ! -d $downloadsDir ] && mkdir -p $downloadsDir
cd $downloadsDir

# 下載、解壓、編譯
curl -o redis-stable.tar.gz http://download.redis.io/redis-stable.tar.gz
tar xvzf redis-stable.tar.gz
cd redis-stable
make && make test

# 若提示需要tcl或更高版本
# yum install -y tcl

# make完後，一般建議make test，我在make test時提示 You need tcl 8.5 or newer in order to run the Redis test
# wget http://prdownloads.sourceforge.net/tcl/tcl8.6.0-src.tar.gz
# 下載後，進入安裝目錄，進入unix，然後執行"./configure",然後make，然後make install

# 複製執行檔案
cp src/redis-server /usr/local/bin/
cp src/redis-cli /usr/local/bin/

# 建立目錄
mkdir /etc/redis
mkdir /var/redis
mkdir /var/redis/log
mkdir /var/redis/run
mkdir /var/redis/port

# 複製redis解壓根目錄中中的配置檔案模板
cp redis.conf /etc/redis/redis.conf

# 修改配置檔案
echo "################################ WLF DEFINE ##############################" >> /etc/redis/redis.conf
echo "daemonize yes" >> /etc/redis/redis.conf
echo "pidfile /var/redis/run/redis.pid" >> /etc/redis/redis.conf
echo "logfile /var/redis/log/redis.log" >> /etc/redis/redis.conf
echo "dir /var/redis/port" >> /etc/redis/redis.conf
複製程式碼

startup.sh

#!/bin/bash

mkdir /usr/local/redis/bin
cp ./dump.rdb /usr/local/redis/bin/dump.rdb
redis-server /etc/redis/redis.conf
複製程式碼

changebase.sh

#!/bin/bash
rm ./dump.rdb
cp /usr/local/redis/src/dump.rdb ./dump.rdb
複製程式碼

startmock.js

var express = require("express");
var redis = require("redis");
var bodyParser = require("body-parser");

const app = express();
var redisMaster = "127.0.0.1";
var redisClient = redis.createClient({ host: redisMaster, db: 1 });

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// Router設定
var vedioTalkRouter = require("./rest/xxx");
app.use("/xx/xxx/xxx/xxxx/xxx", vedioTalkRouter);

app.get("/xx/xxx/xxxx/xxx", function(req, res) {
  redisClient.get("xxx", function(err, items) {
    res.send(items);
  });
});

app.listen(3000);
複製程式碼

啟動流程

第一次啟動需要安裝redis./setup.sh 之後啟動時都./startup.sh 之後 node startmock.js 即可

資料庫基線調整

注意在有大的變更的時候，需要在終端使用

redis-cli  //連結預設本地redis
127.0.0.1:6379> bgsave   // 儲存當前資料庫快照
cd ./mock_server // cd到mock_server的目錄底下
./changebase.sh //執行changebase.sh
複製程式碼

這些操作會把/usr/local/redis/src中的dump.rdb拷出來，放到工程目錄下替換原來的rdb 當下一次redis-server的時候會把這個快照讀取到資料庫中

注意：高版本資料庫的快照低版本讀取不了，儘量不要提高redis版本號，如果有提高，則需要安裝redis-dump進行同步

資料訂正

在開發測試的過程中，需要檢視資料庫內容的時候可以使用rdm來進行檢視和修改

15_40_32__04_16_2019.jpg

體驗怎麼樣？

萬說不如一用，這東西的體感，棒，主要有以下幾個優點

  1. 在開發週期較長，較大的新專案時，前端可以加快開發進度，模擬後臺，基本脫離後臺
  2. 培養對業務邏輯的思考，前端如果僅僅是UI，和鹹魚有什麼區別，在開發簡易的後臺時，雖然是簡易，但會考慮到業務的邏輯和流程，加深理解，減少bug
  3. redis的API簡單好用，資料庫也相當簡單沒有外來鍵級聯等，開發簡直和飛一樣

相關文章