Vue-CLI构建前后端分离项目

1.项目环境初始化

1.安装 axios vue-axios（记得执行命令要进入项目里面执行哦，否则就会报错）

E:\ideaProject\vue-cli-test>npm install --save axios vue-axios?

2.main.js中引入相关库 ?

import axios from 'axios'
import VueAxios from 'vue-axios'

//配置后端服务地址
axios.defaults.baseURL="http://localhost:8080"
//在Vue中配置axios，在所有的Vue组件中就可以通过this.axios使用axios库
Vue.use(VueAxios,axios)

2.分页查询和删除

1.components下新建 BookTable.vue

注意：axios要通过this.axios的方式调用

<template>
  <div class="book-table">
    <table>
      <thead>
      <tr>
        <th>编号</th>
        <th>图书</th>
        <th>作者</th>
        <th>价格</th>
        <th>库存</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="b in books" :key="b.bookId">
        <td>{{b.bookId}}</td>
        <td>{{b.bookName}}</td>
        <td>{{b.author}}</td>
        <td>{{b.price}}</td>
        <td>{{b.stock}}</td>
        <td>
          <button @click="removeBook(b.bookId)">删除</button>
          <router-link :to="{path:'/book/update',query:{bookId:b.bookId}}"><button>更新</button></router-link>
        </td>
      </tr>
      </tbody>
    </table>
    <p>
      <a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)"><button style="margin: 0 10px">{{page}}</button></a>
    </p>
  </div>
</template>

<script>
    export default {
        name: "BookTable",
      data(){
        return {
          books:[],
          pages:[]
        }
      },
      created(){
        this.handleAClick(1);
        // alert('hhh');
      },
      methods:{

        handleAClick(i){
          this.axios.get("/day02/book/show",{
            params:{
              pageNum:i,
              pageSize:5
            }
          }).then(resp=>{
            let data = resp.data;
            console.log(data);
            this.books = data.books;
            this.pages = data.pages;
          })
         
        },
        removeBook: function (bookId) {
          let isDelete = confirm("确定删除吗?");
          if(!isDelete){
            return ;
          }
          this.axios.get("/day02/book/remove",{
            params:{
              bookId:bookId
            }
          }).then(resp=>{
            let responseData = resp.data;
            if (responseData.status == "success") {
              alert("删除成功");
              this.handleAClick(1);
            }else{
              alert("删除失败");
            }
          }).catch(error=>console.log(error));
    
           */
        }
      }

    }
</script>
<style scoped>
  
  .book-table table{
    margin: 0 auto;
    border: solid 1px darkgray;
  }
</style>

3.在app.vue中添加如下代码

<div id="app">

    <img src="./assets/logo.png">
    
    <!-- 添加如下代码-->
    <hr>
    <h1>hello </h1>
    <div>
      <router-link to="/book/show"><button>查询</button></router-link>
    </div>
    
    
    <router-view/>
  </div>

3.解决跨域问题

出于浏览器的同源策略限制，同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。前后端分离的模式下，前端页面的js代码和服务端的服务地址不在同一个域下，无法直接通信。

解决方案：

main.js添加如下配置

import axios from 'axios'
import VueAxios from "vue-axios"

axios.defaults.baseURL="http://localhost:8080"
//添加的配置
axios.defaults.withCredentials = true

Vue.use(VueAxios,axios)

2.服务端添加响应头

//设置允许跨域共享资源的前端地址
resp.setHeader("Access-Control-Allow-Origin","http://localhost:8081");
//允许client跨域请求时携带cookie
resp.setHeader("Access-Control-Allow-Credentials","true");

4.打包部署

当我们使用vue-cli脚手架完成一个项目后，下一步就需要打包部署项目（类似于JavaWeb项目开发后要打war包部署到tomcat中）。

执行打包命令

#在项目目录下执行npm run build
E:\ideaProject\vue-cli-test>npm run build

#最后出现如下信息，表示打包完成
Build complete.

? Tip: built files are meant to be served over an HTTP server.
? Opening index.html over file:// won't work.

2.打包后的文件，保存在项目目录下新生成的dist目录下 ?