springboot+mybatis+mysql+influxdb+thymeleaf

1 篇文章 0 订阅

项目目录

pom配置文件

<?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.4.6</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zzedu</groupId>
    <artifactId>go-fwd</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>go-fwd</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>
        <!-- 阿里巴巴json包 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.69</version>
        </dependency>
        <dependency>
            <groupId>org.influxdb</groupId>
            <artifactId>influxdb-java</artifactId>
            <version>2.15</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

配置文件

#thymelea模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
#热部署文件,页面不产生缓存,及时更新
spring.thymeleaf.cache=false
spring.web.resources.chain.strategy.content.enabled=true
spring.web.resources.chain.strategy.content.paths=/**
#mySql
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://10.102.110.100:3306/go-test
spring.datasource.username=root
spring.datasource.password=zzutscMYSQL
#influxdb
spring.influx.url=http://10.102.110.93:8086
spring.influx.user=lbw
spring.influx.password=123
spring.influx.database=test_db2
spring.influx.retention_policy=default
spring.influx.retention_policy_time=30d

model文件夹下的port

package com.zzedu.gofwd.model;

import lombok.Data;

@Data
public class Port {
    private int id;
    private String ip;
    private String port;
    private int flag;
    private String bz;
}

mapper文件夹下的PortMapper

package com.zzedu.gofwd.mapper;

import com.zzedu.gofwd.model.Port;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
@Mapper
public interface PortMapper {
    @Select("select * from port where ip=#{ip} and flag=0 limit 1")
    Port getPortById(String ip);
    @Select("select * from port where port=#{port}")
    Port getPortInfo(String port);
    @Select("update port set flag=1 where id=#{id}")
    void updatePortById(long id);
    @Insert("INSERT INTO port (ip,port,flag,bz) VALUES (#{ip},#{port},#{flag},#{bz})")
    void add(Port port);
}

controller文件夹下的portController

package com.zzedu.gofwd.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.zzedu.gofwd.common.InfluxDBConnect;
import com.zzedu.gofwd.mapper.PortMapper;
import com.zzedu.gofwd.model.Port;
import org.influxdb.dto.QueryResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.annotation.Resource;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

@Controller

public class PortController {
    @Resource
    InfluxDBConnect influxDBConnect;
    @Autowired
    private PortMapper portMapper;

    @RequestMapping("/insertPortShow")
    public String insertPortShow(){
        return "insertport";
    }
    @RequestMapping("/insertPort")
    public String insertPort(Port port){
        portMapper.add(port);
        return "insertport";
    }
    @RequestMapping("/getPort")
    @ResponseBody
    public Port getAllUsers(String ip){
        return portMapper.getPortById(ip);
    }
    @RequestMapping("/getPortInfo")
    @ResponseBody
    public Port getPortInfo(String port){
        return portMapper.getPortInfo(port);
    }
    @RequestMapping("/updatePort")
    @ResponseBody
    public String updateAllUsers(Long id){
        portMapper.updatePortById(id);
        return "success";
    }
    @RequestMapping("/inserPortInfo")
    @ResponseBody
    public void testInsert(@RequestBody String temp) {
        JSONObject obj=JSON.parseObject(temp);
        Map<String, String> tagsMap = new HashMap<>();
        Map<String, Object> fieldsMap = new HashMap<>();
        Iterator it =obj.getJSONObject("fields").entrySet().iterator();
        while (it.hasNext()) {
            Map.Entry<String, Object> entry = (Map.Entry<String, Object>) it.next();
            fieldsMap.put(entry.getKey(), entry.getValue());
        }
        Iterator it2 =obj.getJSONObject("tag").entrySet().iterator();
        while (it2.hasNext()) {
            Map.Entry<String, Object> entry2 = (Map.Entry<String, Object>) it2.next();
            tagsMap.put(entry2.getKey(), (String) entry2.getValue());
        }
        System.out.println("influxDB start time :" + System.currentTimeMillis());
        influxDBConnect.insert("usage", tagsMap, fieldsMap);
    }
    public void testQuery(){
        QueryResult result = influxDBConnect.query("select * from usage limit 2");
        System.out.println(result.getResults());

    }
}

common文件夹InfluxDBConnect

package com.zzedu.gofwd.common;

import org.influxdb.InfluxDB;
import org.influxdb.InfluxDBFactory;
import org.influxdb.dto.Point;
import org.influxdb.dto.Query;
import org.influxdb.dto.QueryResult;

import java.util.Map;
import java.util.concurrent.TimeUnit;

public class InfluxDBConnect {
    /**
     * 用户名
     */
    private String userName;
    private String password;
    private String url;
    public String database;
    /**
     * 数据保存策略
     */
    private String retentionPolicy;
    /**
     * 数据保存策略中数据保存时间
     */
    private String retentionPolicyTime;

    /**
     * InfluxDB实例
     */
    private InfluxDB influxDB;
    public InfluxDBConnect(String userName, String password, String influxDBUrl, String database, String retentionPolicy, String retentionPolicyTime) {
        this.userName = userName;
        this.password = password;
        this.url = influxDBUrl;
        this.database = database;
        // autogen默认的数据保存策略
        this.retentionPolicy = retentionPolicy == null || "".equals(retentionPolicy) ? "autogen" : retentionPolicy;
        this.retentionPolicyTime = retentionPolicyTime == null || "".equals(retentionPolicy) ? "30d" : retentionPolicyTime;
        this.influxDB = influxDbBuild();
    }
    /**
     * 连接时序数据库;获得InfluxDB
     **/
    public InfluxDB influxDbBuild() {
        if (influxDB == null) {
            influxDB = InfluxDBFactory.connect(url, userName, password);
            influxDB.query(new Query("CREATE DATABASE " + database));
            influxDB.setDatabase(database);
        }
        return influxDB;
    }

    /**
     * 设置数据保存策略 defalut 策略名 /database 数据库名/ 30d 数据保存时限30/ 1 副本个数为1/ 结尾DEFAULT
     * 表示 设为默认的策略
     */
    public void createRetentionPolicy() {
        String command = String.format("CREATE RETENTION POLICY \"%s\" ON \"%s\" DURATION %s REPLICATION %s DEFAULT",
                retentionPolicy, database, retentionPolicyTime, 1);
        this.query(command);
    }

    /**
     * 查询
     *
     * @param command 查询语句
     * @return
     */
    public QueryResult query(String command) {
        return influxDB.query(new Query(command, database));
    }

    /**
     * 插入
     *
     * @param measurement      * @param tags        标签
     * @param fields      字段
     */
    public void insert(String measurement, Map<String, String> tags, Map<String, Object> fields) {
        Point.Builder builder = Point.measurement(measurement);
        // 纳秒时会出现异常信息:partial write: points beyond retention policy dropped=1
        // builder.time(System.nanoTime(), TimeUnit.NANOSECONDS);
        builder.time(System.currentTimeMillis(), TimeUnit.MILLISECONDS);
        builder.tag(tags);
        builder.fields(fields);
        influxDB.write(database, "", builder.build());
    }

}

