Vue分页插件的前后端配置与使用

本文实例为大家分享了Vue分页插件的前后端配置与使用,供大家参考,具体内容如下

分页插件的配置

<dependency>
 <groupId>com.github.pagehelper</groupId>
 <artifactId>pagehelper</artifactId>
 <version>5.1.10</version>
</dependency>
<dependency>
 <groupId>com.github.pagehelper</groupId>
 <artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
 <version>1.2.10</version>
</dependency>

后端中的核心代码

1. 控制层代码

BusinessException异常是自定义的异常类型
CommonResponseUtils、ConversionUtils是自定义的工具类

以上代码在本博客均未列出

* @param commonRequest 前端请求
 * @return 返回给前端的数据
 */
@PostMapping(value = "/queryByCondition")
public CommonResponse<PageInfo<OrganizationDataListVO>> queryByCondition(@RequestBody CommonRequest<OrganizationQueryConditionVO> commonRequest){
 CommonRequestUtils.checkCommonRequest(commonRequest);
 try {
  OrganizationDTO dto = (OrganizationDTO) ConversionUtils.convertSimpleObject(commonRequest.getBody(),OrganizationDTO.class);
  PageInfo<OrganizationDTO> dtoPageInfo = organizationService.queryByCondition(dto);
  List<OrganizationDTO> dtoList = dtoPageInfo.getList();
  List<OrganizationDataListVO> vos = ConversionUtils.convertSimpleList(dtoList, OrganizationDataListVO.class);
  PageInfo<OrganizationDataListVO> voPageInfo = (PageInfo<OrganizationDataListVO>) ConversionUtils.convertSimpleObject(dtoPageInfo, PageInfo.class);
  voPageInfo.setList(vos);
  return CommonResponseUtils.makeSuccessCommonResponse(voPageInfo, "0", null, null, null);
 } catch (ServiceException exception) {
  throw new BusinessException(exception);
 } catch (IllegalAccessException | InstantiationException e) {
  throw new BusinessException(SystemExceptionEnum.SYSTEM_ERROR);
 }
}

实体类

OrganizationDataListVO

package com.bosssoft.bes.userpermission.pojo.vo;

import com.bosssoft.bes.userpermission.pojo.base.DataListVO;

import java.io.Serializable;

/**
 * @author
 * @date 2019-08-25 18:43
 */
public class OrganizationDataListVO extends DataListVO implements Serializable {

 /**
  * 机构名称
  */
 protected String name;

 /**
  * 机构代码
  */
 protected String code;

 /**
  * 负责人
  */
 protected String master;

 /**
  * 电话
  */
 protected String tel;

 /**
  * 地址
  */
 protected String address;

 public OrganizationDataListVO() {
 }

}

OrganizationQueryConditionVO

package com.bosssoft.bes.userpermission.pojo.vo;

import com.bosssoft.bes.userpermission.pojo.base.QueryConditionVO;

import java.io.Serializable;

/**
 * @author
 * @date 2019-08-15 14:05

 */
public class OrganizationQueryConditionVO extends QueryConditionVO implements Serializable {

 /**
  * 机构名称
  */
 protected String name;

 public OrganizationQueryConditionVO() {
 }

}

2. 业务层代码

/**
 *
 * @param organizationDTO
 * @return
 * @throws ServiceException
 */
