react+AntDesign 之 pc端项目案例

1.环境搭建以及初始化目录

CRA是一个底层基于webpack快速创建React项目的脚手架工具

# 使用npx创建项目
npx create-react-app react-jike

# 进入到项
cd react-jike

# 启动项目
npm start

2.安装SCSS

SASS 是一种预编译的 CSS，支持一些比较高级的语法，可以提高编写样式的效率，CRA接入scss非常简单只需要我们装一个sass工具

1. 安装解析 sass 的包：npm i sass -D
2. 创建全局样式文件：index.scss

3.安装Ant Design

npm install antd --save

4.配置基础路由Router

npm i react-router-dom

pages/Layout/index.js

const Layout = () => {
  return 
this is layout
}
export default Layout

pages/Login/index.js

const Login = () => {
  return 
this is login
}
export default Login

router/index.js

import { createBrowserRouter } from 'react-router-dom'

import Login from '../pages/Login'
import Layout from '../pages/Layout'

const router = createBrowserRouter([
  {
    path: '/',
    element: ,
  },
  {
    path: '/login',
    element: ,
  },
])

export default router

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import router from './router'
import { RouterProvider } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
    
)

5.配置别名路径@

1. 安装 craco 工具包
2. 增加 craco.config.js 配置文件
3. 修改 scripts 命令
4. 测试是否生效

npm i @craco/craco -D

const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

import { createBrowserRouter } from 'react-router-dom'

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
  },
  {
    path: '/login',
    element: <Login />,
  },
])

export default router

VsCode提示配置

实现步骤

1. 在项目根目录创建 jsconfig.json 配置文件
2. 在配置文件中添加以下配置

代码实现

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

:::warning
说明：VSCode会自动读取jsconfig.json 中的配置，让vscode知道@就是src目录
:::

6.gitee管理项目

git remote add origin http
git add .
git commit -m 'init'
git push

7.登陆模块开发

**实现步骤**
 1. 在 `Login/index.js` 中创建登录页面基本结构
 2. 在 Login 目录中创建 index.scss 文件，指定组件样式
 3. 将 `logo.png` 和 `login.png` 拷贝到 assets 目录中

代码实现
pages/Login/index.js

import './index.scss'
import { Card, Form, Input, Button } from 'antd'
import logo from '@/assets/logo.png'

const Login = () => {
  return (
    

      
        
        {/* 登录表单 */}
        

          
            
          
          
            
          
          
            
              登录
            
          
        
      
    
  )
}

export default Login

pages/Login/index.scss

.login {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: center/cover url('~@/assets/login.png');

  .login-logo {
    width: 200px;
    height: 60px;
    display: block;
    margin: 0 auto 20px;
  }

  .login-container {
    width: 440px;
    height: 360px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px rgb(0 0 0 / 10%);
  }

  .login-checkbox-label {
    color: #1890ff;
  }
}

表单校验实现

**实现步骤**
1. 为 Form 组件添加 `validateTrigger` 属性，指定校验触发时机的集合
2. **为 Form.Item 组件添加 name 属性**
3. 为 Form.Item 组件添加 `rules` 属性，用来添加表单校验规则对象

代码实现
page/Login/index.js

const Login = () => {
  return (
    

      
        
      
      
        
      
    
      
        
          登录
        
      
    
  )
}

获取登录表单数据

**实现步骤**
1. 为 Form 组件添加 `onFinish` 属性，该事件会在点击登录按钮时触发
2. 创建 onFinish 函数，通过函数参数 values 拿到表单值
3. Form 组件添加 `initialValues` 属性，来初始化表单值

代码实现
pages/Login/index.js

// 点击登录按钮时触发 参数values即是表单输入数据
const onFinish = formValue => {
  console.log(formValue)
}

...

封装request工具模块

业务背景: 前端需要和后端拉取接口数据，axios是使用最广的工具插件，针对于项目中的使用，我们需要做一些简单的封装

 **实现步骤**
 1. 安装 axios 到项目  
 2. 创建 utils/request.js 文件
 3. 创建 axios 实例，配置 `baseURL，请求拦截器，响应拦截器` 
 4. 在 utils/index.js 中，统一导出request

npm i axios

import axios from 'axios'

const http = axios.create({
  baseURL: 'http://geek.itheima.net/v1_0',
  timeout: 5000
})

// 添加请求拦截器
http.interceptors.request.use((config)=> {
    return config
  }, (error)=> {
    return Promise.reject(error)
})

// 添加响应拦截器
http.interceptors.response.use((response)=> {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data
  }, (error)=> {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error)
})

export { http }

import { request } from './request'
export { request }

使用Redux管理token

npm i react-redux @reduxjs/toolkit //安装Redux相关工具包

配置Redux

import { createSlice } from '@reduxjs/toolkit'
import { http } from '@/utils'
const userStore = createSlice({
  name: 'user',
  // 数据状态
  initialState: {
    token:''
  },
  // 同步修改方法
  reducers: {
    setUserInfo (state, action) {
      state.userInfo = action.payload
    }
  }
})

// 解构出actionCreater
const { setUserInfo } = userStore.actions

// 获取reducer函数
const userReducer = userStore.reducer

// 异步方法封装
const fetchLogin = (loginForm) => {
  return async (dispatch) => {
    const res = await http.post('/authorizations', loginForm)
    dispatch(setUserInfo(res.data.token))
  }
}

