前后端分离-小项目-1前端布局

技术栈

前后端分离开发，前端主体框架Vue3+后端基础框架Spring-Boot

1.前端技术栈：Vue3+Axios+ElementPlus

2.后端技术栈：Spring Boot+MyBatis Plus

3.数据库-MySQL

4.项目的依赖管理-Maven

5.分页-MyBatis Plus的分页插件

---

环境搭建

1. 安装Node.js LTS

node.js的npm,用于管理前端项目包依赖

cmd->node -v查看版本号，以检测是否安装。/如果没有安装，就查看以前的安装过程

2. 创建Vue项目

• 新建一个保存前端页面的文件夹，然后在该文件夹地址栏cmd->vue create springboot_vue

• 选择

>Manually select features

• 空格键选中*

*babel 默认勾选

*Router勾选

*Vuex 勾选

Linter / Formatter(默认，取消该选择) 要求严谨，不能有错，对新手不友善

• 选择>vue3的项目

• history model?y

• placing config?包的管理方式>In package.json

• 保存当前预设给将来使用preset?y

• 保存预设命名为as：springboot_vue_stein

• 整个过程注意保持网络畅通。如果出现问题，重新走一遍。

• 完成后执行提示的两个语句。先cd，在npm

• 然后按提示地址能够访问页面便成功了。

3. 使用idea打开springboot._vue项目，并配置项目启动

1)直接将springboot._vue项目拖到idea

2)配置springboot_vue使用npm方式启动

• 点开组件栏的“启动框”选择Edit Configurations...

• 左上角“+”号，找到npm

• 右边窗口：Scripts:serve。然后Apply、Ok

4. 我们会使用到element-plus,停止项目，安装element-plus插件

element-plus官方文档--https://element-plus.gitee.io/#/zh-CN/component/layout,指南->安装，找到下面这个安装指令。在该项目下执行安装指令。

• 安装包管理器

# NPM
$ npm install element-plus --save

5. 配置Vue服务端口

在vue.config.js里面配置端口号。重新运行npm即可

module.exports = {devServer: {port: 10000}
}

---

创建基础页面

目标：使用Vue3+ElementPlus完成该界面

实现过程：

1. 清除不用内容和组件

• 清空App.vue

• 清理HomeView

• 删除HelloWorld.vue，

2. 创建Header.vue

3. 创建全局global.css，以备后用

4. 在main.js引入global.css

---

Element-Plus的使用

引入Element-Plus

• 可以参考文档，实际不重复的部分如下。main.js修改

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
.use(ElementPlus)

• App.vue。添加按钮，测试是否能正常使用。

<template><Header/>Home<el-button>我的按钮</el-button> #添加了该行
</template>

• 增加右上角个人设置。Header.vue里面添加

<el-dropdown>伪代码：该部分中间的内容。参看文档</el-dropdown>

• 左侧边栏，新建组件Aside.vue。参见Menu菜单->侧栏

<el-menu>标签内的代码

• 固定宽度，避免打开/关闭导航栏，引起来回缩进

  <el-menu  style="width:200px">

• App.vue三分页面。头左右。需要引入前面写好的Aside

<template><div><!--头--><Header/><div style="display: flex"><!--左侧边栏--><Aside/><!--右侧显示内容--><router-view style="flex:1"/></div></div>
</template>

• 测试右侧展示页面HomeView.vue

• HomeView添加el-button即可查看

<el-button>测试按钮</el-button>

• HomeView.vue引入表格内容

• 引入表格元素

• sortable 加入可排序属性

    <el-table:data="tableData"style="width: 100%"><el-table-column prop="date" sortable label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>

• 关联数据。注意数据的格式。data(){return{keyword:[ ]

export default {
//新增内容：添加数据池。注意格式
,data(){return{tableData:[{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]}}
}

• 国际化。参看文档->指南->国际化

添加引入，修改使用，注意合并重复的语句。然后页面可以看到中文提示

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'app.use(ElementPlus, {locale: zhCn,
})

• 添加固定列表格

• 自定义内容需要使用该行数据时，声明#default="scope'",再通过scope.row获取数据。

• 插槽机制。可以拿到其他行的数据来进行修改

      <el-table-column fixed="right" label="操作" width="120"><template #default="scope"><el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button><el-button link type="primary" size="small">删除</el-button></template></el-table-column>

• 编写handleEdit（）方法

• 待完善

• 添加新增、其他按键

<div style="margin:5px 2px"><el-button type="primary">新增</el-button><el-button>其他</el-button></div>

• 添加搜索栏

 <div style="margin-left: 2px"><el-input v-model="input" style="width:260px" placeholder="请输入关键字"/><el-button style="margin-left: 5px" type="primary">查询</el-button></div>