login.js

import {Button, Card, Form} from "react-bootstrap";
import {useContext, useState} from "react";
import axios from "axios";
import {server} from "../config";
import {resCode, successTime} from "../utils/util";
import {toast} from "react-toastify";
import {UserContext} from "../utils/userContenxt";
import Router from "next/router";
import jsCookie from "js-cookie";

const login = () => {
    const [uname, setUname] = useState('');
    const [pwd, setPwd] = useState('');
    const {user, setUser} = useContext(UserContext);

    async function submitLogin() {
        const res = await axios.post(`${server}/admin/login`, {uname: uname, pwd: pwd})
        const {code, msg, data} = await res.data
        if (resCode(code, msg)) return
        jsCookie.set('token', data.token)
        setUser(data)
        toast.success('登录成功', {autoClose: successTime})
        await Router.push("/")
    }

    return (

        
            
                Login
            
            
                

                    
                        用户名
                         setUname(event.target.value)}/>
                        
                        
                    
                    
                        Password
                         setPwd(event.target.value)}/>
                    
                    
                
            
        
    
)
}
export default login

_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      
        
        
          

          
        
      
    )
  }
}

export default MyDocument

_app.js

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-toastify/dist/ReactToastify.css';
import {Layout} from "../components/Layout";
import {ToastContainer} from "react-toastify";
import React, {useMemo} from "react";
import {SSRProvider} from "react-bootstrap";
import {UserContext} from "../utils/userContenxt";
import {useLocalStorage} from "../utils/data";


function MyApp({Component, pageProps}) {
    const [user, setUser] = useLocalStorage()
    const value = useMemo(() => ({user, setUser}), [user, setUser]);
    return 
        
            
                
                
            
        
    
}

export default MyApp

config/index.js

const dev = process.env.NODE_ENV !== 'production'
export const server = dev ? 'http://localhost:1211' : 'http://localhost:1211'

components/Layout.js

import Meta from "./Meta";
import {Container, Nav, Navbar, NavDropdown} from "react-bootstrap";
import {useContext} from "react";
import {UserContext} from "../utils/userContenxt";
import jsCookie from "js-cookie";
import Router from "next/router";

export const Layout = ({children}) => {
    const {user} = useContext(UserContext)
    if (user === undefined) return (<> {children} )
    const {menu} = user

    function handleLogout() {
        localStorage.removeItem('u')
        jsCookie.set('token', '')
        Router.push('/login')
    }

    return (<>
        
        
            
                React-Bootstrap
                
                
                    

                        Pricing
                        {menu.map(item => (
                            {item.Children.map(item => (item.divide === 1 ?  :  Router.push(item.path)}>{item.name}))}
                        ))}
                    
                    

                        
                            {user.u.uname}
                        
                         handleLogout()}>退出
                    
                
            
        
        
            {children}
        
    )
}

components/Meta.js

import Head from 'next/head'

const Meta = ({ title, keywords, description }) => {
  return (
    
      
      
      
      
      
      
    
  )
}

Meta.defaultProps = {
  title: 'WebDev Newz',
  keywords: 'web development, programming',
  description: 'Get the latest news in web dev',
}

export default Meta

components/page.js

import {Badge, Button, ButtonGroup, Form, Pagination, Table} from "react-bootstrap";
import Router from "next/router";
import {getPathSearchParamObj} from "../utils/window";
import $ from 'jquery'

export const AddBtn = ({onClick}) => 
export const DataBaseBtn = ({handleShow, handleDel}) => (
    
    
)
export const DataStatus = ({status}) => status == 1 ? YES : NO
export const ModalBtn = ({handleClose, handleSubmit}) => (
    
    
)
export const OptionStatus = ({status}) => {
    return (
        <>
            select status
            YES
            NO
        
    )
}
export const SearchBtn = ({handleSearch, handleReset}) => {
    return (
        
            
            
        
    )
}
export const PageBreadcrumb = () => {
    return 
PageBreadcrumb
}
export const PagePagination = ({page, pageSize, totalCount, totalPage}) => {
    return (
        

             {
                    const paramObj = getPathSearchParamObj();
                    paramObj.pageSize = e.target.value
                    const url = location.pathname + '?' + $.param(paramObj)
                    Router.push(url)
                }}
            >
                Page Size
                1
                3
                5
                10
                20
                50
                100
                200

            
            
                 {
                        const paramObj = getPathSearchParamObj();
                        paramObj.page = page - 1
                        const url = location.pathname + '?' + $.param(paramObj)
                        Router.push(url)
                    }}/>
                 {
                        const paramObj = getPathSearchParamObj();
                        paramObj.page = page + 1
                        const url = location.pathname + '?' + $.param(paramObj)
                        Router.push(url)
                    }}/>

                Current:{page}
                TotalPage:{totalPage}
                TotalCount:{totalCount}
            
        
    )
}
export const PageTable = ({children}) => {
    return (
        
            {children}
        
    )
}