export { fetchLogin }

export default userReducer

store下index.js

import { configureStore } from '@reduxjs/toolkit'

import userReducer from './modules/user'

export default configureStore({
  reducer: {
    // 注册子模块
    user: userReducer
  }
})

实现登录逻辑

业务逻辑：

1. 跳转到首页
2. 提示用户登录成功

import { message } from 'antd'
import useStore from '@/store'
import { fetchLogin } from '@/store/modules/user'
import { useDispatch } from 'react-redux'

const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const onFinish = async formValue => {
    await dispatch(fetchLogin(formValue))
    navigate('/')
    message.success('登录成功')
  }
  return (
    

     
    
  )
}

export default Login

token持久化

业务背景: Token数据具有一定的时效时间，通常在几个小时，有效时间内无需重新获取，而基于Redux的存储方式又是基于内存的，刷新就会丢失，为了保持持久化，我们需要单独做处理

封装存取方法

// 封装存取方法

const TOKENKEY = 'token_key'

function setToken (token) {
  return localStorage.setItem(TOKENKEY, token)
}

function getToken () {
  return localStorage.getItem(TOKENKEY)
}

function clearToken () {
  return localStorage.removeItem(TOKENKEY)
}

export {
  setToken,
  getToken,
  clearToken
}

实现持久化逻辑

import { createSlice } from '@reduxjs/toolkit'
import { setToken as _setToken, getToken, removeToken } from '@/utils'
import { loginAPI, getProfileAPI } from '@/apis/user'

const userStore = createSlice({
  name: "user",
  // 数据状态
  initialState: {
    token: getToken() || '',
    userInfo: {}
  },
  // 同步修改方法
  reducers: {
    setToken (state, action) {
      state.token = action.payload
      _setToken(action.payload)
    },
    setUserInfo (state, action) {
      state.userInfo = action.payload
    },
    clearUserInfo (state) {
      state.token = ''
      state.userInfo = {}
      removeToken()
    }
  }
})


// 解构出actionCreater

const { setToken, setUserInfo, clearUserInfo } = userStore.actions

// 获取reducer函数

const userReducer = userStore.reducer

// 登录获取token异步方法封装
const fetchLogin = (loginForm) => {
  return async (dispatch) => {
    const res = await loginAPI(loginForm)
    dispatch(setToken(res.data.token))
  }
}

// 获取个人用户信息异步方法
const fetchUserInfo = () => {
  return async (dispatch) => {
    const res = await getProfileAPI()
    dispatch(setUserInfo(res.data))
  }
}

export { fetchLogin, fetchUserInfo, clearUserInfo }

export default userReducer

刷新浏览器，通过Redux调试工具查看token数据

请求拦截器注入token

业务背景: Token作为用户的数据标识，在接口层面起到了接口权限控制的作用，也就是说后端有很多接口都需要通过查看当前请求头信息中是否含有token数据，来决定是否正常返回数据

拼接方式：config.headers.Authorization = Bearer ${token}}

utils/request.js

// 添加请求拦截器
request.interceptors.request.use(config => {
  // if not login add token
  const token = getToken()
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})
// 添加响应拦截器
// 在响应返回到客户端之前 做拦截 重点处理返回的数据
request.interceptors.response.use((response) => {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response.data
}, (error) => {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  // 监控401 token失效
  console.dir(error)
  if (error.response.status === 401) {
    removeToken()
    router.navigate('/login')
    window.location.reload()
  }
  return Promise.reject(error)
})

export { request }

路由鉴权实现

业务背景：封装 AuthRoute 路由鉴权高阶组件，实现未登录拦截，并跳转到登录页面
实现思路：判断本地是否有token，如果有，就返回子组件，否则就重定向到登录Login

**实现步骤**
1. 在 components 目录中，创建 `AuthRoute/index.jsx` 文件
2. 登录时，直接渲染相应页面组件
3. 未登录时，重定向到登录页面
4. 将需要鉴权的页面路由配置，替换为 AuthRoute 组件渲染

代码实现
components/AuthRoute/index.jsx

import { getToken } from '@/utils'
import { Navigate } from 'react-router-dom'

const AuthRoute = ({ children }) => {
  const isToken = getToken()
  if (isToken) {
    return <>{children}
  } else {
    return 
  }
}

export default AuthRoute

src/router/index.jsx

import { createBrowserRouter } from 'react-router-dom'

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
import AuthRoute from '@/components/Auth'


const router = createBrowserRouter([
  {
    path: '/',
    element: ,
  },
  {
    path: '/login',
    element: ,
  },
])

export default router

9.layout模块

基本结构和样式reset

实现步骤

1. 打开 antd/Layout 布局组件文档，找到示例：顶部-侧边布局-通栏
2. 拷贝示例代码到我们的 Layout 页面中
3. 分析并调整页面布局

代码实现
pages/Layout/index.js

import { Layout, Menu, Popconfirm } from 'antd'
import {
  HomeOutlined,
  DiffOutlined,
  EditOutlined,
  LogoutOutlined,
} from '@ant-design/icons'
import './index.scss'

const { Header, Sider } = Layout

