antd mysql_号外，号外，我用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 = '

Hello, koa2!

';

});

其中参数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～～