最近很火的电子敲木鱼源码 带排行榜功能

杂谈

之前热心网友分享了一个敲木鱼的页面，看起来十分带感，我们今天给大家带来其部署教程

效果展示

在线体验

源码部署

前端上传

你可以将前端上传到网站任意目录，我们这里选择上传到/demo/muyu目录下

同时，你如果希望使用排行榜的功能，则需要修改一下index.html文件的接口

第128行

          async getData() {
            const { data } = await axios.get("https://muyu.pigsec.cn/rankingList");
            this.Data = data.data;
          },

第132行

          // 今日功德数据
          async getTodayData() {
            const { data } = await axios.get("https://muyu.pigsec.cn/rankingListDate");
            this.Data = data.data;
          },

第228行

              axios.post("https://muyu.pigsec.cn/submit",params).then(res=>{
                this.$message({
                  message: "恭喜你，功德上传成功",
                  type: "success",
                });

当然，你也可以选择不修改，直接上传项目就可以使用，但是这里的排行榜则会使用我的数据库里的内容

创建Mysql数据库

在宝塔中配置对应的数据库

数据库SQL导入数据

.sql文件

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- 数据库： `muyu`
--

-- --------------------------------------------------------

--
-- 表的结构 `today_user`
--

CREATE TABLE `today_user` (
  `id` int(255) NOT NULL,
  `userName` varchar(255) NOT NULL,
  `count` int(255) NOT NULL,
  `create_time` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- --------------------------------------------------------

--
-- 表的结构 `user`
--

CREATE TABLE `user` (
  `id` int(255) NOT NULL,
  `username` varchar(255) NOT NULL,
  `count` int(255) NOT NULL,
  `create_time` timestamp(6) NULL DEFAULT CURRENT_TIMESTAMP(6)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- 转储表的索引
--

--
-- 表的索引 `today_user`
--
ALTER TABLE `today_user`
  ADD KEY `id` (`id`);

--
-- 表的索引 `user`
--
ALTER TABLE `user`
  ADD KEY `id` (`id`);
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

JAVA后端打包（您也可以直接使用我们打包好的jar文件）

使用idea，您需要进入到muyu-main/server目录中，对java项目进行打包

mvn install

如果打包出现错误

可以修改pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<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.0</modelVersion>
    
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.test</groupId>
    <artifactId>muyu</artifactId>
    <version>1.1.1-SNAPSHOT</version>
    <name>muyu</name>
    <description>muyu</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <repositories>
        <repository>
            <id>aliyun</id>
            <name>aliyun</name>
            <url>https://maven.aliyun.com/repository/public</url>
        </repository>
    </repositories>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>2.9.0</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
          <plugin>
          <groupId>org.apache.maven.plugins</groupId>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.19.1</version>
        </plugin>
        </plugins>
        
    </build>

</project>

然后重新打包就OK了，大概是作者忘记加载org.apache.maven.plugins插件了

然后打包的文件就在这里了

然后我们可以将其部署到宝塔的java项目中，点击添加java项目，jar路径选择我们打包好的muyu-1.1.1-SNAPSHOT.jar

然后我们需要绑定域名

并开启外网映射

同时配置好SSL证书

配置yaml文件

我们将打包好的jar文件上传后，同时在目录下创建application.yaml

以下是示例文件，您可以按需更改下面的配置内容

• port: 7043 服务器端口
• url: jdbc:mysql://127.0.0.1:3306/muyu?characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai 连接的数据库
• username: muyu 数据库用户名
• password: lsk200224 数据库密码

server:
  #服务器端口
  port: 7043
spring:
  #数据库连接配置
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/muyu?characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: muyu
    password: lsk200224
  profiles:
    active:

启动java服务

都配置好之后，点击保存项目配置就会启动了，同时您也可以设置开机启动，这样服务器宕机之后重启可以自动恢复

源码下载

下面的提取码已自动输入，直接下载即可