個(gè)人中心
退出
關(guān)于個(gè)人全棧項(xiàng)目【臻美IT】博客類(lèi)出現(xiàn)的問(wèn)題以及解決方法
每做一個(gè)項(xiàng)目，要記得寫(xiě)下心得哦，別偷懶??！
先上網(wǎng)址：
https://www.maomin.club/
在這里插入圖片描述
這個(gè)項(xiàng)目屬于博客類(lèi)的，因?yàn)榘俣葘徍说膯?wèn)題就大體做了下，就當(dāng)來(lái)練練手，里面文章鏈接的是CSDN的博客文章。
前臺(tái)使用的是vue，后臺(tái)使用的是koa框架。
那么我們接下來(lái)看一下我做這個(gè)項(xiàng)目遇到的問(wèn)題。
一、實(shí)現(xiàn)后臺(tái)數(shù)據(jù)實(shí)時(shí)更新博客文章列表
怎么才能只是修改數(shù)據(jù)庫(kù)，動(dòng)態(tài)更新列表呢？
這里就用到了node的koa框架，這個(gè)框架我個(gè)人認(rèn)為比較方便，比express好多了。
其實(shí)作用也大差不差，對(duì)了，這里還用到了mysql，這個(gè)比較簡(jiǎn)單，不用細(xì)講。
這里主要是使用了koa2-cors模塊實(shí)現(xiàn)跨域，koa-router是用來(lái)做接口的。
下面是一段我后臺(tái)的代碼，只放一部分有關(guān)的代碼。
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'],
}));
// 數(shù)據(jù)庫(kù)信息
var connection = mysql.createConnection({
host : 'xxxxxxxx',
port:3306,
user : 'root',
password : 'xxxxx',
database : 'url'
});
connection.connect();
// 數(shù)據(jù)庫(kù)操作
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('服務(wù)器運(yùn)行中')
這樣只需要修改數(shù)據(jù)庫(kù)的數(shù)據(jù)，前臺(tái)循環(huán)就可以完美的展現(xiàn)了，這個(gè)問(wèn)題有點(diǎn)簡(jiǎn)單啊。
二、如何實(shí)現(xiàn)訪問(wèn)量保存，以及異步展現(xiàn)
保存訪問(wèn)量無(wú)非就是把一個(gè)變量每加載頁(yè)面的時(shí)候+1操作，然后將變量存在數(shù)據(jù)庫(kù)中，可以如果用戶(hù)不斷刷新頁(yè)面，那么這個(gè)訪問(wèn)量不就成為虛設(shè)了嗎？
這個(gè)問(wèn)題需要前臺(tái)考慮，我們先考慮下把數(shù)據(jù)存起來(lái)。
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
});
每次訪問(wèn)+1發(fā)送數(shù)據(jù)，保存在數(shù)據(jù)庫(kù)中，然后下次訪問(wèn)時(shí)不再增加，因?yàn)槭峭粋€(gè)用戶(hù)。
這里需要注意的是，我們?cè)瓉?lái)使用express框架里使用mysql時(shí)，可以在回調(diào)函數(shù)中獲取result，并且可以返回到頁(yè)面里，可是這里就取不到了。我們?nèi)绾谓鉀Q呢？這里我們用到了async
、await 。這是es6的語(yǔ)法，async/await是一個(gè)用同步思維解決異步問(wèn)題的方案（等結(jié)果出來(lái)之后，代碼才會(huì)繼續(xù)往下執(zhí)行）。
這里封裝了mysql的收發(fā)操作。
// 數(shù)據(jù)庫(kù)操作
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'] = '用戶(hù)已經(jīng)存在';
json['resultCode']= 1;
} else {
json['message'] = '注冊(cè)成功';
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解決了異步的問(wèn)題。
三、 實(shí)現(xiàn)登錄注冊(cè)，以及登錄后留言
其實(shí)這個(gè)放在最后，有點(diǎn)欠妥，雖然也是個(gè)功能，不過(guò)，難點(diǎn)沒(méi)什么好講的。
主要是實(shí)現(xiàn)了第二個(gè)難點(diǎn)，下面就好辦了。
// 獲取留言
router.get('/mesed', async (ctx, next) => {
var sql = "select * from data";
let results = await query(sql);
ctx.body=results
});
// 發(fā)送留言
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
});
最后，還要注意幾個(gè)小點(diǎn)，async/await在node使用時(shí)一定要升級(jí)最新版本，否則不能用。還有，在koa實(shí)現(xiàn)下線上https服務(wù)，
下面一段代碼就可以解決
var https=require("https");//https服務(wù)
var fs= require("fs");
var Koa = require('koa');
var enforceHttps = require('koa-sslify').default;//這里是關(guān)鍵哦
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('服務(wù)器運(yùn)行中')
作者：Vam的金豆之路
主要領(lǐng)域：前端開(kāi)發(fā)
我的微信：maomin9761
微信公眾號(hào)：前端歷劫之路
分類(lèi)導(dǎo)航