前端基础学习
springboot入门
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 账号激活
IntelliJ IDEA(Ultimate版)学生免费激活分为有学校邮箱和无学校邮箱账号两种情况,根据自己的情况选择安装方式,下面给出了学生版的IDEA的免费激活教程
学生版免费激活教程
2.2.2 IDEA的下载
进入IDEA的官网,IDEA的官网 ,选择Download,进入下面页面:
选择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
具体的操作过程可以参照下面的博客:
WIN10 关闭占用某一端口号的进程
参考博客
- 使用IDEA搭建SpringBoot
- 使用IDEA搭建一个简单的SpringBoot项目
- 推荐书籍:《SpringBoot实战》