`

React学习之围棋记谱本制作(六)棋谱保存

阅读更多
  这块功能仅从原理上走通为目的,代码没有仔细推敲、数据结构的合理性也没有仔细考虑。代码也比较简单,只是express、oracledb、JQuery的使用。
  流程大致为:页面搜集要保存的棋子编号、颜色信息,通过JQuery的$.post方法提交,提交到服务器端通过express提供的地址,如http://localhost:8888/go/save,由服务器端的Node.js程序调用oracledb将数据保存。
  打开棋谱流程:页面通过JQuery的$.get方法,调用服务(http://localhost:8888/go/load),服务端端对应的程序读取数据,返回JSON。装载的结果,我仅在控制台进行了输出,没有在棋谱上显示。技术上都走通了,实在懒得再完善了。
  不知大家有没有这样的感觉,刚开始写程序时,觉得很好玩,写得很来劲儿,但到了后来,程序需要不停地完善、甚至有些要重写,兴趣就会逐渐消退。

  遇到的问题列一列:
  oracledb默认不自动提交,insert的数据看不到;
  express需要body-parser插件才能读取post的数据

  大致展示一下相关的代码。

一、程序入口文件app.js
// 引入模块
var express = require('express');
var bodyParser = require("body-parser")
var path = require('path');
var ejs = require('ejs');
var goAction = require("./server/action/goAction")
var app = express();
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// 新增接口路由
app.get('/data/:module', function (req, res, next) {
    var c_path = req.params.module;
    var Action = require('./server/action/' + c_path);
    Action.execute(req, res);
});

//处理棋谱保存的路由
app.get('/go/load', function (req, res, next) {
    goAction.load(req,res);
});
//处理棋谱保存的路由
app.post('/go/save', function (req, res, next) {
    goAction.save(req,res);
});
// 对所有(/)URL或路由返回index.html
app.get('/', function (req, res) {
    console.log(req.url);
    res.render('index');
});
// 设置views路径和模板
app.set('views', path.join(__dirname, 'dist'));
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
// app.use配置
app.use('/', express.static(path.join(__dirname, 'dist')));
// 启动一个服务,监听从8888端口进入的所有连接请求
var server = app.listen(8888, function(){
    var host = server.address().address;
    var port = server.address().port;
}); 


二、数据辅助类DbUtil.js
建表语句如下:
create table t_pos(
id varchar2(32) primary key,--GUID做主键
nums varchar2(1800),--分号分隔的棋子编号
colors varchar2(1800),--分号分隔的棋子颜色
record_date date default sysdate --记录时间
);


var oracledb = require('oracledb');
var dbConfig = require('./dbconfig');

oracledb.autoCommit = true;

function doConnect(cb) {
	oracledb.getConnection(
		{
			user          : dbConfig.user,
			password      : dbConfig.password,
			connectString : dbConfig.connectString
		},
		cb);
};

function doRelease(conn) {
	conn.release(function (err) {
		if (err)
			console.error(err.message);
	});
};

function doSelect(conn,sql,param, cb) {
	console.log('执行查询:sql='+sql+', param='+param);
	conn.execute(
		sql,
		param, // A bind variable parameter is needed to disambiguate the following options parameter
		// otherwise you will get Error: ORA-01036: illegal variable name/number
		{ outFormat: oracledb.OBJECT }, // outFormat can be OBJECT or ARRAY.  The default is ARRAY
		function(err, result)
		{
			if (err) {
				return cb(err, conn);
			} else {
				console.log(result.rows);
				return cb(null, conn,result.rows);
			}
		});
};

function doUpdate(conn,sql,param, cb) {
	console.log('sql='+sql+', param='+param);
	conn.execute(
		sql,
		param,
		function(err, result)
		{
			if (err) {
				return cb(err, conn);
			} else {
				console.log(result);
				return cb(null, conn,result);
			}
		});
};

//这个没有试验
function doCommit(conn,cb){
	conn.commit();
}

function select(sql,param,callback){
	var async = require('async');
	async.waterfall([
		doConnect,
		function(conn,cb) {
			cb(null, conn, sql, param);
		},
		doSelect
	],function(err,conn,result){
		if (err) { console.error("In waterfall error cb: ==>", err, "<=="); }
		else if (callback){callback(result);}
		if (conn){ doRelease(conn);}
	});
};

function update(sql,param,callback){
	var async = require('async');
	async.waterfall([
		doConnect,
		function(conn,cb) {
			cb(null, conn, sql, param);
		},
		doUpdate
	],function(err,conn,result){
		if (err) { console.error("In waterfall error cb: ==>", err, "<=="); }
		else if (callback){callback(result);}
		if (conn){ doRelease(conn);}
	});
};

function select_Test(){
	select("select * from tab",{},function(result){
		console.log(result);
	});
};

//保存位置
function savePosition(numColorArr,callback){
	update("insert into t_pos (id,nums,colors) values (sys_guid(),:n,:c)",numColorArr,callback);
}

//装载位置信息
function loadPosition(callback){
	select("select * from t_pos order by record_date desc ",{},callback);
}
module.exports.select = select;
module.exports.update = update;
module.exports.savePosition = savePosition;
module.exports.loadPosition = loadPosition;


三、后台服务类goAction.js,响应页面请求
var dbUtil = require('../util/DbUtil');

//使用类来处理
class goAction{
	constructor() {

	}

	save(req, res){
		//读取post方式传递的位置数据
		var nums = req.body.nums;
		var colors = req.body.colors;
		dbUtil.savePosition([nums,colors],function(result){
			//简单返回影响行数。如果为1表示成功。
			res.send(result);
		});
	}
	load(req,res){
		dbUtil.loadPosition(function(result){
			//简单返回影响行数。如果为1表示成功。
			res.send(result);
		});
	}
}

module.exports = new goAction();


分享到:
评论

相关推荐

    React学习之围棋记谱本制作(七)总结

    在本篇“React学习之围棋记谱本制作(七)总结”中,我们将深入探讨如何利用React技术栈创建一个功能完善的围棋记谱本应用。React是Facebook开发的一个用于构建用户界面的JavaScript库,尤其适用于构建单页应用。在...

    React学习之围棋记谱本制作(一)环境准备

    在本文中,我们将探讨如何利用React技术来创建一个围棋记谱本应用。React是Facebook推出的一个用于构建用户界面的JavaScript库,尤其适用于构建组件化的、交互式的Web应用。在这个项目的第一部分,我们将专注于环境...

    React学习之围棋记谱本制作(四)前端开发初步完成

    在本项目中,“React学习之围棋记谱本制作(四)前端开发初步完成”是一个教程,旨在教授如何使用React框架构建一个围棋记谱本的前端应用。从给出的标签“源码”和“工具”来看,我们可以推断这个教程会涉及实际的...

    React 学习之道

    React 学习之道 ==================================================

    React学习手册.zip

    本React学习手册将深入探讨React的核心概念和实战技巧,帮助你从入门到精通。 首先,React的核心概念包括组件化开发。组件是React的基础单元,可以理解为可复用的代码块,它们像乐高积木一样组合起来构建整个应用。...

    React学习手册完整版带目录.zip

    "React学习手册完整版带目录.zip"包含了深入学习React所需的所有资料,包括基本概念、核心原理以及高级技巧。 首先,手册的目录可能会涵盖以下关键知识点: 1. **React基础知识**:介绍React的基本概念,如JSX语法...

    React学习路线脑图

    React学习路线脑图

    react-react学习心得

    在深入探讨React技术栈之前,我们首先需要理解什么是React。React是Facebook开发的一款用于构建用户界面的JavaScript库,尤其擅长于构建单页应用程序(SPA)。它主要关注视图层,但也可以与各种库和框架(如Redux、...

    React学习资源汇总.pdf

    React学习资源汇总.pdf

    React学习思维脑图

    React 学习思维脑图,有助于更好的学习react

    react中文学习资料

    React中文学习资料提供了丰富的信息和教程,帮助开发者理解React的基本概念、核心原理和编程方法。 在React的学习过程中,首先需要了解的基本要求包括Node.js环境以及npm(Node Package Manager)。Node.js是一个...

    react学习课件.rar

    这个"react学习课件.rar"文件包含的"react学习课件.docx"文档,很可能是从哔哩哔哩上的一个React教程课程中提取出的学习资料。在React的世界里,有很多关键概念和技术值得深入探讨。 首先,React的核心理念是组件化...

    元宇宙初探React+Three.js制作3D全景漫游.zip

    元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D...

    React 进阶之路

    在React的世界里,进阶之路意味着深入理解其核心概念、最佳实践以及高级技巧。React作为一个流行的JavaScript库,用于构建用户界面,尤其适用于单页应用程序(SPA)。本篇将围绕React的多个关键知识点展开,帮助...

    react入门学习文档

    React入门学习文档 React 是一个用于构建用户界面的 JavaScript 库,是一个数据驱动的 MVVM 模式的框架。学习 React 需要了解其主要特点、JSX 元素渲染、生命周期、组件事件等知识点。 React 介绍 React 是一个...

    React 官方学习模板

    "React 官方学习模板"是ReactJs官方提供的一套教程项目,旨在帮助开发者系统地学习和理解React的基本概念、API以及最佳实践。 这个模板项目,"react-tutorial-master",包含了从基础到进阶的所有教程内容,可以帮助...

    weiqi-react:基于React的网页围棋应用

    【标题】"weiqi-react"是一个以React技术为核心的网页围棋应用项目,旨在提供一个用户友好的在线围棋对弈平台。React是Facebook开发的JavaScript库,用于构建用户界面,特别是单页应用程序。它采用组件化的方式,...

    react 学习笔记

    本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命周期 React 组件生命周期是指组件从创建到销毁的整个过程。生命周期方法是指在组件生命周期的不同阶段执行的函数。了解生命周期方法可以帮助...

    react学习.txt

    react学习资料,react入门到实战,帮助你快速掌握react。

    React零基础自学手册.pdf

    ### React.js零基础自学核心知识点概览 #### 一、React.js简介与基本概念 - **React.js**:一种用于构建用户界面的JavaScript库,特别适用于构建单页应用(SPA)。 - **特点**:虚拟DOM、组件化设计、单向数据流。 #...

Global site tag (gtag.js) - Google Analytics