Skip to content

Commit 44c4893

Browse files
bjmashibingbjmashibing
committed
upload
1 parent cada406 commit 44c4893

959 files changed

Lines changed: 48555 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎project/02项目环境搭建及登录操作/01项目环境准备.md‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
# 项目开发流程
2+
3+
### 1、根据需求文档分析整个项目，进行相关表的设计
4+
5+
​ 通过需求文档分析各个模块需要的表以及相应的表之间的关系，此阶段主要是想让大家熟悉这个过程，后续实际开发的时候我会将表结构直接给出，大家做对比即可，记住一句话，**表设计没有对错之分，只有合适与不合适**
6+
7+
### 2、搭建前端项目
8+
9+
​ 此项目的开发我们使用的是阿里开源的前端框架Ant Design,此框架是使用vue来完成具体功能的，因为在现在的公司的开发中，几乎都是前后端分离，前端工程师完成前端功能，后端工程师完成后端逻辑的编写，我们教学的侧重点在于后端，因此前端直接使用给大家提供好的模板，大家只需要下载即可。
10+
11+
操作步骤：
12+
13+
​ 1、下载项目并完成解压的功能
14+
15+
​ 2、在当前项目的根路径下打开cmd，然后运行npm install
16+
17+
​ 3、在整个安装过程中一般不会出现任何错误，如果出现错误，自行上网解决，解决不了联系我，(别怂，干就完了)。
18+
19+
​ 4、安装完成之后，可以使用 npm run serve命令来进行 运行
20+
21+
### 3、搭建后端项目
22+
23+
​ 后端我们抛弃使用ssm的这种老的项目搭建模式，使用现在应用最多的springboot来进行实现。
24+
25+
操作步骤：
26+
27+
​ 1、创建springboot项目
28+
29+
​ 2、导入需要的依赖
30+
31+
pom.xml
32+
33+
```xml
34+
<?xml version="1.0" encoding="UTF-8"?>
35+
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
36+
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
37+
<modelVersion>4.0.0</modelVersion>
38+
<parent>
39+
<groupId>org.springframework.boot</groupId>
40+
<artifactId>spring-boot-starter-parent</artifactId>
41+
<version>2.2.6.RELEASE</version>
42+
<relativePath/> <!-- lookup parent from repository -->
43+
</parent>
44+
<groupId>com.mashibing</groupId>
45+
<artifactId>family_service_platform</artifactId>
46+
<version>0.0.1-SNAPSHOT</version>
47+
<name>family_service_platform</name>
48+
<description>Demo project for Spring Boot</description>
49+
50+
<properties>
51+
<java.version>1.8</java.version>
52+
</properties>
53+
54+
<dependencies>
55+
<dependency>
56+
<groupId>org.springframework.boot</groupId>
57+
<artifactId>spring-boot-starter-web</artifactId>
58+
</dependency>
59+
<dependency>
60+
<groupId>org.mybatis.spring.boot</groupId>
61+
<artifactId>mybatis-spring-boot-starter</artifactId>
62+
<version>2.1.2</version>
63+
</dependency>
64+
<dependency>
65+
<groupId>com.alibaba</groupId>
66+
<artifactId>fastjson</artifactId>
67+
<version>1.2.9</version>
68+
</dependency>
69+
<dependency>
70+
<groupId>org.springframework.boot</groupId>
71+
<artifactId>spring-boot-devtools</artifactId>
72+
<scope>runtime</scope>
73+
<optional>true</optional>
74+
</dependency>
75+
<dependency>
76+
<groupId>mysql</groupId>
77+
<artifactId>mysql-connector-java</artifactId>
78+
<scope>runtime</scope>
79+
</dependency>
80+
<dependency>
81+
<groupId>org.springframework.boot</groupId>
82+
<artifactId>spring-boot-starter-test</artifactId>
83+
<scope>test</scope>
84+
<exclusions>
85+
<exclusion>
86+
<groupId>org.junit.vintage</groupId>
87+
<artifactId>junit-vintage-engine</artifactId>
88+
</exclusion>
89+
</exclusions>
90+
</dependency>
91+
<!--mybatis代码快速生成-->
92+
<dependency>
93+
<groupId>com.baomidou</groupId>
94+
<artifactId>mybatis-plus-generator</artifactId>
95+
<version>3.3.1</version>
96+
</dependency>
97+
<dependency>
98+
<groupId>com.baomidou</groupId>
99+
<artifactId>mybatis-plus-boot-starter</artifactId>
100+
<version>3.3.1</version>
101+
</dependency>
102+
<dependency>
103+
<groupId>org.apache.velocity</groupId>
104+
<artifactId>velocity-engine-core</artifactId>
105+
<version>2.2</version>
106+
</dependency>
107+
<!-- https://mvnrepository.com/artifact/log4j/log4j -->
108+
<dependency>
109+
<groupId>log4j</groupId>
110+
<artifactId>log4j</artifactId>
111+
<version>1.2.17</version>
112+
</dependency>
113+
</dependencies>
114+
<build>
115+
<plugins>
116+
<plugin>
117+
<groupId>org.springframework.boot</groupId>
118+
<artifactId>spring-boot-maven-plugin</artifactId>
119+
</plugin>
120+
</plugins>
121+
<resources>
122+
<resource>
123+
<directory>src/main/java</directory>
124+
<includes>
125+
<include>**/*.xml</include>
126+
</includes>
127+
</resource>
128+
</resources>
129+
</build>
130+
</project>
131+
```
132+
133+
​ 3、修改配置文件
134+
135+
application.yaml
136+
137+
```yaml
138+
server:
139+
port: 8080
140+
spring:
141+
datasource:
142+
username: root
143+
password: 123456
144+
url: jdbc:mysql://localhost:3306/family_service_platform?useSSL=false&serverTimezone=UTC
145+
driver-class-name: com.mysql.cj.jdbc.Driver
146+
mybatis:
147+
mapper-locations: classpath:com/mashibing/mapper/common/*.xml
148+
configuration:
149+
map-underscore-to-camel-case: true
150+
logging:
151+
level:
152+
com:
153+
mashibing:
154+
mapper:
155+
common: debug
156+
```
157+
158+
log4j.properties
159+
160+
```properties
161+
# 全局日志配置%n
162+
log4j.rootLogger=info, stdout
163+
# MyBatis 日志配置
164+
log4j.logger.com.mashibing.mapper=TRACE
165+
# 控制台输出
166+
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
167+
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
168+
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m
169+
170+
log4j.logger.java.sql=DEBUG
171+
log4j.logger.java.sql.Connection = DEBUG
172+
log4j.logger.java.sql.Statement = DEBUG
173+
log4j.logger.java.sql.PreparedStatement = DEBUG
174+
log4j.logger.java.sql.ResultSet = DEBUG
175+
```
176+
177+
​ 4、通过mybatis-plus反向生成对应的实体类
178+
179+
```java
180+
package com.mashibing;
181+
182+
import com.baomidou.mybatisplus.annotation.IdType;
183+
import com.baomidou.mybatisplus.generator.AutoGenerator;
184+
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
185+
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
186+
import com.baomidou.mybatisplus.generator.config.PackageConfig;
187+
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
188+
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
189+
import org.junit.jupiter.api.Test;
190+
191+
public class MyTest {
192+
193+
194+
@Test
195+
public void testGenerator() {
196+
AutoGenerator autoGenerator = new AutoGenerator();
197+
198+
//全局配置
199+
GlobalConfig globalConfig = new GlobalConfig();
200+
globalConfig.setAuthor("lian")
201+
.setOutputDir("E:\\self_project\\family_service_platform\\src\\main\\java")//设置输出路径
202+
.setFileOverride(true)//设置文件覆盖
203+
.setIdType(IdType.AUTO)//设置主键生成策略
204+
.setServiceName("%sService")//service接口的名称
205+
.setBaseResultMap(true)//基本结果集合
206+
.setBaseColumnList(true)//设置基本的列
207+
.setControllerName("%sController");
208+
209+
//配置数据源
210+
DataSourceConfig dataSourceConfig = new DataSourceConfig();
211+
dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver").setUrl("jdbc:mysql://localhost:3306/family_service_platform?serverTimezone=UTC")
212+
.setUsername("root").setPassword("123456");
213+
214+
//策略配置
215+
StrategyConfig strategyConfig = new StrategyConfig();
216+
strategyConfig.setCapitalMode(true)//设置全局大写命名
217+
.setNaming(NamingStrategy.underline_to_camel)//数据库表映射到实体的命名策略
218+
//.setTablePrefix("tbl_")//设置表名前缀
219+
.setInclude();
220+
221+
//包名配置
222+
PackageConfig packageConfig = new PackageConfig();
223+
packageConfig.setParent("com.mashibing").setMapper("mapper")
224+
.setService("service").setController("controller")
225+
.setEntity("bean").setXml("mapper");
226+
227+
autoGenerator.setGlobalConfig(globalConfig).setDataSource(dataSourceConfig)
228+
.setStrategy(strategyConfig).setPackageInfo(packageConfig);
229+
230+
autoGenerator.execute();
231+
}
232+
}
233+
```
234+
235+
​ 5、运行springboot项目，保证项目能够运行起来。
236+
237+
​ 6、运行之后发现项目报错，报错原因是因为mapper对象无法自动装配，因此需要在启动的application类上添加@MapperScan注解或者在每一个mapper的接口上添加@Mapper注解，此处不做任何限制，大家开心就好。当然不可否认的是我们当前项目的表比较多，因此在每一个Mapper上添加@Mapper注解比较麻烦
238+
239+
***
240+
241+
​ 总结，截止到此处为止，我们需要环境准备工作已经完成，下面开始进行下一步的开发。
242+
243+
​ 因为现在大家在访问的时候用到的是两个独立的项目，所以必须要保证两个项目之间能够进行通信，此时对于前端和后端而言，我们都需要进行相关的配置，来保证两个项目可以进行正常的数据通信
244+
245+
### 4、修改前端项目配置，完成通信功能
246+
247+
​ 1、修改.env.development文件
248+
249+
```tex
250+
NODE_ENV=development
251+
VUE_APP_PREVIEW=false
252+
VUE_APP_API_BASE_URL=http://localhost:8080/
253+
```
254+
255+
​ 2、删除main.js的mock数据挂载，在src目录下打开main.js文件，将import './mock'代码注释
256+
257+
​ 3、当修改成功之后，重新运行服务，点击登录请求，查看发送的地址是什么地址，如果出现http://localhost:8080/auth/login，则表示前端项目的修改已经成功，只需要去修改后端项目的配置即可。不要问我不成功怎么办，你按照我的方式，不可能不成功！
258+
259+
### 5、修改后端项目的配置，完成通信功能
260+
261+
​ 1、在项目中新建一个config的包，添加跨域的配置类
262+
263+
```java
264+
package com.mashibing.config;
265+
266+
import org.springframework.context.annotation.Bean;
267+
import org.springframework.context.annotation.Configuration;
268+
import org.springframework.web.cors.CorsConfiguration;
269+
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
270+
import org.springframework.web.filter.CorsFilter;
271+
272+
@Configuration
273+
public class CorsConfig {
274+
private CorsConfiguration buildConfig() {
275+
CorsConfiguration corsConfiguration = new CorsConfiguration();
276+
// 你需要跨域的地址 注意这里的 127.0.0.1 != localhost
277+
// * 表示对所有的地址都可以访问
278+
corsConfiguration.addAllowedOrigin("*");
279+
// 跨域的请求头
280+
corsConfiguration.addAllowedHeader("*"); // 2
281+
// 跨域的请求方法
282+
corsConfiguration.addAllowedMethod("*"); // 3
283+
//加上了这一句，大致意思是可以携带 cookie
284+
//最终的结果是可以 在跨域请求的时候获取同一个 session
285+
corsConfiguration.setAllowCredentials(true);
286+
return corsConfiguration;
287+
}
288+
@Bean
289+
public CorsFilter corsFilter() {
290+
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
291+
//配置 可以访问的地址
292+
source.registerCorsConfiguration("/**", buildConfig()); // 4
293+
return new CorsFilter(source);
294+
}
295+
}
296+
```
297+
298+
​ 或者可以在controller类的上面添加注解
299+
300+
```java
301+
@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "*",methods = {})
302+
```
303+
304+
​ 2、添加对应的controller进行处理
305+
306+
LoginController.java
307+
308+
```java
309+
package com.bjmsb.controller;
310+
311+
import org.springframework.web.bind.annotation.CrossOrigin;
312+
import org.springframework.web.bind.annotation.RequestMapping;
313+
import org.springframework.web.bind.annotation.RestController;
314+
315+
@RestController
316+
@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "*",methods = {})
317+
public class LoginController {
318+
319+
@RequestMapping("/auth/2step-code")
320+
public boolean step_code2(){
321+
System.out.println("此请求是前端框架带的默认请求，可以不做任何处理，也可以在前端将其删除");
322+
System.out.println("step_code2");
323+
return true;
324+
}
325+
326+
@RequestMapping("/auth/login")
327+
public String login(){
328+
System.out.println("login");
329+
return "success";
330+
}
331+
}
332+
```
333+
334+
如果能请求成功，那么就意味着整个项目已经可以顺利进行通信，后续的话只需要完成对应业务的编写即可，
335+
336+
***
337+
338+
​ 从下面开始，我们就要开始进行整个项目的业务开发了，所以希望大家能提起精神，干他！！！

0 commit comments

Comments
 (0)