关于个人全栈项目【臻美IT】博客类出现的问题以及解决方法

比眉伴天荒 2021-08-13 13:05 422阅读 0赞

每做一个项目，要记得写下心得哦，别偷懒啊！  
先上网址：  
[https://www.maomin.club/][https_www.maomin.club]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
这个项目属于博客类的，因为百度审核的问题就大体做了下，就当来练练手，里面文章链接的是CSDN的博客文章。  
前台使用的是vue，后台使用的是koa框架。

那么我们接下来看一下我做这个项目遇到的问题。

## 一、实现后台数据实时更新博客文章列表 ##

怎么才能只是修改数据库，动态更新列表呢？  
这里就用到了node的koa框架，这个框架我个人认为比较方便，比express好多了。  
其实作用也大差不差，对了，这里还用到了mysql，这个比较简单，不用细讲。  
这里主要是使用了koa2-cors模块实现跨域，koa-router是用来做接口的。  
下面是一段我后台的代码，只放一部分有关的代码。

这样只需要修改数据库的数据，前台循环就可以完美的展现了，这个问题有点简单啊。  
![在这里插入图片描述][20190928174244392.png]

## 二、如何实现访问量保存，以及异步展现 ##

保存访问量无非就是把一个变量每加载页面的时候+1操作，然后将变量存在数据库中，可以如果用户不断刷新页面，那么这个访问量不就成为虚设了吗？  
这个问题需要前台考虑，我们先考虑下把数据存起来。

router.post('/post', (ctx, next) => { 
       var modSql = 'UPDATE user SET count = ? WHERE id = ?';
       var modSqlParams = [ctx.request.body.count, 1];
      connection.query(modSql, modSqlParams,function(err, result) { 
        if (err) { 
          console.log('[INSERT ERROR] - ', err.message);
          return;
        }
        console.log('INSERT ID:', result.insertId);
      });
      ctx.body = ctx.request.body // echo the result back
    });
    // 获取浏览量
    router.get('/get', async (ctx, next) => { 
        var sql = "select * from user where count";
        let results = await query(sql);
        ctx.body=results
    });

每次访问+1发送数据，保存在数据库中，然后下次访问时不再增加，因为是同一个用户。  
这里需要注意的是，我们原来使用express框架里使用mysql时，可以在回调函数中获取result，并且可以返回到页面里，可是这里就取不到了。我们如何解决呢？这里我们用到了async 、await 。这是es6的语法，async/await是一个用同步思维解决异步问题的方案（等结果出来之后，代码才会继续往下执行）。  
这里封装了mysql的收发操作。

// 数据库操作
    const query = function (sql) { 
        return new Promise((resolve, reject) => { 
            connection.query(sql,  function (error, results) { 
                if(error){ 
                    reject(error);
                }else{ 
                    resolve(results)
                }
            });
        })
    }
    var json = { };
    const query1 = function (userStr,name,passwd,token1) { 
        return new Promise((resolve, reject) => { 
            connection.query(userStr,  function (error, result) { 
                if(error){ 
                    reject(error);
                }else{ 
                    if (result.length > 0) { 
                        json['message'] = '用户已经存在';
                        json['resultCode']= 1;
                    } else { 
                        json['message'] = '注册成功';
                        json['token'] = token1;
                        json['resultCode'] = 200;
                        var insertStr = `insert into login (username, password,token) values ("${ name}", "${ passwd}","${ token1}")`;
                        console.log(insertStr)
                        connection.query(insertStr, function (err, res) { 
                            if (err) throw err;
                        })
                    }
                    resolve(json)
                }
            });
        })
    }

这样我们使用async/await解决了异步的问题。

## 三、 实现登录注册，以及登录后留言 ##

其实这个放在最后，有点欠妥，虽然也是个功能，不过，难点没什么好讲的。  
主要是实现了第二个难点，下面就好办了。

// 获取留言
    router.get('/mesed', async (ctx, next) => { 
      var sql = "select * from data";
      let results = await query(sql);
      ctx.body=results
    });
    // 发送留言
    router.post('/mes', (ctx, next) => { 
         var user = ctx.request.body.user;
         var mes = ctx.request.body.mes;
         var userStr = `insert into data (user, mes) values ("${ user}", "${ mes}")`
         connection.query(userStr, function (err, result) { 
           if (err) { 
             console.log('[INSERT ERROR] - ', err.message);
             return;
           }
           console.log('INSERT ID:', result.insertId);
         });
         ctx.body = ctx.request.body // echo the result back
    });

最后，还要注意几个小点，async/await在node使用时一定要升级最新版本，否则不能用。还有，在koa实现下线上https服务，  
下面一段代码就可以解决

var https=require("https");//https服务
    var fs= require("fs");
    var Koa = require('koa');
    var enforceHttps = require('koa-sslify').default;//这里是关键哦
    var app = new Koa();
    app.use(enforceHttps());
    
    var options = { 
        key: fs.readFileSync('./2_xxx.key'),
        cert: fs.readFileSync('./1_xxx_bundle.crt')
    }
    
    https.createServer(options, app.callback()).listen(5300);
    console.log('服务器运行中')

[https_www.maomin.club]: https://www.maomin.club/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/bfc319d2509340a0bbfb3fa5c7c6cc03.png
[20190928174244392.png]: /images/20210813/70953e36226b44098abb139da914b019.png