前端搭建
-
vue ui
打开可视化界面 -
创建项目,取消勾选【初始化Git】,选择手动配置
-
勾选 vuex,router,取消勾选代码校验
-
开始创建…
【附一个小插曲】创建失败,报错
Cannot read property ‘indexOf‘ of undefined
:使用管理员身份即 sudo vue ui 运行!点击任务中的
serve
,点击运行,在输出中打开网址,成功!
在终端里输入control c
退出。
打开 IDEA 导入项目,别忘记安装 vue 插件
初探vue
- 是一个单页面应用,只在 App.vue 中加载
- 点击不同的导航栏不是刷新整个页面,而是加载下面那一部分!
- views 中的组件是加载在主页面之中的
- 通过路由(index.js)将文件名和资源相映射
【又有一个小插曲】IDEA 设置了只读模式,不能修改:sudo chmod -R 777 文件路径
-
App.vue 中
<router-link to="/about">About</router-link>
控制下面框体的内容,如何将路径和资源映射? -
在 index.js 中
import About from '../views/About.vue'
,并在 route 中配置对象
一是 使用这种形式:{ path: '/about', name: 'about', component: About }
二是 使用懒加载,减少资源消耗
{ path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }
-
npm run serve
启动后,输入相应的路径,跳转成功!
后端搭建
-
新建 IDEA 项目 选择 Lombok、Spring Web、MyBatis、MySQL
-
配置数据库,application.yml 【注意】将端口改掉!
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 server: port: 8181
开始
小试牛刀
在views下新建book.vue
写死了数据:
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>图书名称</td>
<td>作者</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data(){
return{
msg:'hello vue!',
books:[
{
id : 1,
name : "从入门到放弃",
author : "aa"
},
{
id : 2,
name : "从跑库到删库",
author : "bb"
}
]
}
}
}
</script>
后端取真实数据
包结构:
`
BookController 代码
@RestController
@RequestMapping("/book")
public class BookController {
@Autowired
private BookDao bookDao;
QueryWrapper queryWrapper = new QueryWrapper();
@RequestMapping("/findAll")
public List<Book> findAll() {
return bookDao.selectList(queryWrapper);
}
}
用PostMan测试下:
展现在前端
在 create 函数中写代码,页面一加载就调用!
created() { //初始化
axios.get('http://localhost:8181/book/findAll').then(function (resp) {
console.log(resp);})
}
这里出现了【跨域问题】:添加配置类
![@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("*");
}
}
最终的 book.vue
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>图书名称</td>
<td>作者</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data(){
return{
msg:'hello vue!',
books:[
]
}
},
created() { //初始化
axios.get('http://localhost:8181/book/findAll').then((resp) => {
this.books = resp.data;
}
)
}
}
</script>
最终效果