应用系统体系架构 作业11 MongoDB和Neo4j

Author: Musicminion

package-lock.json

@@ -16,6 +16,7 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^4.18.9",
+    "antd-img-crop": "^4.5.2",
     "base-64": "^1.0.0",
     "config": "^3.3.7",
     "crypto-js": "^4.1.1",

package.json

@@ -28,6 +28,7 @@ import BookSellnum from "./view/admin/Statistics/BookSellnum";
 import myStatistics from "./view/iEbook/myStatistics";
 import RulesPage from "./view/login/LoginPageRules";
 import noItemPage from "./view/Result/noItemPage";
+import myAccount from "./view/iEbook/myAccount";
 
 class App extends React.Component{
     constructor(props) {
@@ -59,6 +60,7 @@ class App extends React.Component{
                         {/* ---------  下面的部分是私有路由  带有权限鉴定 --------------- */}
                         <PrivateRoute exact path="/eBook/makeOrder/directBuy" component={SingleOrderComfirm}/>
                         <PrivateRoute exact path="/eBook/makeOrder/shopCart" component={shopCartOrderComfirm}/>
+                        <PrivateRoute exact path="/eBook/myAccount/" component={myAccount}/>
                         <PrivateRoute exact path="/eBook/myCart/" component={myCart}/>
                         <PrivateRoute exact path="/eBook/myOrder/" component={myOrder}/>
                         <PrivateRoute exact path="/eBook/myStatistics/" component={myStatistics}/>

src/App.js

@@ -63,11 +63,12 @@ class SearchPanel extends React.Component{
             <Input.Group compact>
                 <Select style={{ width: '15%',textAlign:'center'} } defaultValue="0"
                         onChange={(e) => this.selectChange(e)}>
+                    <Option value="0" style={{ textAlign: 'center'}}>全局搜索</Option>*/}
                     <Option value="1" style={{ textAlign: 'center'}}>书籍</Option>
                     <Option value="2" style={{ textAlign: 'center'}}>出版社</Option>*/}
                     <Option value="3" style={{ textAlign: 'center'}}>作者</Option>*/}
-                    <Option value="0" style={{ textAlign: 'center'}}>全局搜索</Option>*/}
                     <Option value="4" style={{ textAlign: 'center'}}>简介全文搜索</Option>*/}
+                    <Option value="5" style={{ textAlign: 'center'}}>Tag搜索</Option>*/}
                 </Select>
 
                 <Search
@@ -87,4 +88,4 @@ class SearchPanel extends React.Component{
 
 
 
-export default SearchPanel;
+export default SearchPanel;

src/components/SearchPanel.js

@@ -16,6 +16,7 @@ class TopBar extends React.Component {
             current: 'mail',
             userPermissionLevel: 3,
         };
+
     }
 
     // 暂定 userPermissionLevel 0 超级管理员，1 商店用户 2 普通用户 3 未登录用户

src/components/TopBar/TopBar.js

@@ -1,13 +1,24 @@
 import React from "react";
 import {Avatar, Badge, Menu} from "antd";
 import {Link} from "react-router-dom";
-import {AppstoreOutlined, SoundOutlined, UserOutlined} from "@ant-design/icons";
+import {AppstoreOutlined, SoundOutlined} from "@ant-design/icons";
 import LoginPassport from "../Login/LoginPassport";
 import loginPassport from "../Login/LoginPassport";
