- 浏览: 5162580 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
silence19841230:
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
水淼火 写道你好,我使用以后,图标不显示,应该怎么引用呢,谢谢 ...
前端框架iviewui使用示例之菜单+多Tab页布局
这块功能仅从原理上走通为目的,代码没有仔细推敲、数据结构的合理性也没有仔细考虑。代码也比较简单,只是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
二、数据辅助类DbUtil.js
建表语句如下:
三、后台服务类goAction.js,响应页面请求
流程大致为:页面搜集要保存的棋子编号、颜色信息,通过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();
发表评论
-
gradle编译错误:Could not find method compile() for arguments
2020-09-19 10:50 18528编译(IDEA+Gradle)一个别人的工程,出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2404部分UDP通信场景中,需要客户端定期发送心跳信息,以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3402两个SpringBoot应用部署在一个Tomcat中,单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 17811.安装插件 Eclipse中,Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7660一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错: Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1260我MySQL数据库用的uft-8字符集,插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3261做了两个子组件,原理基本一样,一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1158写个基本完整、稍有借鉴意义的示例,防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3976大过年的,联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2366一、环境搭建 略, ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7505我的机器:Windows10,64 ... -
SpringMVC 在controller层中注入成员变量request,是否线程安全
2018-12-17 21:17 2752@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2078转自:https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3080用了很长时间vue-resource,最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1751element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9791示例了如何在表格中显示按钮,如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6579申请到了阿里云的证书后,下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5306最近研究微信小程序开发,上阿里云申请了个证书,使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5288springboot2.0跨域配置: 一、代码 ... -
微信小程序使用code换openid的方法(JAVA、SpringBoot)
2018-07-01 21:52 10401微信小程序序的代码中提示,使用code换取openid,但 ...
相关推荐
在本篇“React学习之围棋记谱本制作(七)总结”中,我们将深入探讨如何利用React技术栈创建一个功能完善的围棋记谱本应用。React是Facebook开发的一个用于构建用户界面的JavaScript库,尤其适用于构建单页应用。在...
在本文中,我们将探讨如何利用React技术来创建一个围棋记谱本应用。React是Facebook推出的一个用于构建用户界面的JavaScript库,尤其适用于构建组件化的、交互式的Web应用。在这个项目的第一部分,我们将专注于环境...
在本项目中,“React学习之围棋记谱本制作(四)前端开发初步完成”是一个教程,旨在教授如何使用React框架构建一个围棋记谱本的前端应用。从给出的标签“源码”和“工具”来看,我们可以推断这个教程会涉及实际的...
本React学习手册将深入探讨React的核心概念和实战技巧,帮助你从入门到精通。 首先,React的核心概念包括组件化开发。组件是React的基础单元,可以理解为可复用的代码块,它们像乐高积木一样组合起来构建整个应用。...
React 学习之道 ==================================================
"React学习手册完整版带目录.zip"包含了深入学习React所需的所有资料,包括基本概念、核心原理以及高级技巧。 首先,手册的目录可能会涵盖以下关键知识点: 1. **React基础知识**:介绍React的基本概念,如JSX语法...
这个"react学习课件.rar"文件包含的"react学习课件.docx"文档,很可能是从哔哩哔哩上的一个React教程课程中提取出的学习资料。在React的世界里,有很多关键概念和技术值得深入探讨。 首先,React的核心理念是组件化...
React学习资源汇总.pdf
React学习路线脑图
在深入探讨React技术栈之前,我们首先需要理解什么是React。React是Facebook开发的一款用于构建用户界面的JavaScript库,尤其擅长于构建单页应用程序(SPA)。它主要关注视图层,但也可以与各种库和框架(如Redux、...
React 学习思维脑图,有助于更好的学习react
React中文学习资料提供了丰富的信息和教程,帮助开发者理解React的基本概念、核心原理和编程方法。 在React的学习过程中,首先需要了解的基本要求包括Node.js环境以及npm(Node Package Manager)。Node.js是一个...
元宇宙初探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作为一个流行的JavaScript库,用于构建用户界面,尤其适用于单页应用程序(SPA)。本篇将围绕React的多个关键知识点展开,帮助...
React入门学习文档 React 是一个用于构建用户界面的 JavaScript 库,是一个数据驱动的 MVVM 模式的框架。学习 React 需要了解其主要特点、JSX 元素渲染、生命周期、组件事件等知识点。 React 介绍 React 是一个...
"React 官方学习模板"是ReactJs官方提供的一套教程项目,旨在帮助开发者系统地学习和理解React的基本概念、API以及最佳实践。 这个模板项目,"react-tutorial-master",包含了从基础到进阶的所有教程内容,可以帮助...
【标题】"weiqi-react"是一个以React技术为核心的网页围棋应用项目,旨在提供一个用户友好的在线围棋对弈平台。React是Facebook开发的JavaScript库,用于构建用户界面,特别是单页应用程序。它采用组件化的方式,...
本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命周期 React 组件生命周期是指组件从创建到销毁的整个过程。生命周期方法是指在组件生命周期的不同阶段执行的函数。了解生命周期方法可以帮助...
react学习资料,react入门到实战,帮助你快速掌握react。
### React.js零基础自学核心知识点概览 #### 一、React.js简介与基本概念 - **React.js**:一种用于构建用户界面的JavaScript库,特别适用于构建单页应用(SPA)。 - **特点**:虚拟DOM、组件化设计、单向数据流。 #...