# vue_manager

**Repository Path**: nieps/vue_manager

## Basic Information

- **Project Name**: vue_manager
- **Description**: vue element plus  后台管理 
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-04-25
- **Last Updated**: 2023-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue项目

## README

# 项目框架搭建

## 项目创建

执行下面的命令

~~~shell
#初始化项目
npm init vue  # 默认使用vue最新版本  如同  npm init vue@latest 
#进入创建的项目 cd 项目名
#安装所有依赖
npm i  
#运行
npm run dev 
#编译
npm run  build
~~~

## 路由

### 安装

~~~shell
#vue3搭配路由4
npm i vue-router@4  
~~~

### 路由对象创建

~~~javascript
import {createRouter,createWebHashHistory} from 'vue-router'

//创建路由对象 
const router=createRouter({
	history:createWebHashHistory(),//路由记录历史模式  暂时使用hash模式
	routes  //"routes":routes   路由数组列表
});

~~~

#### 路由列表记录routes配置选项

~~~json
 {
    path: string,// 路由匹配的路径
    redirect: record.redirect,
    name: "名称",//命名路由的名称
    meta: record.meta || {},//元数据 
    alias: undefined,//别名
    beforeEnter: record.beforeEnter,//路由守卫 进入路由前执行
    props: normalizeRecordProps(record),
    children: record.children || [],//嵌套路由
    instances: {},
    leaveGuards: new Set(),
    updateGuards: new Set(),
    enterCallbacks: {},
    components:
      'components' in record
        ? record.components || null
        : record.component && { default: record.component },
  }
~~~



* path  路由路径  如  /login
* component  组件  指定path路径要访问哪个组件  

> 配置示例:
>
> ~~~javascript
> import {defineAsyncComponent} from 'vue'
> //引入组件 
> const Login=defineAsyncComponent(()=>import("../views/common/Login.vue"));
> //配置路由列表 
> const routes=[
> 	{
> 		path:"/",//访问路径
> 		component: Login
> 	}
> ];
> ~~~
> 

* children: []      Array  嵌套路由



  路由出口:  <router-view>

  路由连接:  <router-link>



### 嵌套路由

是指在指定的组件内显示其他组件，要求在指定组件内声明路由出口，如

~~~html
<!--main.vue-->
<!--工作区-->
<div class="right">
   <!--配置路由出口-->
    <router-view></router-view>
</div>
~~~

路由配置：通过children来配置，如

~~~javascript
{
		path:"/main",
		component:Main,
		children:[ //嵌套路由 所有在这里配置的组件都会显示在main组件的路由出口中
			{
				path:"/user",
				component:UserList
			}
		] 
	}
~~~





### vue插件

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码，在Vue实例上增加属性或方法如$data

安装路由插件：

~~~javascript
app.user(router);
//安装好插件  会在Vue实例上增加实例属性  $router   $route
//$router  用来导航用的 
//$route  请求的参数、访问的路径等信息
~~~



### 路由跳转

push方法实现 

* 以字符串形式  直接传递path路径  

* 以对象方式传递   path

  ~~~javascript
  $router.push({path:"路径"})
  ~~~

* 命名路由

  ~~~javascript
  $router.push({name:"路由名称"})
  ~~~

  



### 路由传参

#### 路径参数

##### 正常模式

语法:    :参数名  

~~~json
{
    "path":"/user/:id"
}
~~~

参数获取方式 :   $route.param.id

##### 属性接收

~~~json
{
		path:"/goods",
		name:"goods",
       //当 props 设置为 true 时，route.params 将被设置为组件的 props
		props:boolean || object,  
		component:GoodsDetail
	}
~~~

~~~javascript
const props=defineProps(["id"])
console.log("id>>",props.id)
~~~



#### 编程导航传参

* 使用query传参  会将参数显示在地址栏 
* 使用state传参，通过history.state.参数名  获取  

[变更日志](https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md)

> 从4.1.4版本开始，放弃params传参(这种传参方式，在页面刷新时会丢失)
>
> ![image-20230426112328061](assets/image-20230426112328061.png)

### 导航守卫

是指在路由跳转的过程中要执行的回调函数。

全局前置守卫router.beforeEach

~~~javascript
const router = createRouter({ ... })
/**
  to 代表着你将要跳转的页面信息对象
  from 指从哪个页面跳到to的信息对象
  返回true表示进入一下守卫或页面，返回false表示取消导航
*/
router.beforeEach((to, from) => {
  return false
})

~~~

~~~javascript
const router = createRouter({ ... })
/**
  to 代表着你将要跳转的页面信息对象
  from 指从哪个页面跳到to的信息对象
  next()表示进入一下守卫或页面
  next(path) 是直接跳转到指定路径
*/
router.beforeEach((to, from,next) => {
    next();
})
~~~



## Element Plus

### 安装

~~~shell
cnpm i element-plus --save
~~~

安装插件

~~~javascript
//引入element plus 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//安装插件
app.use(ElementPlus)
~~~



### 图标

安装 

~~~shell
cnpm install @element-plus/icons-vue
~~~



## axios

安装

~~~shell
npm i axios --save
~~~



Restful  

## 作业

* 用户管理  增加  密码重置功能   如重置为666666
* 保存用户时  用户名唯一检查，如果存在，不允许添加  
* 修改用户时，用户名只读不可改 

## 五一假期作业

* 设计商品表  实现商品管理功能（增删改查）要求：参照电商网站 设计商品字段 
* 设计商品分类别表 实现类别管理（允许多级分类 一级类别 二级类别.....）



## 知识点

* ref  将基本类型封装成响应式对象  该对象只有一个属性 value ，该属性的值对应你封装的响应式的值 ，在模板中可以自动解包 （无需通过.value来访问响应式对象），在script中仍然需要通过  响应式对象.value来访问或重新赋值

  也可以将对象类型封装，只不通引用时 通过.value来引用 

* reactive  将引用类型(对象  数组)封装成响应式对象  

### 路由模式

* hash  包含 URL 标识中的 `'#'` 和 后面 URL 片段标识符。(location.hash 只改变#后面的)  不利于seo 
* h5模式 明显的特点是没有#，每次地址的改变是location.href (完整的地址)

增加两个属性:

* $router  代表路由实例
* $route  代表 路由配置  参数等信息 



## 文件上传

依赖:

~~~xml
     <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.4</version>
            </dependency>

~~~



~~~json
{
  "id": "",
  "goodsname": "华为p8",
  "price": 2999,
  "note": "很好",
  "brand": "华为",
  "unit": "台",
  "detail": "sssazskdss ",
  "status": 1,
  "isHome": 1,
  "categoryPath": "1/2/3",
  "attachments": [
    {
  
    },{
      "picurl": "/att/b.jpg",
      "miniurl": "/att/b.mini.jpg"
    }
  ],
  "goodsSpecs": [
    {
      "specname": "华为p8  幻夜黑 8+128",
       "cost": 2000,
        "price": 2999,
        "num": 100,
        "weight": 150,
         "no": "001"
    },{
      "specname": "华为p8  晨曦金 8+128",
      "cost": 2000,
      "price": 2899,
      "num": 10,
      "weight": 150,
      "no": "002"
    }
  ]
}
~~~



作业： 写一个接口，根据id返回商品详情

商品信息  附件信息  规格 信息 



## 富文本编辑框





组合：

颜色:  红色   蓝色

内存： 8+128  8+256  

尺寸:    1  2

组合规律:   规格下的规格值数量相乘