每做一个项目,要记得写下心得哦,别偷懒啊! 先上网址:www.maomin.club/
这个项目属于博客类的,因为百度审核的问题就大体做了下,就当来练练手,里面文章链接的是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('服务器运行中')
这样只需要修改数据库的数据,前台循环就可以完美的展现了,这个问题有点简单啊。
二、如何实现访问量保存,以及异步展现
保存访问量无非就是把一个变量每加载页面的时候+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('服务器运行中')