前端只需要独立编写客户端代码，后端也只需要独立编写服务器代码提供数据接口就可以。
前端通过Ajax请求来访问后端的数据接口，将Model展示到View中即可。
前后端开发者只需要提前约定好接口文档(URL,参数，数据类型…),然后分别独立开发即可，前端可以造假数据进行测试，完全不需要依赖于后端，最后完成前后端集成即可，真正实现了前后端应用的解耦合。
前端应用:负责数据展示和用户交互。
后端应用：负责提供数据处理接口。
vue有一个好处就是可以实现动态加载(意思就是我们改了代码以后不需要重新启动)
这是以前的单体应用访问模式
前后端分离就是将一个单体应用拆分成两个独立的应用，前端应用和后端应用以JSON格式进行数据交互。
vue3.0支持打开图形界面创建vue项目
vue ui
不装开发不了必须装
vue只有一个主窗口(因为它只有一个页面)，App.vue就是它的主窗口（我们只是把路由视图窗口动态更新掉）
router-link指的是路由的一个链接
类似于springmvc里面的视图解析器(路由index.js的功能)，当我们点击页面进行routerview视图层显示的时候，先通过index.js找到访问的路径，然后才显示的页面。
这两个是人家默认带的，我们不要动人家的东西
path就是填的to里面的名字
springweb其实指的就是springmvc的依赖
spring:
datasource:
url: jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
username: root
password: root
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
server:
port: 8181
所有的js代码都要写道export default{}花括号里面
tr表示的是行td表示的是列(td一般用在标题行，其它行表示列我们用th)
json数据是在script里面去写的。
必须是写在data(){} 这个里面
return里面就是我们可以定义的json数据
每一次遍历的对象就叫item
接下来就是让后端提供真数据了
后端第一步先去创建实体类(跟我们的数据库表进行一个绑定)
类名首字母小写就是对应的表名(数据库的表名建议一定要用小写)
属性名和字段名对应起来就可以了
实体类写完我们就开始写repository(我们只需要去创建一个接口，这个接口不需要定义任何方法，只需要继承JpaRepository<实体类的类型，主键的类型>)
接口写完了我们需要先去测试一下(创建的测试类我们首先需要加一个@SpringBootTest的注解，方法也需要加@Test的注解，需要把测试的接口也注入进来，然后直接在方法里面调用接口的方法就可以了)
保证没问题我们再把它写道controller里面，然后让web去访问。
注释掉控制台就不会输出语句了
这样就可以用了
在vue里面请求ajax,我们需要用到一个组件(这个组件我们需要去安装一下axios)(每次创建都需要配置)
vue add axios //也可以使用 cnpm install axios
这里就说明我们安装好了
请求类型里面去写我们的url,then指的就是回调resp指的就是我们响应的结果
这个时候存在一个跨域问题(我们可以在前端解决也可以在后端解决)
这个时候我们在后端解决(只需要添加一个配置类就可以了)
package com.southwind.springboottest.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
跨域问题的报错：https://blog.csdn.net/liulang68/article/details/108711063
layui前后端分离：https://blog.csdn.net/liulang68/article/details/108699083
将响应的data里面的数据赋给我们前端的books数组
安装的过程全部默认就可以了
如果我们使用视图的方式没有安装成功，我们也可以使用命令的方式进行安装
cnpm install --save element-ui
当前我们这个过程就可以使用element-ui这个插件了
后端一般选的布局
把代码粘到我们的工程里面就可以了
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
el-container这个里面的内容，然后把css,style里面的内容也引入过去
Element UI后台管理系统的主要的标签：
el-container:用来构建整个页面的框架
el-aside:左侧导航那一栏的东西(构建左侧菜单指的是整体的div)
el-aside有el-menu(构建左侧菜单里面的内容)
el-menu下面是el-submenu(它是可以展开的菜单栏，属于el-menu的子节点)
el-submenu下面有template标签(对应el-submenu的菜单名)(里面的i标签可以设置它的图标，通过class属性进行设置)
el-submenu下面我们直接使用el-menu-item(菜单的子节点，不可以再展开的子节点)
//左侧菜单栏的设置
<el-aside>
<el-menu>
<el-submenu index="1">
<template><i class=""></i>名字写上去</template>
<el-menu-item index="1-1">
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
这个标签我们一般不使用
<template slot="title"><i class="el-icon-message"></i>导航一</template>
el-menu常用属性
:default-openeds //默认展开的菜单，通过菜单的index值来关联
:default-active //默认选中的菜单，通过菜单的index值来关联
el_submenu常用属性
index:菜单的下标，它是文本类型(指的就是字符串类型)，不能是数据类型
el-menu-item常用属性
index:菜单的下标，它是文本类型(指的就是字符串类型)，不能是数据类型
三种方法都试一下(加单引号的目的是确定它是一个字符串类型)
通过Vue router来动态构建左侧菜单
接下来的目的就是让导航可以读取router-view的内容实现动态获取菜单栏
导入APP和VUE看清楚两者是不一样的。
从el-submenu里面的内容就要动态生成了
以前的读法
它这里的点击打开关闭是通过index进行设置的
最后的设置结果app.vue只有一个router，然后创建一个Index.vue，当我们什么都不写的时候就访问Index.vue
然后我们输入pageOne的时候左侧导航栏还可以显示，是因为我们index.vue里面又加了一个router
(如果你访问的是childern里面的会判断首先访问父节点再嵌套访问子节点)
接下来就是左侧菜单和router进行绑定了(前面是动态获取左侧菜单)
1.el-menu标签添加router属性
2.在页面中添加router-view标签，它是一个容器，动态渲染你的router(这个我们前面已经做过了)
3.el-menu-item标签的index值就是要跳转的router
注意这里使用的是route
接下来就是和后端对接了，我们需要一个element-ui的table组件(直接全部复制进去就可以展示了)
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
}
}
</script>
接下来就是要和后台对接了
我们还要做一个分页操作
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
最后写成这样
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
}
}
</script>
默认每页是10条记录
接下来就是把分页按钮和点击事件绑定起来
Spring Data Jpa已经帮我们提供好了一个分页的操作
Pageable表示的就是我们的分页信息，Pageable是一个接口，我们要用到的是它的实现类
后端的数据库默认是从0开始的，所以你前端传过来的是1其实看的是第二页。
接下来就是前端调用后端的接口了(下载axios(axios其实就是对ajax数据的封装))
图书管理使用的是BookManage
添加图书这里我们提交的是一个form表单
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
如果没有最外层没有template标签，我们记得加一下
前端输入的东西会和vue的对象绑定起来然后再传给后端
model是用来绑定数据的，rules是用来绑定校验规则的。
ruleForm指的就是传过去的formName
前端post提交的表单给后台的是json格式，我们后端需要@RequestBody的注解进行映射
才能把json转为java对象
点击ok以后又触发回调函数
这里使用是router
跳转我们使用的是router，要参数我们使用的是route
测试
save方法既可以保存也可以修改，没有主键就是保存，有主键就是修改。
删除我们也需要绑定点击事件
这里我们使用的是deleteBook命名的(因为使用delete进不去，可能delete是关键字)
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
