写在前面

本篇先完结后端部分，再完结前端部分，终究前后端结合测验，完结一个从网页对数据库查询并显现的简单功能。

总结了好长时刻，创造不易，点点赞收保藏啦。

本文正在参加「金石方案」

后端部分

开发环境建立

我用到的开发环境

用到哪些	版别
java	1.8.0
maven	3.8.4
mysql	5.7.19

开发东西：IDEA2021 ，Navicat

开发环境不用必须和我相同，开发东西自行下载破解

完结一个温度查询功能

1.在数据库中建表

在数据库中新建一个温度表sys_temp，用于存储温度信息，sql语句如下

CREATE TABLE `sys_temp` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '编号',
  `temp` float NOT NULL COMMENT '温度',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创立时刻',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时刻',
  `is_deleted` tinyint(3) NOT NULL DEFAULT '0' COMMENT '删除符号（0:不可用 1:可用）',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='温度表';

表建好后随便插入几条语句，方便一会验证查询功能

2.树立一个spring项目

在开发东西IDEA中，新建一个spring项目

依靠项中勾选spring web，点击完结项目树立成功

首要，装备maven仓库，点击左上角的文件——>设置——>构建、执行、布置——>构建东西——>Maven,翻开如下界面，并装备你的maven途径，以及maven装备文件的途径，随后点击确认，装备完结

找到项目中的pom.xml文件在dependencies标签中增加如下依靠，然后让maven加载

   <!--MyBatisPlus依靠-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <!--数据库连接池druid-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.20</version>
        </dependency>

在src/main/resources/application.properties装备文件中增加装备

spring.application.name=temptest
server.port=8088
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mydb?useSSL=false
spring.datasource.username=root
spring.datasource.password=root
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

其中端口号8080修正一下，避免与前端的端口号冲突，url中的mydb改成你自己数据库的姓名，用户名和暗码也设定为你自己的账号和暗码

在com.atlhb.tempdemo目录下增加目录，参阅下图

在entity目录下增加实体类Temp.java，代码如下

package com.atlhb.temptest.entity;
import com.baomidou.mybatisplus.annotation.*;
import java.util.Date;
@TableName("sys_temp")
public class Temp {
    @TableId(type = IdType.AUTO)
    private Long id;
    @TableField("temp")
    private Float temp;
    @TableField("create_time")
    private Date createTime;
    @TableField("update_time")
    private Date updateTime;
    @TableLogic
    @TableField("is_deleted")
    private Integer isDeleted;
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public Float getTemp() {
        return temp;
    }
    public void setTemp(Float temp) {
        this.temp = temp;
    }
    public Date getCreateTime() {
        return createTime;
    }
    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }
    public Date getUpdateTime() {
        return updateTime;
    }
    public void setUpdateTime(Date updateTime) {
        this.updateTime = updateTime;
    }
    public Integer getIsDeleted() {
        return isDeleted;
    }
    public void setIsDeleted(Integer isDeleted) {
        this.isDeleted = isDeleted;
    }
}

在mapper目录下增加接口TempMapper.java，代码如下

package com.atlhb.temptest.mapper;
import com.atlhb.temptest.entity.Temp;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
public interface TempMapper extends BaseMapper<Temp> {
}

在service目录下增加接口TempService.java，代码如下

package com.atlhb.temptest.service;
import com.atlhb.temptest.entity.Temp;
import com.baomidou.mybatisplus.extension.service.IService;
public interface TempService extends IService<Temp> {
}

在service/impl目录下增加完结类TempServiceImpl.java，代码如下

package com.atlhb.temptest.service.impl;
import com.atlhb.temptest.entity.Temp;
import com.atlhb.temptest.mapper.TempMapper;
import com.atlhb.temptest.service.TempService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
@Service
public class TempServiceImpl extends ServiceImpl<TempMapper, Temp> implements TempService {
}

在controller目录下增加操控类TempController.java，代码如下

package com.atlhb.temptest.controller;
import com.atlhb.temptest.entity.Temp;
import com.atlhb.temptest.service.TempService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class TempController {
    @Autowired
    private TempService service;
    @GetMapping("/temp")
    public List<Temp> findAll(){
        List<Temp> list = service.list();
        return list;
    }
}

在com.atlhb.temptest.TemptestApplication发动类中增加一行注解@MapperScan(“com.atlhb.tempdemo.mapper”)来扫描mapper层

package com.atlhb.temptest;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.atlhb.temptest.mapper")
public class TemptestApplication {
    public static void main(String[] args) {
        SpringApplication.run(TemptestApplication.class, args);
    }
}

所有文件增加完结后的目录如下图

3.验证后端是否成功

在发动类com.atlhb.tempdemo.TempdemoApplication中发动项目

在浏览器中拜访localhost:8088/temp

呈现数据，代表后台拜访数据库成功

前端部分

开发环境建立

1.下载VSCode

下载地址：Visual Studio Code – Code Editing. Redefined

自行下载装置即可，翻开后界面长这样

2.下载node.js

下载地址：Node.js (nodejs.org)

下载完结装置包长这样

装置过程中选好自己的装置途径，基本便是一路next，除了下面这个界面记得要勾选

