前后端分离初体验一：前端环境搭建

参考：https://www.bilibili.com/video/BV137411B7vB

B站UP：楠哥教你学Java

框架：vue + springboot

项目已上传至GitHub：

　　前端：https://github.com/ownzyuan/vuetest_01

　　后端：https://github.com/ownzyuan/springboot_vue_test_01/tree/master

创建VUE项目

环境

• 首先拥有 node.js

• 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装vue-cli cnpm install vue-cli

• 如果不是3x以上版本，就安装最新版 cnpm i -g @vue/cli

 

创建Vue项目

vue ui

进入到 Vue项目管理器

创建项目

1）

2）

3）

4）

5）

6）

7）

 

完成+测试

完成

测试

1）

2）

3）

4）成功

 

无后端调试

　　使用 IDEA 打开创建好的Vue项目

跳转+显示

1）Book.vue

在 src/views 下创建 Book.vue

Book.vue

 <template>
     <div>
         <table>
             <tr>
                 <td>编号</td>
                 <td>书名</td>
                 <td>作者</td>
             </tr>
             <tr>
                 {{msg}}
             </tr>
         </table>
     </div>
 </template>
 ​
 <script>
     export default {
         name: "Book",
 ​
         data(){
             return{
                 msg: 'Hello'
             }
         }
 ​
     }
 </script>
 ​
 <style scoped>
 ​
 </style>

2）index.js配置

打开 src/router 下的 index.js

index.js

• 导入Book.vue

　　　import Book from "../views/Book"

• 配置（一定要在前带 逗号（,） ）

　　　,{ path: '/book', component: Book ​ }

import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 ​
 import Book from "../views/Book"
 ​
 Vue.use(VueRouter)
 ​
 const routes = [
     {
         path: '/',
         name: 'Home',
         component: Home
     },
     {
         path: '/about',
         name: 'About',
         component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
     },
 ​
     {
       path: '/book',
       component: Book
     }
 ]
 ​
 const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
 })
 ​
 export default router

3）测试

Terminal 中输入 npm run serve

访问

成功

 

显示数据

Book.vue

• 遍历

  books：被遍历的数组 ，item:每次遍历的对象

  　　< tr v-for="item in books "> < td >{{item.id}}< /td > < td >{{item.name}}< /td > < td >{{item.author}}< /td > < /tr >

• books中添加数据

  　　books: [ { id: 1, name: 'Java', author: '哈哈' }, { id: 2, name: 'C++', author: '啦啦' }, { id: 3, name: 'Python', author: '嘿嘿' } ]

 <template>
     <div>
         <table>
             <tr>
                 <td>编号</td>
                 <td>书名</td>
                 <td>作者</td>
             </tr>
             <!--books：被遍历的数组 ，item:每次遍历的对象-->
             <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 {
         name: "Book",
 ​
         data() {
             return {
                 msg: 'Hello',
                 books: [
                     {
                         id: 1,
                         name: 'Java',
                         author: '哈哈'
                     },
                     {
                         id: 2,
                         name: 'C++',
                         author: '啦啦'
                     },
                     {
                         id: 3,
                         name: 'Python',
                         author: '嘿嘿'
                     }
                 ]
             }
         }
 ​
     }
 </script>
 ​
 <style scoped>
 ​
 </style>

访问