客卿登录
昵称:
密码:
 
以客卿身份入驻听涛小居 »
最新评论

VIVI 评论 03
白龙山在哪哇 我觉得你生完孩子基本没变样 哈哈 看着好亲切

VIVI 评论 新手妈妈遇到小儿高烧
我有个很好的朋友 先带孩子夏天时候去百丽玩喷泉 回家睡着又尿了 发现时候裤子已经干了 还开着空调 之...

背景音乐
友情链接
友情链接尚未添加!
最新动态
cutlove & suruby 的最新动态
筛选: 所有 cutlove suruby
2017-2-6 23:03:10

这一节,我们来认识一下MongoDB。MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。MongoDB功能强大,易学易用,因其文档类似于JSON对象,一直以来都被誉为Node.js的绝佳搭配。

下载MongoDB可访问MongoDB官网:https://www.mongodb.com/

目前MongoDB最新版本为3.4.2,我下载的是Community Server Windows Server 2008 R2 64-bit and later, with SSL support x64,安装包容量为148M。

<还有 1782 字>
2017-2-5 21:57:00

在我们使用React代替jQuery的时候,传统的bootstrap.js也被react-bootstrap.js替代了。虽然我们一直在用Bootstrap的class,却还没用到Bootstrap的JavaScript插件,所以也一直没有讲到React-Bootstrap。React-Bootstrap不仅让Bootstrap的JavaScript插件跑在React之下,还对原来的插件进行了扩充。具体可访问React-Bootstrap的官方网站:https://react-bootstrap.github.io/

<还有 1996 字>
2017-2-5 21:49:51

上一节,我们的后端代码在判断用户登录成功后发送了一个cookie给客户端。我们可以通过这个cookie来判断用户是否已登录,并在用户退出登录时清空这个cookie。

首先,修改index.js文件,修改后的代码如下:

var express = require('express');
var router = express.Router();

//Check Login
function checkLogin(req, res) {
	if(!req.cookies.user) {
		res.redirect('/login');
		return false;
	}
}

//Home Page
router.get('/', function(req, res, next){
	if(checkLogin(req,res) == false){
		return;
	}
	res.render('index', { title: 'CRM' });
});

module.exports = router;
<还有 1775 字>
2017-2-4 22:57:48

一个登录页,弄了这么久。这一节,我们就前后端协力,让登录页可以登录。

首先,优化前端交互体验。alert弹窗既简陋又不友好,我们还是使用Bootstrap的警告框吧。修改login.ejs文件,修改后的代码如下:

<% include inc/header.ejs %>

<div id="tc-wrapper"></div>
<script type="text/babel">
	var Login = React.createClass({
		getInitialState() {
			return {username:'', password:'', remember:false, class:'hidden', message:'', disabled:''};
		},
		handleInputChange(e) {
			var target = e.target;
			var value = target.type === 'checkbox' ? target.checked : target.value;
			var name = target.name;
			this.setState({[name]:value, class:'hidden'});
		},
		handleSubmit(e) {
			e.preventDefault();
			var username = this.state.username.trim();
			var password = this.state.password.trim();
			var remember = this.state.remember;
			if (!username || !password) {
				return;
			}
			var me = this;
			me.setState({class:'alert alert-info', message:'正在登录,请稍候……', disabled:'disabled'});
			var data = {username:username, password:password, remember:remember};
			fetch('/login', {
				method: 'POST',
				headers: {'Content-Type':'application/json'},
				credentials: 'same-origin',
				body: JSON.stringify(data)
			}).then(function(res) {
				return res.json();
			}).then(function(json) {
				if(json.success){
					location.href='/';
				}else{
					me.setState({class:'alert alert-danger', message:'登录失败!用户名或密码错误!', disabled:''});
				}
			}).catch(function(ex) {
				me.setState({class:'alert alert-danger', message:'抱歉!服务器出错了!请稍后再试!', disabled:''});
			});
		},
		render() {
			return (
				<div className="tc-login">
					<h2 className="text-center">登录</h2>
					<form onSubmit={this.handleSubmit}>
						<div className="form-group">
							<label htmlFor="tc-login-username">用户名</label>
							<input className="form-control" id="tc-login-username" name="username" type="text" placeholder="用户名" required="required" value={this.state.username} onChange={this.handleInputChange} />
						</div>
						<div className="form-group">
							<label htmlFor="tc-login-password">密码</label>
							<input className="form-control" id="tc-login-password" name="password" type="password" placeholder="密码" required="required" value={this.state.password} onChange={this.handleInputChange} />
						</div>
						<div className="checkbox">
							<label><input id="tc-login-remember" name="remember" type="checkbox" checked={this.state.remember} onChange={this.handleInputChange} /> 记住我</label>
						</div>
						<div className={this.state.class}>{this.state.message}</div>
						<button type="submit" className="btn btn-primary btn-block" disabled={this.state.disabled}>登录</button>
						<p className="text-center"><a href="#">忘记密码了?</a></p>
					</form>
				</div>
			);
		}
	});
	ReactDOM.render(<Login />, document.getElementById('tc-wrapper'));
