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方法
Vue.createApp({
data(){
return { JSON数据 }
},methods(){ 方法 }
}).mount(‘#app’)
③使用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; }) |
每一个不闻鸡起舞的早晨,都是对生命的辜负!