const items = [
  {
    label: '首页',
    key: '1',
    icon: ,
  },
  {
    label: '文章管理',
    key: '2',
    icon: ,
  },
  {
    label: '创建文章',
    key: '3',
    icon: ,
  },
]

const GeekLayout = () => {
  return (
    
      

        

        

          柴柴老师
          
            
               退出
            
          
        
      
      
        
          
        
        
          内容
        
      
    
  )
}
export default GeekLayout

pages/Layout/index.scss

.ant-layout {
  height: 100%;
}

.header {
  padding: 0;
}

.logo {
  width: 200px;
  height: 60px;
  background: url('~@/assets/logo.png') no-repeat center / 160px auto;
}

.layout-content {
  overflow-y: auto;
}

.user-info {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 20px;
  color: #fff;
  
  .user-name {
    margin-right: 20px;
  }
  
  .user-logout {
    display: inline-block;
    cursor: pointer;
  }
}
.ant-layout-header {
  padding: 0 !important;
}

样式reset

npm install normalize.css

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
}

二级路由配置

使用步骤

1. 在 pages 目录中，分别创建：Home（数据概览）/Article（内容管理）/Publish（发布文章）页面文件夹
2. 分别在三个文件夹中创建 index.jsx 并创建基础组件后导出
3. 在router/index.js 中配置嵌套子路由，在Layout中配置二级路由出口
4. 使用 Link 修改左侧菜单内容，与子路由规则匹配实现路由切换

代码实现
pages/Home/index.js

const Home = () => {
  return 
Home
}
export default Home

pages/Article/index.js

const Article = () => {
  return 
Article
}
export default Article

pages/Publish/index.js

const Publish = () => {
  return 
Publish
}
export default Publish

router/index.js

import { createBrowserRouter } from 'react-router-dom'

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
import Publish from '@/pages/Publish'
import Article from '@/pages/Article'
import Home from '@/pages/Home'
import { AuthRoute } from '@/components/Auth'

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      
        
      
    ),
    children: [
      {
        index: true,
        element: ,
      },
      {
        path: 'article',
        element: 
,
      },
      {
        path: 'publish',
        element: ,
      },
    ],
  },
  {
    path: '/login',
    element: ,
  },
])

export default router

配置二级路由出口

路由菜单点击交互实现

点击菜单跳转路由

import { Outlet, useNavigate } from 'react-router-dom'

const items = [
  {
    label: '首页',
    key: '/',
    icon: ,
  },
  {
    label: '文章管理',
    key: '/article',
    icon: ,
  },
  {
    label: '创建文章',
    key: '/publish',
    icon: ,
  },
]

const GeekLayout = () => {
  const navigate = useNavigate()
  const menuClick = (route) => {
    navigate(route.key)
  }
  return (
       
  )
}
export default GeekLayout

菜单反向高亮

const GeekLayout = () => {
  // 省略部分代码
  const location = useLocation()
  const selectedKey = location.pathname
  
  return (
    
      

        

        

          {name}
          
            
               退出
            
          
        
      
      
        
          
        
        
          
        
      
    
  )
}

展示个人信息

实现步骤

1. 在Redux的store中编写获取用户信息的相关逻辑
2. 在Layout组件中触发action的执行
3. 在Layout组件使用使用store中的数据进行用户名的渲染

代码实现
store/userStore.js

import { createSlice } from '@reduxjs/toolkit'
import { http } from '@/utils/request'
import { getToken, setToken } from '@/utils'
const userStore = createSlice({
  name: 'user',
  // 数据
  initialState: {
    token: getToken() || '',
    userInfo: {}
  },
  // 同步修改方法
  reducers: {
    setUserToken (state, action) {
      state.token = action.payload
      // 存入本地
      setToken(state.token)
    },
    setUserInfo (state, action) {
      state.userInfo = action.payload
    }
  }
})

// 解构出actionCreater
const { setUserToken, setUserInfo } = userStore.actions

// 获取reducer函数
const userReducer = userStore.reducer

const fetchLogin = (loginForm) => {
  return async (dispatch) => {
    const res = await http.post('/authorizations', loginForm)
    dispatch(setUserToken(res.data.token))
  }
}


const fetchUserInfo = () => {
  return async (dispatch) => {
    const res = await http.get('/user/profile')
    dispatch(setUserInfo(res.data))
  }
}

export { fetchLogin, fetchUserInfo }

export default userReducer

pages/Layout/index.js

// 省略部分代码
import { fetchUserInfo } from '@/store/modules/user'
import { useDispatch, useSelector } from 'react-redux'


const GeekLayout = () => {
  const dispatch = useDispatch()
  const name = useSelector(state => state.user.userInfo.name)
  useEffect(() => {
    dispatch(fetchUserInfo())
  }, [dispatch])
  return (
    
      

        

        

          {name}
          
            
               退出
            
          
        
      
      
        
          
        
        
          
        
      
    
  )
}
export default GeekLayout

退出登录实现

实现步骤

1. 为气泡确认框添加确认回调事件
2. 在store/userStore.js 中新增退出登录的action函数，在其中删除token
3. 在回调事件中，调用userStore中的退出action
4. 清除用户信息，返回登录页面

代码实现
store/modules/user.js

