前端基础学习
springboot入门
- 前端基础学习
- springboot 的简单介绍
- 一、springboot的优点？
- 二、springboot使用步骤
- 2.1 下载学生版的idea编辑器
- 2.2.1 账号激活
- 2.2.2 IDEA的下载
- 2.2 maven的环境配置
- 2.3 导入maven库并运行项目
- 2.3.1导入maven库
- 2.3.2 创建Springboot项目
- 2.3.3 运行项目
- 三.前端与后端交互
- 3.1 前端的连接
- 3.2后端与前端连接
- 四、遇到的问题
- 4.1 端口被占用解决
- 参考博客
springboot 的简单介绍
SpringBoot是一种全新的框架，目的是为了简化Spring应用的初始搭建以及开发过程。该框架使用特定的方式(集成starter，约定优于配置)来进行配置，从而使开发人员不需要再定义样板化的配置。SpringBoot提供了一种新的编程范式，可以更加快速便捷地开发Spring项目，在开发过程当中可以专注于应用程序本身的功能开发，而无需在Spring配置上花太大的工夫。
SpringBoot基于Sring4进行设计，继承了原有Spring框架的优秀基因。SpringBoot并不是一个框架，而是一些类库的集合。maven或者gradle项目导入相应依赖即可使用SpringBoot，而无需自行管理这些类库的版本。
一、springboot的优点？
- 快速创建独立运行的Spring项目以及与主流框架集成
- 使用嵌入式Servlet容器，应用不需要打包成war
- starts自动依赖与版本控制
- 无需大量配置，简化开发
- 准生产化境的运行时应用监控
- 与云计算集成
二、springboot使用步骤
springboot的使用需要准备的工具：下载Maven；下载Ultimate版本的idea;
需要注意的事项：idea配置Maven的环境;使用Springboot后端给前端传输数据，前端接受数据
2.1 下载学生版的idea编辑器
2.2.1 账号激活
选择Ultimate版本的IDEA进行下载，下载完成之后,安装教程IDEA安装教程 ，然后选择账号激活。
2.2 maven的环境配置
进入IDEA的环境设置：
找到Build Tools文件夹下的Maven ,进行Maven 的环境配置
要先下载Maven软件maven的安装与配置，然后找到Maven的安装文件夹，按照下面的进行配置：
说明：这个Local repository是所有需要资源包的下载的地方，这个地方是需要和这个settings.xml内容中的配置局部仓库的地方一致，如下图：
2.3 导入maven库并运行项目
2.3.1导入maven库
进入pom.xml,鼠标在内容中右键，进行Reload project,如图所示：
2.3.2 创建Springboot项目
新建一个项目
设置项目的名称，安装位置和Jdk的位置配置
选择一些需要用到的包，也可以不选，后期用maven导入也可以
2.3.3 运行项目
- 所有完成之后基本搭建已经完成下面开始测试能否访问页面，新建一个index.html主页面,名称为index
- 页面上随便写点什么，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h1> 学习springboot</h1>
</body>
</html>- 在标记的文件夹下新建controller包，包名为controller
4. 在controller文件夹包下新建类，类名为TestController
需要的包会自动生成导入
@RestController
@RequestMapping( "/api")
@CrossOrigin //用来实现跨域连接
public class TestController {
@RequestMapping( "/test")
public String test(){
return "1324";
}
@RequestMapping( "/echarts")
public int[] data(){
int[] a={11,22,33,44,55,66,777};
return a;
}
}5.启动项目，下面是运行Springboot的三种方法
6.页面查看
进入浏览器打开：http://localhost:8080/api/echarts
http://localhost:8080/api/test 可以看到内容：
三.前端与后端交互
参照上一篇博客的利用mock模拟产生数据，传到前端显示，现在我们将mock产生的数据换成后端输入的数据
3.1 前端的连接
利用VScode+vue脚手架+mock模拟数据输入的例子上进行更改，可以参照上一篇的博客：VScode+vue脚手架+mock模拟数据 将里面的main.js换成下面的
代码如下：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// require('./data_mock')
import axios from 'axios' //用来对axios做了拦截设置处理
//引入完成之后需要挂载到vue上
Vue.prototype.$http = axios //将ajax请求封装到VUE，所有都能访问
axios.defaults.baseURL = 'http://localhost:8080/'
// 配置请求超时时间
axios.defaults.timeout = 5000 // 单位是毫秒
new Vue({
render: h => h(App),
}).$mount('#app')将里面的HelloWorld.vue换成下面的：
代码可以换为：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h1>{{ msg2 }}</h1>
<div class="echarts_class" ref="echart_div"></div>
</div>
</template>
<script>
import * as echarts from"echarts"
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return {
msg2:'vue msg2',
myChart: null,
option: {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [],
type: 'bar',
},
],
},
}
},
created() {
this.$http.get("/api/echarts").then((req) => {
//打印请求mock的结果
console.log("created request",req);
if (this.myChart && this.option&&this.option.series[0].data) {//安全校验
//将请求到的数据，附加到echarts图表的option上
this.option.series[0].data = req.data;
this.myChart.setOption(this.option);
}
})
},
mounted(){
this.myChart = echarts.init(this.$refs.echart_div);
this.myChart.setOption(this.option);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.echarts_class{
width: 600px;
height: 400px;
}
</style>3.2后端与前端连接
后端运行后，会在http://localhost:8080/api/echarts中显示一个数组，长度为7，我们将这组数据传输到前端中，利用VScode运行上面的代码，可以看到数据传入了前端，显示页面为：
四、遇到的问题
4.1 端口被占用解决
查看8080端口的进程：
netstat -ano | findstr 8080查看上面的进程为12108，结束进程12108：
taskkill -PID 12108 -F
