整理一份Springboot+vue学习笔记

P1   环境搭建

包括java,idea,maven配置,以及在idea中配置maven。

注：在files->New Project Settings中配置maven路径，jdk版本1.8，不然重启会失效

P2   创建springboot项目，热部署

1、创建springboot项目时type选Maven,springboot版本选2.x版本。

2、热部署配置(包括pom.xml,application.properties,软件内配置）。

P3   Controller概念;路径映射;get,post方法（4种方式）

get，post区别：

①GET不安全，大小有限，POST安全，大小没有限制。

②在浏览器地址栏发起请求是get请求，一般情况下form标签发起的是post请求。

P4   文件上传（MultipartFile）及拦截器

拦截器：

步骤:

①定义一个Interceptor类继承HandleInterceptor接口,重写preHandle,postHandle,aferHandle三种方法实现请求前后等操作，返回true则可通过。

②定义一个config类继承WebMvcConfigurer接口,类前加@Configuration注解字，在类里面重写addInterceptors方法注册拦截器并设置要拦截的地址

P5  Restful风格，Swagger框架（配置三个地方）

Restful:

使用前：删除用户操作/deleteuser?id=10<------>查找用户/searchuser?id=10

使用后都是/user/10,通过get,delete请求方式区分,通过对应的Mapping方法进行处理

Swagger:访问Swagger UI。

P6  数据库单表查询（mybatisPlus）

知识点：

1、Controller：响应前端发来的请求；

Mapper：定义SQL请求并向数据库发送【实现实体类与数据库表的映射】。

2、Plus使用步骤：

①定义一个UserMapper接口【使用Mybatis注解简化接口方法实现（只需要写SQL语句，通过注解的方式加入到方法上就行）】，继承BaseMapper后不用写SQL【Plus独有】

②使用接口定义的方法：在Controller类里注入(@Autowired)，通过注入的对象调用对应方法

3、Plus的常用注解

●使用Plus方法时实体类类名要与数据库表名要一致，不一致要用注解@TableName("sys_user")

●实体类主键加入注解@TableId(type = IdType.AUTO)：好处是会生成一个唯一id值【不加注解的话默认发送0】代码里拿不到id值

4、MB与MBP的区别

手动写SQL的为MB框架，MBP不用写SQL（全自动）

P7  多表查询，分页查询

1、多表查询（mybatis）

例：查询用户时同时查询其所有订单

●数据库-->实体类（字段会增加，新增的要手动做映射）

●先改数据库（加表，改名），再改实体类（加映射类，字段），再改Mapper（加Mapper，通过@Result跨Mapper传数据），最后改Controller（增加响应方法）

2、分页查询（mybatisPlus）

①定义分页配置类②查询时创建Page对象，返回IPage对象。

---

P8  vue入门

1、前端环境准备

编码工具: VSCode

依赖管理:NPM

项目构建: VueCli

2、vue是一套用于构建用户界面的渐进式框架。

MVVM架构模式：提供对View和ViewModel的双向数据绑定，保证视图和数据的一致性。

3、Vue的使用步骤

①引入vue

②定义变量，数组等后台数据或JS方法

③使用v-bind,v-html,v-on,v-if,v-for,指令将数据渲染在前端页面中或将方法绑定到事件。

具体使用查看vue官网

P9  vue项目开发（利用组件进行开发）

1、NPM（项目管理工具）使用：下载node.js安装包，直接安装即可。

2、Vue CLl（脚手架）使用（类似IDEA）

①安装: 命令行输入npm install -g @vue/cli

②创建vue cli项目:在Code文件夹命令行输入vue create hello，配置

Manually select features->取消Linter/Formatter->2.x->package.ison->N

③在hello文件目录下启动服务器：npm run serve

3、组件化开发

①一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

②组件的导入、注册与使用：在App主组件中导入注册其它组件，直接用组件名作为标签名使用。

*注意：vue2里所有组件必须包在一个div里

P10  element-ui组件使用

1、 组件间组件间的传值：

①内部传值用Data，

②组件间由父组件通过prop的方式传值：子组件定义prop，父组件使用子组件时再给属性赋值。

③兄弟组件可以通过Vuex等统─数据源提供数据共享

2、  element-ui组件使用

项目目录下输入npm install element-ui下载，在main.js中导入注册，

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

接着在官网复制组件代码。

*注：网上项目下载后没有node_modules目录，npm install自动下载所需包

3、图标的使用

安装命令：npm install font-awesome

导入：import ‘font-awesome/css/font-awesome.min.css’

官网复制使用

P11  Axios网络请求

1、安装导入Axios请求库：

npm install axios import axios from 'axios'

2、发送GET请求

①解决占用问题：修改后端服务器代码端口server.port=8088

②解决跨域问题：给后端控制器加注解@CrossOrigin，否则无法跨域获取数据。

③在created方法内发送get请求：

axios.get("http://localhost:8088/XXX").then(function(response){console.log(response)})

3、

//先导入axios,再在created方法中用 axios.get("http://localhost:8088/XXX").then((response)=>{this.tableData=response.data;})

将get请求的数据渲染到组件

axios.defaults.baseURL='http://localhost:8088' Vue.prototype.$http=axios

4、为了简化axios使用，只需在main.js中导入一次后按如下配置：

配置之后所有组件发送请求可简化为：

this.$http.get("/user/findAll").then((response)=>{ this.tableData=response.data; })