• 第3章 基础项目的搭建

    3.1 后端项目搭建

    3.1.1 gitee下载脚手架

    下载地址：https://gitee.com/77jubao2015/springbootdemo

    打开浏览器输入以上地址，点击下载即可，如图所示：

    在这里插入图片描述

    3.1.2 把脚手架导入到idea开发工具

    步骤01 把下载后的脚手架放到指定位置并解压，把解压后的文件夹名称改为pig_feet_rice即可，如图所示：
    在这里插入图片描述

    步骤02 打开IDEA开发选择Open，选择项目存放的路径，然后点击OK即可，如图所示：

    在这里插入图片描述

    步骤03 修改项目的名称为pig_feet_rice，如图所示：

    在这里插入图片描述

    步骤04 修改pom.xml文件

    主要修改项目名称、Spring Boot版本号、JDK版本号等信息，代码如下所示：

    
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0modelVersion>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.6.4version>
        <relativePath/> 
    parent>
    <groupId>cn.xuedengroupId>
    <artifactId>pig_feet_riceartifactId>
    <version>1.0.0version>
    <name>pig_feet_ricename>
    <description>springboot+Vue3 整合开发猪脚饭微信小程序description>
    <properties>
        <java.version>17java.version>
    properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>

        
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>8.0.23version>
        dependency>

        
        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>druid-spring-boot-starterartifactId>
            <version>1.2.6version>
        dependency>

        
        <dependency>
            <groupId>org.bgee.log4jdbc-log4j2groupId>
            <artifactId>log4jdbc-log4j2-jdbc4.1artifactId>
            <version>1.16version>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-validationartifactId>
        dependency>

        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-data-jpaartifactId>
        dependency>

        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>
        dependency>

        
        <dependency>
            <groupId>cn.hutoolgroupId>
            <artifactId>hutool-allartifactId>
            <version>5.6.5version>
        dependency>

    dependencies>

    <build>
        <finalName>xuedenpay1.0finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
                <version>2.4.5version>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombokgroupId>
                            <artifactId>lombokartifactId>
                        exclude>
                    excludes>
                configuration>
            plugin>
        plugins>
    build>

project>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95

    3.1.3 修改配置文件application.yml

    这里我们主要是修改数据源即可，如图所示：
    在这里插入图片描述

    代码如下所示：

    server:
  port: 8081

#配置数据源
spring:
  datasource:
    druid:
      db-type: com.alibaba.druid.pool.DruidDataSource
      driver-class-name: net.sf.log4jdbc.sql.jdbcapi.DriverSpy
      url: jdbc:log4jdbc:mysql://127.0.0.1:3306/pig_feet_rice?serverTimezone=Asia/Shanghai&characterEncoding=utf8&useSSL=false
      username: root
      password: root

      # 初始化配置
      initial-size: 3
      # 最小连接数
      min-idle: 3
      # 最大连接数
      max-active: 15
      # 获取连接超时时间
      max-wait: 5000
      # 连接有效性检测时间
      time-between-eviction-runs-millis: 90000
      # 最大空闲时间
      min-evictable-idle-time-millis: 1800000
      test-while-idle: true
      test-on-borrow: false
      test-on-return: false

      validation-query: select 1
      # 配置监控统计拦截的filters
      filters: stat
      stat-view-servlet:
        url-pattern: /druid/*
        reset-enable: false
      web-stat-filter:
        url-pattern: /*
        exclusions: "*.js,*.gif,*.jpg,*.bmp,*.png,*.css,*.ico,/druid/*"

  #配置jpa
  jpa:
    hibernate:
      # 生产环境设置成 none，避免程序运行时自动更新数据库结构
      ddl-auto: update


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    修改为自己本地电脑的数据库即可

    3.1.4 修改启动类为PigFeetRiceApplication

    如图所示：
    在这里插入图片描述

    3.2 前端项目搭建

    3.2.1 从gitee下载前端demo

    地址：https://gitee.com/77jubao2015/wxpaydemo

    再浏览器打开上面的地址，点击下载即可，如图所示：

    在这里插入图片描述

    3.2.2 把项目导入到webstorm开发工具

    步骤01 下载后直接解压，并把项目名称改为pig_feet_rice_web,如图所示：

    在这里插入图片描述

    步骤02 打开WebStorm 选择open，然后选择指定的项目即可，如图所示：

    在这里插入图片描述

    步骤03 修改标题

    在src->store->modules->app.tsw文件下修改标题，如图所示：

    在这里插入图片描述

    改为如下所示：

    在这里插入图片描述

    3.2.3 在终端输入命令yarn install安装依赖

    yarn install

    • 1

    如图所示

    在这里插入图片描述

    3.2.4 启动项目

    选择左边npm,如图所示：

    在这里插入图片描述

    点击serve即可，如图所示：

    在这里插入图片描述

    3.3 系统后台登录功能实现

    3.3.1 创建实体类Admin

    在 cn.xueden.domain 包目录下新建一个 Admin实体类，代码如下所示：

    package cn.xueden.domain;

import cn.xueden.base.BaseEntity;
import lombok.Data;

import javax.persistence.*;
/**功能描述：系统管理员实体类
 * @author 梁志杰
 * @Date:2022/5/5
 * @Description:cn.xueden
 * @version:1.0
 */