public PageInfo<OrganizationDTO> queryByCondition(OrganizationDTO organizationDTO) {
 Condition condition = new Condition(Organization.class);
 Example.Criteria criteria = condition.createCriteria();
 if (!StringUtils.isEmpty(organizationDTO.getName())) {
  criteria.andLike("name", organizationDTO.getName() + "%");
 }
 condition.setOrderByClause("updated_time DESC");
 PageHelper.startPage(organizationDTO.getPageNum(), organizationDTO.getPageSize());
 List<Organization> results = organizationDao.selectByExample(condition);
 PageInfo<Organization> organizationPageInfo = new PageInfo<Organization>(results);
 List<OrganizationDTO> dtos = null;
 OrganizationDTO dto = null;
 dtos = new ArrayList<OrganizationDTO>(results.size());
 for (Organization result : results) {
  dto = new OrganizationDTO();
  BeanUtils.copyProperties(result, dto);
  dtos.add(dto);
 }
 PageInfo<OrganizationDTO> organizationDtoPageInfo = new PageInfo<OrganizationDTO>();
 BeanUtils.copyProperties(organizationPageInfo, organizationDtoPageInfo);
 organizationDtoPageInfo.setList(dtos);
 return organizationDtoPageInfo;
}

实体类

OrganizationDTO

package com.bosssoft.bes.userpermission.pojo.dto;

import com.bosssoft.bes.userpermission.pojo.base.BaseDTO;

import java.util.List;

/**
 * @author
 * @date 2019-08-15 14:09

 */
public class OrganizationDTO extends BaseDTO {

 /**
  * 所含公司列表
  */
 protected List<CompanyDTO> companyDtoList;

 /**
  * 机构名称
  */
 protected String name;

 /**
  * 机构代码
  */
 protected String code;

 /**
  * 负责人
  */
 protected String master;

 /**
  * 电话
  */
 protected String tel;

 /**
  * 地址
  */
 protected String address;

 public OrganizationDTO() {
 }

}

Organization

package com.bosssoft.bes.userpermission.pojo.entity;

import com.bosssoft.bes.userpermission.pojo.base.BaseEntity;
import org.springframework.stereotype.Repository;

import javax.persistence.Table;
import java.io.Serializable;

/**
 * @author
 * @date 2019-08-15 10:49

 */
@Repository
@Table(name = "t_organization")
public class Organization extends BaseEntity implements Serializable {
 //private static final long serialVersionUID = 1L;

 /**
  * 机构名称
  */
 protected String name;

 /**
  * 机构代码
  */
 protected String code;

 /**
  * 负责人
  */
 protected String master;

 /**
  * 电话
  */
 protected String tel;

 /**
  * 地址
  */
 protected String address;

 public Organization() {
 }

}

3. DAO层

引用了通用mapper

前端中的代码

导入element分页插件
handleSizeChange:当改变每页显示的数据量时,触发该函数,页面刷新,并跳转到第一页。
handleCurrentChange:跳转到用户所选择的页面

<!-- 组织机构管理 -->
<!-- 新页面 -->

