# 后台管理系统

**Repository Path**: mrwhitebare/background-management-system

## Basic Information

- **Project Name**: 后台管理系统
- **Description**: React后台管理系统
Author:MrWhitebare
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-03-28
- **Last Updated**: 2022-05-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Ant-Design, React, ManagerSystem

## README

### Day1

> 1.重建一个新的react应用

#### antd按需加载+自定主题

##### 1.安装依赖：

```shell
yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
```

 ##### 2.修改package.json
```json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
```
##### 3.根目录下创建config-overrides.js

```js
//配置具体的修改规则
const { override, fixBabelImports,addLessLoader} 		= require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions:{
            javascriptEnabled: true,
            modifyVars: { '@primary-color': 'green' },
        }
    }),
);
```

#### antd按需引入，新配置

>1.安装依赖
>
>```
>$ yarn add @craco/craco craco-less babel-plugin-import
>```
>
>2.修改package.json
>
>```
>  "scripts": {
>    "start": "craco start",
>    "build": "craco build",
>    "test": "craco test"
>  },
>```
>
>3.在根目录下创建craco.config.js
>
>```js
>const CracoLessPlugin = require('craco-less');
>
>module.exports = {
>    babel: {
>        plugins: [
>            ['import', { libraryName: 'antd', style: true }]
>        ]
>    },
>    plugins: [
>        {
>            plugin: CracoLessPlugin,
>            options: {
>                lessLoaderOptions: {
>                    lessOptions: {
>                        modifyVars: { '@primary-color': '#1DA57A' },
>                        javascriptEnabled: true,
>                    },
>                },
>            },
>        },
>    ],
>};
>```

### Day2

#### 1.git 项目管理

```shell
1).创建远程仓库

2).创建本地仓库
	a. 配置gitignore
	b. git init
	c. git add .
	d. git commit -m 'init'

3).将本地仓库推送至远程仓库
	git remote add origin url
	git push origin master

4).在本地创建dev分支，并推送至远程
	git checkout -b dev
	git push origin dev

5).新的同事：克隆仓库
	git clone url
	//根据远程dev分支创建本地dev
	git checkout -b dev origin/dev
	git pull origin dev
```

#### 2.Nodejs中的包、npm、第三方模块、package.json

> **CommonJS**规范的包目录
>
> 1). package.json:包描述文件
>
> 2).bin:可执行的二进制文件目录
>
> 3).lib:用于存放JavaScript代码的目录
>
> 4).doc:用于存放文档的目录

**nmp命令**

```shell
1.npm -v 查看npm版本
2.npm install `Modele Name`
npm i md5 --save 写入package.json dependencies依赖
3.npm uninstall 'Modele Name'
4.npm list 查看安装的包
5.npm info jquery 查看jquery版本
6.npm install jquery@1.8.0 指定版本安装 
```

**安装模块并写入package.json**

```shell
npm install babel-cli --save-dev
npm install modelname --save
npm install modelname --save-dev
```

`dependencies` 配置当前程序所依赖的其他包

`DevDependencies`配置当前程序所依赖的其他包，比如一些工具的配置

```json
^表示第一位版本号不变，后面两位取最新
~表示前两位不变，最后一个取最新
*表示全部取最新
指定版本不写符号即可
```

### Day3

#### 1. Mongodb创建超级管理员

```sql
use admin
db.createUser({
    user: 'admin',
    pwd: "123456",
    roles: [{
        role: 'root',
        db: "admin"
    }]
})
```

#### 2.修改Mongodb数据库配置文件

**mongod.cfg** 

```yaml
配置
security:
	authorization: enabled
```

#### 3.重启Mongodb Server

#### 4.使用超级管理员连接数据库

```sql
mongo admin -u 用户名 -p 密码
mongo localhost:27017/test -u user -p password

方法二
mongo
use admin
db.auth('admin', '123456')
```

#### 5.eggcms创建一个用户 只能使用eggcms不能使用其他访问

```sql
use eggcms
db.createUser(
	{
		"user":"eggadmin",
		"pwd":"123456",
		roles:[{"dbOwner",db:"eggcms"}]
	}
)
```

### 2、Navicat连接参数介绍：

**stand alone：独立的**

**shard cluster：分片集群**

**replica set：复制集**

**SRV record：**

SRV记录是DNS服务器的数据库中支持的一种资源记录的类型，它记录了哪台计算机提供了哪个服务这么一个简单的信息。

SRV 记录：一般是为Microsoft的活动目录设置时的应用。DNS可以独立于活动目录，但是活动目录必须有DNS的帮助才能工作。

为了活动目录能够正常的工作，DNS服务器必须支持服务定位（SRV）资源记录，资源记录把服务名字映射为提供服务的服务器名字。

活动目录客户和域控制器使用SRV资源记录决定域控制器的IP地址。

 

一般情况下，我们连接只需要连接主库查数据，所以选择独立的这个连接方式就可以，填写好常规参数可以点击测试连接是否正常，即可连接！

关于其他功能，页面中文的，比较通俗易懂，可以测试按需使用！

### Day4

#### 1.Cookie简介

 **cookie** 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域 名的时候共享数据。

 **HTTP** 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页 面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。

**Cookie** 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行 HTTP 报文中， 命令浏览器存储一个字符串; 浏览器再访问同一个域的时候，将把这个字符串携带到上行 HTTP 请求中。第一次访问一个服务器，不可能携带 cookie。 必须是服务器得到这次请求， 在下行响应报头中，携带 cookie 信息，此后每一次浏览器往这个服务器发出的请求，都会携带这个 cookie

#### 2.Cookie简介

