前端搭建

1. vue ui 打开可视化界面

2. 创建项目，取消勾选【初始化Git】，选择手动配置

3. 勾选 vuex，router，取消勾选代码校验

4. 开始创建…

   【附一个小插曲】创建失败，报错 Cannot read property ‘indexOf‘ of undefined：使用管理员身份即 sudo vue ui 运行！

   点击任务中的 serve ，点击运行，在输出中打开网址，成功！
   在终端里输入 control c 退出。

---

打开 IDEA 导入项目，别忘记安装 vue 插件

初探vue

1. 是一个单页面应用，只在 App.vue 中加载
2. 点击不同的导航栏不是刷新整个页面，而是加载下面那一部分！
3. views 中的组件是加载在主页面之中的
4. 通过路由（index.js）将文件名和资源相映射

【又有一个小插曲】IDEA 设置了只读模式，不能修改：sudo chmod -R 777 文件路径

1. App.vue 中 <router-link to="/about">About</router-link> 控制下面框体的内容，如何将路径和资源映射？

2. 在 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')
     }
   

3. npm run serve 启动后，输入相应的路径，跳转成功！

后端搭建

1. 新建 IDEA 项目 选择 Lombok、Spring Web、MyBatis、MySQL

2. 配置数据库，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>

最终效果