<template>
 <div>
 <!--查询部分 -->
 <el-form :inline="true" :model="searchKeywords" class="demo-form-inline" style="float:left">
  <el-form-item label="组织名称">
  <el-input type="text" v-model="searchKeywords.name" placeholder="组织名称"></el-input>
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="searchItem(1)">查询</el-button>
  </el-form-item>
 </el-form>
 <br /><br /><br />
 <!-- 操作区 -->
 <div style="float:left">
  <el-button type="text" class="el-icon-plus" style="font-size: 15px" @click="showAddDialog">增加</el-button><label>    </label>
  <el-button type="text" class="el-icon-delete" style="font-size: 15px" @click="deleteMultipleItems()">删除</el-button><label>    </label>
  <el-button type="text" class="el-icon-edit" style="font-size: 15px" @click="multipleUpdateAttemptProcess()">修改</el-button>
 </div>

 <!-- 显示数据字典的表单 -->
 <div>
  <el-table ref="multipleTable" :data="items" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" @row-dblclick="editRow">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="机构名称" sortable width="120"></el-table-column>
  <el-table-column prop="code" label="机构代码" sortable width="100"></el-table-column>
  <el-table-column prop="master" label="负责人" width="100"></el-table-column>
  <el-table-column prop="tel" label="电话" width="120"></el-table-column>
  <el-table-column prop="address" label="地址" width="180"></el-table-column>
  <el-table-column prop="status" label="是否启用" sortable width="95" :formatter="statusFormat"></el-table-column>
  <el-table-column prop="operate" label="操作" width="100">
   <template slot-scope="scope">
   <el-button type="text" class="el-icon-plus" @click="showAddDialog"></el-button>
   <el-button type="text" class="el-icon-delete" @click="deleteSingleItem(scope.row)"></el-button>
   <el-button type="text" class="el-icon-edit" @click="showEditDialog(scope.row)"></el-button>
   </template>
  </el-table-column>
  </el-table>
 </div>

 <!--添加与修改字典弹窗-->
 <div>
  <el-form :model="dialogDataValues" :label-position="labelPosition" :rules="rules" ref="itemModify" style="margin: 0px; padding: 0px;">
  <el-dialog :title="dialogTitle" style="padding: 0px;" :close-on-click-modal="false" :visible.sync="isDialogShowed" width="60%">
   <el-form-item label="组织机构名" :label-width="formLabelWidth" prop="name">
   <el-input v-model="dialogDataValues.name" placeholder="组织机构名"></el-input>
   </el-form-item>
   <el-form-item label="机构代码" :label-width="formLabelWidth" prop="code">
   <el-input v-model="dialogDataValues.code" placeholder="机构代码"></el-input>
   </el-form-item>
   <el-form-item label="负责人" :label-width="formLabelWidth" prop="master">
   <el-input v-model="dialogDataValues.master" placeholder="负责人"></el-input>
   </el-form-item>
   <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
   <el-input v-model="dialogDataValues.tel" placeholder="电话"></el-input>
   </el-form-item>
   <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
   <el-input v-model="dialogDataValues.address" placeholder="地址"></el-input>
   </el-form-item>
   <el-form-item label="是否启用" :label-width="formLabelWidth" prop="status">
   <el-radio v-model="dialogDataValues.status" :label="1">是</el-radio>
   <el-radio v-model="dialogDataValues.status" :label="0">否</el-radio>
   </el-form-item>
   <span slot="footer" class="dialog-footer">
   <el-button size="mini" @click="cancelEdit">取 消</el-button>
   <el-button size="mini" type="primary" :style="{display: visibleSave}" @click="submitAddForm('itemModify')">保 存</el-button>
   <el-button size="mini" type="primary" :style="{display: visibleEdit}" @click="submitUpdateForm('itemModify')">修 改</el-button>
   </span>
  </el-dialog>
  </el-form>
 </div>

  <div class="block">
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="currentPageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="recordNumber">
  </el-pagination>
  </div>
 </div>
