eladmin-mp 前后端分离项目搭建流程

1、下载开源项目源码

网址:https://github.com/elunez/eladmin-mp

2、解压zip文件,文件夹显示如下

3、确保 mysql、redis、node.js都已被安装(不过多赘述)

4、用idea分别打开文件夹eladmin 及eladmin-web

因为是前后端分离的,所以打开后端代码和前端代码分别管理。

5、后端代码运行:

①、确定mysql数据库中已导入数据

通过数据库连接工具,运行sql文件

步骤一新建数据库:注意字符集和排序规则选择下避免不必要的麻烦

步骤二:导入sql文件。选中项目sql文件夹下的sql文件进行导入。

步骤三确保项目内mysql ip、数据库、账号、密码准确

②redis配置。这一步 redis未设置密码就可以不管

③ 点击右上角直接运行,如图显示后端启动完成。

6、前端vue项目代码运行,根据readme.md文件中指令直接运行vue项目启动

点terminal用npm执行进行安装依赖npm install。(注意:npm指令需要node.js正确安装好才可使用)

安装成功后

启动前端项目 npm run dev 

根据显示的路径打开即可。

到这里整个项目已经在本地启动起来了。

界面展示:

  • 9
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现微信登录需要以下步骤: 1. 在微信公众平台申请开发者账号,创建应用并获取AppID和AppSecret。 2. 在前端页面上,引入微信授权登录的SDK。 3. 用户点击微信登录按钮,前端调用授权登录接口获取用户授权信息。 4. 前端将授权信息发送给后端。 5. 后端根据授权信息发送给微信服务器获取用户的OpenID和Access Token。 6. 后端根据OpenID查询数据库,如果用户已存在则直接登录,否则创建新用户。 7. 用户登录成功后,后端返回一个JWT Token给前端,前端将该Token保存在本地。 下面是SpringBoot后端代码的实现: 1. 引入微信授权登录的SDK。 ```xml <!-- 微信授权登录SDK --> <dependency> <groupId>com.github.binarywang</groupId> <artifactId>weixin-java-mp</artifactId> <version>3.8.0</version> </dependency> ``` 2. 在配置文件中添加微信AppID和AppSecret。 ```yaml wechat: mp: appId: your_app_id secret: your_app_secret ``` 3. 创建微信授权登录Controller,并提供授权接口。 ```java @RestController @RequestMapping("/api/wechat") public class WeChatController { @Autowired private WxMpService wxMpService; /** * 微信授权登录 */ @GetMapping("/login") public String login(@RequestParam("code") String code) throws WxErrorException { // 根据code获取access token WxMpOAuth2AccessToken accessToken = wxMpService.oauth2getAccessToken(code); // 根据access token获取用户信息 WxMpUser wxMpUser = wxMpService.oauth2getUserInfo(accessToken, null); // 根据OpenID查询用户是否已存在 User user = userService.findByOpenId(wxMpUser.getOpenId()); if (user == null) { // 如果用户不存在,则创建新用户 user = new User(); user.setOpenId(wxMpUser.getOpenId()); user.setNickName(wxMpUser.getNickname()); user.setAvatarUrl(wxMpUser.getHeadImgUrl()); userService.save(user); } // 生成JWT Token String token = JwtUtils.createToken(user.getId()); return token; } } ``` 4. 在SecurityConfig中添加JWT认证过滤器。 ```java @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Autowired private JwtAuthenticationFilter jwtAuthenticationFilter; @Override protected void configure(HttpSecurity http) throws Exception { http .csrf().disable() .authorizeRequests() .antMatchers("/api/wechat/login").permitAll() .anyRequest().authenticated() .and() .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class); } } ``` 5. 创建JWT Token认证过滤器。 ```java @Component public class JwtAuthenticationFilter extends OncePerRequestFilter { @Autowired private UserService userService; @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { // 从请求头中获取JWT Token String token = request.getHeader("Authorization"); if (StringUtils.isNotBlank(token) &amp;&amp; token.startsWith("Bearer ")) { token = token.substring(7); try { // 解析JWT Token Long userId = JwtUtils.getUserId(token); User user = userService.findById(userId); if (user != null) { // 将用户信息保存在Security上下文中 UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(user, null, user.getAuthorities()); SecurityContextHolder.getContext().setAuthentication(authenticationToken); } } catch (Exception e) { logger.error("JWT Token解析失败: {}", e.getMessage()); } } filterChain.doFilter(request, response); } } ``` 至此,SpringBoot后端实现微信授权登录的代码就完成了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值