Mint UI - Unit05

Mint UI - Unit05

1.Moment.js

Moment.js是一个日期时间的类库，可以运行在浏览器及Node.js环境。

浏览器安装

<script src="moment.js文件URL地址"></script>

Node.js安装

npm install --save moment

Node.js配置Moment – 在 src/main.js中实现

import moment from 'moment';

Vue.prototype.moment = moment;

构建Moment对象

unix()方法

unix()方法用于将Unix时间戳转换为Moment对象，其语法结构是：

Moment Moment.unix(number)

format()方法

format()方法用于实现日期的格式化，其语法结构是：

String Moment.format([format])

常用的格式有：

Y表示四位的年份

MM表示两位的月份

DD表示两位的日期

HH表示两位小时

mm表示两位分钟

ss表示两位秒

2.用户注册的业务

用户注册业务的前端业务已经基本实现完成，示例代码如下：

handle(){
    //会引发短路现象
    if(this.checkUsername() && this.checkPassword() && this.checkConpassword()){
        //现在要发送相关的用户名、密码到WEB服务器        
        //this.axios.请求方式(URL地址,参数).then(res=>{
        //});
        //因现在要需要将用户名密码等信息提交给服务器，所以现在的请求方式必须为POST
        //提示:GET提交的信息会被浏览器缓存，且呈现在浏览器的地址栏中
        //提示:所有的搜索引擎都是GET提交
        //所以上述代码要修改为:(目前服务器暂不存在/register的接口)
        //而且现在必须带有参数，因为需要将用户名和密码提交到服务器
        //该参数要附加在HTTP请求体内，格式如： key=value&key=value&...
        this.axios.post('/register','username=' + this.username + '&password=' + this.password).then(res=>{
        });
    }
},

在index.js创建/register的接口，示例代码如下：

server.post('/register',(req,res)=>{
	//获取用户名及密码信息
    //因为现在是POST提交，所以只能通过req.body.username这种结构来进行获取操作
    //但是req.body.username这种结构需要使用body-parser中间件
    //所以现在需要在服务器端安装并且配置body-parser中间件
    //npm install --save body-parser
    //const bodyParser = require('body-parser');
    //server.use(bodyParser.urlencoded({extended:false}));
    //当完成上述三步之后，就可以获取用户名和密码的信息了
    let username = req.body.username;
    let password = req.body.password;
    //现在虽然已经获取到用户名和密码，但是不能直接插入到数据表，因为在xzqa_author表中需要
    //保证用户名的唯一性，所以先需要进行查找操作：
    let sql = 'SELECT COUNT(id) AS count FROM xzqa_author WHERE username=?';
    pool.query(sql,[username],(error,results)=>{
        if(error) throw error;
        if(results[0].count == 0){
            //results代表的是结果集，为object array类型,
            //在本案例中类似于 [{count:0}]或 [{count:1}]
            //results[0].count的值如果为0的话，则代表用户不存在，可以进行插入操作
            //在进行记录的插入操作时,要求密码必须采用MD5进行加密,以保证数据的安全性
            //在Node.js的MySQL中可以通过两种方式来实现
            //(1)直接采用MySQL数据库提供的MD5函数
            //(2)安装使用MD5的Node.js模块
            安装 npm install --save md5
            配置 const md5 = require('md5');
            使用,如 console.log(md5('12345678'));
			sql = 'INSERT INTO xzqa_author(username,password) VALUES(?,MD5(?))';
      		pool.query(sql,[username,password],(error,results)=>{           
	        	if(error) throw error;
            	//产生相关的信息返回到客户端
               	res.send({message:'注册成功',code:1}) ;
      		})
        } else {
            //否则要产生合理的"错误提示"给客户端
            res.send({message:'注册失败',code:0})
        }
    })
    
});

当完成上述操作后，需要重新启动服务器。

另外，现在服务器端已经根据注册时的情况返回信息给客户端了，那么必须在客户端接收信息，所示需要修改Register.vue中的handle函数中的代码，修改结果如下：

handle(){
    //会引发短路现象
    if(this.checkUsername() && this.checkPassword() && this.checkConpassword()){
        //现在要发送相关的用户名、密码到WEB服务器
        this.axios.post('/register','username=' + this.username  + '&password=' + this.password).then(res=>{
            //代表用户注册成功
            if(res.data.code == 1){
                this.$router.push('/');
            } else {
                //弹出提示框
                this.$messagebox("提示信息","用户已经存在");
            }
        });
    }
}

3.用户登录的业务

用户登录的前端业务已经在Login.vue中实现了，此时需要完成提交用户名和密码到服务器进行检测的业务了，示例代码如下：

handle(){
    //会引发短路现象
    if(this.checkUsername() && this.checkPassword()){
        //现在要发送相关的用户名、密码到WEB服务器
        //其实现在还不存在相关的服务器接口，所以要修改index.js文件以添加login接口
        this.axios.post('/login','username=' + this.username +'&password=' + this.password).then(res=>{
        //
    	})
    }
}

服务器需要创建/login的接口，代码如下:

//用户登录的接口
server.post('/login',(req,res)=>{
  //获取用户名和密码
  let username = req.body.username;
  let password = req.body.password;
  //以用户名和密码为条件进行查找
  let sql = 'SELECT id,username,avatar,article_number,nickname FROM xzqa_author WHERE username=? AND password=MD5(?)';
  pool.query(sql,[username,password],(error,results)=>{
    if(error) throw error;
    if(results.length == 0){
      res.send({message:'登录失败',code:0});
    } else {
      res.send({message:'登录成功',code:1,userInfo:results[0]});
    }
  });

});

QS模块

QS(QueryString)模块是将对象与请求字符串(a=1&b=2&c=3)之间进行相互转换。

安装

npm install --save qs

在main.js中进行配置

import qs from 'qs';
Vue.prototype.qs = qs;

stringify()方法是将对象转换为请求字符串，语法结构是：

string qs.stringify(object)

parse()方法用于将请求字符串转换为对象，语法结构是：

object qs.parse(string)

4.无限滚动时的业务

在进行无限滚动时，即使超出了总页数，仍然会发起请求。

解决该问题方案就是：在服务器返回原始的信息之外，再返回一个总页数的信息，在客户端发起请求之前先判断一下当前页码是否超出了总页数的范畴，如果没有超出则发送请求，否则不再发送请求了。

此时必须再执行另外的一个SQL语句，以获取总记录数，为什么要获取总记录数呢？因为

总页数 = Math.ceil(总记录数 / 每页显示的记录数)

故现在最重要的事情就是获取总记录数，那么对应的SQL应该是：

SELECT COUNT(id) AS count FROM xzqa_article WHERE category_id = ?

此时的占位符的值已经在前期的业务中进行了获取操作：

let cid = req.query.cid;

为什么要获取总记录数呢？因为

```javascript

总页数 = Math.ceil(总记录数 / 每页显示的记录数)

故现在最重要的事情就是获取总记录数，那么对应的SQL应该是：

SELECT COUNT(id) AS count FROM xzqa_article WHERE category_id = ?

此时的占位符的值已经在前期的业务中进行了获取操作：

let cid = req.query.cid;