</template>
<script>
import {
 queryOrganization,
 addOrganization,
 updateOrganization,
 deleteOrganization
} from "../../api/systemcenter";
export default {
 data() {
 return {
  // ===========================
  // 前端属性
  // ===========================
  //默认隐藏编辑按钮
  visibleEdit: "none",
  //默认显示新增按钮
  visibleSave: "",
  // 添加弹窗显示与否
  isDialogShowed: false,
  // 标签宽度
  formLabelWidth: "120px",
  // 在表格中显示的数据
  items: [],
  // 添加弹窗中的数值
  dialogDataValues: {
  id: "",
  name: "",
  code: "",
  master: "",
  tel: "",
  address: "",
  status: ""
  },
  // 修改弹窗数值
  form: {},

  // 前端校验 @blur 当元素失去焦点时触发blur事件
  rules: {
  name: [{ required: true, message: "组织机构名称必填", trigger: "blur" }],
  code: [{ required: true, message: "组织机构代码必填", trigger: "blur" }],
  // tel: [{ required: true, message: "组织机构电话号码必填", trigger: "blur" }],
  // master: [{ required: true, message: "组织机构负责人必填", trigger: "blur" }],
  // address: [{ required: true, message: "组织机构地址必填", trigger: "blur" }],
  status: [{ required: true, message: "状态必选", trigger: "blur" }]
  },
  // 弹窗数据右对齐
  labelPosition: "right",
  // 导入
  fileUploadBtnText: "导入",
  // 通过checkbox进行多选的数据
  selectedItems: {},
  // 搜索框数据
  searchKeywords: {},
  //数据总量
  recordNumber: 0,
  //当前页数
  currentPage: 1,
  //当前每页数量:
  currentPageSize: 10,
  loading: true
 };
 },
 // 页面加载完成后加载数据
 mounted: function() {
 this.loadDataList();
 },
 methods: {
 // ==========================
 // 页面处理
 // ==========================

 editRow(row){
  this.showEditDialog(row)
 },

 //参数校验
 submitAddForm(formName) {
  this.$refs[formName].validate((valid) => {
  if (valid) {
   this.addItem();
  } else {
   return false;
  }
  });
 },

 submitUpdateForm(formName) {
  this.$refs[formName].validate((valid) => {
  if (valid) {
   this.updateItem();
  } else {
   return false;
  }
  });
 },

 //状态值的转化
 statusFormat(row, column) {
  if (row.status === 0) {
  return "否";
  } else if (row.status === 1) {
  return "是";
  }
 },

 // 每一行多选选中时触发该方法
 handleSelectionChange(selectedItems) {
  this.selectedItems = selectedItems;
 },

 // 显示添加数据弹窗
 showAddDialog() {
  this.visibleSave = "";
  this.visibleEdit = "none";
  this.dialogTitle = "添加组织机构";
  this.isDialogShowed = true;
  this.dialogDataValues.name = "";
  this.dialogDataValues.code = "";
  this.dialogDataValues.master = "";
  this.dialogDataValues.tel = "";
  this.dialogDataValues.address = "";
  this.dialogDataValues.status = 1;
  this.dialogDataValues.id = "";
  this.dialogDataValues.version = "";
 },

 // 显示修改数据弹窗
 showEditDialog(obj) {
  this.visibleSave = "none";
  this.visibleEdit = "";
  this.dialogTitle = "修改组织机构";
  this.isDialogShowed = true;
  this.dialogDataValues.name = obj.name;
  this.dialogDataValues.code = obj.code;
  this.dialogDataValues.master = obj.master;
  this.dialogDataValues.tel = obj.tel;
  this.dialogDataValues.address = obj.address;
  this.dialogDataValues.status = obj.status;
  this.dialogDataValues.id = obj.id;
  this.dialogDataValues.version = obj.version;
 },

 // 取消弹窗
 cancelEdit() {
  this.isDialogShowed = false;
  this.dialogDataValues.name = "";
  this.dialogDataValues.code = "";
  this.dialogDataValues.master = "";
  this.dialogDataValues.tel = "";
  this.dialogDataValues.address = "";
  this.dialogDataValues.status = "";
  this.dialogDataValues.id = "";
  this.dialogDataValues.version = "";
 },

 // 多选修改处理
 multipleUpdateAttemptProcess() {
  if (this.selectedItems.length == 1) {
  this.showEditDialog(this.selectedItems[0]);
  } else if (this.selectedItems.length == null || this.selectedItems.length == 0) {
  this.$message({type: "info", message: "未选中数据", duration: 1000});
  } else {
  this.$message({type: "error", message: "无法一次修改多个数据", duration: 1000});
  }
 },

 // ==========================
 // 数据处理
 // ==========================

 queryData(queryCondition) {
  var _this = this;
  _this.loading = true;
  queryOrganization(queryCondition).then(resp => {
  if (resp && resp.responseHead.code === "0") {
   _this.recordNumber = resp.body.total;
   _this.items = resp.body.list;
   _this.loading = false;
  }
  }).catch(() => {
  _this.$message({showClose: true, message: "网络异常", type: 'error'})
  _this.loading = false;
  });
 },

 // 加载数据方法
 loadDataList() {
  this.queryData({
  pageNum: this.currentPage,
  pageSize: this.currentPageSize
  });
 },

 // 搜索功能
 searchItem(currentPage) {
  this.queryData({
  pageNum: currentPage,
  pageSize: this.currentPageSize,
  name: this.searchKeywords.name
  });
 },

 handleSizeChange: function(currentPageSize) {
  this.currentPageSize = currentPageSize;
  this.currentPage = 1;
  this.searchItem(1);
 },

 handleCurrentChange: function(currentPage) {
  this.currentPage = currentPage;
  this.searchItem(currentPage);
 },

 // 增加数据
 addItem() {
  addOrganization({
  name: this.dialogDataValues.name,
  code: this.dialogDataValues.code,
  master: this.dialogDataValues.master,
  tel: this.dialogDataValues.tel,
  address: this.dialogDataValues.address,
  status: this.dialogDataValues.status
  }).then(resp => {
   if (resp && resp.responseHead.code == "0") {
   this.$notify({title: "成功",message: "数据已成功插入",type: "success",duration: 1500});
   this.loadDataList();
   this.isDialogShowed = false;
   } else {
   this.$message({
    type: "error",
    message: "数据插入失败 错误码:"+resp.responseHead.code+" 错误信息:" +resp.responseHead.message,
    duration: 1000
   });
   }
  }).catch(() => {});
 },
 // 编辑数据

 updateItem() {
  updateOrganization({
  name: this.dialogDataValues.name,
  code: this.dialogDataValues.code,
  master: this.dialogDataValues.master,
  tel: this.dialogDataValues.tel,
  address: this.dialogDataValues.address,
  status: this.dialogDataValues.status,
  id: this.dialogDataValues.id,
  version: this.dialogDataValues.version
  }).then(resp => {
   if (resp && resp.responseHead.code == "0") {
   this.$notify({title: "成功", message: "数据已成功修改", type: "success", duration: 1000});
   this.loadDataList();
   this.isDialogShowed = false;
   } else {
   this.$message({
   type: "error",
   message: "数据修改失败 错误码:"+resp.responseHead.code+" 错误信息:" +resp.responseHead.message,
   duration: 1000
   });
   }
  }).catch(() => {});
 },

 //删除数据
 deleteData(datalist) {
  deleteOrganization(datalist).then(resp => {
  if (resp && resp.responseHead.code === "0") {
   this.$notify({title: "成功", message: "数据已成功删除", type: "success", duration: 1000});
   // 若删除成功则重新刷新页面
   this.loadDataList();
  } else {
   this.$notify({
   title: "失败",
   message: "数据删除失败 错误码:"+resp.responseHead.code+" 错误信息:" +resp.responseHead.message,
   type: "error",
   duration: 1000
   });
  }
  });
 },

 deleteSingleItem(obj) {
  this.$confirm("确认要删除该数据吗?", "信息", {
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  type: "warning"
  }).then(() => {
   this.deleteData([{id: obj.id, version: obj.version}]);
  }).catch(() => {
   this.$message({type: "info",message: "已取消删除", duration: 1000});
  });
 },

 // 批量删除数据
 deleteMultipleItems() {
  if (this.selectedItems.length == null || this.selectedItems.length == 0) {
  this.$message({
   type: "error",
   message: "未选择任何数据",
   duration: 1000
  });
  } else {
  this.$confirm("确认要删除该数据吗?", "信息", {
   confirmButtonText: "确定",
   cancelButtonText: "取消",
   type: "warning"
  }).then(() => {
   this.deleteData(this.selectedItems);
   }).catch(() => {
   this.$message({type: "info",message: "已取消删除", duration: 1000});
  });
  }
 }
 }
};
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于vue.js的分页插件详解

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.想了解更多,请戳http://cn.vuejs.org/ html代码: <div class="page-bar" v-else> <ul> <li style="width: 11%" v-if="showFirst"> <a v-on:click="cur--"> <<</

  • vue中的自定义分页插件组件的示例

    介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章 首先在新建一个分页模块 在模块中引入相应的代码,(内有详细的注释) template中 <div class="page-bar"> <ul> <li class="first"> <span>共{{dataNum}}条记录 第 {{cur}} / {{all}} 页</span> </li> &

  • Vue分页插件的前后端配置与使用

    本文实例为大家分享了Vue分页插件的前后端配置与使用,供大家参考,具体内容如下 分页插件的配置 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.10</version> </dependency> <dependency> <groupI

  • django+vue项目搭建实现前后端通信

    目录 django 环境搭建 前端项目搭建 前端项目结构 曲线救国打通vue和django vue适配django django适配vue django 环境搭建 1.创建django骨架项目 django-admin startproject yiyan_webauto 2.创建应用 python manage.py startapp myapp 3.试着启动项目,验证环境OK python3 manage.py runserver 4.基础配置 admin.py 把数据库的具体表注册到后台来

  • Springboot与vue实例讲解实现前后端分离的人事管理系统

    目录 一,项目简介 二,环境介绍 三,系统展示 四,核心代码展示 五,项目总结 一,项目简介 系统是前后端分离的项目,直接启动Springboot应用程序类后,再启动前端工程访问即可.主要实现了企业的人事管理功能,主要包含员工管理.薪资管理.职位管理.权限管理.网盘文件分享管理等模块. 系统亮点:使用REDIS进行数据缓存,优化查询性能:使用分布式文件系统进行文件存储服务:基于Springboot+vue实现前后端分离开发 二,环境介绍 语言环境:Java: jdk1.8 数据库:Mysql:

  • 如何利用Python+Vue实现简单的前后端分离

    目录 准备工作 前端 后端 数据库 总结 准备工作 安装Node环境 安装Python环境 注意:项目整个过程需要从后往前,即先数据库->后端->前端:启动流程也是先启动后端项目,再启动前端项目 前端 开发工具:Visual Studio Code(推荐).WebStorm 打开cmd,安装Vue脚手架,命令如下: npm install -g @vue/cli 创建Vue2项目,名为vue-axios vue create vue-axios 选择Manually select featur

  • vue分页插件的使用方法

    本文实例为大家分享了vue分页插件的具体代码,供大家参考,具体内容如下 分页插件代码: <div> <div class="page"> <div class="pagelist"> <span class="jump" :class="{disabled:pstart}" @click="lessPage()">上一页</span> <sp

  • 详解vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

  • Vue结合SignalR实现前后端实时消息同步

    最近业务中需要实现服务器端与客户端的实时通信功能,对Signalr做了一点总结和整理. SignalR 作为  ASP.NET 的一个库,能够简单方便地为应用提供实时的服务器端与客户端双向通信功能. SignalR 在客户端方面有两种API:Connections 和 Hubs. 在特殊情况下,比如发送消息的格式是特定不变时,使用Connections API. 大多数情况下使用Hubs,因为它是 Connections API 更高级的一种实现,允许客户端与服务端相互直接调用方法.一个实际应用

  • vue+mock.js实现前后端分离

    之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范,仅供参考. 然后案例讲完后我们讲具体的规范使用 那么一起来看看这个案例吧: <script> import Mock from "mockjs" export default { name: "FunctionsDbSource", methods:{ /

  • 详解Vue微信授权登录前后端分离较为优雅的解决方案

    微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份. 微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息 在vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通常现在开发也是前后端彻底分离的,vue打包后

  • 详解基于Vue,Nginx的前后端不分离部署教程

    有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作 前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧: 一.在这里我前端vue项目使用vue cli脚手架进行搭建的,后台使用Nginx,首先是前端配置: 1.前端配置,在这里假如后端访问

随机推荐