@Data
@Entity
@Table(name = "p_sys_admin")
@org.hibernate.annotations.Table(appliesTo = "p_sys_admin",comment="系统管理员信息表")
public class Admin extends BaseEntity {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", nullable = false)
    private Integer id;

    @Column(name = "login_name")
    private String loginName;

    @Column(name = "password", length = 50)
    private String password;

    @Column(name = "status", nullable = false)
    private Integer status;
    
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    在 cn.xueden.base 包目录下新建一个 BaseEntity实体类，代码如下所示：

    package cn.xueden.base;

import cn.xueden.annotation.EnableXuedenCreateBy;
import cn.xueden.annotation.EnableXuedenUpdateBy;
import lombok.Getter;
import lombok.Setter;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.hibernate.annotations.CreationTimestamp;
import org.hibernate.annotations.UpdateTimestamp;

import javax.persistence.Column;
import javax.persistence.MappedSuperclass;
import java.io.Serializable;
import java.lang.reflect.Field;
import java.sql.Timestamp;

/**功能描述：公共Entity
 * @Author:梁志杰
 * @Date:2022/4/1
 * @Description:cn.xueden.base
 * @version:1.0
 */
@Getter
@Setter
@MappedSuperclass
public class BaseEntity implements Serializable {

    /**
     * 创建时间
     */
    @Column(name = "create_time",nullable = false)
    @CreationTimestamp
    private Timestamp createTime;

    /**
     * 创建者ID
     */
    @Column(name = "create_by")
    @EnableXuedenCreateBy
    private Long createBy;

    /**
     * 更新时间
     */
    @Column(name = "update_time")
    @UpdateTimestamp
    private Timestamp updateTime;

    /**
     * 更新者ID
     */
    @Column(name = "update_by")
    @EnableXuedenUpdateBy
    private Long updateBy;

    /**
     * 备注
     */
    @Column(name = "remarks")
    private String remarks;



    public @interface Update {}

