1、头像上传
（1）、前端antd
import React from 'react'
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
function beforeUpload(file) {
console.log('上传前')
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
}
class Avatar extends React.Component {
state = {
loading: false,
};
handleChange = info => {
console.log('handleChaneg',info)
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl =>
this.setState({
imageUrl,
loading: false,
}),
);
}
};
render() {
const { loading, imageUrl } = this.state;
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
return (
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="/touxiang"
beforeUpload={beforeUpload}
onChange={this.handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
);
}
}
export default Avatar
（2）、egg开启文件上传
// config.defult.js
config.multipart = {
mode: 'file'
};
（3）、接口
async touxiang(){
const { ctx } = this;
console.log(ctx.request.files,'-----')
let file = ctx.request.files[0]
let fileData = fs.readFileSync(file.filepath)
let imgpath = path.join(__dirname,'../public',file.filename)
console.log(imgpath,'+++')
fs.writeFileSync(imgpath,fileData)
ctx.body = {
"name": "xxx.png",
"status": "done",
"url": imgpath,
"thumbUrl":imgpath
}
}
2、分页
//service/booklist.js
//返回数据总数
async searchAll(pageSize,currentPage){
const results = await this.app.mysql.select('booklist');
return results.length
}
//全表查询带分页
async searchAll(pageSize,currentPage){
const results = await this.app.mysql.select('booklist',{
limit:pageSize,
offset:(currentPage-1)*pageSize
});
return results
}
3、用户鉴权(react)
路由配置表中区分根路由和异步路由
import Login from '../views/Login'
import List from '../views/List'
import Registry from '../views/Registry'
import Detail from '../views/Detail'
import ShangChuan from '../views/Shangchuan'
//根路由
export const rootRoutes = [
{
path:"/login",
component:Login,
roles:['teacher','student']
},
{
path:"/registry",
roles:['teacher','student'],
component:Registry
},
{
from:'/',
to:'/login'
}
]
//异步路由
export const asyncRoutes = [
{
path:"/login",
component:Login,
roles:['teacher','student']
},
{
path:"/list",
roles:['teacher','student'],
component:List
},
{
path:"/detail",
roles:['teacher'],
component:Detail
},
{
path:"/shangchuan",
roles:['teacher','student'],
component:ShangChuan
},
{
path:"/registry",
roles:['teacher','student'],
component:Registry
},
{
from:'/',
to:'/login'
}
]
登录接口端
//登录接口返回角色信息，根据该角色过滤redux仓库中的路由数组
store.dispatch({
type:'filteroute',
value:ress.data.role
})
redux中过滤路由
import { createStore } from 'redux'
import {rootRoutes,asyncRoutes} from '../route/router_config'
const initState = {
routes:rootRoutes
}
const store = createStore((state=initState,action)=>{
switch(action.type){
case 'filteroute':
return {...state,routes:fileroter(asyncRoutes,action.value)}
default:
return {...state}
}
})
function fileroter(routes,filterStr){
routes = routes.filter((item,index)=>{
let flag = item.roles&&item.roles.includes(filterStr)
if(flag&&item.children){
item.children = fileroter(item.children,filterStr)
}
return flag
})
return routes
}
export default store;
App.js
import React,{Component} from "react";
import RouterView from "./route/ViewRouter";
import store from './store/index'
class App extends Component {
state={
routes:store.getState().routes
}
componentDidMount(){
store.subscribe(()=>{
this.setState({
routes:store.getState().routes
})
})
}
render(){
return (
<div className="App">
<RouterView routes={ this.state.routes } />
</div>
);
}
}
export default App;
如此过滤所得动态路由只可在应用内进行跳转，在浏览器地址栏直接输入新增路由，无论有无权限都是不能直接访问的。
应用内跳转
const columns = [
{
title: '书名',
dataIndex: 'bookname',
key: 'bookname',
render:(text,record)=>{
return <button onClick={()=>{
if(this.isIncludesRoutes(this.state.routes,'/detail')){
this.props.history.push('/detail')
}else{
message.info('没有权限');
}
}}>{text}</button>
}
},
...
]
//判断一个路径是否在合法路由中
isIncludesRoutes=(routes,pathname)=>{
return !!(routes.filter((item,index)=>{
let flag;
if(item.children){
flag = this.isIncludesRoutes(item.children,pathname)
}
return flag?flag:item.path===pathname
}).length)
}
4、模糊搜索
//在userlist表中查询用户名中带o的用户
select * from userlist where username like '%o%';
5、条件筛选
async searchBytiaojian(params){//params即条件对象
const post = await this.app.mysql.get('booklist', params);
return post
}
6、多表联查
有老师表如下：
老师数据库表
有学生表如下：
学生数据库表
现在已知老师的名字叫赵六，请查询赵六的所有学生
select * from (select * from userlist where username='zhaoliu') u join studentlist on u.id = studentlist.teacher_id ;
网友评论