呈现下面这个界面代表装置完结

接下来验证是否装置成功，进入命令行界面，输入node -v，若呈现版别号，代表装置成功(看清node -v中间有一个空格)

3.装置脚手架

在命令行中输入npm install -g @vue/cli

下载完结如下图

完结一个简单的网页

1.准备工作

首要准备一个你放代码的途径，在其中新建一个文件夹以你的前台项目命名，我以demo为例

在命令行中翻开你项目的途径，输入vue create 自定义项目名

回车显现下图，用键盘上下键选择vue2(我以vue2为例)，按回车等候片刻

呈现下图代表建立完结，咱们回到方才新建的空白项目文件夹，可以看到呈现了许多文件

咱们将外层的demo文件夹在vscode中翻开，右键内层的demo文件夹，选择在集成终端中翻开

在集成终端中输入npm run serve，等候运转完结后呈现下图所示网址，咱们拜访第一个网址

看到vue主页，代表准备工作现已完结

2.装置官方库

在集成终端中翻开，输入npm install axios，npm install vue-router@3，npm install vuex@3，呈现下图代表装置成功

3.建立网页

将demo\src\components下的文件HelloWorld.vue删除，在这个文件夹中新建文件tempV.vue(后边跟一个单词进行驼峰命名否则可能会报错)，将下面的代码仿制进tempV.vue文件

<template>
  <div>
    <button @click="getTemp">查询温度</button>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
    name:'tempV',
    methods:{
        getTemp(){
           this.$router.push('list')
        }
    }
}
</script>
<style>
</style>

在src目录下新建文件夹pages,在文件夹中新建文件listV.vue将下面代码仿制进去

<template>
  <div class="tabl">
    <table width="90%" class="table">
        <caption>
            <h2>
              温度检测表
            </h2>
        </caption>
        <thead>
            <tr>
                <th>
                    编号
                </th>
                <th>
                    温度
                </th>
                <th>
                    创立时刻
                </th>
            </tr>
        </thead>
        <tr v-for="(item,index) in user" :key="index">
            <td>
              {{ item.id }}
            </td>
            <td>
              {{ item.temp }}
            </td>
            <td>
              {{ item.createTime }}
            </td>
        </tr>
    </table>
  </div>
</template>
<script>
    import {mapState} from 'vuex'
    export default {
        name: "listV",
        mounted(){
          this.$store.dispatch('getUser')
        },
        computed:{
          ...mapState(['user'])
        }
    };
</script>
<style type="text/css">
table
{
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
table td, table th
{
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
}
table thead th
{
    background-color: #CCE8EB;
    width: 100px;
}
table tr:nth-child(odd)
{
    background: #fff;
}
table tr:nth-child(even)
{
    background: #F5FAFA;
}
</style>

在src目录下新建文件夹router,在文件夹中新建文件router.js将下面代码仿制进去

import VueRouter from 'vue-router'
import list from '@/pages/listV.vue'
const router = new VueRouter({
    routes:[
        {
            name:'list',
            component:list,
            path:'/list'
        }
    ]
})
export default router

在src目录下新建文件夹store,在文件夹中新建文件index.js将下面代码仿制进去

import Vuex from 'vuex'
import Vue from 'vue'
import axios from 'axios'
Vue.use(Vuex)
const state={
    user:[]
}
const actions={
    async getUser({commit}){
        let result = await axios.get("http://localhost:8080/temp")
        console.log(result)
        if(result.status==200){
            commit('GETUSER',result.data)
        }
    }
}
const mutations={
    GETUSER(state,user){
        state.user = user || undefined
    }
}
const getters={}
export default new Vuex.Store({
    state,
    actions,
    mutations,
    getters
})

找到src\main.js，将下面的代码悉数替换

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router/router'
import store from '@/store'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

找到src\App.vue，将下面的代码悉数替换

<template>
  <div id="app">
    <temp></temp>
  </div>
</template>
<script>
import temp from "@/components/tempV.vue"
export default {
  name: 'App',
  components: {
    temp
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

找到vue.config.js，将下面的代码悉数替换

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: 'http://localhost:8088'
  }
})

留意：这里的http://localhost:8088的端口号，要与后端设定的端口号保持一致

将上面所有的文件装备完结，目录如下

4.前端测验

选择再终端中翻开，输入指令npm run serve，等候运转，运转成功呈现下图，拜访第一个网址

点击网页中的查询按钮，下方呈现一个温度检测表，说明前端部分现已建立成功

前后端结合进行测验

1.在后端的发动类文件中发动后端

2.在集成终端中发动前端

在集成终端中输入npm run serve，等候运转，下图代表运转成功

3.在网页中测验能否通过后端拿到数据库中的数据

拜访 http://localhost:8080/ ，显现查询温度按钮

点击按钮，呈现温度检测表，表中数据为数据库中所存数据

那么网页部分就现已功德圆满了！

写在后边

下一篇也便是最终一篇解说怎么把硬件收集到的数据自动传入数据库，并通过本篇章写好的网页对其进行查询与显现。

老样子，有任何疑问，侵权或者过错的地方，请联络我QQ572130280