2021年12月4日星期六

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
                
                
                    
                    
                
            
        
        
            {children}
        
    )
}

components/Meta.js

import Head from 'next/head'

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

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 (
        <>
            
            
            
        
    )
}
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) }} > { 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}
) }

login.js