♈cookie 保存在浏览器本地

♉正常设置的cookie是不加密的，用户可以自由看到

♊用户可以删除cookie,或者禁用

♋cookie可以篡改

♌cookie可以用于攻击

♍cookie存储量很小。未来实际上要被localStorage代替,但是兼容IE9

#### 3.Cookie的使用

```js
yarn add cookie-parser
const express=require('express');
const cookieParser=require('cookie-parser');
const app=express();
//设置中间件
app.use(cookieParser());
//设置cookie
app.get("/",(req,res)=>{
    res.cookie("name","zhangsan",{maxAge: 900000, httpOnly: true});
    res.render("index",{title});
});
//获取cookie
req.cookies.name
```

#### 4.♏Cookie属性说明

|    属性    |                             描述                             |
| :--------: | :----------------------------------------------------------: |
|  `domain`  | 域名 name=value：键值对，可以设置要保存的 Key/Value，注意这里的 name 不能和其他属性项的名字一样 |
| `Expires`  | 过 期 时 间 （ 秒 ） ， 在 设 置 的 某 个 时 间 点 后 该 Cookie 就 会 失 效 ， 如 expires=Wednesday, 09-Nov-99 23:12:40 GMT |
|  `maxAge`  |            最大失效时间（毫秒），设置在多少后失效            |
|  `secure`  | 当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效 |
|   `Path`   | 表示 cookie 影响到的路由路径，如 path=/。如果路径不能匹配时，浏览器则 不发送这个 Cookie |
| `httpOnly` | 是微软对cookie 做的扩展。如果在 cookie中设置了“httpOnly”属性，则通过程序（JS 脚本、applet 等）将无法读取到 cookie信息，防止 XSS 攻击产生 |
|  `singed`  | 表示是否签名 cookie, 设为 true 会对这个 cookie 签名，这样就需要用 res.signedCookies 而不是 res.cookies 访问它。被篡改的签名 cookie 会被服务器拒绝，并且 cookie 值会重置为它的原始值 |

5.Cookie加密

```js
const express=require('express');
const cookieParser=require('cookie-parser');
const app=express();
//设置中间件并传入密钥
app.use(cookieParser("atguigu"));
//signed:true 开启签名
res.cookie("username","zhangsan",{maxAge:1000*60*60,domain:".itying.com",signed:true});
req.signedCookies;//获取加密之后cookie
```

### Day5 express-session 的基本使用 常见参数配置使用

#### 1.Session简单介绍

**session 是另一种记录客户状态的机制，不同的是 Cookie 保存在客户端浏览器中，而 session 保存在服务器上。 Cookie 数据存放在客户的浏览器上，Session 数据放在服务器上。**Session 相比 Cookie 要 更安全一些。由于 Session 保存到服务器上，所以当访问量增多的时候，会比较占用服务器 的性能。单个 cookie 保存的数据大小不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。Session 没有这方面的限制。Session 是基于 Cookie进行工作的。
#### 2.Session的工作流程
当浏览器访问服务器并发送第一次请求时，服务器端会创建一个 session 对象，生成一
个类似于 key,value 的键值对， 然后将 key(cookie)返回到浏览器(客户)端，浏览器下次
再访问时，携带 key(cookie)，找到对应的 session(value)

#### 3.express-session的用法

```js
const express=require('express');
const expressSession=require('express-session');

let app=express();
app.use(expressSession({
    secret:"this is my session",//服务端生成session的对象
    name:"atguigu",
    resave:false,//强制保存session 即使它并没有变化
    saveUninitialized:true,//强制将未初始化的session存储
    cookie:{
        maxAge:1000*60*60,
        secure:false//true表示只能通过https协议才能访问cookie
    }
}));

app.get('/',(req,res)=>{
    if(req.session.username) {
        res.send(req.session.username+"\n"+"已经登录!");
    }else{
        res.send("没有登录！");
    }
});

app.get('/login',(req,res)=>{
    //设置session
    req.session.username="张三";
    res.send("登录");
});

app.listen(3000);
console.log("NetWork is running\n"+"http://localhost:3000");
```

|        参数         |                             作用                             |
| :-----------------: | :----------------------------------------------------------: |
|      `secret`       |  一个 String 类型的字符串，作为服务器端生成 session 的签名   |
|       `name`        |     返回客户端的 key 的名称，默认为 connect.sid,也可以自     |
|      `resave`       | 强制保存 session 即使它并没有变化,。默认为 false。 don't save session if unmodified |
| `saveUninitialized` | 强制将未初始化的 session 存储。当新建了一个 session 且未设定属性或值时，它就 处于 未初始化状态。在设定一个 cookie 前，这对于登陆验证，减轻服务端存储压力，权限控制是有帮助的。（默认：true）。建议手动添加 |
|      `cookie`       | 设置返回到前端 key 的属性，默认值为{ path: ‘/’, httpOnly: true, secure: false,maxAge: null} |
|      `rolling`      |  在每次请求时强行设置 cookie，这将重置 cookie 过期时间（默   |

#### 4.express-session常用方法

```js
req.session.destroy(function(err) { /*销毁 session*/
    
})
req.session.username='张三'; //设置 session
req.session.username //获取 session
req.session.cookie.maxAge=0; //重新设置 cookie 的过期时间
```

### Day6 Mongoose入门

#### 1.🤟Mongoose介绍

**Mongoose** 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具。Mongoose 是 NodeJS 的驱动，不能作为其他语言的驱动。

💝通过关系型数据库的思想来设计非关系型数据库

💅基于 mongodb 驱动，简化操作

#### 2.🧬Mongoose的使用