w3ctech

ThinkJS入门学习实例(1)

完整示例代码

最近在摸索学习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。

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

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

未完待续。。。

更多相关文章

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

完整示例代码

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复