Spring Cloud alibaba+Vue，开发仿社交小程序

核心代码，注释必读

// download：3w ukoou com

环境准备

首先，您需要安装并配置好以下软件：

JDK 1.8或更高版本
Maven 3.0或更高版本
Node.js
Vue CLI
MySQL 5.6或更高版本

创建Spring Cloud alibaba项目

首先，您需要创建一个基于Spring Cloud alibaba的项目。您可以使用Spring Initializr来创建一个Spring Boot项目，如下所示：

选择Spring Boot版本，并填写项目名称和Group ID
选择Spring Cloud alibaba的版本，并添加以下依赖项：
Alibaba Cloud Nacos Discovery
Alibaba Cloud Config
Alibaba Cloud Sentinel
Alibaba Cloud Stream

创建前端Vue项目

接下来，您需要创建一个Vue项目，用于开发小程序的前端界面。您可以使用Vue CLI来创建一个基础Vue项目：

$ vue create social-app

在创建过程中选择default preset并等待项目创建完成。

集成前后端代码

在这一步中，您需要将Vue项目和Spring Boot项目集成到一起。这里有两种方式可以实现这一点。

第一种方式是将Vue项目作为Spring Boot项目的静态资源。这样可以方便地在同一个项目中管理前后端代码，并且可以使用Spring Security来管理用户登录和身份验证。

第二种方式是将Vue项目运行在独立的服务器上，将请求发送到Spring Boot后端。这种方式可以允许前端和后端独立开发，并且可以更好地控制前端的性能和安全。

在这里，我们选择将Vue项目作为Spring Boot项目的静态资源，因为这样更加方便。

首先，将Vue项目打包为静态资源，并将其添加到Spring Boot项目的src/main/resources/static目录中：

