介绍
这是一篇自己搭建本地博客的博客....
技术
前端使用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～～