以下的这些就是一个简单的增删查
技术栈
前台：react
后台： egg+mysql
后台
app/controller.user
'use strict';
const Controller = require('egg').Controller;
class userController extends Controller {
//获取数据库数据
async userlist() {
const { ctx ,service} = this;
let result=await service.user.userlist()
ctx.body={
...{result},
code:1,
}
}
//详情
async getdetail() {
const { ctx ,service} = this;
let uid=ctx.query.uid;
console.log(uid,"11")
let result= await service.user.getdetail(uid);
ctx.body={
...{result},
code:1,
}
}
//删除
async getdel(){
const {ctx,service}=this;
let uid=ctx.query.uid;
let result=await service.user.getdel(uid)
ctx.body=result;
}
//添加
async addlist(){
const {ctx,service}=this;
let username=ctx.request.body.username;
let name=ctx.request.body.name;
let password=ctx.request.body.password;
let tel=ctx.request.body.tel;
let address=ctx.request.body.address;
let result=await service.user.addlist(username,name,password,tel,address)
ctx.body=result;
}
}
module.exports = userController;
app/service/user.js
const Service=require("egg").Service;
class UserService extends Service{
async userlist(){
let result=await this.app.mysql.select("users")
// console.log(result)
return result;
}
//详情
async getdetail(uid){
return await this.app.mysql.get("users",{uid})
}
//删除
async getdel(uid){
console.log(uid,'1')
return await this.app.mysql.delete("users",{uid:uid})
}
//添加
async addlist(username,name,password,tel,address){
console.log(username,"111")
return await this.app.mysql.insert("users",{
username:username,
name:name,
tel:tel,
address:address,
})
}
async right(uid,type){
let row={}
if(type=="add"){
row={
uid,
type:1
}
}else{
console.log(type,222)
row={
uid,
type:0,
}
}
const result=await this.app.mysql.update("users",row)
if(result.affectedRows===1){
return{
code:1,
message:"更新成功"
}
}else{
return {
code:0,
message:"更新失败"
}
}
}
}
module.exports=UserService;
router.js
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);
router.get("/user",controller.user.userlist)
router.get("/detail",controller.user.getdetail);
router.get("/delete",controller.user.getdel);
router.post("/add",controller.user.addlist);
};
config.detault.js
plugin- 要记得下载
egg-mysql哦
mysql数据表格式
前台
package.json代理一定要写啊
router.jsreact-router-dom需要下载- 记得在App.js引入调用
import React, { Component } from 'react'
import {Redirect,Route,BrowserRouter,Switch} from "react-router-dom"
import User from "../view/user/user"
import Detail from "../view/detail/detail"
import Login from "../view/login/login"
function RootRouter(){
return <BrowserRouter>
<Switch>
<Route path="/user" component={User}></Route>
<Route path="/detail" component={Detail}></Route>
<Route path="/login" component={Login}/ >
<Redirect from="/" to="/login"/>
</Switch>
</BrowserRouter>
}
export default RootRouter;
user.js- 以下的样式很简单，在这里就不显示了！！！！
import React, { Component } from 'react';
import axios from 'axios';
import '../user/user.css';
export default class User extends Component {
state = {
userlist: [],
username: '',
name: '',
password: '',
tel: '',
address: '',
flag:false,
};
render() {
let { userlist, username, name, password, tel, address,flag }=this.state;
return (
<div className="box">
<div className="userlist">
<button onClick={this.add.bind(this)}>添加</button>
<ul>
{userlist &&
userlist.map((item, index) => {
return (
<li key={index}>
<img src={item.img} alt="" /> <span>{item.username} </span><span>{item.name}</span> <span>电话:{item.tel}</span><span> 地址:{item.address}</span>
<button onClick={this.handitem.bind(this, item.uid)}>详情</button>
<button onClick={this.handupdate.bind(this,item.uid,item.type)}>设置管理</button> <button>编辑</button>{' '}
<button
style={{ background: 'red', color: '#fff', border: '1px solid #ccc' }}
onClick={this.handdel.bind(this, item.uid)}
>
删除
</button>
</li>
);
})}
</ul>
</div>
{
flag ? <div className="daling">
<div className="mask">
<p>昵称 <input type="text" placeholder="请输入昵称" name="username" value={username} onChange={this.handChange.bind(this)}/></p>
<p>姓名 <input type="text" placeholder="请输入姓名" name="name" value={name} onChange={this.handChange.bind(this)}/></p>
<p>密码 <input type="text" placeholder="请输入密码" name="password" value={password} onChange={this.handChange.bind(this)}/></p>
<p>电话 <input type="text" placeholder="请输入电话" name="tel" value={tel} onChange={this.handChange.bind(this)}/></p>
<p>地址 <input type="text" placeholder="请输入地址" name="address" value={address} onChange={this.handChange.bind(this)}/></p>
<button onClick={this.none.bind(this)}>取消</button> <button onClick={this.sure.bind(this)}>确定</button>
</div>
</div> :null
}
</div>
);
}
componentDidMount() {
axios.get('/user').then(res => {
this.setState({
userlist: res.data.result
});
});
}
//跳入详情
handitem(uid) {
let { history } = this.props;
history.push('/detail', { uid });
}
//删除
handdel(uid) {
let { uerlist } = this.state;
axios.get(`/delete?uid=${uid}`).then(res => {
if (res.data.affectedRows === 1) {
axios.get('/user').then(res => {
this.setState({
userlist: res.data.result
});
});
}
});
}
add(){ //点击显示隐藏遮罩
let {flag}=this.state;
this.setState({
flag:true
})
}
//点击显示隐藏遮罩
none(){
let {flag}=this.state;
this.setState({
flag:false,
})
}
//受控组件
handChange(e){
let target=e.target;
let name=target.name;
this.setState({
[name]:e.target.value,
})
}
sure(){ //点击请求add接口
let { userlist, username, name, password, tel, address,flag }=this.state;
axios.post("/add",{
username:username,
name:name,
password:password,
tel:tel,
address:address
}).then(res=>{
if (res.data.affectedRows === 1) {
axios.get('/user').then(res => {
this.setState({
userlist: res.data.result,
flag:false,
});
});
this.setState({
username:"",
name:"",
password:"",
tel:"",
address:"",
})
}
})
}
}
detail.js
import React, { Component } from 'react';
import axios from 'axios';
import "./detail.css"
export default class Detail extends Component {
state = {
detail: {}
};
render() {
let { detail } = this.state;
return (
<div className="detail">
<p><img src={detail.img} alt=""/></p>
<h3>{detail.username}</h3>
</div>
);
}
componentDidMount() {
// console.log(this.props.location.state.uid)
let uid = this.props.location.state.uid;
axios.get('/detail?uid=' + uid).then(res => {
this.setState({
detail: res.data.result
});
});
}
}