import { createSlice } from '@reduxjs/toolkit'
import { http } from '@/utils/request'
import { clearToken, getToken, setToken } from '@/utils'
const userStore = createSlice({
  name: 'user',
  // 数据
  initialState: {
    token: getToken() || '',
    userInfo: {}
  },
  // 同步修改方法
  reducers: {
    setUserToken (state, action) {
      state.token = action.payload
      // 存入本地
      setToken(state.token)
    },
    setUserInfo (state, action) {
      state.userInfo = action.payload
    },
    clearUserInfo (state) {
      state.token = ''
      state.userInfo = {}
      clearToken()
    }
  }
})

// 解构出actionCreater
const { setUserToken, setUserInfo, clearUserInfo } = userStore.actions

// 获取reducer函数
const userReducer = userStore.reducer


export { fetchLogin, fetchUserInfo, clearUserInfo }

export default userReducer

pages/Layout/index.js

const GeekLayout = () => {
  // 退出登录
  const loginOut = () => {
    dispatch(clearUserInfo())
    navigator('/login')
  }

  return (
    
      

        

        

          {name}
          
            
               退出
            
          
        
      
      
        
          
        
        
          
        
      
    
  )
}

处理Token失效

业务背景：如果用户一段时间不做任何操作，到时之后应该清除所有过期用户信息跳回到登录

http.interceptors.response.use((response) => {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response.data
}, (error) => {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  console.dir(error)
  if (error.response.status === 401) {
    clearToken()
    router.navigate('/login')
    window.location.reload()
  }
  return Promise.reject(error)
})

首页Home图表展示

图表基础Demo实现

图表类业务渲染，我们可以通过下面的顺序来实现

1. 跑通基础DEMO
2. 按照实际业务需求进行修改

安装echarts

npm i echarts

实现基础Demo

import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

const Home = () => {
  const chartRef = useRef(null)
  useEffect(() => {
    // 1. 生成实例
    const myChart = echarts.init(chartRef.current)
    // 2. 准备图表参数
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    }
    // 3. 渲染参数
    myChart.setOption(option)
  }, [])

  return (
    

      

    
  )
}

export default Home

组件封装

基础抽象

import { useRef, useEffect } from 'react'
import * as echarts from 'echarts'

const BarChart = () => {
  const chartRef = useRef(null)
  useEffect(() => {
    // 1. 生成实例
    const myChart = echarts.init(chartRef.current)
    // 2. 准备图表参数
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    }
    // 3. 渲染参数
    myChart.setOption(option)
  }, [])
  return 

}

export { BarChart }

抽象可变参数

import { useRef, useEffect } from 'react'
import * as echarts from 'echarts'

const BarChart = ({ xData, sData, style = { width: '400px', height: '300px' } }) => {
  const chartRef = useRef(null)
  useEffect(() => {
    // 1. 生成实例
    const myChart = echarts.init(chartRef.current)
    // 2. 准备图表参数
    const option = {
      xAxis: {
        type: 'category',
        data: xData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: sData,
          type: 'bar'
        }
      ]
    }
    // 3. 渲染参数
    myChart.setOption(option)
  }, [sData, xData])
  return 

}

export { BarChart }

import { BarChart } from './BarChart'

const Home = () => {
  return (
    

      

      
    
  )
}

export default Home

10.API模块封装

// 用户相关的所有请求
import { request } from "@/utils"
// 1. 登录请求

export function loginAPI (formData) {
  return request({
    url: '/authorizations',
    method: 'POST',
    data: formData
  })
}

// 2. 获取用户信息

export function getProfileAPI () {
  return request({
    url: '/user/profile',
    method: 'GET'
  })
}

11.发布文章模块

实现基础文章发布

创建基础结构

import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import './index.scss'

const { Option } = Select

const Publish = () => {
  return (
    

      首页 },
            { title: '发布文章' },
          ]}
          />
        }
      >
        

          
            
          
          
            
              推荐
            
          
          

          
            
              
                发布文章
              
            
          
        
      
    
  )
}

export default Publish

pages/Publish/index.scss

.publish {
  position: relative;
}

.ant-upload-list {
  .ant-upload-list-picture-card-container,
  .ant-upload-select {
    width: 146px;
    height: 146px;
  }
}

准备富文本编辑器

**实现步骤**
 1. 安装富文本编辑器 
 2. 导入富文本编辑器组件以及样式文件
 3. 渲染富文本编辑器组件
 4. 调整富文本编辑器的样式

代码落地
1-安装 react-quill

npm i [email protected]

2-导入资源渲染组件

import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'

const Publish = () => {
  return (
    // ...
    

      
        
      
    
  )
}

.publish-quill {
  .ql-editor {
    min-height: 300px;
  }
}

频道数据获取

实现步骤

1. 使用useState初始化数据和修改数据的方法
2. 在useEffect中调用接口并保存数据
3. 使用数据渲染对应模版

代码实现

import { http } from '@/utils'

// 频道列表
const [channels, setChannels] = useState([])

// 调用接口
useEffect(() => {
    async function fetchChannels() {
      const res = await http.get('/channels')
      setChannels(res.data.channels)
    }
    fetchChannels()
}, [])

// 模板渲染
return (
 
    
      {channels.map(item => (
        
          {item.name}
        
      ))}
    
  
)

发布文章

// 发布文章
const onFinish = async (formValue) => {
  const { channel_id, content, title } = formValue
  const params = {
    channel_id,
    content,
    title,
    type: 1,
    cover: {
      type: 1,
      images: []
    }
  }
  await http.post('/mp/articles?draft=false', params)
  message.success('发布文章成功')
}

