号外，号外，我用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～～