前端部分工作

前言

这就是非常简单的一个前后端分离项目，第一次尝试这种项目，所以我会把每一步都写的非常详细，大家一起学习！这是这个项目的第一阶段，前端部分阶段，本专栏还有后期的后端以及前后端交互等部分，欢迎大大家给个关注和评论呗！蟹蟹！

前端部分

Vue的准备阶段

项目开始，先创建一个文件夹叭，就叫SpringBoot+Vue项目：

下载一个Node.js，这个Node.js中有一个npm包，用来管理依赖的，我们可以通过其来使用npm命令和下载相关的依赖，这是前端的部分，大致了解下就行。

下载安装完成后，可以在刚刚我们创建的文件夹的路径地址栏中敲入cmd打开，看看自己的Node.js版本。

可以看到已经安装成功。
然后就是检查npm的版本，还有vue功能的安装：

安装过程要一会儿。

安装完毕，现在创建我们的Vue项目：

开始创建后会弹出下面的问题：

选最下面的Manually select features，跳转到：

（空格键选择，回车键确定进入该选项细节的选择）我们按如下选择：

在选择Vue版本的选项中，按回车进入：选择3.x版本：

回车进入，第一项无脑选择yes：

选择packagejson后，会问你是否保存这次的配置，第一次的话就保存一下，存一下名字，我这里就叫springboot-vue-demo：

然后npm会开始创建，等一会儿就行了：

创建完成，然后我们可以使用如下的方式跑起来看一下：

跑起来后：

访问看看,可以看到是默认的Vue的欢迎页：

现在关闭掉项目，按control+c，选择yes：

然后用Idea打开这个项目：

给这个Vue项目配置启动项：点击那个edit configuration

在弹出的窗口的左上角有个绿色“+”键，点击，然后再点击弹出的下列列表中的npm：

会弹出一个npm的配置项，会显示找不到，一般第一次的话会显示未找到npm（就是你的node.js）的位置：

然后要自己手动添加进去：

点击那个add，然后找到你的node.js文件夹的存放位置，然后点击其中的那个node.exe文件，加进去就玩完事儿：

有了npm.exe之后上面的package.json就可以有源文件进行配置了，记得配置，最后配置完后应该是这样：

点击OK就完事儿，现在可以看见edit configuration有个名为serve的东西，点击绿色三角键就可以直接启动Vue项目了：

访问一样没有问题：

有一个小技巧，可以让每次点击serve运行时都让它自己弹开页面，不必手动找localhost，就是在package.json中的serve那一栏，在后面加上“–open”：

现在它就是自动打开页面了。
这里可以给小白们（也包括我）列一个Vue项目的各个文件结构：

我不知道为什么搜到的文件目录结构和我创建的不一样，有些许出入，我觉得可能是版本的问题叭，有知道的友友可以评论告诉我一下，嘻嘻。
然后上图中没有提到的router，是我们配置路由的地方，通过路径去找到对应的页面；store呢就是用来定义我们页面的一些变量，比如登录之后的用户信息我们想要保存在这个工程里面，我们就可以通过store来进行存储。views顾名思义就是存放视图的地方了。至于还有其他不了解的就单独去研究研究Vue叭，知道个大概就行，至此我们可以开始我们的网页的搭建了。
因为我们要做一个后台管理系统，所以需要把现有的页面结构进行改造。

清空Vue项目环境

可以看见一般的后台管理系统页面都长这样：

我们接下里要做的就是模仿它，做一个。

首先在App.vue中，删去那些不必要的：

然后再删去Helloworld.vue这个组件;

Home.vue里面的关于Helloworld.vue的引用也要去掉。

现在再跑代码，视图就会变为：

这个图片也没啥用，去掉，还有上面的class="home"就写个Home表示这页面是在的：

管理系统的页面搭建：

现在我们开始通过组件的方式，来完成项目页面的开发：
首先的Header头部：


创建完毕之后就可以开始写我们的代码了：

然后我们要把Header这个组件引入到App.vue这里面来，同时也要删掉这里面我们不需要的部分（还有上面的id="nav"也要记得删掉）：

写完Header的引入后，该页面的代码内容为：

访问：

可以看到页面中我们的文字和浏览器边框有些许空白，我们可以把它们去掉，那么我们需要写一个默认的样式。现在放静态资源的文件夹assets下新建一个css文件夹，用来放css样式：


然后创建文件叫global，意思是一个进行全局处理的文件样式：

然后在main.js中引入：

访问可以看到，边距已经没了：