上传封面实现

准备上传结构

  
    
      单图
      三图
      无图
    
  
  
    

      
    
  

实现基础上传

实现步骤

1. 为 Upload 组件添加 action 属性，配置封面图片上传接口地址
2. 为 Upload组件添加 name属性, 接口要求的字段名
3. 为 Upload 添加 onChange 属性，在事件中拿到当前图片数据，并存储到React状态中

代码实现

import { useState } from 'react'

const Publish = () => {
  // 上传图片
  const [imageList, setImageList] = useState([])
  const onUploadChange = (info) => {
      setImageList(info.fileList)
  }
  return (
   	
      
        
          单图
          三图
          无图
        
      
      
        

          
        
      
    
  )
}

切换图片Type

**实现步骤**
1. 点击单选框时拿到当前的类型value
2. 根据value控制上传组件的显示（大于零时才显示）

const Publish = ()=>{
  // 控制图片Type
  const [imageType, setImageType] = useState(0)

  const onTypeChange = (e) => {
    console.log(e)
    setImageType(e.target.value)
  }
  
  return (
    
      
        单图
        三图
        无图
      
      {imageType > 0 &&
      
        

          
        
      }
    
  )
}

控制最大上传图片数量

实现步骤

1. 通过 maxCount 属性限制图片的上传图片数量

{imageType > 0 &&
 1}
>
  

    
  
}

暂存图片列表实现

业务描述
如果当前为三图模式，已经完成了上传，选择单图只显示一张，再切换到三图继续显示三张，该如何实现？

实现思路
在上传完毕之后通过ref存储所有图片，需要几张就显示几张，其实也就是把ref当仓库，用多少拿多少

实现步骤

1. 通过useRef创建一个暂存仓库，在上传完毕图片的时候把图片列表存入
2. 如果是单图模式，就从仓库里取第一张图，以数组的形式存入fileList
3. 如果是三图模式，就把仓库里所有的图片，以数组的形式存入fileList

代码实现

const Publish = () => {
  // 上传图片
  const cacheImageList = useRef([])
  const [imageList, setImageList] = useState([])
  const onUploadChange = (info) => {
      setImageList(info.fileList)
      cacheImageList.current = info.fileList
  }

  // 控制图片Type
  const [imageType, setImageType] = useState(0)

  const onRadioChange = (e) => {
    const type = e.target.value
    setImageType(type)
    if (type === 1) {
      // 单图，截取第一张展示
      const imgList = cacheImageList.current[0] ? [cacheImageList.current[0]] : []
      setImageList(imgList)
    } else if (type === 3) {
      // 三图，取所有图片展示
      setImageList(cacheImageList.current)
    }
  }

  return (
    {imageType > 0 &&
     1}
      fileList={imageList}
      >
      

        
      
    }
)
}

注意：需要给Upload组件添加fileList属性，达成受控的目的

发布带封面的文章

校验图片类型和数量是否吻合

// 发布文章
  const onFinish = async (formValue) => {
    if (imageType !== imageList.length) return message.warning('图片类型和数量不一致')
    const { channel_id, content, title } = formValue
    const params = {
      channel_id,
      content,
      title,
      type: imageType,
      cover: {
        type: imageType,
        images: imageList.map(item => item.response.data.url)
      }
    }
    await http.post('/mp/articles?draft=false', params)
    message.success('发布文章成功')
  }

12.文章列表模块

静态结构创建

筛选区结构搭建

1. 如何让RangePicker日期范围选择框选择中文
2. Select组件配合Form.Item使用时，如何配置默认选中项
   

代码实现

import { Link } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'

const { Option } = Select
const { RangePicker } = DatePicker

const Article = () => {
  return (
    

      首页 },
            { title: '文章列表' },
          ]} />
        }
        style={{ marginBottom: 20 }}
      >
        
          
            
              全部
              草稿
              审核通过
            
          

          
            
              Jack
              Lucy
            
          

          
            {/* 传入locale属性 控制中文显示*/}
            
          

          
            
              筛选
            
          
        
      
    
  )
}

export default Article

表格区域结构

代码实现

// 导入资源
import { Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'

const Article = () => {
  // 准备列数据
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      width: 120,
      render: cover => {
        return 
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 220
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: data => 审核通过
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate'
    },
    {
      title: '阅读数',
      dataIndex: 'read_count'
    },
    {
      title: '评论数',
      dataIndex: 'comment_count'
    },
    {
      title: '点赞数',
      dataIndex: 'like_count'
    },
    {
      title: '操作',
      render: data => {
        return (
          
            } />
            }
            />
          
        )
      }
    }
  ]
  // 准备表格body数据
  const data = [
    {
      id: '8218',
      comment_count: 0,
      cover: {
        images: [],
      },
      like_count: 0,
      pubdate: '2019-03-11 09:00:00',
      read_count: 2,
      status: 2,
      title: 'wkwebview离线化加载h5资源解决方案'
    }
  ]
  return (
    

      {/*        */}
      
        
  )
}
渲染频道数据
实现步骤
 
   
使用axios获取数据
 
   
将使用频道数据列表改写下拉框组件
 
  
代码实现
 pages/Article/index.js
