书城管理系统（前端）

OK，兄弟们！

测试上传图片的后端接口

 测试分页条件查询后端接口

 测试根据id查询后端接口

测试新增一本书的后端接口

 测试修改一本书的后端接口

之前写好的后端接口，用postman测试一下，没有问题的话我们就试试开发前端。

准备工作：

用vue创建一个文件，安装VUE步骤我这里引用一下其他人的csdn

(3条消息) Vue脚手架搭建及vue项目创建【详细教程】_星河梦~的博客-CSDN博客https://blog.csdn.net/weixin_53186633/article/details/122461313现在桌面创建一个空的文件夹，然后选择用vscode打开，然后打开终端。

 然后在终端输入vue命令新建一个vue项目

vue create book-fornt

然后选择Manually select features，这里我们选下面这5个。按空格和上下箭头选择，选好回车就行

 然后这里我们选3.x

 下面按这个选择配置就行，选好最后回车就开始创建了

 创建好就是这个样子

 我们在终端上切到book-fornt项目

cd book-fornt

我们还需要安装axios和element-plus(3.x的饿了么组件交plus)

axios

npm install axios --save

element-plus

npm install element-plus --save

 然后在main.js中引入一下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

 修改一下vue.config.js文件里的内容

const { defineConfig } = require('@vue/cli-service')
module.exports = {
  devServer:{
      port:8020, // 启动端口号
      open:true  // 启动后是否自动打开网页
  }
} 

npm run serve跑一下试试，看看项目能不能运行。

都没问题的话我们才能开始开发前端内容。

开发步骤：

先封装前端请求request.js文件

在src目录下新建一个utils文件夹，然后创建一个request.js来封装axios请求 

request.js,再上一篇内容里我们的后端接口是

import axios from 'axios'


axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: 'http://localhost:8785',
  // 超时
  timeout: 10000
})

//第三步 创建拦截器  http request 拦截器
service.interceptors.request.use(
  config => {
      //debugger
      return config
  },
  err => {
      return Promise.reject(err);
  })

// http response 拦截器
service.interceptors.response.use(
  response => {
    //   //debugger
    //   if (response.data) { 
    //     clearLoginInfo()
    //     router.push({ name: 'login' })
    //   } else {
    //           return response;
    //       }
    return response;
      },error => {
      return Promise.reject(error.response) // 返回接口返回的错误信息
  });

export default service

在src目录下新建一个api文件夹，然后建一个book.js文件来封装我们之前开发好的后端接口

import requset from '../utils/request'

// 获取书城列表分页条件查询
export function getBookInfoList(