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

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

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

背景音乐
友情链接
友情链接尚未添加!
最新动态
cutlove & suruby 的最新动态
筛选: 所有 cutlove suruby
cutlove 发布日志 Another House
2017-3-3 23:40:10
这篇日志已设定为“仅客卿可见”,客卿预览请先登录
cutlove 评论电影 功夫
2017-2-22 22:07:15
[9分] 周星驰独立执导的第二部电影,不管是人设、剧本,还是表演都颇为精良。汇集了《十面埋伏》《小刀会组曲》等众多经典配乐,一曲《只要为你活一天》触动了无数观众,也成就了黄圣依。
cutlove 评论电影 怪兽大学
2017-2-22 20:56:04
[7分] 算是迪士尼和皮克斯的二流作品吧。相比正传,少了一点创意,多了一点俗套。比较适合小孩子看。
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 字>