完整示例代码

最近在摸索学习ThinkJS。由于之前后端接触得少，所以过程中遇到了不少问题，现在记录下来，巩固自己，方便他人。

本实例将会实现如下功能：

• 登录验证
• 数据库增删查改
• 图片上传
• 网页抓取
• 网页截图

代码运行方法：

• 安装thinkjs
• cd到代码的www目录
• 更改App/Conf/config.js的数据库配置
• 运行npm install
• 运行node index.js
• 然后在浏览器打开http://localhost:8360/
• 后台登录用户名和密码都是admin

一、安装配置

• 1.1. 按照官方教程安装，启动项目即可；

• 1.2. 配置如下：

module.exports = {
  //配置项: 配置值
  port: 8360, //监听的端口
  db_type: 'mysql', // 数据库类型
  db_host: '127.0.0.1', // 服务器地址
  db_port: '', // 端口
  db_name: 'test', // 数据库名
  db_user: 'root', // 用户名
  db_pwd: 'root', // 密码
  db_prefix: 'think_', // 数据库表前缀
  app_group_list: ['Home', 'Admin'], //分组列表
  url_resource_reg: /^(upload\/|resource\/|static\/|favicon\.ico|robot\.txt)/ //判断是否是静态资源的正则
};

app_group_list: 主要用到2个分组，一个是前台的，一个是后台的； url_resource_reg： 这里我加了一个upload，是因为我想把上传后的文件放到www/upload文件夹下。

二、数据库准备

在正式开始码代码前，我们还得创建数据表，准备下数据：

• 2.1. 用户

创建一个用户表，后面会用它来进行登录：

CREATE TABLE IF NOT EXISTS `think_user` (
  `id` int(10) NOT NULL auto_increment,
  `name` varchar(100) NOT NULL,
  `pwd` char(41) NOT NULL,
  UNIQUE KEY `id` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

然后往think_user表里插入数据：

INSERT INTO `think_user` (`id`, `name`, `pwd`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3');

这样就有了一个用户名和密码都为admin的数据，后面用来登录。

• 2.2. 品牌表

后面我们会通过网页往这个表里添加，修改，删除品牌信息。也就是练习下thinkjs对数据库的CURD操作。

创建表：

CREATE TABLE IF NOT EXISTS `think_brand` (
  `id` int(10) NOT NULL auto_increment,
  `name` varchar(100) NOT NULL,
  `img` varchar(100) NOT NULL,
  `url` varchar(255) NOT NULL,
  UNIQUE KEY `id` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

三、后台登录功能

假设后台登录的页面为：/admin/index/login, admin就是分组，index是控制器，login是操作，这就是thinkjs的模块化设计。

比较复杂的项目一般需要把数据库操作啥的抽象到model里，我这个例子比较基础，所以我就只用了view和controller这2层了。

• 3.1. View层：

首先写一个view，它的文件夹路径是这样的App/View/Admin/index_login.html，HTML结构：

<h4>Please login</h4>
<div class="row">
    <div class="col-md-2">
        <form action="/admin/index/login" method="POST">
            <div class="form-group">
                <input class="form-control" type="text" name="name" placeholder="user name"/>
            </div>
            <div class="form-group">
                <input class="form-control" type="password" name="pwd" placeholder="password"/>
            </div>
            <button class="btn btn-default" type="submit">Login</button>
        </form>
    </div>
</div>

• 3.2. Controller层

App/Lib/Controller/Admin/IndexController.js

//登录
loginAction: function () {
    var self = this;

    //页面post
    if (self.isPost()) {
        //用户登录成功写入Session
        var name = self.post('name'); //获取post过来的用户名
        var pwd = self.post('pwd'); //获取post过来的密码

        return D('User').where({ //根据用户名和密码查询符合条件的数据
            name: name,
            pwd: md5(pwd)
        }).find().then(function (data) {
            if (isEmpty(data)) {
                //用户名或者密码不正确，返回错误信息
                return self.error(403, '用户名或者密码不正确');
            } else {
                return self.session('userInfo', data);
            }
        }).then(function () {
            //登录成功跳转
            return self.redirect('index');
        });
    } else {
        //页面加载
        self.assign({'title': '管理-登录'});
        return self.display();
    }
}

这段代码的意思是，当用户进入/admin/index/login页面后，首先判断当前请求是不是POST，如果不是，则显示静态页面结构；如果是，则获取POST过来的name和pwd，并和数据库的数据比对，如果对不上，则显示错误信息，如果对得上，则跳转到admin/index/index。

这样，一个最基本的登录功能就做好了。

但是还可以改进下： 比如登录后如果要注销怎么办？后台其他页面的控制器要如何判断是否登录？

未完待续。。。

更多相关文章

水平有限，如果文章有啥错误，还请不吝赐教 :)

完整示例代码