const Article = ()=>{
  // 获取频道列表
  const [channels, setChannels] = useState([])
  useEffect(() => {
      async function fetchChannels() {
        const res = await http.get('/channels')
        setChannels(res.data.channels)
      }
      fetchChannels()
  }, [])
  // 渲染模板
return (
    
        
          {channels.map(item => (
            
              {item.name}
            
          ))}
        
    
  )
}

 hooks/useChannel.js
// 封装获取频道列表的逻辑
import { useState, useEffect } from 'react'
import { getChannelAPI } from '@/apis/article'
function useChannel () {
  // 1. 获取频道列表所有的逻辑
  // 获取频道列表
  const [channelList, setChannelList] = useState([])

  useEffect(() => {
    // 1. 封装函数 在函数体内调用接口
    const getChannelList = async () => {
      const res = await getChannelAPI()
      setChannelList(res.data.channels)
    }
    // 2. 调用函数
    getChannelList()
  }, [])
  // 2. 把组件中要用到的数据return出去
  return {
    channelList
  }
}

export { useChannel }
pages/Article/index.js
import { useChannel } from '@/hooks/useChannel'
const { channelList } = useChannel()
<Form.Item label="频道" name="channel_id">
    <Select placeholder="请选择文章频道" style={{ width: 120 }}>
       {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}</Select>
</Form.Item>
渲染表格数据
实现步骤
 
   
声明列表相关数据管理
 
   
使用useState声明参数相关数据管理
 
   
调用接口获取数据
 
   
使用接口数据渲染模板
 
  
代码实现
const Article = ()=>{
  // 省略部分代码...
  // 文章列表数据管理
  const [article, setArticleList] = useState({
      list: [],
      count: 0
  })
  
  const [params, setParams] = useState({
    page: 1,
    per_page: 4,
    begin_pubdate: null,
    end_pubdate: null,
    status: null,
    channel_id: null
  })
  
  useEffect(() => {
    async function fetchArticleList () {
      const res = await http.get('/mp/articles', { params })
      const { results, total_count } = res.data
      setArticleList({
        list: results,
        count: total_count
      })
    }
    fetchArticleList()
  }, [params])
  
  // 模板渲染
  return (
   
      

  )
}
筛选功能实现
实现步骤
 
   
为表单添加onFinish属性监听表单提交事件，获取参数
 
   
根据接口字段格式要求格式化参数格式
 
   
修改params 参数并重新使用新参数重新请求数据
 
  
代码实现
// 获取文章列表
  const [list, setList] = useState([])
  const [count, setCount] = useState(0)

  async function getList (reqData = {}) {
    const res = await getArticleListAPI(reqData)
    setList(res.data.results)
    setCount(res.data.total_count)
  }

  useEffect(() => {
    getList()
  }, [])

  // 筛选文章列表
  const onFinish = async (formValue) => {
    console.log(formValue)
    // 1. 准备参数
    const { channel_id, date, status } = formValue
    const reqData = {
      status,
      channel_id,
      begin_pubdate: date[0].format('YYYY-MM-DD'),
      end_pubdate: date[1].format('YYYY-MM-DD'),
    }
    // 2. 使用参数获取新的列表
    getList(reqData)
  }
分页功能实现
实现步骤
 
   
为Table组件指定pagination属性来展示分页效果
 
   
在分页切换事件中获取到筛选表单中选中的数据
 
   
使用当前页数据修改params参数依赖引起接口重新调用获取最新数据
 
  
代码实现
const pageChange = (page) => {
    // 拿到当前页参数 修改params 引起接口更新
    setParams({
      ...params,
      page
    })
}

return (
   

)
删除功能
实现步骤
 
   
给删除文章按钮绑定点击事件
 
   
弹出确认窗口，询问用户是否确定删除文章
 
   
拿到参数调用删除接口，更新列表
 
  
代码实现
// 删除回调
const delArticle = async (data) => {
    await http.delete(`/mp/articles/${data.id}`)
    // 更新列表
    setParams({
      page: 1,
      per_page: 10
    })
}

const columns = [
  // ...
  {
      title: '操作',
      render: data => {
        return (
          
            } />
             delArticle(data)}
              okText="确认"
              cancelText="取消"
            >
              }
              />
            
          
        )
      }
]
编辑文章跳转
代码实现
const columns = [
  // ...
  {
    title: '操作',
    render: data => (
      
        }
          onClick={() => navagite(`/publish?id=${data.id}`)} />
        />
      
    )
  }
]

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                

        
你可能感兴趣的:(React,ant,design,vue,react.js,前端)
        

            

                

                    
element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
                    
                    
Long类型前后端数据不一致
                        igotyback
前端
                        
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
                    
                    
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
                    
                    
【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
                    
                    
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
                    
                    
HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
                    
                    
node.js学习
                        小猿L
node.jsnode.js学习vim
                        
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
                    
                    
关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解
                        秋刀prince
mysqlmysql数据库
                        
提示：啰嗦一嘴，数据库的任何操作和验证前，一定要记得先备份！！！不会有错；文章目录问题发现一、问题导致的可能原因1、页大小2、行格式2.1compact格式2.2Redundant格式2.3Dynamic格式2.4Compressed格式3、BLOB和TEXT列二、解决办法1、修改页大小（不推荐）2、修改行格式3、修改数据类型为BLOB和TEXT列4、其他优化方式（可以参考使用）4.1合理设置数据
                    
                    
vue3中el-table中点击图片放大时，被表格覆盖
                        叫我小鹏呀
