|
| 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