+import {userInfoRequest} from "../../service/userService";
 
 const { SubMenu } = Menu;
 
 class userTopBar extends React.Component{
+    constructor() {
+        super();
+        this.state = {
+            iconBase64 : ""
+        };
+        userInfoRequest((resp)=>{
+            console.log(resp);
+            this.setState({iconBase64: resp.data.userIcon.iconBase64})
+        });
+    }
 
     musicPlay(musicId){
         let tmp = document.getElementById("BackgroundMusic");
@@ -40,6 +51,7 @@ class userTopBar extends React.Component{
 
                 <SubMenu key="iEBook" icon={<AppstoreOutlined/>} title="iEBook">
                     <Menu.ItemGroup>
+                        <Menu.Item key="myAccount" ><Link to={{pathname:'/eBook/myAccount'}}>我的账户</Link></Menu.Item>
                         <Menu.Item key="myCart" ><Link to={{pathname:'/eBook/myCart'}}>我的购物车</Link></Menu.Item>
                         <Menu.Item key="myOrder" ><Link to={{pathname:'/eBook/myOrder'}}>我的订单</Link></Menu.Item>
                         <Menu.Item key="myComment" >
@@ -69,7 +81,12 @@ class userTopBar extends React.Component{
                 <SubMenu
                     id="MainPageLoginDiv"
                     title={"Hello! "+loginPassport.getNickName()}
-                    icon={<Badge count={0} size="small"><Avatar size="middle" icon={<UserOutlined/>}/></Badge>}
+                    icon={
+                        <Badge count={0} size="small">
+                            {/*<Avatar size="middle" icon={<UserOutlined/>}/>*/}
+                            <Avatar size="middle" src={this.state.iconBase64}/>
+                        </Badge>
+                    }
                 >
                     <Menu.Item key="setting:22">我的消息</Menu.Item>
                     <Menu.Item key="setting:23" onClick={(e) => this.logout()}>退出登录</Menu.Item>
@@ -87,4 +104,4 @@ export default userTopBar;
 {/*        <Menu.Item key="personalInfo">个人资料</Menu.Item>*/}
 {/*        <Menu.Item key="PayMethod">支付方式</Menu.Item>*/}
 {/*    </Menu.ItemGroup>*/}
-{/*</SubMenu>*/}
+{/*</SubMenu>*/}

src/components/TopBar/userTopBar.js

@@ -83,7 +83,7 @@
     width: 98vw;
     height: fit-content;
     left: 0.5vw;
-    opacity: 0.75;
+    opacity: 0.95;
     z-index: 10;
 
 }
@@ -554,4 +554,4 @@
 /*    background-color: #ff91c4;*/
 /*    font-weight: bold;*/
 /*    color: white;*/
-/*}*/
+/*}*/

src/css/mainPage.css

@@ -0,0 +1,99 @@
+import React from "react";
+import TopBar from "../../components/TopBar/TopBar";
+import LogoEBook from "../../asset/background/eBooklogo.svg";
+import {Button, Checkbox, Col, Form, Image, Input, Row, Tabs, Upload} from "antd";
+import {InboxOutlined, ShoppingCartOutlined, UploadOutlined, UserOutlined} from "@ant-design/icons";
+import OrderPayTable from "../../components/Table/orderPayTable";
+import TabPane from "@ant-design/pro-card/es/components/TabPane";
+
+import ImgCrop from 'antd-img-crop';
+import {userInfoRequest} from "../../service/userService";
+
+
+class MyAccount extends React.Component{
+    constructor() {
+        super();
+
+        this.state = {
+            tableInfo : {
+                avatarBase64: "",
+                username: "",
+                passwordOriginal: "",
+                passwordNew: "",
+                passwordNewConfirm: "",
+                name: "",
+                email: "",
+                useraddress: "",
+                telephone: "",
+            }
+        }
+        userInfoRequest((resp)=>{
+            console.log(resp);
+            let tmp = this.state.tableInfo;
+            tmp.avatarBase64 = resp.data.userIcon.iconBase64;
+            tmp.username = resp.data.username;
+            tmp.telephone = resp.data.telephone;
+            tmp.email = resp.data.email;
+            this.setState({tableInfo: tmp})
+        });
+    }
+
+
+    render() {
+
+        return (
+            <div className="eBookPageContainer">
+                <TopBar/>
+                <div className="MainContentsCard_compact">
+                    <div className="PayComfirm_logoArea">
+                        <img src={LogoEBook} className="PayComfirm_logo" alt={"logo"}/>
+                    </div>
+
+                    <Tabs defaultActiveKey="1">
+                        <TabPane tab={<><UserOutlined/>我的账户信息</>} key="1">
+
+                            <Form>
+                                <Form.Item label="原始头像">
+                                    <Image src={this.state.tableInfo.avatarBase64} width={100} preview={false}/>
+                                </Form.Item>
+                                <Form.Item label="更换头像">
+                                    <ImgCrop rotate>
+                                        <Upload
+                                            name="avatar"
+                                            listType="picture-card"
+                                            className="avatar-uploader"
+                                            showUploadList={false}
+                                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                                            // beforeUpload={beforeUpload}
+                                            // onChange={handleChange}
+                                        >{'+ Upload'}
+                                        </Upload>
+                                    </ImgCrop>
+                                </Form.Item>
+                                <Form.Item label="用户名">
+                                    {this.state.tableInfo.username}
+                                </Form.Item>
+                                <Form.Item label="电话号码">
+                                    {this.state.tableInfo.telephone}
+                                </Form.Item>
+                                <Form.Item label="电子邮件">
+                                    {this.state.tableInfo.email}
+                                </Form.Item>
+
+                            </Form>
+
+                        </TabPane>
+                    </Tabs>
+                </div>
+                <div className="clearOnly_compact"></div>
+                <div className="Pagefooter">
+                    <p>CopyRight © 2022 AllRights Reserved.ALL Developed By ZhangZiqian.</p>
+                </div>
+            </div>
+
+        );
+
+    }
+}
+
+export default MyAccount;