美文网首页程序员
Angular+nodeJS+redis前端自测开发模式

Angular+nodeJS+redis前端自测开发模式

作者: dragon清 | 来源:发表于2019-04-16 16:06 被阅读2次

为什么要这样搞?

这段时间在开发一个较大的项目,后台前期的准备时间会比较长,后期开发很快,而前台的前期开发会比较快,后期开发也需要等比例的时间,在进度上存在不协调的情况,后台的接口格式已经给出,虽然可以直接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
    |——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

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-server
bgsave

然后到/usr/local/redis/src中手动把dump.rdb拷出来,放到工程目录下替换原来的rdb,这部的自动化还在进行中

数据订正

在开发测试的过程中,需要查看数据库内容的时候可以使用rdm来进行查看和修改


15_40_32__04_16_2019.jpg

体验怎么样?

万说不如一用,这东西的体感,棒,主要有以下几个优点

  1. 在开发周期较长,较大的新项目时,前端可以加快开发进度,模拟后台,基本脱离后台
  2. 培养对业务逻辑的思考,前端如果仅仅是UI,和咸鱼有什么区别,在开发简易的后台时,虽然是简易,但会考虑到业务的逻辑和流程,加深理解,减少bug
  3. redis的API简单好用,数据库也相当简单没有外键级联等,开发简直和飞一样

相关文章

  • Angular+nodeJS+redis前端自测开发模式

    为什么要这样搞? 这段时间在开发一个较大的项目,后台前期的准备时间会比较长,后期开发很快,而前台的前期开发会比较快...

  • 开发团队拦截80%bug最直接的方法

    在开发过程中,都是需要开发团队自测的,例如前端流程开发,前端开发团队主要是做页面数据与后台数据的交互,然后就是页面...

  • 猿题库

    【前端研发工程师】 工作职责: 1. 负责相关产品的前端需求分析、设计、开发、自测及上线 2. 跟进前端技术发展,...

  • 前端开发自测标准

    自测标准: 1. 完成rp中涉及到的用例测试 (需要产品提供,如果没有的话需要产品提供) 2. 如果有prd,通过...

  • webpack4.x入门与进阶

    一 传统前端开发模式

  • 前端自测:这些姿势你都知道吗?

    前端自测系列由来 作为前端萌新(大雾)要随时不忘自我检查,提升修为,望早日位登前端老司机,因此便有了前端自测系列文...

  • 记一个前端自动化测试解决方案探析

    前端测试一直是前端项目开发过程中及其重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高开发效率,如...

  • MVVM在前端(web)使用

    前端框架vue,MVVM模式 今天咱们不谈iOS,说说web(MVVM模式)。MVVM模式在前端开发应该还是挺多的...

  • JS

    一、公司开发模式 1.传统开发模式:JSP套页面2.前后端分离的模式:就是前端干前端的,后端干后端的,然后对接口,...

  • 前端开发自测Points -1

    对数字、金额字段的判空不能直接使用 if(value) 因为if(0) === false。 应用场景1:详情页 ...

网友评论

    本文标题:Angular+nodeJS+redis前端自测开发模式

    本文链接:https://www.haomeiwen.com/subject/tcwbwqtx.html