號外，號外，我用react+koa+mysql搭建博客啦～～

介紹

這是一篇自己搭建本地博客的博客....

技術

前端使用react+antd+ts,後端使用node+koa,數據庫使用mysql

前端

安裝

• 創建文件

create-react-app demo --typescript

• 引入UI(antd)

yarn add antd

修改src/App.css，在文件頂部引入 antd 的樣式

@import '~antd/dist/antd.css';

• 安裝重要的模塊

axios(發請求)

npm install @types/axios

node-sass(使用sass替代css)

npm install node-sass

可能出現的問題

• 出現 "--isolatedModules" 標誌時

將tsconfig.json中的isolatedModules:false

• 出現找不到react模塊時

在tsconfig.json中添加"noImplicitAny": false

主要的功能

• 登陸
• 文章列表
• 點贊

對axios進行封裝

export default function http({url,method='GET',data={}}){
    return new Promise((resolve,reject)=>{
        axios({
            url:`${baseUrl}${url}`,
            method,
            data
        }).then(res=>{
            if(res.data.success){
                resolve(res.data.data)
            }else{
                reject(res.data.message)
            }
        }).catch(err=>{
            console.log(err)
            reject(err)
        })
    })
}

數據庫mysql

下載

去mysql官網下載對應的mysql

命令

鏈接數據庫

mysql -uroot -p

重啓

mysql.server restart

啓動

mysql.server start

停止

mysql.server stop

後端 koa

安裝

npm install koa

引入

const koa=require('koa');
const app=new koa();

koa2將所有的請求做了異步處理

app.use(async (ctx, next) => {
    await next();
    ctx.response.type = 'text/html';
    ctx.response.body = '<h1>Hello, koa2!</h1>';
});

其中參數ctx是對response和request進行了封裝，可以通過ctx.request和ctx.response進行訪問，next是下一步進行操作的異步函數

每一次接收到http請求，koa都會使用app.use()進行註冊async異步函數，並傳入ctx和next參數

每一個async函數都是一箇中間件。使用await next()去使異步變同步，所以中間件的順序很重要，也就是app.use()的順序很重要。

koa-router

安裝

npm install koa-router

koa-router的註冊的請求，參數可以通過ctx.params.name去獲取

app.use(router.routes())

koa-bodyparser

安裝

npm install koa-bodyparser

koa-bodyparser用於解析post請求解析body參數

koa-bodyparser必須是router之前被註冊到app上

const bodyParser = require('koa-bodyparser');
app.use(bodyParser())

koa-cors

安裝

npm install koa-cors

主要解決跨域問題

const cors=require('koa-cors')

app.use(cors())

或者手動添加

app.use(async (ctx, next) => {
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With')
    ctx.set('Access-Control-Allow-Origin', 'http://localhost:3000');
    ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');
    ctx.set('Access-Control-Allow-Credentials', true);
    ctx.set('Access-Control-Max-Age', 3600 * 24);
}),

koa連接mysql

安裝mysql

npm i mysql

連接

const mysql=require('mysql');

const config={
    host:"localhost",
    user:"用戶名",
    password:'密碼',
    database:'數據庫',
    port:端口號,
    multipleStatements:true//是否支持多連接
}
const pool=mysql.createPool(config);//創建連接池
let query = (sql, values) => {
    return new Promise((resolve, reject) => {
        pool.getConnection((err, connection) => {//連接數據庫
            if (err) {
                reject(err)//連接數據庫失敗
            } else {
                connection.query(sql, values, (err, rows) => {//進行數據庫操作
                    if (err) {
                        reject(err)
                    } else {
                        resolve(rows)
                    }
                    connection.release()
                })
            }
        })
    })
};
module.exports={
    query
}

功能點

登陸

前端傳用戶名，密碼

後端

const db=require('../db/index')

exports.login=async ctx=>{
    const {name,password}=ctx.request.body
    const sql='SELECT * FROM t_user WHERE name=? and password=?';
    const value=[name,password];
    await db.query(sql,value).then(res=>{
        if(res.length>0){
            ctx.session.user=name
            console.log(ctx.session.user)
            ctx.response.body={
                success:true,
                data:res[0]
            }
        }else{
            ctx.response.body={
                success:false,
                message:'登陸失敗'
            }
        }
    })
}

獲取文章列表以及按照條件模糊查詢

const db=require('../db/index')

exports.articleList=async ctx=>{
    const {searchData}=ctx.request.body;
    const sql='SELECT * FROM t_article_list WHERE title LIKE "%'+searchData+'%"';

    await db.query(sql).then(res=>{
        console.log(res)
        ctx.response.body={
            success:true,
            data:res
        }
    })
} 

點贊

const db=require('../db/index')

exports.agree=async ctx=>{
    const {article_id}=ctx.request.body
    const sql='update t_article_list set likeCount=likeCount+1 where article_id=?'
    const value=[article_id];
    await db.query(sql,value).then(res=>{
        ctx.response.body={
            success:true,
            message:'點贊成功'
        }
    })
}

詳細的代碼，請查看我的倉庫，歡迎star～～