React模擬後台專案（七）Login頁面檔案配置

一、登入 src/page/login/index.js

// 導入庫

// 匯入react
import react,
from
'react'
import
from
'react-redux'
import
from
'react-router-dom'
import
from
'./store/actioncreators'
// 匯入樣式
// 匯入styled 
import
from
'./style.js'
// 匯入ui
import
from
'antd'
;class
login
extends
component
}// 表單
onfinish
= values =>
)//表單資料
this
.props.
loginfn
(values,()
=>)}
)};onfinishfailed
= errorinfo =>
;render()
return
(// 背景圖設定未生效 未找到原因
}>
"loading..." spinning=
>
後台管理系統<
/title>
name=
"basic"
initialvalues=
} onfinish=
onfinishfailed=
>
label=
"username"
name=
"username"
rules=]}
>
>
<
/form.item>
label=
"password"
name=
"password"
rules=]}
>
>
<
/form.item>
"remenberme"
>
remember me<
/checkbox>
"primary" htmltype=
"submit"
>
submit
<
/button>
<
/div>
<
/form.item>
<
/form>
<
/loginform>
<
/spin>
<
/logindiv>)}
}const
mapstatetoprops
= state =>
}const
mapdispatchtoprops
= dispatch =>
}export
default
connect
(mapstatetoprops, mapdispatchtoprops)
(login)

// 匯入styled

import styled from
'styled-components'
;export
const logindiv = styled.div`
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #f0f2f5 ;
`export
const loginform = styled.div`
height: 300px;
width: 400px;
.remenberme
`export
const title = styled.h1`
font-size: 30px;
font-weight: blod;
margin-bottom: 20px;
text-align: center;
`

import reducer from

'./reducer'
;import
*as actioncreators from
'./actioncreators'
;import
*as constants from
'./actiontypes'
;export

// export const http動詞或描述 = '模組名/http動詞或描述';

// export const arts_add = 'login/arts_add';//重置
export
const
post_login
='login/post_login'
// 相關參考**
// export const change_search_table = 'accreditcreditmain/change_search_table';//查詢
// export const page_change_data = 'accreditcreditmain/page_change_data';//分頁
// export const reset_table_list = 'accreditcreditmain/reset_table_list';//重置

// 一、常量

import
*as constants from
'./actiontypes'
// 二、ui元件
import
from
'antd'
;// 三、介面
import
from
'../../../api/index'
export
const
loginaction
=(params,callback)
=> dispatch =>})
// 提示
message.
success
('登陸成功')}
else
callback()
})}

import

from
'immutable'
import
*as constants from
'./actiontypes'
const defaultstate =
fromjs()
export
default
(state = defaultstate, action)
=>
}

react專案後台及上線步驟

應同學要求，本人將react專案建立後台及上線流程書寫如下 前端部分 略 後台部分 注 這裡的後台是用的nodejs搭建的，使用的是express框架 ejs模板 首先通過express快速搭建後台環境 express e 專案名 cd 專案名 npm i 命令如下 然後跟著操作就行了 後台環境搭建...

react 自定義json資料模擬後台

前台 1 在public目錄下建立json檔案 如 public api data.json 2 在json檔案中自定義資料 3 當請求url為 api data.json 時,會自動去到public目錄下查詢,並返回json內容 後台 建立.json檔案,放入json資料 let xx requi...

vue專案模擬後台資料

這次我們來模擬一些後台資料，然後去請求它並且將其渲染到介面上。關於專案的搭建鄙人斗膽向大家推薦我的一篇隨筆 vue開發環境搭建及熱更新 我這裡為了演示這個過程所以自己編寫了這個data.json檔案 1,14 24,34 44,54 64 74 teacher 75,79,83,8791 92 93...