# engineering-practice-fe

**Repository Path**: pymjl_0/engineering-practice-fe

## Basic Information

- **Project Name**: engineering-practice-fe
- **Description**: 前端工程实践
- **Primary Language**: Java
- **License**: AGPL-3.0
- **Default Branch**: backup
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-04-18
- **Last Updated**: 2022-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端工程实践

## 项目技术栈

### 前端：

1. HTML5
2. CSS
3. JavaScript

### 后端

1. SpringBoot
2. SpringSecurity
3. JWT
4. MySQL
5. redis
6. MybatisPlus

## 需求分析图

![成都美食攻略](https://cdn.pymjl.asia/%E6%88%90%E9%83%BD%E7%BE%8E%E9%A3%9F%E6%94%BB%E7%95%A5.png)

## 项目结构

**写代码前大家一定先熟悉一下项目结构！！！**

```txt
项目结构说明：
C:.
├─.idea         #这是idea的配置文件，不要管它
│  ├─inspectionProfiles
│  └─libraries
├─fe 			#这是前端页面，所有前端的页面全放在这个文件夹下
│  ├─admin 		#管理端页面，意思就是所有后台页面（html,css,js）全放在这里，然后html文件直接放在这个目录下
│  │  ├─css 	#这里放管理端的CSS文件
│  │  └─js 		#这里放管理端的js文件
│  ├─img 		#这里存放整个项目的所有的图片资源等
│  └─public 	#这里放的用户端的页面文件，规则和admin一样
│      ├─css
│      └─js
└─service		#这是Java程序，后台代码
    ├─log		#日志文件，你们克隆下去了不会有这个文件夹，只有运行了后台代码才会生成这个文件夹
    ├─src		#Java的源程序
    │  ├─main
    │  │  ├─java
    │  │  │  └─cuit
    │  │  │      └─epoch
    │  │  │          └─pymjl
    │  │  │              ├─controller
    │  │  │              ├─entity
    │  │  │              ├─mapper
    │  │  │              │  └─xml
    │  │  │              ├─service
    │  │  │              │  └─impl
    │  │  │              └─util
    │  │  └─resources
    │  └─test	#测试目录
    │      └─java
    │          └─cuit
    │              └─epoch
    │                  └─pymjl
    └─target	#编译后的输出文件，你们克隆下去也不会有的，只有运行代码之后才会有这个文件夹
        ├─classes
        │  └─cuit
        │      └─epoch
        │          └─pymjl
        │              ├─controller
        │              ├─entity
        │              ├─mapper
        │              ├─service
        │              │  └─impl
        │              └─util
        ├─generated-sources
        │  └─annotations
        ├─generated-test-sources
        │  └─test-annotations
        └─test-classes
            └─cuit
                └─epoch
                    └─pymjl

```

## 后台启动步骤

**这个工程实践目前只打算写一下登录注册的后台接口，如果其他同学也想写有后台交互的页面可以给我说，我加接口,交互方式用Json**

### 1.准备数据库环境（已废弃，不用管，直接运行就行了）

**运行之前，一定先安装好MySQL！！！**

1. 然后改一下` resources`目录下的` application.yml`文件

```yml
datasource:
	#如果实在不会大家可以在群里给我说，我就改成我的云服务器上的数据库吧，现在为了安全考虑，暂时先用本地
    username: root #你的数据库用户名，一般都是root
    password: pl20020116 #你本地的数据库密码，你自己设置的
```

**确保你的数据库端口是3306，并且MySQL版本是8.0+**

2. 先登录本机的MySQL

> 1. win+R 打开命令行
> 2. 输入` mysql -uroot -p`
> 3. 输入你的密码

出现以下界面，表示成功

![image-20220428203501657](https://cdn.pymjl.asia/image-20220428203501657.png)

3. 导入sql脚本

> 注：你也可以使用图形化界面导入sql

1. 先创建数据库

```sql
CREATE DATABASE `engineering` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. 查询是否创建成功,出现创建的数据库即成功

```sql
show databases;
```

![image-20220428204545142](https://cdn.pymjl.asia/image-20220428204545142.png)

3. 切换至创建的数据库

```sql
use engineering;
```

4. 执行脚本

```sql
source C:\Users\Admin\JavaProjects\engineering-practice\engineering.sql;
```

**注意，这个sql脚本是在我的本地的绝对路径，后面的路径应该改成你的，然后这个sql脚本在我们的项目目录下。你可以大促source之后直接将对应文件拖进命令行窗口，就会自动填充后面的路径，然后运行。**

![image-20220428204909721](https://cdn.pymjl.asia/image-20220428204909721.png)

有一点点报错不用管，出现以下截图则证明成功

![image-20220428205028340](https://cdn.pymjl.asia/image-20220428205028340.png)

### 2.准备Maven环境

idea默认自带Maven的，但是国外的Maven镜像仓库太慢，最好先配置一下阿里云的镜像

[Maven镜像配置教学]: https://blog.csdn.net/WZEG8080/article/details/80914846

当然，你也可以选择自己安装Maven，需要自己在网上查一下，我就不说了

### 3.启动项目

直接点击这个文件的主方法运行就好

![image-20220428203243633](https://cdn.pymjl.asia/image-20220428203243633.png)

运行成功，后台就运行起来了

![image-20220428205236031](https://cdn.pymjl.asia/image-20220428205236031.png)