    @Override
    public String toString() {
        ToStringBuilder builder = new ToStringBuilder(this);
        Field[] fields = this.getClass().getDeclaredFields();
        try {
            for (Field f : fields) {
                f.setAccessible(true);
                builder.append(f.getName(), f.get(this)).append("\n");
            }
        } catch (Exception e) {
            builder.append("toString builder encounter an error");
        }
        return builder.toString();
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81

    3.3.2 创建持久层接口AdminRepository

    在 cn.xueden.repository 包目录下新建一个 AdminRepository接口，代码如下所示：

    package cn.xueden.repository;

import cn.xueden.domain.Admin;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
/**系统管理员信息持久层
 * @author 梁志杰
 * @Date:2022/5/5
 * @Description:cn.xueden.repository
 * @version:1.0
 */
public interface AdminRepository extends JpaRepository<Admin, Long>, JpaSpecificationExecutor<Admin> {
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3.3.3 创建业务接口IAdminService

    在 cn.xueden.service包目录下新建一个 IAdminService接口，代码如下所示：

    package cn.xueden.service;

/**功能描述:系统管理员业务接口
 * @author:梁志杰
 * @date:2022/5/5
 * @description:cn.xueden.service
 * @version:1.0
 */
public interface IAdminService {
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    3.3.4 创建业务接口实现类AdminServiceImpl

    在 cn.xueden.service.impl包目录下新建一个 AdminServiceImpl接口实现类，代码如下所示：

    package cn.xueden.service.impl;

import cn.xueden.repository.AdminRepository;
import cn.xueden.service.IAdminService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

/**功能描述：系统管理员业务接口实现类
 * @author:梁志杰
 * @date:2022/5/5
 * @description:cn.xueden.service.impl
 * @version:1.0
 */
@Service
@Transactional(readOnly = true)
public class AdminServiceImpl implements IAdminService {
    
    private final AdminRepository adminRepository;

    public AdminServiceImpl(AdminRepository adminRepository) {
        this.adminRepository = adminRepository;
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    3.3.5 创建登录前端控制器LoginController

    在一个名为controller的包新建一个LoginController类，代码如下所示：

    package cn.xueden.controller;

import cn.xueden.service.IAdminService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**功能描述：系统后台登录前端控制器
 * @author:梁志杰
 * @date:2022/5/5
 * @description:cn.xueden.controller
 * @version:1.0
 */
@RestController
@RequestMapping("login")
public class LoginController {
    
    private final IAdminService adminService;

    public LoginController(IAdminService adminService) {
        this.adminService = adminService;
    }
}



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    3.3.6 新建一个登陆方法login

    在LoginController类下新增一个登陆方法，代码如下所示：

      /**
     * 登录方法
     * @param admin
     * @return
     */
    @PostMapping
    public BaseResult login(@RequestBody Admin admin,HttpServletRequest request){
        Admin dbAdmin = adminService.login(admin);
        if(dbAdmin==null){
            return BaseResult.fail("登录失败，账号不存在");
        }else if(!dbAdmin.getPassword().equals(admin.getPassword())){
            return BaseResult.fail("登录失败，密码不正确");
        }else if(dbAdmin.getStatus()==0){
            return BaseResult.fail("登录失败，账号被封禁");
        }
        // 生成token
        String token = HutoolJWTUtil.createToken(dbAdmin);
        request.getServletContext().setAttribute("token",token);
        return BaseResult.success("登录成功",token);
    }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    3.3.7 在IAdminService接口下新增一个登陆方法login

    代码如下所示：

      /**
     * 登录
     * @param admin
     * @return
     */
    Admin login(Admin admin);


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.3.8 在AdminServiceImpl实现类下新建一个login方法

    代码如下所示：

     /**
     * 登录
     * @param admin
     * @return
     */
    @Override
    public Admin login(Admin admin) {
        Admin dbAdmin = adminRepository.findByLoginName(admin.getLoginName());
        return dbAdmin;
    }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    3.3.9 在AdminRepository接口下新建一个findByLoginName方法

    代码如下所示：

     /**
     * 根据登录名查找管理员信息
     * @param loginName
     * @return
     */
    Admin findByLoginName(String loginName);


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.3.10 新建一个JWT工具类HutoolJWTUtil

    代码如下所示：

    package cn.xueden.utils;

import cn.hutool.core.date.DateField;
import cn.hutool.core.date.DateTime;
import cn.hutool.jwt.JWT;
import cn.hutool.jwt.JWTPayload;
import cn.hutool.jwt.JWTUtil;
import cn.hutool.jwt.JWTValidator;
import cn.xueden.domain.Admin;

import java.util.HashMap;
import java.util.Map;

/**
 * @author:梁志杰
 * @date:2022/5/6
 * @description:cn.xueden.utils
 * @version:1.0
 */
public class HutoolJWTUtil {

    /**
     * 生成token
     * @param admin
     * @return
     */
    public static String createToken(Admin admin){
        DateTime now = DateTime.now();
        DateTime newTime = now.offsetNew(DateField.MINUTE, 120);
        Map<String,Object> payload = new HashMap<String,Object>();
        //签发时间
        payload.put(JWTPayload.ISSUED_AT, now);
        //过期时间
        payload.put(JWTPayload.EXPIRES_AT, newTime);
        //生效时间
        payload.put(JWTPayload.NOT_BEFORE, now);
        //载荷
        payload.put("loginName", admin.getLoginName());
        payload.put("aid", admin.getId());
        String key = "www.xueden.cn";
        String token = JWTUtil.createToken(payload, key.getBytes());
        return token;
    }

    /**
     * 校验token
     * @param token
     * @return
     */
    public static boolean JwtVerify(String token){
        String key = "www.xueden.cn";
        JWT jwt = JWTUtil.parseToken(token);
        boolean verifyKey = jwt.setKey(key.getBytes()).verify();
        System.out.println(verifyKey);
        boolean verifyTime = jwt.validate(0);
        System.out.println(verifyTime);
        if(verifyKey&&verifyTime){
            return true;
        }
       return false;
    }

    /**
     * 解析token
     * @param token
     * @return
     */
    public static Long parseToken(String token){
        final JWT jwt = JWTUtil.parseToken(token);
        return Long.parseLong(jwt.getPayload("aid").toString());
    }
}



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74

    3.3.11 修改login目录下的index.vue文件

    如图所示：

    在这里插入图片描述

    代码如下所示：

    







    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184

    3.3.12 在login目录下新建一个api.ts文件

    如图所示：

    在这里插入图片描述

    代码如下所示：

    import { fetch } from '@/axios-config/axios'

// 参数接口
interface PropsData {
    params?: any,
    data?: any
}
// 提交表单接口函数
export const loginApi = ({ data }: PropsData): any => {
  return fetch({ url: 'login', method: 'post', data })
}



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3.3.13 修改UserInfo目录下的index.vue文件

    如图所示：

    在这里插入图片描述

    代码如下所示：

    <template>
  <el-dropdown class="avatar-container" trigger="hover">
    <div id="user-container">
      <div class="avatar-wrapper">
        <img src="logo.png" class="user-avatar">
        <span class="name-item">{{ userInfo.loginName }}</span>
      </div>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item key="1">
          <span style="display: block;" @click="toHome">首页</span>
        </el-dropdown-item>
        <el-dropdown-item key="2">
          <span style="display: block;" @click="loginOut">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { defineComponent, reactive, computed } from 'vue'
import { resetRouter } from '@/router'
import wsCache from '@/cache'
import { useRouter } from 'vue-router'
import { tagsViewStore } from '@/store/modules/tagsView'
import { appStore } from '@/store/modules/app'

export default defineComponent({
  name: 'UserInfo',
  setup() {
    const { replace, push } = useRouter()
    async function loginOut(): Promise<void> {
      wsCache.clear()
      // wsCache.delete(appStore.userToken)
      await resetRouter() // 重置静态路由表
      await tagsViewStore.delAllViews() // 删除所有的tags标签页
      replace('/login')
    }
    const userInfo = wsCache.get(appStore.userInfo)
    console.info('userInfo:-----------',userInfo)
    function toHome() {
      push('/')
    }
    return {
      loginOut,
      toHome,
      userInfo
    }
  }
})
</script>

<style lang="less" scoped>
.avatar-container {
  margin-right: 30px;
  padding: 0 10px;
  .avatar-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
    .user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 10px;
    }
    .name-item {
      font-size: 14px;
      font-weight: 600;
      display: inline-block;
      margin-left: 5px;
    }
  }
}
</style>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79

    3.3.14 拦截器功能实现

    步骤01 新建一个interceptor包，并在此包下自定义拦截器类AdminInterceptor

    代码如下所示：

    package cn.xueden.interceptor;


import cn.xueden.exception.BadRequestException;

import cn.xueden.utils.HutoolJWTUtil;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Enumeration;

/**拦截器
 * @author:梁志杰
 * @date:2022/5/6
 * @description:cn.xueden.interceptor
 * @version:1.0
 */

public class AdminInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "86400");
        response.setHeader("Access-Control-Allow-Headers", "*");
        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
            System.out.println("OPTIONS请求，放行");
            return true;
        }
        //获取token
        String token = request.getHeader("Authorization");
        //判断用户是否登录
        if (null==token){
            throw new BadRequestException(HttpStatus.UNAUTHORIZED,"请先登录");
        }

        String tokenServletContext = (String)request.getServletContext().getAttribute("token");
        // 判断用户登录是否过期
        if (null==tokenServletContext){
            throw new BadRequestException(HttpStatus.UNAUTHORIZED,"登录已过期，请重新登录");
        }
        // 校验token
        boolean tokenStatus = HutoolJWTUtil.JwtVerify(token);
        if(!tokenStatus){
            throw new BadRequestException(HttpStatus.UNAUTHORIZED,"登录信息已过期，请重新登录");
        }

        return true;

    }
}



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    步骤02 修改ConfigurerAdapter配置类，重写addInterceptors方法，代码如下所示：

