educoder

History

杨树明 d0166f5980 调整		6 years ago
..
config	b	6 years ago
public	调整底部样式问题	6 years ago
scripts	first commit	6 years ago
src	调整	6 years ago
add.txt	first commit	6 years ago
package-lock.json	first commit	6 years ago
package.json	调整	6 years ago
readme.txt	first commit	6 years ago

readme.txt

Unescape Escape

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

1、 安装node v6.9.x；此安装包含了node和npm。

2、 安装cnpm（命令行）： npm install -g cnpm --registry=https://registry.npm.taobao.org

3、 安装依赖的js库（public/react目录下<即项目package.json所在目录>，开启命令行）： cnpm install

4、 如果你的ruby服务使用的是3000端口，则需要在package.json中修改"port"参数的值

5、 启动服务（命令行-目录同3）： npm start

6、 build初始化 npm run build

注意：
1、cnpm install 之前先需要修改下ruby mine的一个settings，防止ruby mine对node_modules目录里的内容建索引（详情见线上文档-react开发环境搭建）


线上文档-react开发环境搭建 地址： https://www.trustie.net/boards/6862/topics/46425

2、package.json中配置：
"proxy": "http://localhost:3000",
"port": "3007"

目前暂时必须写为和上面的一样，ruby服务端口为3000，node服务端口为3007；当当前端口为3007时，程序会将axios发出的请求转到localhost:3000上，进行跨域请求。

3、静态js加载问题：
	editormd源码改动，注释掉了564行 加载codemirror/codemirror.min的js代码。因为codemirror 已经加载了，codemirror对象会带有插件，重复加载会覆盖全局codemirror对象，使得之前加载的插件失效

----------------------------------------------------------------------------------------------

React开发相关知识点
	需要了解的ES6的知识 https://www.trustie.net/boards/6862/topics/46427

----------------------------------------------------------------------------------------------

新加入的lib有：	axios、material-ui、lodash、classnames、moment、immutability-helper
				rc-tree、rc-form 、rc-rate、rc-pagination、rc-select 、showdown
考虑替代删除确认弹出框的组件http://react-component.github.io/tooltip/examples/onVisibleChange.html


----------------------------------------------------------------------------------------------
TPI State整理 START
----------------------------------------------------------------------------------------------
TPIContextProvider  详情接口的所有state

	Index.js 
		taskListLoading
		challenges
		challengesDrawerOpen

	MainContentContainer.js
		repositoryCode: '',     
		currentPath: '', 		// 当前所选的path，可能是一个只读的path（只读path的话，challenge.athIndex为-1）
		isEditablePath			//  是否是可以编辑的path（）
          
        open: false,			// 繁忙等级等提示用Dialog， TODO 考虑重构封装到根组件
        gameBuilding: false, // 评测中标志
        codeStatus: 2, //  0 已修改  1 保存中  2 已保存   3 保存失败 

        codeLoading: false,		 			// code加载中
        resetCodeDialogOpen: false,			// TODO考虑重构封装到根组件
        resetPassedCodeDialogOpen: false,	// TODO考虑重构封装到根组件


        LeftViewContainer.js
        	tabIndex: 0,				页签index
			dialogOpen: false,
			gameAnswer: '',				答案
			snackbarOpen: false,
			comments: [],				评论
			comment_count_without_reply: 0,		评论数量  TODO 和详情接口字段重复
			// 默认pageSize为10
			currentPage: 1,				评论分页
			loadingComments: true,		评论加载中
			gotNewReply: false,			新的回复

        CodeRepositoryViewContainer.js
        	drawerOpen: false,					
			loadingFirstRepoFiles: false,			  	drawer里的loading状态
			fileTreeData: "",							文件树
			codeRepositoryViewExpanded: false,			展开状态


		CodeEvaluateView.js
			testSetsInitedArray:  testSetsExpandedArrayInitVal.slice(0),		测试集是否初始化标志	
			evaluateViewExpanded: false,
			tabIndex: 1,					页签index
----------------------------------------------------------------------------------------------
TPI State整理 END
----------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------
重要：TPI实现时修改的js库的记录 START
----------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------
重要：TPI实现时修改的js库的记录 END
----------------------------------------------------------------------------------------------
create_kindeditor.js  					__isR 表示是react环境，react环境下采用事件通知react组件来处理
	if (window['__isR'] === true) {
        $(document).trigger("onReply", { commentContent:tContents, id:id, editor:params.editor } );
    } else {
        params.form.submit();
    }

editormd.min.js  						直接注释掉了codemirror.min的加载，应该改成有codeMirror了则不加载
	// codemirror 已经加载了，codemirror会有插件，重复加载会使得之前加载的插件失效
    // editormd.loadScript(loadPath + "codemirror/codemirror.min", function() {
对应提交项 
Revision: 73d95ce266d5d7e55a3a88d08d1247b3a08c7caf
Date: 2018/4/2 16:12:21
Message: 切下一题时更新左侧editormd里的内容，更新右侧codemirror内容。

js_min_all.js     						最后面手动加入了若干js代码，还没做分离、再合并处理		date:180507
	is_cdn_link tpi_html_show方法




----------------------------------------------------------------------------------------------
TPM使用react实现的利弊 START
----------------------------------------------------------------------------------------------
1、全部使用react重写
	做法：第一屏使用新接口，之前的js脚本还是继续使用，有必要的话（需要局部刷新的），将部分jquery实现改为react实现
利：
	tpi中评论组件、文件树组件方便复用
	js、css库管理方便

	暂时不依赖于react的状态管理
		之前的ajax请求还是可以暂时复用


弊：
	接口评估？
	rails模板要改成jsx语法
	头部功能区域、底部静态链接区域会存在重复代码 ： react版和非react版
	codemirror等组件的使用会不会有问题？

	学习成本

	！！目前决定，新页面或者评论组件所在页面使用react实现
----------------------------------------------------------------------------------------------
TPM使用react实现的利弊 END
----------------------------------------------------------------------------------------------


其他方式：comments组件build到新入口后，将代码copy到rails页面
----------------------------------------------------------------------------------------------
不错的库 START
----------------------------------------------------------------------------------------------
https://livicons.com/icons-original			-- 收费  动画icon
https://github.com/maxwellito/vivus			-- 让SVG标签动起来
http://ianlunn.github.io/Hover/				-- hover 动画
https://github.com/legomushroom/mojs
https://github.com/juliangarnier/anime    --js动画
https://codepen.io/juliangarnier/pen/gmOwJX
https://github.com/daneden/animate.css


A responsive tour snippet, with a step-by-step guide(onboarding) to help users understand how to use your website.

https://github.com/sorich87/bootstrap-tour
https://github.com/linkedin/hopscotch
https://github.com/Robophil/Product-Tour

code editor
https://microsoft.github.io/monaco-editor/

readme.txt Unescape Escape

readme.txt

Unescape Escape