$cd social-app$ npm run build $ cp -R dist/* ../socialapp/src/main/resources/static/

接下来，修改Spring Boot项目的application.properties文件，并添加以下内容：

spring.resources.static-locations=classpath:/static/

这将告诉Spring Boot将所有静态资源加载到classpath:/static/目录中。

最后，重新启动Spring Boot项目并访问http://localhost:8080，您应该能够看到Vue应用程序的主页面。

创建数据库模型

在这一步中，您需要创建一个数据库模型，并使用JPA将其映射到Java对象中。这里我们使用MySQL作为数据库，并创建一个名为User的表。

首先，创建一个名为User的Java类，并添加以下代码：

@Entity @Table(name = "users") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id;

@Column(nullable = false, unique = true)
private String username;

@Column(nullable = false)
private String password;

// Getters and setters

}

接下来，创建一个名为UserRepository的接口，并添加以下代码：

@Repository public interface UserRepository extends JpaRepository<User, Long> { User findByUsername(String username); }

这将允许我们通过用户名查找用户。

最后，创建一个名为DatabaseConfig的类，并添加以下代码：

@Configuration @EnableJpaRepositories(basePackages = "com.example.socialapp.repository") @EntityScan(basePackages = "com.example.socialapp.model") public class DatabaseConfig { @Bean @ConfigurationProperties(prefix = "spring.datasource") public DataSource dataSource() { return DataSourceBuilder.create().build(); }

@Bean
public PlatformTransactionManager transactionManager() {
    return new JpaTransactionManager();
}

@Bean
public LocalContainerEntityManagerFactoryBean entityManagerFactory() {
    HibernateJpaVendorAdapter vendorAdapter = new HibernateJpaVendorAdapter();
    vendorAdapter.setShowSql(true);
    LocalContainerEntityManagerFactoryBean factory = new LocalContainerEntityManagerFactoryBean();
    factory.setDataSource(dataSource());
    factory.setJpaVendorAdapter(vendorAdapter);
    factory.setPackagesToScan("com.example.socialapp.model");
    return factory;
}

}

这将配置JPA和Hibernate，允许我们使用Java对象来操作数据库。

创建登录页面

在这一步中，您需要创建一个登录页面，允许用户通过输入用户名和密码来进行登录。

首先，创建一个名为LoginPage的Vue页面，并添加以下代码：

这将创建一个包含用户名和密码输入框的表单，以及一个用于提交登录信息的提交按钮。

接下来，创建一个名为LoginForm的Java类，并添加以下代码：

public class LoginForm { private String username; private String password;

// Getters and setters

}

这将允许我们在Spring Boot中接收登录表单的数据。接下来，创建一个名为LoginController的Java类，并添加以下代码：

@RestController @RequestMapping("/api") public class LoginController { @Autowired private UserRepository userRepository;

@PostMapping("/login")
public ResponseEntity<Void> login(@RequestBody LoginForm form) {
    User user = userRepository.findByUsername(form.getUsername());

    if (user == null) {
        return ResponseEntity.notFound().build();
    }

    if (!BCrypt.checkpw(form.getPassword(), user.getPassword())) {
        return ResponseEntity.notFound().build();
    }

    return ResponseEntity.ok().build();
}

}

这将允许我们检查用户是否存在，并检查密码是否正确。如果一切正常，我们将返回一个HTTP 200响应，否则将返回一个HTTP 404响应。

最后，将LoginPage添加到Vue路由器中，并将其设置为默认的路由：

const routes = [ { path: '/login', component: LoginPage }, { path: '/', component: HomePage, meta: { requiresAuth: true } } ]

这将允许我们在访问主页之前进行用户身份验证。

创建用户注册页面

在这一步中，您需要创建一个注册页面，允许用户输入用户名和密码，并将其保存到数据库中。

首先，创建一个名为RegistrationPage的Vue页面，并添加以下代码：

这将创建一个包含用户名和密码输入框的表单，以及一个用于提交注册信息的提交按钮。

接下来，创建一个名为RegistrationForm的Java类，并添加以下代码：

public class RegistrationForm { private String username; private String password;

// Getters and setters

}

这将允许我们在Spring Boot中接收注册表单的数据。接下来，创建一个名为RegistrationController的Java类，并添加以下代码：

@RestController @RequestMapping("/api") public class RegistrationController { @Autowired private UserRepository userRepository;

@PostMapping("/register")
public ResponseEntity<Void> register(@RequestBody RegistrationForm form) {
    User user = new User();
    user.setUsername(form.getUsername());
    user.setPassword(BCrypt.hashpw(form.getPassword(), BCrypt.gensalt()));
    userRepository.save(user);
    return ResponseEntity.ok().build();
}

}

这将允许我们创建一个新的用户，并将其保存到数据库中。最后，将RegistrationPage添加到Vue路由器中，并将其链接到主页：

const routes = [ { path: '/login', component: LoginPage }, { path: '/register', component: RegistrationPage }, { path: '/', component: HomePage, meta: { requiresAuth: true } } ]

这将允许用户在注册后立即登录。

实现用户认证和授权

在这一步中，您需要实现用户认证和授权，以允许只有登陆的用户访问某些页面。

首先，创建一个名为JwtUtils的Java类，并添加以下代码：

@Component public class JwtUtils { private static final Logger logger = LoggerFactory.getLogger(JwtUtils.class);

@Value("${jwt.secret}")
private String secret;

@Value("${jwt.expiration}")
private int expiration;

public String generateJwtToken(Authentication authentication) {
    UserDetailsImpl userPrincipal = (UserDetailsImpl) authentication.getPrincipal();

    return Jwts.builder()
            .setSubject((userPrincipal.getUsername()))
            .setIssuedAt(new Date())
            .setExpiration(new Date((new Date()).getTime() + expiration * 1000))
            .signWith(SignatureAlgorithm.HS512, secret)
            .compact();
}

public String getUsernameFromJwtToken(String token) {
    return Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody().getSubject();
}

public boolean validateJwtToken(String authToken) {
    try {
        Jwts.parser().setSigningKey(secret).parseClaimsJws(authToken);
        return true;
    } catch (SignatureException e) {
        logger.error("Invalid JWT signature: {}", e.getMessage());
    } catch (MalformedJwtException e) {
        logger.error("Invalid JWT token: {}", e.getMessage());
    } catch (ExpiredJwtException e) {
        logger.error("JWT token expired: {}", e.getMessage());
    } catch (UnsupportedJwtException e) {
        logger.error("JWT token unsupported: {}", e.getMessage());
    } catch (IllegalArgumentException e) {
        logger.error("JWT claims string is empty: {}", e.getMessage());
    }

    return false;
}

}

这将允许我们生成JWT令牌，并验证它们是否是有效的。

接下来，创建一个名为SecurityConfig的Java类，并添加以下代码：

@EnableWebSecurity @EnableGlobalMethodSecurity(prePostEnabled = true) public class SecurityConfig extends WebSecurityConfigurerAdapter { @Autowired private UserDetailsServiceImpl userDetailsService;

@Autowired
private JwtUtils jwtUtils;

@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
}

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors().and().csrf().disable()
            .authorizeRequests()
            .antMatchers(HttpMethod.POST, "/api/login", "/api/register").permitAll()
            .anyRequest().authenticated()
            .and()
            .exceptionHandling().authenticationEntryPoint(authenticationEntryPoint())
            .and()
            .sessionManagement()
            .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and()
            .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
}

@Bean
public JwtAuthenticationFilter jwtAuthenticationFilter() {
    return new JwtAuthenticationFilter(userDetailsService, jwtUtils);
}

@Bean
public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
}

@Bean
public AuthenticationEntryPoint authenticationEntryPoint() {
    return (request, response, authException) -> {
        response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Unauthorized");
    };
}

}

这将设置Spring Security，允许用户在登录后访问受保护的页面，但不允许未经身份验证的用户访问它们。

最后，创建一个名为JwtAuthenticationFilter的Java类，并添加以下代码：

public class JwtAuthenticationFilter extends OncePerRequestFilter { @Autowired private UserDetailsServiceImpl userDetailsService;

...

Spring Cloud alibaba+Vue，开发仿社交小程序【完整】

Spring Cloud alibaba+Vue，开发仿社交小程序