common文件夹InfluxdbConfig

package com.zzedu.gofwd.common;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class InfluxdbConfig {
    @Value("${spring.influx.url:''}")
    private String influxDBUrl;
    @Value("${spring.influx.user:''}")
    private String userName;
    @Value("${spring.influx.password:''}")
    private String password;
    @Value("${spring.influx.database:''}")
    private String database;
    @Value("${spring.influx.retention_policy:''}")
    private String retention_policy;
    @Value("${spring.influx.retention_policy_time:''}")
    private String retention_policy_time;

    @Bean
    public InfluxDBConnect getInfluxDBConnect() {
        InfluxDBConnect influxDB = new InfluxDBConnect(userName, password, influxDBUrl, database, retention_policy,retention_policy_time);
        influxDB.influxDbBuild();
        influxDB.createRetentionPolicy();
        return influxDB;
    }

}

resources/templates资源文件夹下的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="insertPort">
    First ip:<input type="text" name="ip" value="10.102.110.36"><br>
    Last port: <input type="text" name="port" value="5656"><br>
    Last flag: <input type="number" name="flag" value="1"><br>
    Last bz: <input type="text" name="bz" value="这是测试"><br>
    <input type="submit">
</form>
</body>
</html>
好的,下面是一个简单的示例: ### 后端部分 #### 1. 创建Spring Boot项目 使用Spring Initializr创建一个基于Maven的Spring Boot项目,勾选Web、MyBatisMySQL、Lombok等依赖。 #### 2. 配置数据库连接 在`application.properties`文件中配置数据库连接信息: ``` spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/mydb?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=123456 ``` #### 3. 创建数据库表 创建一个名为`user`的表,包含`id`、`username`、`password`三个字段。 #### 4. 创建实体类和Mapper 创建一个名为`User`的实体类,对应数据库中的`user`表。同时,创建一个名为`UserMapper`的Mapper接口,用于操作数据库中的`user`表。 #### 5. 创建Controller 创建一个名为`UserController`的Controller类,用于处理用户相关的请求。 ```java @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @PostMapping("/register") public Result register(@RequestBody User user) { userService.register(user); return Result.success(); } @PostMapping("/login") public Result login(@RequestBody User user) { User result = userService.login(user.getUsername(), user.getPassword()); if (result != null) { return Result.success(result); } else { return Result.error("用户名或密码错误"); } } } ``` #### 6. 创建Service 创建一个名为`UserService`的Service接口,包含用户注册和登录的方法。 ```java public interface UserService { void register(User user); User login(String username, String password); } ``` 创建一个名为`UserServiceImpl`的Service实现类,实现`UserService`接口中的方法。 ```java @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public void register(User user) { userMapper.insert(user); } @Override public User login(String username, String password) { return userMapper.selectByUsernameAndPassword(username, password); } } ``` #### 7. 创建返回结果类 创建一个名为`Result`的类,用于封装接口的返回结果。 ```java @Data @NoArgsConstructor @AllArgsConstructor public class Result { private int code; private String msg; private Object data; public static Result success() { return new Result(200, "success", null); } public static Result success(Object data) { return new Result(200, "success", data); } public static Result error(String msg) { return new Result(500, msg, null); } } ``` ### 前端部分 #### 1. 创建Vue项目 使用Vue CLI创建一个基于Vue.js的项目。 #### 2. 安装Axios 使用npm安装Axios。 ``` npm install axios --save ``` #### 3. 创建登录和注册组件 创建一个名为`Login`的组件,包含用户名和密码输入框、登录按钮和注册链接。 ```html <template> <div class="login"> <h2>登录</h2> <form> <div class="form-group"> <label>用户名:</label> <input type="text" class="form-control" v-model="username"> </div> <div class="form-group"> <label>密码:</label> <input type="password" class="form-control" v-model="password"> </div> <button type="button" class="btn btn-primary" @click="login">登录</button> </form> <div class="register-link"> <a href="javascript:void(0)" @click="goRegister">没有账号?去注册</a> </div> </div> </template> <script> import axios from 'axios' export default { data () { return { username: '', password: '' } }, methods: { login () { axios.post('/user/login', { username: this.username, password: this.password }).then(res => { if (res.data.code === 200) { alert('登录成功') } else { alert(res.data.msg) } }).catch(err => { console.error(err) }) }, goRegister () { this.$router.push('/register') } } } </script> ``` 创建一个名为`Register`的组件,包含用户名、密码和确认密码输入框、注册按钮和登录链接。 ```html <template> <div class="register"> <h2>注册</h2> <form> <div class="form-group"> <label>用户名:</label> <input type="text" class="form-control" v-model="username"> </div> <div class="form-group"> <label>密码:</label> <input type="password" class="form-control" v-model="password"> </div> <div class="form-group"> <label>确认密码:</label> <input type="password" class="form-control" v-model="confirmPassword"> </div> <button type="button" class="btn btn-primary" @click="register">注册</button> </form> <div class="login-link"> <a href="javascript:void(0)" @click="goLogin">已有账号?去登录</a> </div> </div> </template> <script> import axios from 'axios' export default { data () { return { username: '', password: '', confirmPassword: '' } }, methods: { register () { if (this.password !== this.confirmPassword) { alert('两次输入密码不一致') return } axios.post('/user/register', { username: this.username, password: this.password }).then(res => { if (res.data.code === 200) { alert('注册成功,请登录') this.$router.push('/login') } else { alert(res.data.msg) } }).catch(err => { console.error(err) }) }, goLogin () { this.$router.push('/login') } } } </script> ``` #### 4. 配置路由 在`router/index.js`文件中配置路由。 ```javascript import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' import Register from '@/components/Register' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/register', component: Register } ] }) ``` #### 5. 运行项目 启动Spring Boot项目和Vue项目后,访问`http://localhost:8080`即可看到登录页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值