vue.jsjavascript前端
                        
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
                    
                    
vue项目element-ui的table表格单元格合并
                        酋长哈哈
vue.jselementuijavascript前端
                        
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
                    
                    
Vue中table合并单元格用法
                        weixin_30613343
javascriptViewUI
                        
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
                    
                    
springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
                    
                    
react-intl——react国际化使用方案
                        苹果酱0567
面试题汇总与解析java开发语言中间件springboot后端
                        
国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
                    
                    
Vue( ElementUI入门、vue-cli安装)
                        m0_l5z
elementuivue.js
                        
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
                    
                    
博客网站制作教程
                        2401_85194651
javamaven
                        
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
                    
                    
vue+el-table 可输入表格使用上下键进行input框切换
                        以对_
vue学习记录vue.jsjavascript前端
                        
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
                    
                    
vue + Element UI table动态合并单元格
                        我家媳妇儿萌哒哒
elementUIvue.js前端javascript
                        
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
                    
                    
vue 创建项目报错：command failed: npm install --loglevel error
                        那鱼、会飞
vue.jsvue-cli3
                        
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
                    
                    
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）
                        java毕设程序源码王哥
php课程设计vue.js
                        
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
                    
                    
最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
                    
                    
补充元象二面
                        Redstone Monstrosity
前端面试
                        
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
                    
                    
微信小程序开发注意事项
                        jun778895
微信小程序小程序
                        
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
                    
                    
字节二面
                        Redstone Monstrosity
前端面试
                        
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
                    
                    
You have an error in your SQL syntax； check the manual that corresponds to your MySQL server version
                        努力的菜鸟~
sql数据库
                        
YouhaveanerrorinyourSQLsyntax;checkthemanualthatcorrespondstoyourMySQLserverversionfortherightsyntaxtousenear‘IDENTIFIEDBY‘123456’WITHGRANTOPTION’atline1在mysql5.7之前GRANTALLPRIVILEGESON*.*TO'root'@'%'I
                    
                    
vue render 函数详解 (配参数详解)
                        你的眼睛會笑
vue2vue.jsjavascript前端
                        
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
                    
                    
前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
                    
                    
VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。
                        焚木灵
node.jsvue
                        
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
                    
                    
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因
                        hw_happy
开发语言前端vue.jsjavascript
                        
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
                    
                    
uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
                    
                    
2021-06-07 Do What You Are Meant To Do
                        春生阁

                        
Don’tgiveupontryingtofindbalanceinyourlife.Sticktoyourpriorities.Rememberwhat’smostimportanttoyouanddoeverythingyoucantoputyourselfinapositionwhereyoucanfocusonthosepriorities,ratherthanbeingpulledbyt
                    
                                
JVM StackMapTable 属性的作用及理解
                                    lijingyao8206
jvm字节码Class文件StackMapTable
                                    
  
      在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版
                                
                                
回调函数调用方法
                                    百合不是茶
java
                                    
最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记 记录一下 
  
代码很简单: 
    
      MainDemo  :调用方法  得到方法的返回结果 
   
     
                                
                                
[时间机器]制造时间机器需要一些材料
                                    comsci
制造
                                    
      根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质 
    和材料... 
 
      甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得...... 
 
     
                                
                                
开口埋怨不如闭口做事
                                    邓集海
邓集海 做人 做事 工作
                                    
“开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。 　　 　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。 　　 　　
                                
                                
jQuery插件开发全解析，类级别与对象级别开发
                                    IT独行者
jquery开发插件　函数
                                    
jQuery插件的开发包括两种：   一种是类级别的插件开发，即给 
jQuery添加新的全局函数，相当于给 
jQuery类本身添加方法。 
jQuery的全局函数就是属于 
jQuery命名空间的函数，另一种是对象级别的插件开发，即给 
jQuery对象添加方法。下面就两种函数的开发做详细的说明。  
   
1 
、类级别的插件开发   类级别的插件开发最直接的理解就是给jQuer
                                
                                
Rome解析Rss
                                    413277409
Rome解析Rss
                                    
import java.net.URL;  
import java.util.List;  
  
import org.junit.Test;  
  
import com.sun.syndication.feed.synd.SyndCategory;  
import com.sun.syndication.feed.synd.S
                                
                                
RSA加密解密
                                    无量
加密解密rsa
                                    
RSA加密解密代码 
 
代码有待整理 
 
 
package com.tongbanjie.commons.util;


import java.security.Key;

import java.security.KeyFactory;

import java.security.KeyPair;

import java.security.KeyPairGenerat
                                
                                
linux 软件安装遇到的问题
                                    aichenglong
linux遇到的问题ftp
                                    
1 ftp配置中遇到的问题 
   500 OOPS: cannot change directory 
  出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了 
  修改方法:1 修改/etc/selinux/config 中SELINUX=disabled 
    2 source /etc
                                
                                
面试心得
                                    alafqq
面试
                                    
最近面试了好几家公司。记录下； 
支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败； 
阿里金融，面试官人也挺和善，只不过我让他吐血了。。。 
由于印象比较深，记录下； 
1，自我介绍 
2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 
3，什么是包装类，包装类的优点； 
4，平时看过什么书？NND，什么书都没看过。。照样
                                
                                
java的多态性探讨
                                    百合不是茶