实现后台管理，我们不可能自己去手写那些css样式，那样是很繁琐的事情，这里我们一般借助element ui来实现，针对Vue3呢element也是升级了，叫element plus：

安装方式官网也给了例子，如下：

回到Idea中，打开控制台：

输入element plus的安装命令：

安装完成：

安装完后我们就可以通过element的方式来在项目中进行引入，快速开始一栏中有两种方式引入，我们可以直接copy：

在main.js中引入“Full Import”那一段中的几行代码就行了，引入的代码如下，对比之后可以知道我们只copy了哪些代码，无脑copy就行：

接下里我们可以简单写个按钮来看一下element是否有被引入进来，我们在Home.vue组件中写一个按钮看看：

访问可以看到，我们已经成功通过<el-button>标签引用到element的样式：

类似的组件在element ui中还有非常之多，这只是其中非常基础的一个，在官网中我们可以看到（在官网中点击每个组件的右上角的两个<括号，可以查看源代码）：

然后现在来完成我们网页头部的设计，首先是“后台管理”四个字，我们想让它离左边框有30px的距离，字体加粗，然后字体颜色变蓝：

然后下拉框我们也改一下，在element ui的组件库中找到跟下拉框有关的组件，然后自己选一个喜欢的样式（这里就选择了一个基础款）：

然后copy中间那部分，其他的没有用：

然后粘贴到我们项目中的下拉框那里：

可以看到：

我们可以按照自己的需求改一下：

变成这样：

现在我们可以去写我们网页位于左边的导航栏了，同样是用一个组件来写，就叫Aside：

然后去element找一个侧边栏的框：

然后老方法copy，在Aside.vue的template中创建一个div块来放这个侧边栏，注意自己看哪些部分是不需要的，就自己删掉，自己调试：

然后在App.vue里面引入：

查看页面效果：

可以看出来我们很不满意这样的页面，这时候我们需要自己去慢慢调试成自己喜欢的样子，可以借助element 组件下方的文档去看一下具体应该怎么改：

有时候找不到自己想要的，我们也可以自己写style样式，比如这里我们如果没找到设置宽度的地方，就自己写style（注意这个菜单外面包括着的行和列被我删了，因为用不到）：

设置完style之后，访问可以看到：

可以看到有很多菜单其实我们是不需要的，都在原有基础上增删改就行，并且如果我们想要那个侧边栏下拉到底的话，就需要对style做一个设置，大改之后源码如下：

访问页面终于舒服了些：

然后我们来写我们右边的主体，一般都会是一个表格，老方法，依然是去element上面找个表格，套路都是一样的，我就不重复说了。
这里要提一个东西就是views文件夹下的About.vue我们已经不需要了，记得删掉，然后还有router路由文件夹下的关于About的路由那一块也要删掉：

因为我们现在要写的是主体，所以我们就在Home.vue下写我们的主体就行了，把我们刚刚复制过来的表格代码粘贴进去，然后进行一大堆删删改改，过程过于琐碎，这里就只贴完成后的源码了：

Home.vue中：

<template>
  <!--padding设置一点内边距-->
  <div style="padding: 10px">
    <!--功能区域-->
    <div style="margin: 10px 0">
      <el-button type="primary">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>

    <!--搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%"/>
      <el-button type="primary" style="margin-left: 5px">搜索</el-button>
    </div>


    <!--后面的width可以不写，浏览器会自适应
    stripe是斑马纹效果-->
    <el-table :data="tableData" border stripe style="width: 100%">
      <!--sortable让日期排序-->
      <el-table-column prop="date" label="Date" sortable/>
      <el-table-column prop="name" label="Name"/>
      <el-table-column prop="address" label="Address" />

      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>

          <!--弹出消息确认框-->
          <el-popconfirm
                  confirm-button-text="是的，没错"
                  cancel-button-text="妈的，我再想想"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？">
            <template #reference>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-popconfirm>
      </template>
    </el-table-column>
    </el-table>

    <!--分页功能区域-->
    <div style="margin: 10px 0">
      <el-pagination
              v-model:currentPage="currentPage4"
              :page-sizes="[5,10,20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>


export default {
  name: 'Home',
  components: {

  },
    data() {
        return {
            search: '',
            //当前页
            currentPage4: 1,
            total: 10,
            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',
                },
            ],
        }
    },
    methods: {
        handleEdit(){

        },
        handleDelete(){

        },
        handleSizeChange(){
        //    改变页码时触发函数

        },
        handleCurrentChange(){
        //  当前页改变时触发代码
        }
    }
}
</script>

访问：

至此前端页面基本上就完成的差不多了，接下来我们去写SpringBoot的后端东西啦。