# DangDang

**Repository Path**: js-hhq/Shopping

## Basic Information

- **Project Name**: DangDang
- **Description**: DangDang网 前端后端
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-24
- **Last Updated**: 2024-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, TypeScript, Nodejs, MySQL, Go语言

## README

## 开始
### 配置环境
#### vite启动配置
```
vite --open 自动打开浏览器
vite --host 暴露ip地址
```
#### Vite环境变量
``` ts
// 全局依赖库
/// <reference types="vite/client" /> 
import.meta.env  //获取环境变量
{
  "BASE_URL":"/",       // 对应vite.config里面的base
  "MODE":"development",
  "DEV":true,
  "PROD":false,
  "SSR":false
}
```
#### dotenv配置自定义环境
```bash
touch .env .env.development .env.production
```
优先从有环境模式寻找变量，没有的话，从.env中获取
如果想import.meta.env有提示的话，可以在vite-env.d.ts中定义
``` ts
// 接口合并
interface ImportMetaEnv {
  readonly VITE_BASE_URL: string
  readonly VITE_API_URL: string
  // 更多环境变量...
}
```
#### 合并dotenv DotenvParseOutput, vite.config.ts自动识别字段名
```ts
// file: tsconfig.node.json
{
  include: ["引入对应的声明文件"] // "./src/types/config.d.ts"
}

```

#### ESLint、Prettier、tsconfig配置
```
```
```
```
```ts
{
  "compilerOptions": {
    // ts 文件编译的 js 文件语法版本。 
    "target": "esnext",
    // TS3.7 之后新增属性, 编译后的类属性转换为Object.defineProperty 声明，对于没有赋值的类属性也会编译出来。
    "useDefineForClassFields": false,
    // 源代码是什么版本
    "module": "esnext",
        
    // 1 moduleResolution 模块解析
    // 2 模块解析是 typescript 编译器用何种方式来确定导入所指内容。
    // moduleResolution："node"    =>采用 node 模块解析的方式查找文件。[从内层到最高目录的外层查找 import 引入的文件]
    // moduleResolution："classic" => 采用 classic 模块解析的方式查找文件。[从外层到内层方式查找 查找 import 引入的文件]
    "moduleResolution": "node",
        
    // 通过 tsc 编译后输出目录。
  	"rootDir": "./src", // 指定 TS 要编译的 TS 文件 源目录
    "outDir": "./tsbuild", //  通过 tsc 编译后的TS 文件输出目录。
        
    // 是否允许导入 js 文件。
    "allowJs": true,
    // 编译后是否生成 d.ts文件
    "declaration": true,
        
    // 开启严格模式
    "strict": true,
    // 在 vue 中支持类似 react jsx的语法格式。
    "jsx": "preserve",
        
    // ts编译后的js文件中生成Map文件  
    "sourceMap": true,

    // 是否可以导入json文件。
    "resolveJsonModule": true,
        
    // export接口或者type类型会出现错误。
    "isolatedModules": true,
        
    // 有些依赖库底层 为了兼容CommonJs规范、AMD规范这二者的规范中相互兼容，使用了 export =，将二者规范统一。"esModuleInterop":true表示允许依赖库中出现export = 这种兼容规范导出的格式，TS 可以用import from导入
    "esModuleInterop": true,
        
    // 允许访问的底层依赖库
    "lib": ["esnext", "dom"], 
    
    // 对声明文件不进行类型检查
    "skipLibCheck": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  // ts 编译器编译覆盖的范围。
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "./vite.config.ts"]
}
```

### 动态图片管理
```
遍历指定目录下的图片，做localstorage管理图片，以免每次重新加载图片，图片名要唯一，不然会覆盖，这样就可以通过图片名访问图片的内容，路径修改，可无需改代码
```
## MySql数据库
### MySql安装配置
- 根目录创建my.ini
```ini
[mysql]
default-character-set=UTF8MB4

[mysqld]
basedir=D:\Program Files\MySQL\MySQL Server 8.4
datadir=D:\Program Files\MySQL\MySQL Server 8.4\data
character-set-server=UTF8MB4
port=3306
max_connections=200
default-storage-engine=INNODB

[client]
port=3306
```

- 初始化data目录 保存一些创建服务和启动需要的初始数据
```cmd
mysqld --intialize-insecure
```
- 登录
```cmd
mysql -h${host} -uadmin -p123456
```

### 数据库操作
```sql
# 新建用户
create user "admin" identified with mysql_native_password by "123456"

# 删除用户
drop user admin@'%';

# 修改用户密码
alter user admin@"%" identified by '12345678'

# 分配权限
grant all privileges on *.* to admin@"%" # %代表任何主机名, *.*任何数据库任何表,还可以指定数据库和表名: exampledb.exampleTable; all privileges所有权限，也可以指定权限，例如：select/update/insert/delete 等...

# 刷新权限
flush privileges

# 查看用户权限
show grants for admin@'%'

# 查看数据库
show databases

# 创建数据库 character: 指定数据库的字符集  collate: 指定字符集的默认校对规则
create database if not exists test_database character set utf8mb4 collate utf8mb4_general_ci

# 选择数据库
use test_database

# 删除数据库
drop database if exists test_database
```

### 数据库类型
- 文本 （字符个数不是字节个数）
```
char(固定长度)  1-255
varchar(可变长) 1-255
text(大文本)    65535

blob(二进制) 0-65535
```
- 整数
```
tinyint smallint mediumint int bigint
```
  
- 浮点
```
float double
```
- 日期
```
date(3个字节) YYYY-MM-DD
datetime(8个字节) YYYY-MM-DD hh:mm:ss
timestamp(4个字节)
```

### 数据表操作

```sql
# 创建表
create table if not exists userinfo (userid int not null auto_increment, username varchar(30) not null, psw varchar(10) not null, address varchar(50) default "空地址", valid tinyint default 1, birth datetime null, primary key (userid))

# 查看表信息
desc userinfo

# 修改表名
alter table userinfo rename to user

# 删除表
drop table if exists userinfo

# 修改表字段
alter table <表名> change <旧字段> <新字段> <新数据类型>
alter table userinfo change psd password varchar(20)

# 删除字段名
alter table userinfo drop valid

# 插入数据
insert into userinfo values(2, "egon", "123", "shenzhen", 1, "2022/07/01 07:00:00") # datetime格式YYYY/MM/DD hh:mm:ss 或者 YYYY-MM-DD hh:mm:ss; 主键插入数据可以设置null，自动增长
insert into userinfo(username, password, birth) values("alex", "123", "2024/07/28 20:00:00");

# 查看数据
select userid, username from userinfo where username = "张三" order by userid desc; 查找所有username=张三的数据，并按照userid降序排序

# 更新数据
update userinfo set username="王五", birth="2020-10-01 08:00:00" where userid = 10;

# 删除数据
delete from userinfo where userid = 1 #  删除userid为1的行
delete from userinfo # 删除所有行

```

### 数据表查询数据
```sql


```