当前位置: 首页>前端>正文

springboot和vue结合的好处 vue和springboot区别

springboot和vue结合的好处 vue和springboot区别,springboot和vue结合的好处 vue和springboot区别_springboot和vue结合的好处,第1张

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请求库:

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; })

每一个不闻鸡起舞的早晨,都是对生命的辜负!




https://www.xamrdz.com/web/2x81939904.html

相关文章: