以下的這些就是一個簡單的增刪查
技術棧
前臺: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.js
react-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
});
});
}
}