一、源码特点
react 社区问答管理系统是一套完善的完整信息管理类型系统，结合react.js框架和node.js后端完成本系统，对理解react node编程开发语言有帮助系统采用node框架（前后端分离）），系统具有完整的源代码和数据库，系统主要采用B/S模式开发。
前段主要技术 react
后端主要技术 node.js
数据库 mysql
开发工具 vscode
环境需要
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
vue 版本 2.9.6
node 版本 16.14.2
使用说明
后端服务
nodemon clean exit 这个是 node.js 启动命令
客户端
npm run start 启动命令
二、功能介绍
(1)分类管理：对分类信息进行添加、删除、修改和查看
(2)标签管理：对标签信息进行添加、删除、修改和查看
(3)用户管理：对用户信息进行添加、删除、修改和查看
(4)问答管理：对问答信息进行添加、删除、修改和查看，同时进行其他业务操作，也可以进行深度检索
(5)评论管理：对评论信息进行添加、删除和查看
(6)关注管理：对关注信息进行添加、删除、和查看
(7)点赞管理：对点赞信息进行添加、删除和查看
(8)举报管理：对举报信息进行添加、删除、修改和查看
(9)通知管理：对通知信息进行添加、删除、修改和查看
(10)私信管理：对私信信息进行添加、删除、修改和查看
(11)用户登录、退出、个人信息修改、用户注册
数据库设计
CREATE TABLE `fenlei` (
`flid` int(11) NOT NULL auto_increment,
`fl` VARCHAR(40) default NULL COMMENT '分类', PRIMARY KEY (`flid`)
) ENGINE=InnoDB DEFAULT CHARSET=gb2312;
CREATE TABLE `biaoqian` (
`bqid` int(11) NOT NULL auto_increment,
`bq` VARCHAR(40) default NULL COMMENT '标签', PRIMARY KEY (`bqid`)
) ENGINE=InnoDB DEFAULT CHARSET=gb2312;
CREATE TABLE `yonghu` (
`yhid` int(11) NOT NULL auto_increment,
`yhm` VARCHAR(40) default NULL COMMENT '用户名',
`mm` VARCHAR(40) default NULL COMMENT '密码',
`xm` VARCHAR(40) default NULL COMMENT '姓名',
`qx` VARCHAR(40) default NULL COMMENT '权限',
`lxdh` VARCHAR(40) default NULL COMMENT '联系电话',
`lxdz` VARCHAR(40) default NULL COMMENT '联系地址', PRIMARY KEY (`yhid`)
) ENGINE=InnoDB DEFAULT CHARSET=gb2312;
CREATE TABLE `wenda` (
`wdid` int(11) NOT NULL auto_increment,
`wdh` VARCHAR(40) default NULL COMMENT '问答号',
`bt` VARCHAR(40) default NULL COMMENT '标题',
`nr` VARCHAR(40) default NULL COMMENT '内容',
`fbsj` VARCHAR(40) default NULL COMMENT '发布时间',
`yh` VARCHAR(40) default NULL COMMENT '用户',
`zt` VARCHAR(40) default NULL COMMENT '状态',
`dzl` VARCHAR(40) default NULL COMMENT '点赞量', PRIMARY KEY (`wdid`)
) ENGINE=InnoDB DEFAULT CHARSET=gb2312;
CREATE TABLE `pinglun` (
`plid` int(11) NOT NULL auto_increment,
`wd` VARCHAR(40) default NULL COMMENT '问答',
`pl` VARCHAR(40) default NULL COMMENT '评论',
`yh` VARCHAR(40) default NULL COMMENT '用户',
`plsj` VARCHAR(40) default NULL COMMENT '评论时间', PRIMARY KEY (`plid`)
) ENGINE=InnoDB DEFAULT CHARSET=gb2312;
CREATE TABLE `guanzhu` (
`gzid` int(11) NOT NULL auto_increment,
`zz` VARCHAR(40) default NULL COMMENT '作者',
`yh` VARCHAR(40) default NULL COMMENT '用户',
`gzsj` VARCHAR(40) default NULL COMMENT '关注时间', PRIMARY KEY (`gzid`)
) ENGINE=InnoDB DEFAULT CHARSET=gb2312;react.js设计
import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
//举报添加页面
function Addjubao() {
const [formData, setFormData] = useState({
bt: '',
jbnr: '',
wd: '',
jbsj: '',
yh: '',
zt: '',
});
// 定义 handleChange 函数
const handleChange = (e) => {
setFormData((prevState) => ({
...prevState,
[e.target.name]: e.target.value,
}));
};
const handleReset = () => {
setFormData({ bt: '', jbnr: '', wd: '', jbsj: '', yh: '', zt: '', });
};
const navigate = useNavigate();
const handleSubmit = (event) => {
event.preventDefault();
// 发送POST请求到后端保存举报数据
axios.post('/api/jubao/save', {
form:formData
})
.then(() => {
alert("保存成功");
// navigate('/');
handleReset(); // 重置表单
})
.catch(error => {
alert('添加举报时发生错误');
console.error("添加举报时发生错误:", error);
});
};
return (
<div>
<h2>添加举报</h2>
<form onSubmit={handleSubmit} method='post'>
<div className="form-group">
<label>标题:</label>
<input type="text" className="form-control" name="bt" value={formData.bt}
onChange={handleChange} required />
</div>
<div className="form-group">
<label>举报内容:</label>
<input type="text" className="form-control" name="jbnr" value={formData.jbnr}
onChange={handleChange} required />
</div>
<div className="form-group">
<label>问答:</label>
<input type="text" className="form-control" name="wd" value={formData.wd}
onChange={handleChange} required />
</div>
<div className="form-group">
<label>举报时间:</label>
<input type="text" className="form-control" name="jbsj" value={formData.jbsj}
onChange={handleChange} required />
</div>
<div className="form-group">
<label>用户:</label>
<input type="text" className="form-control" name="yh" value={formData.yh}
onChange={handleChange} required />
</div>
<div className="form-group">
<label>状态:</label>
<input type="text" className="form-control" name="zt" value={formData.zt}
onChange={handleChange} required />
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">保存</button>
<button type="button" onClick={handleReset} id="reset" className="btn btn-success" >重置</button>
</div>
</form>
</div>
);
}
export default Addjubao;
node.js设计
// 3.2 创建路由单元
//let router=express.Router();
let router=express.Router();
//3.3 查询关注接口
router.get('/findAll',(req,res)=>{
const zz=req.query.zz;//作者
// console.log("zz="+zz);
const yh=req.query.yh;//用户
// console.log("yh="+yh);
db.getConnection((err,connection)=>{
if(err) throw err;
let sql='select * from guanzhu where 1=1 ';
if(zz){
sql+=`and zz like '%${zz}%'`;//动态拼接sql
}
if(yh){
sql+=`and yh like '%${yh}%'`;//动态拼接sql
}
console.log(sql);
connection.query(sql,(err,results)=>{
if(err) throw err;
res.json(new Response(200,results,'查询成功'))
});
// 释放连接对象
connection.release();
})
});
// 3.3 删除关注接口
router.get('/deleteById',(req,res)=>{
// query是一个对象可以将id解构出来
// let id=req.query.id等价于一下代码
let {id}=req.query;
db.getConnection((err,connection)=>{
if(err) throw err;
// 根据id删除数据
let sql=`delete from guanzhu where gzid=${id}`;
connection.query(sql,(err,results)=>{
if(err) throw err;
res.json(new Response(200,null,'删除成功'))
});
connection.release()
})
});
//3.4 导出
module.exports=router
//3.3 查询关注接口
router.get('/findOne',(req,res)=>{
let {id}=req.query;
db.getConnection((err,connection)=>{
if(err) throw err;
let sql=`select * from guanzhu where gzid=${id}`;
connection.query(sql,(err,results)=>{
if(err) throw err;
res.json(new Response(200,results[0],'查询成功'))
});
// 释放连接对象
connection.release();
})
});
// 3.3 关注修改接口
router.post('/update',(req,res)=>{
// 根据数据库的数据 将id name gender 解构出来
let {id,form}=req.body;
// console.log("form.name ="+form);
db.getConnection((err,connection)=>{
if(err) throw err;
let sql='';
// 需要判断id判断 id存在则为修改接口 id不存在则为新增接口
// 修改
sql=`update guanzhu set zz='${form.zz}',yh='${form.yh}',gzsj='${form.gzsj}' where gzid=${id}`;
// 执行sql操作
connection.query(sql,(err,results)=>{
if(err) throw err;
res.json(new Response(200,null,'修改成功'))
})
})
})
// 3.3 新增关注接口
router.post('/save',(req,res)=>{
// 根据数据库的数据 将id name gender 解构出来
let {form}=req.body;
console.log("form="+form);
// console.log("form.name ="+form.name);
db.getConnection((err,connection)=>{
if(err) throw err;
let sql='';
// 需要判断id判断 id存在则为修改接口 id不存在则为新增接口
sql=`insert into guanzhu(zz,yh,gzsj) values('${form.zz}','${form.yh}','${form.gzsj}')`;
console.log("sql="+sql);
// 执行sql操作
connection.query(sql,(err,results)=>{
if(err) throw err;
res.json(new Response(200,null,'保存成功'))
})
})
})
router.post('/gz',(req,res)=>{
// 根据数据库的数据 将id name gender 解构出来
let {form}=req.body;
console.log("form="+form);
// console.log("form.name ="+form.name);
db.getConnection((err,connection)=>{
if(err) throw err;
let sql='';
// 需要判断id判断 id存在则为修改接口 id不存在则为新增接口
sql='delete from guanzhu where zz='+form.zz+' and yh='+form.yh+'' ;
connection.query(sql,(err,results)=>{
if(err) throw err;
// res.json(new Response(200,null,'保存成功'))
})
sql=`insert into guanzhu(zz,yh,gzsj) values('${form.zz}','${form.yh}','${form.gzsj}')`;
console.log("sql="+sql);
// 执行sql操作
connection.query(sql,(err,results)=>{
if(err) throw err;
res.json(new Response(200,null,'保存成功'))
})
})
})
三、注意事项
1、管理员账号：admin密码：admin 数据库配置文件\sqwd\util\pool.js
2、开发环境为vscode开发，数据库为mysql，使用react语言开发。
3、数据库文件名是reactsqwd.sql 系统名称sqwd. 地址：http://128.0.0.1:3000/login
四 系统实现
需要源码 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
