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
<script src="https://unpkg.com/vue@next"></script>
②定义变量，数组等后台数据或JS方法
<script>
Vue.createApp({
data(){
return { JSON数据 }
},methods(){ 方法 }
}).mount('#app')
</script>
③使用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请求库：
|
2、发送GET请求
①解决占用问题：修改后端服务器代码端口server.port=8088
②解决跨域问题：给后端控制器加注解@CrossOrigin，否则无法跨域获取数据。
③在created方法内发送get请求：
axios.get("http://localhost:8088/XXX").then(function(response){console.log(response)})
3、
|
将get请求的数据渲染到组件
|
4、为了简化axios使用，只需在main.js中导入一次后按如下配置：
配置之后所有组件发送请求可简化为：
|
每一个不闻鸡起舞的早晨，都是对生命的辜负！