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

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 每做一个项目,要记得写下心得哦,别偷懒啊! 先上网址: www.maomin.club/

每做一个项目,要记得写下心得哦,别偷懒啊! 先上网址:www.maomin.club/


微信截图_20220427162524.png


这个项目属于博客类的,因为百度审核的问题就大体做了下,就当来练练手,里面文章链接的是CSDN的博客文章。 前台使用的是vue,后台使用的是koa框架。


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


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


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


var Koa = require('koa');
var Router = require('koa-router' );
var cors = require('koa2-cors');
var mysql = require('mysql');
var app = new Koa();
var router = new Router();
// 跨域
const allowOrigins = [
    "http://localhost:8080"
];
app.use(cors({
    origin: function(ctx) {
      if (allowOrigins.includes(ctx.header.origin)) {
        return ctx.header.origin;
      }
      return false;
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    withCredentials:true,
    allowMethods: ['GET', 'POST', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));
// 数据库信息
var connection = mysql.createConnection({
  host     : 'xxxxxxxx',
  port:3306,
  user     : 'root',
  password : 'xxxxx',
  database : 'url'
});
connection.connect();
// 数据库操作
const query = function (sql) {
    return new Promise((resolve, reject) => {
        connection.query(sql,  function (error, results) {
            if(error){
                reject(error);
            }else{
                resolve(results)
            }
        });
    })
}
// 获取url
router.get( '/csdnurl', async(ctx, next) => {
  var sql = "select * from csdnurl";
    let results = await query(sql);
    ctx.body=results
});
//使用路由中间件
app
  .use(router.routes())
  .use(router.allowedMethods());
app.listen(5300);
console.log('服务器运行中')


这样只需要修改数据库的数据,前台循环就可以完美的展现了,这个问题有点简单啊。


微信截图_20220427162538.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('服务器运行中')



相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助     相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
8月前
|
安全 架构师 Java
理论实战源码齐飞!架构师社区疯传的SpringSecurity进阶小册真香
安全管理是Java应用开发中无法避免的问题,随着Spring Boot和微服务的流行,Spring Security受到越来越多Java开发者的重视,究其原因,还是沾了微服务的光。作为Spring家族中的一员,其在和Spring家族中的其他产品如SpringBoot、Spring Cloud等进行整合时,是拥有众多同类型框架无可比拟的优势的。
98 0
|
7月前
|
测试技术 虚拟化 云计算
GitHub高赞!速通Python编程基础手册,被玩出花了!
随着云时代的来临,Python 语言越来越被程序开发人员喜欢和使用,因为其不仅简单易学,而且还有丰富的第三方程序库和相应完善的管理工具。 从命令行脚本程序到 GUI程序,从图形技术到科学计算,从软件开发到自动化测试,从云计算到虚拟化,所有这些领域都有 Python 的身影。 今天给小伙伴们分享的这份手册采用以任务为导向的编写模式,全面地介绍了 Python 编程基础及其相关知识的应用,讲解了如何利用 Python 的知识解决部分实际问题。
GitHub高赞!速通Python编程基础手册,被玩出花了!
|
JavaScript 前端开发 Java
【程序员小白入门】这几个宝藏菜鸟教程网站记得收藏!!!
其实菜鸟教程相关的网站内容都大同小异,推荐这几个原因是页面交互比较简单,重要的是没有任何广告。
|
人工智能 程序员 Linux
【猿如意】CSDN推出的程序猿开发百宝箱
【猿如意】CSDN推出的程序猿开发百宝箱
233 0
|
前端开发 物联网 Java
我的第一篇博客 记录编程之路的初心与目标
大家好,我是一名即将步入大二的一名普通学生,现在就读于某双非二本的物联网工程专业的本科生。对于编程事业,我现在还显得比较稚嫩,但我仍然希望通过自己在各个途径的不断努力学习来改变自己乃至我整个家庭的命运。
101 0
|
程序员
2019 CSDN博客之星第三名,感谢各位支持
2019 CSDN博客之星第三名,感谢各位支持
2019 CSDN博客之星第三名,感谢各位支持
|
JSON 数据安全/隐私保护 数据格式
csdn竟然还有这种神器!后悔没有早点知道!超好用的csdn插件,别再犹豫了,赶快入手吧!
csdn竟然还有这种神器!后悔没有早点知道!超好用的csdn插件,别再犹豫了,赶快入手吧!
270 0
csdn竟然还有这种神器!后悔没有早点知道!超好用的csdn插件,别再犹豫了,赶快入手吧!
|
设计模式 Web App开发 移动开发
前端学习之路,分享给刚学或想学前端的网友(持续更新中)
  经常会在群里或论坛上看到有人问:“学习前端有什么捷径?”,一般都是卖油翁式的回答:“无他唯手熟尔”。那么该如何让手熟练呢?其实也就是该如何系统的学习前端。在本文中,我会结合自身的经历,分享一下自己学习前端的过程,期间会穿插引用我过去各个阶段所写的博文。
|
Kubernetes Cloud Native jenkins
工欲善其事必先利其器 | K8s速长合集—阿里云 MVP郭旭东
作者&合集简介: 郭旭东,上海凯京信达运维负责人,擅长运维开发、运维自动化、容器、devops。致力于推行devops理念及相关技术,提升开发效率,提高交付质量与效率,专注于云平台的容器化实践,探索更高效的运维系统架构。本文是郭旭东根据自身经验总结的kubernetes学习及运用的工具、技巧经验等文章合集,K8s学习路上,助你左右逢源。
6372 0
工欲善其事必先利其器 | K8s速长合集—阿里云 MVP郭旭东
|
存储 编解码 人工智能
首发!《长安十二时辰背后的技术秘籍》正式公开,速来下载
今天,阿里技术重磅发布电子书《长安十二时辰背后的技术秘籍:从智能算法到音视频创新技术》,已正式开放下载。了解在《长安十二时辰》的荧幕后,工程师在敲敲打打的代码之间,创造出智能算法和音视频技术的新高度。
6985 0

热门文章

最新文章