java
                                    
java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 
//package 1;
class A{

    public void test(){
       System.out.println("A");
  }
}

class D extends A{

    public void test(){
       S
                                
                                
网络编程基础篇之JavaScript-学习笔记
                                    bijian1013
JavaScript
                                    
1.documentWrite 
<html>
<head>
    <script language="JavaScript">
         document.write("这是电脑网络学校");
         document.close();
    </script>
</h
                                
                                
探索JUnit4扩展：深入Rule
                                    bijian1013
JUnitRule单元测试
                                    
        本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。 
        在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte
                                
                                
[CSS]CSS浮动十五条规则
                                    bit1129
css
                                    
这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。 
  
1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了
                                
                                
【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景
                                    bit1129
partition
                                    
0.Kafka服务器配置 
3个broker 
1个topic，6个partition，副本因子是2 
2个consumer，每个consumer三个线程并发读取 
  1. Producer 
package kafka.examples.multibrokers.producers;

import java.util.Properties;
import java.util.
                                
                                
zabbix_agentd.conf配置文件详解
                                    ronin47
zabbix 配置文件
                                    
Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]， 或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个
                                
                                
java--19.用矩阵求Fibonacci数列的第N项
                                    bylijinnan
fibonacci
                                    
参考了网上的思路，写了个Java版的： 
 
 



public class Fibonacci {

	final  static int[] A={1,1,1,0};
	
	
	public static void main(String[] args) {
		int n=7;
		for(int i=0;i<=n;i++){
			int f=fibonac
                                
                                
Netty源码学习-LengthFieldBasedFrameDecoder
                                    bylijinnan
javanetty
                                    
先看看LengthFieldBasedFrameDecoder的官方API 
 
http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html 
 
API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下： 
 
实
                                
                                
AES加密解密
                                    chicony
加密解密
                                    
AES加解密算法，使用Base64做转码以及辅助加密： 
package com.wintv.common;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

import sun.misc.BASE64Decod
                                
                                
文件编码格式转换
                                    ctrain
编码格式
                                    

package com.test;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

                                
                                
mysql 在linux客户端插入数据中文乱码
                                    daizj
mysql中文乱码
                                    
1、查看系统客户端，数据库，连接层的编码 
 查看方法： http://daizj.iteye.com/blog/2174993 
进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+------
                                
                                
好代码是廉价的代码
                                    dcj3sjt126com
程序员读书
                                    
  
长久以来我一直主张：好代码是廉价的代码。 
当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。 当他们走近看我的表情、知道我是认真的时，才收敛一点。 
当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 
我只
                                
                                
Android网络请求库——android-async-http
                                    dcj3sjt126com
android
                                    
在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通
                                
                                
ORACLE 复习笔记之SQL语句的优化
                                    eksliang
SQL优化Oracle sql语句优化SQL语句的优化
                                    
转载请出自出处：http://eksliang.iteye.com/blog/2097999 
  SQL语句的优化总结如下 
  
sql语句的优化可以按照如下六个步骤进行： 
 
 合理使用索引 
 避免或者简化排序 
 消除对大表的扫描 
 避免复杂的通配符匹配 
 调整子查询的性能 
 EXISTS和IN运算符 
 
下面我就按照上面这六个步骤分别进行总结： 
                                
                                
浅析：Android 嵌套滑动机制（NestedScrolling）
                                    gg163
android移动开发滑动机制嵌套
                                    
谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 
NestedScrolling的特性可以体现在哪里呢？<!--[if !supportLineBreakNewLine]--><!--[endif]--> 
比如你使用了Toolbar，下面一个ScrollView，向上滚
                                
                                
使用hovertree菜单作为后台导航
                                    hvt
JavaScriptjquery.nethovertreeasp.net
                                    
  
hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 
0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm 
hovertree插件包含文件： 
http://keleyi.com/jq/hovertree/css
                                
                                
SVG 教程 （二）矩形
                                    天梯梦
svg
                                    
SVG <rect>   SVG Shapes 
SVG有一些预定义的形状元素，可被开发者使用和操作： 
 
 矩形 <rect> 
 圆形 <circle> 
 椭圆 <ellipse> 
 线 <line> 
 折线 <polyline> 
 多边形 <polygon> 
 路径 <path> 
 
                                
                                
一个简单的队列
                                    luyulong
java数据结构队列
                                    

public class MyQueue {
	private long[] arr;

	private int front;

	private int end;
	// 有效数据的大小
	private int elements;

	public MyQueue() {
		arr = new long[10];
		elements = 0;
		front 
                                
                                
基础数据结构和算法九：Binary Search Tree
                                    sunwinner
Algorithm
                                    
  
A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all
                                
                                
项目出现的一些问题和体会
                                    Steven-Walker
DAOWebservlet
                                    
     第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。 
    这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 
dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。 
 &
                                
                                
高手问答：Java老A带你全面提升Java单兵作战能力！
                                    ITeye管理员
java
                                    
本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 
 
 
作者简介： 
 
淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 
 
CSDN博客地址： 
http://blog.csdn.net/xieyuooo 
 
作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，
                                
                
            
        
    

    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    

    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.