</script>

<% include inc/footer.ejs %>
<还有 1393 字>
2017-2-4 22:54:48

上一节,我们使用React获取了表单数据,但是还没法提交。以往我们提交表单数据都是靠jQuery的AJAX,现如今我们将jQuery驱逐流放,难不成再厚着脸皮把它请回来?不,我们来使用fetch。

每当我们要在网页中使用一项新技术,都要考虑一个问题,那就是浏览器的兼容性。fetch非常新,原生的fetch api甚至不能兼容IE11,于是就有了fetch polyfill:https://github.com/github/fetch

<还有 3466 字>
2017-2-2 23:48:23

首先,推荐一个Sublime的插件:babel-sublime,支持babel代码语法高亮。

说回登录页。虽然,我们也可以使用HTML表单本来的特性来进行表单提交,即跳转到form标签action属性指定的页面,或仍指向当前页面,然后通过后端代码判断有没有数据被提交,有数据的话就获取数据并进行逻辑处理。但这种方法早在几年前就被jQuery的AJAX的方法淘汰掉了。那我们现在又淘汰掉了jQuery,又该如何来获取表单数据并提交呢?我们先来实现第一步:使用React获取表单数据。

<还有 3594 字>
2017-2-2 15:30:09

上一节,我们引入了React,算是重构了主页。这一节,我们来重构登录页。

header.ejs文件和footer.ejs文件暂时就不需要动了。修改login.ejs文件,修改后的代码如下:

<% include inc/header.ejs %>

<div id="tc-wrapper"></div>
<script type="text/babel">
	var Login = React.createClass({
		render() {
			return (
				<div className="tc-login">
					<h2 className="text-center">登录</h2>
					<form>
						<div className="form-group">
							<label htmlFor="tc-login-username">用户名</label>
							<input className="form-control" id="tc-login-username" type="text" placeholder="用户名" required="required" />
						</div>
						<div className="form-group">
							<label htmlFor="tc-login-password">密码</label>
							<input className="form-control" id="tc-login-password" type="password" placeholder="密码" required="required" />
						</div>
						<div className="checkbox">
							<label><input id="tc-login-remember" type="checkbox" /> 记住我</label>
						</div>
						<button type="submit" className="btn btn-primary btn-block">登录</button>
						<p className="text-center"><a href="#">忘记密码了?</a></p>
					</form>
				</div>
			);
		}
	});
	ReactDOM.render(<Login />, document.getElementById('tc-wrapper'));
</script>

<% include inc/footer.ejs %>
<还有 442 字>
2017-1-31 15:14:26

学习的过程对于一些框架的选择总会摇摆不定,因为我们总是想用最新最好的技术来武装我们的系统。前面我们forever没用两天就换成了PM2,今天我们又要用React来代替jQuery了。

React起源于Facebook的内部项目,于2013年5月开源。React通过对DOM的模拟,最大限度地减少与DOM的交互,从而提高页面渲染效率。理论上,React是一个前端框架,可以很好的在现代浏览器上运行。但是,基于某些原因,我们往往要使用JSX和ES6来写React的代码,这导致浏览器无法直接识别。解决方法是:开发阶段初期,在前端引用Babel来将JSX和ES6转为ES5;开发阶段中后期及上线后,在后端使用Babel转码。

<还有 2656 字>
cutlove 评论电影 驴得水
2017-1-30 17:43:05
[8分] 这部电影让我想起《狗镇》和《八恶人》,表面上风平浪静,却在酝酿一场风暴。影片具有强烈的现实意义,挂青天白日旗,应该实属无奈。因为改编自舞台剧,所以影片表演痕迹略重,但电影中所反应的教育问题以及对人性的拷问,却直抵人心。
2017-1-30 16:23:22
[6分] 本来是一个很好的Case,却讲述得一塌糊涂。故事逻辑混乱,人物感情线飘忽不定,还有那让人恶心麻痒的定妆,全片唯一的看点就是威尔与伊丽莎白的夕阳吻别了。It's always belonged to you. Will you keep it safe?