README.md · 咕嘟/shopSystem-front

# shopsystem-front

> 购物商城前端制作

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

# vue前端

## 前端和后端
前端:展示界面和内容，和用户交互（功能逻辑，方法）
后端:逻辑处理，数据处理
数据库:保存数据，提供数据给后端

ps:前端包括vue，但不等于vue

## vue构建
### vue搭建必要安装依赖
vue-router :页面跳转和传参

一个UI框架组件：根据你需要制作电脑端还是手机端项目去搜索vue ui框架。
一般都能够搜索到比较常用的vue ui框架。这些ui框架都会有文档，文档内部有如何安装
的npm install 命令。
本次的ui框架为elementUi

axios: 目前常用的与后端数据交互的组件，因为我们是vue+springboot项目，为前后端
分离的项目，需要用它来连接前后端

ui框架：搭建界面的框架，可以组件化很容易搭建界面

### 前端和后端交互
package.json：记录项目信息，记录安装依赖（索引作用）
gitignore: 忽视需要提交的文件给git
方法：功能逻辑
axios：和后端交互，调用内部写好的逻辑和后端交互
安装：npm install axios
安装的所有依赖需要引入到main.js入口文件
具体引入代码，查看搜索对应组件文档
axios：封装为js文件，以便调用request.js
请求：请求后端数据
响应:接收后端给我们的数据

安装axios--》编写request.js文件调用axios -- > 编写请求后端的接口[方法] --> 在需要的页面调用对应的接口方法
--> 请求后端数据 -- > 后端接收到请求 -- 》返回数据给前端(响应)

调用接口中只有属性名才需要对应接口的属性名，值可以是任意名称的属性名的值

### 页面跳转
安装router--》新建router文件，在该文件夹下创建index.js配置文件--》引入该index.js配置文件到main.js--》根据项目需求创建vue文件，引入vue文件到index.js配置文件，设定该vue文件的跳转路径 --》在需要的界面定义跳转【方法】，根据设定的路径跳转界面
### ui框架
安装ui框架--》引入ui到main.js--》根据ui框架文档在vue文件中使用ui框架组件【例子:<el-button></el-button>】

# vue文件组成

<template></template>

<script></script>

<style></style>

每一个界面必须有且只有一个根节点

### 生命周期

### 函数
除了掌握基础指令外，还需要最起码掌握以下函数：
data() {
	return {
		// 在return这里定义自定义的属性
	}
},
// 在methods定义方法
methods: {
 方法A() {
	
	}
},
// 在created内调用方法，实现一加载页面就获取数据，用于增删改查中的查，来
查询数据
created() {
}

### vue常用指令：
内容渲染指令 ————》
{{ 属性值 }}   别名：插值表达式
属性值为自定义的属性
该指令将数据渲染到页面
例子：
name: "张三" // 自定义属性
<div>{{ name }}</div>

------------------------------------------------------
属性渲染指令
v-bind:元素="属性值"  简写方式==>    :元素="属性"
------------------------------------------------------
事件渲染指令
v-on:事件名  只需要知道v-on:click="方法名" 点击事件  简写:@click="方法名"
------------------------------------------------------
双向绑定指令
v-model="属性值"
例如：给input绑定一个v-model的属性值，修改input的值，该绑定的属性值内容会跟
着改变
------------------------------------------------------
条件渲染指令
v-if
v-else-if
v-else
该指令分条件渲染页面，只有满足条件的标签才会被渲染到页面
完整写法例子：
name: "张三" // 自定义属性
// 页面写法
<div v-if="name=='张三'">
我的名字是张三</div> // 当满足条件时该文本会显示在页面

<div v-else>我的名字不是张三</div> // 不满足条件显示本文本内容

------------------------------------------------------

列表渲染指令
v-for=(item ,index) in list
该指令为渲染集合数组的指令，通过该指令可以把多条数据分批次渲染到界面
item为数组集合元素的内容，index为下标
例：
list: [
		{
	name: "xxx",
	age: xx,
	},
	{
	name: "zzz",
	age: zz,
	},
]
当下标为0时，item值为list下的
{
	name: "xxx",
	age:xx,
}
需要获取name属性值，则在页面中写成{{ item.name }}
完整写法例子：
<div v-for(item,index) in list>
<span>{{ item.name }}</span>
</div>

咕嘟/shopSystem-front

简介

发行版

贡献者

近期动态

咕嘟/shopSystem-front .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

咕嘟/shopSystem-front