     @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //addPathPatterns拦截的路径
        String[] addPathPatterns = {
                "/**"
        };
        //excludePathPatterns排除的路径
        String[] excludePathPatterns = {
                "/login","/wxapi/**","/uploadFile/**"
        };
        //创建用户拦截器对象并指定其拦截的路径和排除的路径
        registry.addInterceptor(new AdminInterceptor()).addPathPatterns(addPathPatterns).excludePathPatterns(excludePathPatterns);

    }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    3.4 微信小程序项目搭建

    3.4.1 新建猪脚饭微信小程序项目

    步骤01 打开微信开发者工具，选择新建项目，如图所示：

    在这里插入图片描述

    步骤02 依次新建目录images->nav，把相关图片复制到nav目录下，如图所示：

    在这里插入图片描述

    步骤03 在目录images新建一个icon目录，把相关图片复制到此目录，如图所示：

    在这里插入图片描述

    3.4.2 新建一个名为category菜单页

    打开app.json文件，在pages属性下添加如下代码即可：

    "pages": [
        "pages/index/index",
        "pages/category/category"
    ],


    • 1
    • 2
    • 3
    • 4
    • 5

    3.4.3 新建一个名为index的购物车页面

    打开app.json文件，在pages属性下添加如下代码即可：、

     "pages": [
        "pages/index/index",
        "pages/category/category",
        "pages/shop-cart/index"
    ],


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.4.4 新增一个名为index的我的页面

    打开app.json文件，在pages属性下添加如下代码即可：

     "pages": [
        "pages/index/index",
        "pages/category/category",
        "pages/shop-cart/index",
        "pages/my/index"
    ],


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.4.5 添加tabBar属性

    打开app.json文件，添加tabBar属性，同时添加如下代码：

     "tabBar": {
        "color": "#6e6d6b",
        "selectedColor": "#e64340",
        "borderStyle": "white",
        "backgroundColor": "#f6f0e3",
        "list": [
            {
                "pagePath": "pages/index/index",
                "iconPath": "images/nav/home-off.png",
                "selectedIconPath": "images/nav/home-on.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/category/category",
                "iconPath": "images/nav/ic_catefory_normal.png",
                "selectedIconPath": "images/nav/ic_catefory_pressed.png",
                "text": "菜单"
            },
            {
                "pagePath": "pages/shop-cart/index",
                "iconPath": "images/nav/cart-off.png",
                "selectedIconPath": "images/nav/cart-on.png",
                "text": "购物车"
            },
            {
                "pagePath": "pages/my/index",
                "iconPath": "images/nav/my-off.png",
                "selectedIconPath": "images/nav/my-on.png",
                "text": "我的"
            }

        ]

    },


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    3.4.6 编写调用后台接口的工具包

    新建一个名为wxapi的目录，并在此目录下新建一个名为main.js的文件，代码如下所示：

    const API_BASE_URL = 'http://localhost:8081/wxapi'

