day02-功能实现01

liyuelian 2023-03-28 原文

功能实现01

1.功能01-搭建Vue前端工程

1.1需求分析

使用Vue3的脚手架vue-cli工具，创建ssm的前端项目基础开发环境
Vue-cli主要的功能是自动生成Vue的项目模板，提高开发效率

1.2代码实现

1.2.1搭建vue工程

以下命令使用管理员权限

（1）先下载node.js LTS，并安装node.js的npm，用于管理前端项目包依赖。这里安装node.js的14.17.3版本，方便使用Vue3

官网地址：https://nodejs.org/zh-cn/blog/release/v14.17.3/，下载安装，一路点击下一步即可。

安装完毕，在命令窗口输入node -v和npm -v，出现如下字样说明安装成功：

C:\Users\李>npm -v
6.14.13

C:\Users\李>node -v
v14.17.3

（2）全局安装Vue插件cli：npm install -g @vue/cli，这样我们就可以创建Vue工程

安装教程：https://cli.vuejs.org/zh/guide/

D:\apps\nodejs16.18.1\node_global\vue -> D:\apps\nodejs16.18.1\node_global\node_modules\@vue\cli\bin\vue.js
...
+ @vue/cli@5.0.8
added 693 packages from 474 contributors and updated 148 packages in 263.277s

（3）因为我们是前后端分离的，因此新建一个项目，指令vue create <项目名>，输入指令回车后会出现选择：

要使用管理员命令，否则会出错

3.1）手动选择

3.2）选择Babel，Router，Vuex

3.3）选择3.x版本

3.4）选择路由模式

3.5）选择项目依赖包管理方式

3.6）选择是否要保存当前项目的配置

3.7）创建成功：

3.8）依次输入上面提示的命令，运行vue项目：

3.9）浏览器访问

1.2.2idea配置vue项目并启动

（1）使用idea打开刚刚创建的Vue项目，点击右上角配置 Add Configuration

（2）配置启动

（3）点击箭头即可启动vue项目

1.3Vue3项目目录结构

（1）public/index.html页面：

index.html页面是项目的首页面
当App.vue编译后，内容会替换/挂载到 < div id="app">< /div>

...
<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

（2）router/index.js用于配置路由规则，即将组件和路径 path映射

index.js用于指定路由规则（访问url的规则）
path: '/' 表示当访问url为 http://ip:port/时，就访问到 HomeView 的组件，把 HomeView 组件的内容替换给 App.vue的 < router-view/>
HomeView 组件对应的文件就是 ../views/HomeView.vue

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

（3）App.vue页面：

App.vue 页面可以用来布局网站页面
< router-view/> 就是路由指令,会把对应的页面内容替换到< router-view/>的位置

路由的本质就是一种对应关系，根据不同的 URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。)
路由的规则，比如 http://localhost:8080/ ，则路由的路径就是\，又比如 http://localhost:8080/about ，则路由的path就是 /about

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style>
...
</style>

（4）assets 目录和 components 目录：

assets 目录存放项目的静态资源，比如图片，css，js等
components 目录存放组件，在vue中组件可以表示页面

（5）store/index.js 用于存放数据，比如登录后可以将数据存放在这里，或是页面跳转时存放要传递的参数/数据

（6）视图使用的基本介绍

（7）package.json 说明前端项目包的依赖关系，类似于maven的pom.xml

（8）main.js 用于引入资源（css/组件等），同时也是创建App挂载#app，引入./router，./store等资源的所在

1.4修改Vue服务端口

在默认情况下vue项目的访问端口为8080，可以在vue.config.js文件下修改启动端口

1.5安装Element Plus插件

Element Plus 是针对 Vue3.0 提供的组件库

Element Plus 是 Element 对 Vue3.0 的升级适配
Element UI 诞生于 2016 年，起初是饿了么内部的业务组件库，开源后深受广大前端开发者的喜爱，成为 Vue 生态中最流行的 UI 组件库之一
Element Plus 是重构的全新项目。Element 团队重写了 Element 的代码，用于支持 Vue3.0
Element UI 还在维护和升级，因为 Vue2 仍被使用，Vue3 支持的浏览器范围有所减少，因此在接下来的一段时间内，vue2 仍然会在项目内使用。

安装element-plus插件

在项目中我们会使用到element-plus插件，因此需要进行安装。

使用npm下载插件：npm install element-plus --save（管理员权限）

+ element-plus@2.2.33
added 21 packages from 25 contributors in 15.67s

5 packages are looking for funding
  run `npm fund` for details

2.功能02-前端项目基础页面

2.1思路分析

需求：创建项目基础页面，页面分为三部分：头部，侧边栏，显示页面

思路分析：使用Vue3+Element Plus完成

2.2代码实现

（1）创建全局的src/assets/css/global.css，之后有全局的样式就可以写在这里

* {
    margin: 0;
    padding: 0;
    /*box-sizing: border-box 就是将border和padding数值包含在width和height之内，
    好处是修改border和padding数值盒子的大小不变*/
    box-sizing: border-box;
}