const request = (url,method,data) => {
    let _url = API_BASE_URL+'/'+url
    retrun new Promise((resolve, reject) => {
        wx.request({
          url: _url,
          method: method,
          data: data,
          header: {
              'Content-Type': 'application/x-www-form-urlencoded'
          },
          success(res) {
            resolve(res.data)
          },
          fail(error){
            reject(error)
          },
          complete(aaa){
              // 加载完成
          }
        })
    })
}

/**
 * 小程序的promise没有finally方法，自己扩展下
 */
Promise.prototype.finally = function (callback) {
    var Promise = this.constructor;
    return this.then(
      function (value) {
        Promise.resolve(callback()).then(
          function () {
            return value;
          }
        );
      },
      function (reason) {
        Promise.resolve(callback()).then(
          function () {
            throw reason;
          }
        );
      }
    );
  }

module.exports = {
    request
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    3.4.7 在根目录添加一个名为config.js的文件

    代码如下所示：

    module.exports = {
    version: "0.0.1",
    note: '图片url',
    imgUrl: "http://192.168.0.5:8081/uploadFile"
  }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.4.8 整合weui组件库

    开发文档地址：https://wechat-miniprogram.github.io/weui/docs/

    步骤01 下载weui组件库，地址是：https://github.com/Tencent/weui-wxss

    在这里插入图片描述

    步骤02 新建一个weui目录，并把下载好的组件解压复制到此目录下，如图所示：

    在这里插入图片描述

    步骤03 修改app.wxss文件，代码如下所示：

    @import 'weui/weui.wxss';
.page {
  background-color: #f6f0e3;
  min-height: 100vh;
  box-sizing: border-box;
}
.wxParse-img {
  display: block !important;
}
.space {
  height:20rpx;
  background-color: #F2f2f2;
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
  • 相关阅读:
    vue使用echarts图表
    GPT 模型解析：ChatGPT 如何在语言处理领域引领潮流？
    031：vue子组件向父组件传递多个参数，父组件2种解析方法
    【机器学习】线性回归【下】正则化最小二乘估计
    界面拖动界面拖动
    day3 ARM
    Vue面试题-答案、例子
    Lagrange插值法实验:求拉格朗日插值多项式和对应x的近似值matlab实现(内附代码)
    若依前端ajax连接后端多文件上传接口，并传值
    springBoot整合minio
  • 原文地址：https://blog.csdn.net/huitiaowudeyu/article/details/126816179