（2）在src/main.js文件引入上述的css文件，同时引入Element Plus

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入css文件
import '@/assets/css/global.css'
//引入Element Plus
import ElementPlus from 'element-plus'
//国际化
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import 'element-plus/dist/index.css'

createApp(App).use(store).use(router).use(ElementPlus, {locale: zhCn,}).mount('#app')

如果出现提示，需要点击install 'element-plus'，否则会出错

（3）删除src/components/HelloWorld.vue组件，创建一个Header.vue组件，引入一个下拉菜单

flex属性-flex:1到底是什么

<template>
  <!--这里是页面的头部，分为三个div（flex为弹性布局）-->
  <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc ;display:flex">
    <div style="width:200px;padding-left: 30px;font-weight: bold;color: dodgerblue">后台管理</div>
    <div style="flex: 1"></div>
    <div style="width: 100px">
      <el-dropdown>
    <span class="el-dropdown-link">
      菜单选项
      <el-icon class="el-icon--right">
        <arrow-down/>
      </el-icon>
    </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header"
}
</script>

<style scoped>

</style>

（4）创建侧边栏组件components/Aside.vue，并引入导航菜单组件

<template>
  <!--引入导航菜单-->
  <div>
    <el-menu
        style="width: 200px"
        default-active="2"
        class="el-menu-vertical-demo">
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <location/>
          </el-icon>
          <span>导航栏一</span>
        </template>
        <el-menu-item-group title="组一">
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-3">
          <template #title>选项3</template>
          <el-menu-item index="1-3-1">选项3-1</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon>
          <icon-menu/>
        </el-icon>
        <span>导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon>
          <document/>
        </el-icon>
        <span>导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon>
          <setting/>
        </el-icon>
        <span>导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside"
}
</script>

<style scoped></style>

（6）修改HomeView.vue

引入表格（后面用来显示数据），从官网设置一些测试数据，并支持日期排序
增加相关的操作按钮和搜索框

<template>
  <div>
    <!--增加按钮和搜索框-->
    <div style="margin:10px 5px">
      <el-button type="primary">新增</el-button>
      <el-button>其他</el-button>
    </div>
    <div style="margin:10px 5px">
      <el-input v-model="search" style="width: 30%" placeholder="请输入关键字"/>
      <el-button style="margin-left: 10px" type="primary">查找</el-button>
    </div>

    <!--表格-->
    <el-table :data="tableData" stripe style="width: 90%">
      <!--sortable可以进行排序，有升序，降序，默认排序三种状态-->
      <el-table-column sortable prop="date" label="日期"/>
      <el-table-column prop="name" label="名字"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column fixed="right" label="操作" width="100">
        <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>
    </el-table>
  </div>
</template>

<script>
//导出组件
export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      search: '',
      tableData: [
        {
          date: '2016-02-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路1518弄',
        },
        {
          date: '2016-05-04',
          name: '李晓明',
          address: '上海市普陀区金沙江路1517弄',
        },
        {
          date: '2016-01-01',
          name: '张三',
          address: '上海市普陀区金沙江路1519弄',
        },
        {
          date: '2016-03-16',
          name: '李四',
          address: '上海市普陀区金沙江路1520弄',
        }
      ]
    }
  }
}
</script>

（5）在App.vue将页面分成三个部分：头部，侧边栏和内容区域，分别对应组件Header.vue，Aside.vue，HomeView.vue

<template>
  <div>
    <!--引入Header（头部）-->
    <Header/>
    <!--主体-->
    <div style="display: flex">
      <!--侧边栏-->
      <Aside/>
      <!--内容区域,这个部分通过路由展示，默认路由到HomeView.vue(因为它的路径为 /)-->
      <router-view style="flex: 1"/>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Aside from "@/components/Aside.vue"

export default {
  name: "Layout",
  components: {
    Header,
    Aside
  }
}
</script>
<style>
</style>

总页面效果：

2.3项目前后端分离情况

day 02 gt lt image Java

有关day02-功能实现01的更多相关文章

ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2
只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？最佳答案有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您
华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2
华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2
//1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json
MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
【Java入门】使用Java实现文件夹的遍历 - 2
遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
牛客网专项练习30天Pytnon篇第02天 - 2
1.在Python3中，下列关于数学运算结果正确的是:（B）a=10b=3print(a//b)print(a%b)print(a/b)A.3，3，3.3333...B.3，1，3.3333...C.3.3333...，3.3333...，3D.3.3333...，1，3.3333...解析：在Python中，//表示地板除（向下取整），%表示取余，/表示除（Python2向下取整返回3）2.如下程序Python2会打印多少个数:（D）k=1000whilek>1: print(k)k=k/2A.1000 B.10C.11D.9解析：按照题意每次循环K/2，直到K值小于等
ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2
通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况最佳答案数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复
ruby - "public/protected/private"方法是如何实现的，我该如何模拟它？ - 2
在ruby中，你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的，f2和f4是私有(private)的。内部发生了什么，允许您调用一个类方法，然后更改方法定义？我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定